@claude-collective/cli 0.2.0 → 0.8.0

package/dist/components/wizard/category-grid.test.js

@@ -0,0 +1,728 @@
+#!/usr/bin/env node
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  INPUT_DELAY_MS,
+  RENDER_DELAY_MS,
+  TAB,
+  delay
+} from "../../chunk-6LS7XO3H.js";
+import {
+  render
+} from "../../chunk-66UDJBF6.js";
+import {
+  afterEach,
+  describe,
+  globalExpect,
+  it,
+  vi
+} from "../../chunk-XY3XDVMI.js";
+import {
+  CategoryGrid
+} from "../../chunk-PPNTD5LO.js";
+import {
+  init_esm_shims
+} from "../../chunk-DHET7RCE.js";
+
+// src/cli-v2/components/wizard/category-grid.test.tsx
+init_esm_shims();
+import { jsx } from "react/jsx-runtime";
+var createOption = (id, label, overrides = {}) => ({
+  id,
+  label,
+  state: "normal",
+  selected: false,
+  ...overrides
+});
+var createCategory = (id, name, options, overrides = {}) => ({
+  id,
+  name,
+  required: false,
+  exclusive: true,
+  options,
+  ...overrides
+});
+var defaultCategories = [
+  createCategory(
+    "framework",
+    "Framework",
+    [
+      createOption("react", "react", {
+        state: "recommended",
+        stateReason: "Popular choice"
+      }),
+      createOption("vue", "vue"),
+      createOption("angular", "angular"),
+      createOption("svelte", "svelte")
+    ],
+    { required: true }
+  ),
+  createCategory(
+    "styling",
+    "Styling",
+    [
+      createOption("scss-mod", "scss-mod", { selected: true }),
+      createOption("tailwind", "tailwind", { state: "recommended" }),
+      createOption("styled", "styled"),
+      createOption("vanilla", "vanilla")
+    ],
+    { required: true }
+  ),
+  createCategory("client-state", "Client State", [
+    createOption("zustand", "zustand", { state: "recommended" }),
+    createOption("jotai", "jotai"),
+    createOption("redux", "redux", {
+      state: "discouraged",
+      stateReason: "Complex for most apps"
+    }),
+    createOption("mobx", "mobx")
+  ]),
+  createCategory("server-state", "Server State", [
+    createOption("react-query", "react-query", { selected: true }),
+    createOption("swr", "swr"),
+    createOption("apollo", "apollo")
+  ]),
+  createCategory("analytics", "Analytics", [
+    createOption("posthog", "posthog")
+  ])
+];
+var defaultProps = {
+  categories: defaultCategories,
+  focusedRow: 0,
+  focusedCol: 0,
+  showDescriptions: false,
+  expertMode: false,
+  onToggle: vi.fn(),
+  onFocusChange: vi.fn(),
+  onToggleDescriptions: vi.fn(),
+  onToggleExpertMode: vi.fn()
+};
+var renderGrid = (props = {}) => {
+  return render(/* @__PURE__ */ jsx(CategoryGrid, { ...defaultProps, ...props }));
+};
+describe("CategoryGrid component", () => {
+  let cleanup;
+  afterEach(() => {
+    cleanup?.();
+    cleanup = void 0;
+    vi.clearAllMocks();
+  });
+  describe("rendering", () => {
+    it("should render all categories", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+      globalExpect(output).toContain("Server State");
+      globalExpect(output).toContain("Analytics");
+    });
+    it("should render all options in each category", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("react");
+      globalExpect(output).toContain("vue");
+      globalExpect(output).toContain("angular");
+      globalExpect(output).toContain("svelte");
+      globalExpect(output).toContain("scss-mod");
+      globalExpect(output).toContain("tailwind");
+    });
+    it("should show required indicator (*) for required categories", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("*");
+    });
+    it("should show (optional) for non-required categories", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("(optional)");
+    });
+    it("should render legend row", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Legend:");
+      globalExpect(output).toContain("selected");
+      globalExpect(output).toContain("recommended");
+      globalExpect(output).toContain("discouraged");
+      globalExpect(output).toContain("disabled");
+    });
+    it("should render header with toggle hints", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("[Tab] Show descriptions");
+      globalExpect(output).toContain("[e] Expert Mode");
+    });
+    it("should handle empty categories array", () => {
+      const { lastFrame, unmount } = renderGrid({ categories: [] });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("No categories to display");
+    });
+  });
+  describe("visual states", () => {
+    it("should show selected symbol for selected options", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u25CF");
+    });
+    it("should show unselected symbol for unselected options", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u25CB");
+    });
+    it("should show recommended indicator for recommended options", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u2B50");
+    });
+    it("should show discouraged indicator for discouraged options", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u26A0");
+    });
+    it("should show disabled symbol for disabled options", () => {
+      const categories = [
+        createCategory("test", "Test", [
+          createOption("opt1", "Option 1"),
+          createOption("opt2", "Option 2", { state: "disabled" })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u2717");
+    });
+  });
+  describe("focus indicator", () => {
+    it("should show focus indicator (>) on focused option", () => {
+      const { lastFrame, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(">");
+    });
+    it("should update focus indicator when focusedRow changes", () => {
+      const { lastFrame: frame1, unmount: unmount1 } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0
+      });
+      const output1 = frame1();
+      unmount1();
+      const { lastFrame: frame2, unmount: unmount2 } = renderGrid({
+        focusedRow: 1,
+        focusedCol: 0
+      });
+      cleanup = unmount2;
+      const output2 = frame2();
+      globalExpect(output1).toContain(">");
+      globalExpect(output2).toContain(">");
+    });
+    it("should highlight focused category name", () => {
+      const { lastFrame, unmount } = renderGrid({
+        focusedRow: 1,
+        focusedCol: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Styling");
+    });
+  });
+  describe("keyboard navigation - arrow keys", () => {
+    it("should call onFocusChange when pressing left arrow", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 1,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should call onFocusChange when pressing right arrow", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should call onFocusChange when pressing up arrow", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 1,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_UP);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should call onFocusChange when pressing down arrow", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+    it("should wrap horizontally when pressing left at first column", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 3);
+    });
+    it("should wrap horizontally when pressing right at last column", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 3,
+        // Last option in framework
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should wrap vertically when pressing up at first row", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_UP);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(4, 0);
+    });
+    it("should wrap vertically when pressing down at last row", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 4,
+        // Last category (analytics)
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+  });
+  describe("keyboard navigation - vim keys", () => {
+    it("should move left with h key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 1,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("h");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should move right with l key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("l");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should move up with k key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 1,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("k");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should move down with j key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("j");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+  });
+  describe("selection toggle", () => {
+    it("should call onToggle when pressing space on a normal option", async () => {
+      const onToggle = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 1,
+        // vue (normal state)
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).toHaveBeenCalledWith("framework", "vue");
+    });
+    it("should call onToggle when pressing space on a selected option", async () => {
+      const onToggle = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 1,
+        focusedCol: 0,
+        // scss-mod (selected) - first in expert mode
+        expertMode: true,
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).toHaveBeenCalledWith("styling", "scss-mod");
+    });
+    it("should NOT call onToggle when pressing space on a disabled option", async () => {
+      const onToggle = vi.fn();
+      const categories = [
+        createCategory("test", "Test", [
+          createOption("opt1", "Option 1", { state: "disabled" }),
+          createOption("opt2", "Option 2")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        focusedRow: 0,
+        focusedCol: 0,
+        // Disabled option (first in expert mode)
+        expertMode: true,
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).not.toHaveBeenCalled();
+    });
+  });
+  describe("disabled options navigation", () => {
+    it("should skip disabled options when navigating right", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("test", "Test", [
+          createOption("opt1", "Option 1"),
+          createOption("opt2", "Option 2", { state: "disabled" }),
+          createOption("opt3", "Option 3")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        focusedRow: 0,
+        focusedCol: 0,
+        expertMode: true,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 2);
+    });
+    it("should skip disabled options when navigating left", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("test", "Test", [
+          createOption("opt1", "Option 1"),
+          createOption("opt2", "Option 2", { state: "disabled" }),
+          createOption("opt3", "Option 3")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        focusedRow: 0,
+        focusedCol: 2,
+        // Start at opt3
+        expertMode: true,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should handle all options disabled in a row", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("test", "Test", [
+          createOption("opt1", "Option 1", { state: "disabled" }),
+          createOption("opt2", "Option 2", { state: "disabled" })
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        focusedRow: 0,
+        focusedCol: 0,
+        expertMode: true,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+  });
+  describe("exclusive categories", () => {
+    it("should render exclusive category correctly", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+    });
+  });
+  describe("show descriptions toggle", () => {
+    it("should call onToggleDescriptions when pressing Tab", async () => {
+      const onToggleDescriptions = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        onToggleDescriptions
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(TAB);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggleDescriptions).toHaveBeenCalled();
+    });
+    it("should show descriptions when showDescriptions is true", () => {
+      const { lastFrame, unmount } = renderGrid({ showDescriptions: true });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Popular choice");
+    });
+    it("should hide descriptions when showDescriptions is false", () => {
+      const { lastFrame, unmount } = renderGrid({ showDescriptions: false });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toBeDefined();
+    });
+    it("should show toggle state in header", () => {
+      const { lastFrame: frame1, unmount: unmount1 } = renderGrid({
+        showDescriptions: false
+      });
+      const output1 = frame1();
+      unmount1();
+      const { lastFrame: frame2, unmount: unmount2 } = renderGrid({
+        showDescriptions: true
+      });
+      cleanup = unmount2;
+      const output2 = frame2();
+      globalExpect(output1).toContain("Show descriptions: OFF");
+      globalExpect(output2).toContain("Show descriptions: ON");
+    });
+  });
+  describe("expert mode toggle", () => {
+    it("should call onToggleExpertMode when pressing e", async () => {
+      const onToggleExpertMode = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        onToggleExpertMode
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("e");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggleExpertMode).toHaveBeenCalled();
+    });
+    it("should call onToggleExpertMode when pressing E (uppercase)", async () => {
+      const onToggleExpertMode = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        onToggleExpertMode
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("E");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggleExpertMode).toHaveBeenCalled();
+    });
+    it("should show toggle state in header", () => {
+      const { lastFrame: frame1, unmount: unmount1 } = renderGrid({
+        expertMode: false
+      });
+      const output1 = frame1();
+      unmount1();
+      const { lastFrame: frame2, unmount: unmount2 } = renderGrid({
+        expertMode: true
+      });
+      cleanup = unmount2;
+      const output2 = frame2();
+      globalExpect(output1).toContain("Expert Mode: OFF");
+      globalExpect(output2).toContain("Expert Mode: ON");
+    });
+  });
+  describe("option ordering", () => {
+    it("should sort options by state when expertMode is false", () => {
+      const { lastFrame, unmount } = renderGrid({ expertMode: false });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toBeDefined();
+    });
+    it("should preserve original order when expertMode is true", () => {
+      const { lastFrame, unmount } = renderGrid({ expertMode: true });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toBeDefined();
+    });
+  });
+  describe("edge cases", () => {
+    it("should handle single category", () => {
+      const categories = [
+        createCategory("single", "Single Category", [
+          createOption("opt1", "Option 1")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Single Category");
+      globalExpect(output).toContain("Option 1");
+    });
+    it("should handle single option in category", () => {
+      const categories = [
+        createCategory("single", "Single", [
+          createOption("only", "Only Option")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Only Option");
+    });
+    it("should handle category with many options", () => {
+      const options = Array.from(
+        { length: 10 },
+        (_, i) => createOption(`opt${i}`, `Option ${i}`)
+      );
+      const categories = [
+        createCategory("many", "Many Options", options)
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Many Options");
+      globalExpect(output).toContain("Option 0");
+      globalExpect(output).toContain("Option 9");
+    });
+    it("should handle long option labels", () => {
+      const categories = [
+        createCategory("long", "Long Labels", [
+          createOption("long1", "very-long-option-name-here"),
+          createOption("long2", "another-very-long-option")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("very-long-option-name-here");
+    });
+    it("should handle categories with different option counts", () => {
+      const categories = [
+        createCategory("cat1", "Category 1", [
+          createOption("opt1", "Option 1"),
+          createOption("opt2", "Option 2")
+        ]),
+        createCategory("cat2", "Category 2", [
+          createOption("opt3", "Option 3")
+        ]),
+        createCategory("cat3", "Category 3", [
+          createOption("opt4", "Option 4"),
+          createOption("opt5", "Option 5"),
+          createOption("opt6", "Option 6")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Category 1");
+      globalExpect(output).toContain("Category 2");
+      globalExpect(output).toContain("Category 3");
+    });
+  });
+  describe("column adjustment", () => {
+    it("should adjust focusedCol when changing to row with fewer options", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("cat1", "Category 1", [
+          createOption("opt1", "Option 1"),
+          createOption("opt2", "Option 2"),
+          createOption("opt3", "Option 3")
+        ]),
+        createCategory("cat2", "Category 2", [
+          createOption("opt4", "Option 4")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        focusedRow: 0,
+        focusedCol: 2,
+        // Last option in first row
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+  });
+});
+//# sourceMappingURL=category-grid.test.js.map