@dealdeploy/skl 0.3.0 → 1.0.0

package/tui.test.ts

@@ -0,0 +1,565 @@
+import { test, expect, beforeEach, afterEach } from "bun:test";
+import { createTestRenderer } from "@opentui/core/testing";
+import { createTui, type ColId } from "./tui.ts";
+
+const WIDTH = 80;
+const HEIGHT = 20;
+
+type ToggleCall = { col: ColId; name: string; enable: boolean };
+type DeleteCall = { name: string };
+
+function setup(opts?: {
+  skills?: string[];
+  globalInstalled?: string[];
+  localInstalled?: string[];
+}) {
+  const skills = opts?.skills ?? ["alpha", "beta", "gamma"];
+  const globalInstalled = new Set(opts?.globalInstalled ?? []);
+  const localInstalled = new Set(opts?.localInstalled ?? []);
+
+  const toggleCalls: ToggleCall[] = [];
+  const deleteCalls: DeleteCall[] = [];
+  const editCalls: string[] = [];
+  let quitCalled = false;
+
+  // Toggle resolvers for async control
+  let pendingToggleResolve: ((ok: boolean) => void) | null = null;
+
+  return {
+    skills,
+    globalInstalled,
+    localInstalled,
+    toggleCalls,
+    deleteCalls,
+    editCalls,
+    get quitCalled() { return quitCalled; },
+    resolveToggle(ok: boolean) {
+      pendingToggleResolve?.(ok);
+      pendingToggleResolve = null;
+    },
+    makeDeps() {
+      return {
+        allSkills: skills,
+        globalInstalled,
+        localInstalled,
+        catalogPath: "/tmp/test-catalog",
+        async onToggle(col: ColId, name: string, enable: boolean) {
+          toggleCalls.push({ col, name, enable });
+          return new Promise<boolean>((resolve) => {
+            pendingToggleResolve = resolve;
+          });
+        },
+        async onDelete(name: string) {
+          deleteCalls.push({ name });
+        },
+        async onEdit(name: string) {
+          editCalls.push(name);
+        },
+        onQuit() {
+          quitCalled = true;
+        },
+      };
+    },
+    // Immediate toggle (resolves instantly)
+    makeDepsImmediate(toggleResult = true) {
+      return {
+        allSkills: skills,
+        globalInstalled,
+        localInstalled,
+        catalogPath: "/tmp/test-catalog",
+        async onToggle(col: ColId, name: string, enable: boolean) {
+          toggleCalls.push({ col, name, enable });
+          return toggleResult;
+        },
+        async onDelete(name: string) {
+          deleteCalls.push({ name });
+        },
+        async onEdit(name: string) {
+          editCalls.push(name);
+        },
+        onQuit() {
+          quitCalled = true;
+        },
+      };
+    },
+  };
+}
+
+test("renders skill names and column headers", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createTui(renderer, ctx.makeDepsImmediate());
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("Skill");
+  expect(frame).toContain("Global");
+  expect(frame).toContain("Local");
+  expect(frame).toContain("alpha");
+  expect(frame).toContain("beta");
+  expect(frame).toContain("gamma");
+
+  renderer.destroy();
+});
+
+test("renders checkboxes for installed skills", async () => {
+  const ctx = setup({ globalInstalled: ["alpha"], localInstalled: ["beta"] });
+  const { renderer, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createTui(renderer, ctx.makeDepsImmediate());
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  // alpha should have [x] in global column and [ ] in local
+  // beta should have [ ] in global and [x] in local
+  // gamma should have [ ] in both
+  const lines = frame.split("\n");
+  const alphaLine = lines.find((l) => l.includes("alpha"));
+  const betaLine = lines.find((l) => l.includes("beta"));
+  const gammaLine = lines.find((l) => l.includes("gamma"));
+
+  expect(alphaLine).toBeDefined();
+  expect(betaLine).toBeDefined();
+  expect(gammaLine).toBeDefined();
+
+  // Count [x] occurrences per line
+  const countChecked = (line: string) => (line.match(/\[x\]/g) ?? []).length;
+  const countUnchecked = (line: string) => (line.match(/\[ \]/g) ?? []).length;
+
+  expect(countChecked(alphaLine!)).toBe(1); // global checked
+  expect(countUnchecked(alphaLine!)).toBe(1); // local unchecked
+  expect(countChecked(betaLine!)).toBe(1); // local checked
+  expect(countUnchecked(betaLine!)).toBe(1); // global unchecked
+  expect(countUnchecked(gammaLine!)).toBe(2); // both unchecked
+
+  renderer.destroy();
+});
+
+test("starts in search focus area", async () => {
+  const ctx = setup();
+  const { renderer, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+  await renderOnce();
+
+  expect(tui.state.focusArea).toBe("search");
+
+  const frame = captureCharFrame();
+  // Search bar should show cursor indicator
+  expect(frame).toContain("\u25b8");
+
+  renderer.destroy();
+});
+
+test("arrow down moves to grid", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+  await renderOnce();
+
+  expect(tui.state.focusArea).toBe("search");
+
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  expect(tui.state.focusArea).toBe("grid");
+  expect(tui.state.cursor).toBe(0);
+
+  renderer.destroy();
+});
+
+test("arrow down navigates through skills in grid", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(0);
+  expect(tui.state.currentSkillIndex()).toBe(0);
+
+  // Move down
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(1);
+
+  // Move down again
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(2);
+
+  // Can't move past last skill
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.cursor).toBe(2);
+
+  renderer.destroy();
+});
+
+test("left/right switches columns", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.cursorCol).toBe("global");
+
+  mockInput.pressArrow("right");
+  await renderOnce();
+  expect(tui.state.cursorCol).toBe("local");
+
+  // Wraps around
+  mockInput.pressArrow("right");
+  await renderOnce();
+  expect(tui.state.cursorCol).toBe("global");
+
+  mockInput.pressArrow("left");
+  await renderOnce();
+  expect(tui.state.cursorCol).toBe("local");
+
+  renderer.destroy();
+});
+
+test("search filters skills", async () => {
+  const ctx = setup({ skills: ["alpha", "beta", "gamma", "alphabet"] });
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+  await renderOnce();
+
+  // Type "alph" in search
+  mockInput.typeText("alph");
+  await renderOnce();
+
+  expect(tui.state.searchQuery).toBe("alph");
+  expect(tui.state.filteredIndices.length).toBe(2); // alpha and alphabet
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("alpha");
+  expect(frame).toContain("alphabet");
+  expect(frame).not.toContain("beta");
+  expect(frame).not.toContain("gamma");
+
+  renderer.destroy();
+});
+
+test("escape clears search", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  await mockInput.typeText("test");
+  await renderOnce();
+  expect(tui.state.searchQuery).toBe("test");
+
+  mockInput.pressEscape();
+  // ESC byte needs time to disambiguate from CSI sequence start
+  await new Promise((r) => setTimeout(r, 100));
+  await renderOnce();
+  expect(tui.state.searchQuery).toBe("");
+  expect(tui.state.filteredIndices.length).toBe(3); // all skills visible
+
+  renderer.destroy();
+});
+
+test("enter in grid triggers toggle", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid, cursor on alpha, global column
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  mockInput.pressEnter();
+  await renderOnce();
+
+  // Should have called onToggle with global, alpha, enable=true
+  expect(ctx.toggleCalls.length).toBe(1);
+  expect(ctx.toggleCalls[0]).toEqual({ col: "global", name: "alpha", enable: true });
+
+  renderer.destroy();
+});
+
+test("toggle on local column", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  // Move to local column
+  mockInput.pressArrow("right");
+  await renderOnce();
+
+  // Move to beta
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  mockInput.pressEnter();
+  await renderOnce();
+
+  expect(ctx.toggleCalls.length).toBe(1);
+  expect(ctx.toggleCalls[0]).toEqual({ col: "local", name: "beta", enable: true });
+
+  renderer.destroy();
+});
+
+test("toggle off an installed skill", async () => {
+  const ctx = setup({ globalInstalled: ["alpha"] });
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid on alpha (which is globally installed)
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  mockInput.pressEnter();
+  await renderOnce();
+
+  expect(ctx.toggleCalls[0]).toEqual({ col: "global", name: "alpha", enable: false });
+
+  renderer.destroy();
+});
+
+test("d key prompts for delete, y confirms", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  // Press d
+  mockInput.pressKey("d");
+  await renderOnce();
+
+  expect(tui.state.pendingDelete).toBe(0);
+
+  // Confirm with y
+  mockInput.pressKey("y");
+  await renderOnce();
+
+  expect(ctx.deleteCalls.length).toBe(1);
+  expect(ctx.deleteCalls[0]).toEqual({ name: "alpha" });
+  expect(tui.state.pendingDelete).toBeNull();
+
+  renderer.destroy();
+});
+
+test("d key prompts for delete, other key cancels", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  mockInput.pressKey("d");
+  await renderOnce();
+  expect(tui.state.pendingDelete).toBe(0);
+
+  // Cancel with n
+  mockInput.pressKey("n");
+  await renderOnce();
+
+  expect(ctx.deleteCalls.length).toBe(0);
+  expect(tui.state.pendingDelete).toBeNull();
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("cancelled");
+
+  renderer.destroy();
+});
+
+test("q in grid calls onQuit", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  mockInput.pressKey("q");
+  await renderOnce();
+
+  expect(ctx.quitCalled).toBe(true);
+
+  renderer.destroy();
+});
+
+test("/ key enters search from grid", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.focusArea).toBe("grid");
+
+  // Press /
+  mockInput.pressKey("/");
+  await renderOnce();
+  expect(tui.state.focusArea).toBe("search");
+
+  renderer.destroy();
+});
+
+test("up arrow at top of grid returns to search", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.focusArea).toBe("grid");
+  expect(tui.state.cursor).toBe(0);
+
+  // Up at top → search
+  mockInput.pressArrow("up");
+  await renderOnce();
+  expect(tui.state.focusArea).toBe("search");
+
+  renderer.destroy();
+});
+
+test("pending toggle shows [~] indicator", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDeps()); // uses async toggle
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  // Toggle alpha — will pend since we haven't resolved
+  mockInput.pressEnter();
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("[~]");
+  expect(tui.state.pendingToggles.size).toBe(1);
+
+  // Resolve the toggle
+  ctx.resolveToggle(true);
+  // Let the promise settle
+  await new Promise((r) => setTimeout(r, 10));
+  await renderOnce();
+
+  const frame2 = captureCharFrame();
+  expect(frame2).not.toContain("[~]");
+  expect(tui.state.pendingToggles.size).toBe(0);
+
+  renderer.destroy();
+});
+
+test("renders search... placeholder when search empty and not focused", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid (search loses focus)
+  mockInput.pressArrow("down");
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("search...");
+
+  renderer.destroy();
+});
+
+test("backspace removes search characters", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  mockInput.typeText("abc");
+  await renderOnce();
+  expect(tui.state.searchQuery).toBe("abc");
+
+  mockInput.pressBackspace();
+  await renderOnce();
+  expect(tui.state.searchQuery).toBe("ab");
+
+  renderer.destroy();
+});
+
+test("tab switches columns like right arrow", async () => {
+  const ctx = setup();
+  const { renderer, mockInput, renderOnce } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  const tui = createTui(renderer, ctx.makeDepsImmediate());
+
+  // Enter grid
+  mockInput.pressArrow("down");
+  await renderOnce();
+  expect(tui.state.cursorCol).toBe("global");
+
+  mockInput.pressTab();
+  await renderOnce();
+  expect(tui.state.cursorCol).toBe("local");
+
+  renderer.destroy();
+});
+
+test("empty catalog renders without crashing", async () => {
+  const ctx = setup({ skills: [] });
+  const { renderer, renderOnce, captureCharFrame } =
+    await createTestRenderer({ width: WIDTH, height: HEIGHT });
+
+  createTui(renderer, ctx.makeDepsImmediate());
+  await renderOnce();
+
+  const frame = captureCharFrame();
+  expect(frame).toContain("Skill");
+  expect(frame).toContain("Global");
+  expect(frame).toContain("Local");
+
+  renderer.destroy();
+});