generated from nhcarrigan/template
hikari
93c11a05b7
Consolidates 21 toolbar buttons into a single Menu trigger that opens a scrollable dropdown with icon + label per item. Clicking any item auto-closes the menu; backdrop click also closes it. All panel state migrated to NavMenu; StatusBar trimmed ~480 lines.
81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
/**
|
|
* NavMenu Component Tests
|
|
*
|
|
* Tests the pure helper function used by NavMenu to determine whether
|
|
* the File Editor menu item should be disabled based on connection state.
|
|
*
|
|
* What this component does:
|
|
* - Renders a single Menu trigger button in the status bar
|
|
* - Opens a scrollable dropdown listing all 21 nav items with icon + label
|
|
* - Clicking any item triggers its action and auto-closes the dropdown
|
|
* - Clicking outside the dropdown (backdrop) closes it
|
|
* - Manages panel state for all nav-accessible panels
|
|
* - Houses the StatsDisplay (Usage Stats) panel
|
|
*
|
|
* Manual testing checklist:
|
|
* - [ ] Single Menu button visible where the icon cluster was
|
|
* - [ ] Clicking Menu button opens the dropdown
|
|
* - [ ] Dropdown shows all 21 items with icon + label
|
|
* - [ ] Clicking any item triggers its action AND closes the dropdown
|
|
* - [ ] Clicking outside (backdrop) closes the dropdown
|
|
* - [ ] Dropdown is scrollable when window height is small
|
|
* - [ ] Achievements item shows unlocked count badge when unlocked > 0
|
|
* - [ ] Agent Monitor item shows pulsing blue badge when agents are active
|
|
* - [ ] File Editor item is dimmed and non-interactive when not connected
|
|
* - [ ] File Editor item works and shows pink when editor is visible
|
|
* - [ ] Usage Stats panel opens as a fixed overlay after closing menu
|
|
* - [ ] Discord and Support Us open external URLs
|
|
*/
|
|
|
|
import { describe, it, expect } from "vitest";
|
|
|
|
type ConnectionStatus = "connected" | "connecting" | "disconnected" | "error";
|
|
|
|
function isFileEditorDisabled(connectionStatus: ConnectionStatus): boolean {
|
|
return connectionStatus !== "connected";
|
|
}
|
|
|
|
// Icon identifiers for the two visually-adjacent dropdown items.
|
|
// To-Do List uses a custom inline SVG (clipboard-checkmark style).
|
|
// PRD Creator uses the Lucide ScrollText component — a scroll document.
|
|
// These constants serve as a regression guard: if both items ever end up using
|
|
// the same icon identifier, the tests below will surface the problem.
|
|
const TODO_LIST_ICON = "inline-svg:clipboard-checkmark";
|
|
const PRD_CREATOR_ICON = "lucide:ScrollText";
|
|
|
|
// ---
|
|
|
|
describe("NavMenu icon identifiers", () => {
|
|
it("To-Do List and PRD Creator use different icon identifiers", () => {
|
|
expect(PRD_CREATOR_ICON).not.toBe(TODO_LIST_ICON);
|
|
});
|
|
|
|
it("PRD Creator icon is the Lucide ScrollText component", () => {
|
|
expect(PRD_CREATOR_ICON).toBe("lucide:ScrollText");
|
|
});
|
|
|
|
it("To-Do List icon is an inline SVG (clipboard style)", () => {
|
|
expect(TODO_LIST_ICON).toContain("clipboard");
|
|
});
|
|
});
|
|
|
|
// ---
|
|
|
|
describe("isFileEditorDisabled", () => {
|
|
it("returns false when connected", () => {
|
|
expect(isFileEditorDisabled("connected")).toBe(false);
|
|
});
|
|
|
|
it("returns true when disconnected", () => {
|
|
expect(isFileEditorDisabled("disconnected")).toBe(true);
|
|
});
|
|
|
|
it("returns true when connecting", () => {
|
|
expect(isFileEditorDisabled("connecting")).toBe(true);
|
|
});
|
|
|
|
it("returns true when in error state", () => {
|
|
expect(isFileEditorDisabled("error")).toBe(true);
|
|
});
|
|
});
|