@claude-collective/cli 0.2.0 → 0.8.0

package/dist/components/wizard/step-build.test.js

@@ -0,0 +1,729 @@
+#!/usr/bin/env node
+import {
+  ENTER,
+  ESCAPE,
+  INPUT_DELAY_MS,
+  RENDER_DELAY_MS,
+  delay
+} from "../../chunk-6LS7XO3H.js";
+import {
+  render
+} from "../../chunk-66UDJBF6.js";
+import {
+  afterEach,
+  describe,
+  globalExpect,
+  it,
+  vi
+} from "../../chunk-XY3XDVMI.js";
+import {
+  StepBuild,
+  getDisplayLabel,
+  validateBuildStep
+} from "../../chunk-Q6DR5QUH.js";
+import "../../chunk-LVKRVFYR.js";
+import "../../chunk-PPNTD5LO.js";
+import {
+  init_esm_shims
+} from "../../chunk-DHET7RCE.js";
+
+// src/cli-v2/components/wizard/step-build.test.tsx
+init_esm_shims();
+import { jsx } from "react/jsx-runtime";
+var createCategory = (id, name, overrides = {}) => ({
+  id,
+  name,
+  description: `${name} category`,
+  exclusive: true,
+  required: false,
+  order: 0,
+  ...overrides
+});
+var createSkill = (id, name, category, overrides = {}) => ({
+  id,
+  name,
+  description: `${name} skill`,
+  category,
+  categoryExclusive: true,
+  tags: [],
+  author: "test",
+  conflictsWith: [],
+  recommends: [],
+  recommendedBy: [],
+  requires: [],
+  requiredBy: [],
+  alternatives: [],
+  discourages: [],
+  requiresSetup: [],
+  providesSetupFor: [],
+  path: `test/${id}`,
+  ...overrides
+});
+var createTestMatrix = (categories, skills) => ({
+  version: "1.0.0",
+  categories: Object.fromEntries(categories.map((c) => [c.id, c])),
+  skills: Object.fromEntries(skills.map((s) => [s.id, s])),
+  suggestedStacks: [],
+  aliases: Object.fromEntries(
+    skills.filter((s) => s.alias).map((s) => [s.alias, s.id])
+  ),
+  aliasesReverse: Object.fromEntries(
+    skills.filter((s) => s.alias).map((s) => [s.id, s.alias])
+  ),
+  generatedAt: (/* @__PURE__ */ new Date()).toISOString()
+});
+var webCategory = createCategory("web", "Web", {
+  description: "Web development",
+  order: 0
+});
+var apiCategory = createCategory("api", "API", {
+  description: "API development",
+  order: 1
+});
+var frameworkCategory = createCategory("framework", "Framework", {
+  parent: "web",
+  domain: "web",
+  required: true,
+  order: 0
+});
+var stylingCategory = createCategory("styling", "Styling", {
+  parent: "web",
+  domain: "web",
+  required: true,
+  order: 1
+});
+var stateCategory = createCategory("client-state", "Client State", {
+  parent: "web",
+  domain: "web",
+  required: false,
+  order: 2
+});
+var apiFrameworkCategory = createCategory("api-framework", "API Framework", {
+  parent: "api",
+  domain: "api",
+  required: true,
+  order: 0
+});
+var databaseCategory = createCategory("database", "Database", {
+  parent: "api",
+  domain: "api",
+  required: false,
+  order: 1
+});
+var reactSkill = createSkill("react (@vince)", "React", "framework", {
+  alias: "react"
+});
+var vueSkill = createSkill("vue (@vince)", "Vue", "framework", {
+  alias: "vue"
+});
+var tailwindSkill = createSkill("tailwind (@vince)", "Tailwind", "styling", {
+  alias: "tailwind"
+});
+var scssSkill = createSkill("scss (@vince)", "SCSS Modules", "styling", {
+  alias: "scss"
+});
+var zustandSkill = createSkill(
+  "zustand (@vince)",
+  "Zustand",
+  "client-state",
+  {
+    alias: "zustand"
+  }
+);
+var honoSkill = createSkill("hono (@vince)", "Hono", "api-framework", {
+  alias: "hono"
+});
+var expressSkill = createSkill(
+  "express (@vince)",
+  "Express",
+  "api-framework",
+  {
+    alias: "express"
+  }
+);
+var postgresSkill = createSkill(
+  "postgres (@vince)",
+  "PostgreSQL",
+  "database",
+  {
+    alias: "postgres"
+  }
+);
+var defaultMatrix = createTestMatrix(
+  [
+    webCategory,
+    apiCategory,
+    frameworkCategory,
+    stylingCategory,
+    stateCategory,
+    apiFrameworkCategory,
+    databaseCategory
+  ],
+  [
+    reactSkill,
+    vueSkill,
+    tailwindSkill,
+    scssSkill,
+    zustandSkill,
+    honoSkill,
+    expressSkill,
+    postgresSkill
+  ]
+);
+var defaultProps = {
+  matrix: defaultMatrix,
+  domain: "web",
+  selectedDomains: ["web"],
+  currentDomainIndex: 0,
+  selections: {},
+  allSelections: [],
+  focusedRow: 0,
+  focusedCol: 0,
+  showDescriptions: false,
+  expertMode: false,
+  onToggle: vi.fn(),
+  onFocusChange: vi.fn(),
+  onToggleDescriptions: vi.fn(),
+  onToggleExpertMode: vi.fn(),
+  onContinue: vi.fn(),
+  onBack: vi.fn()
+};
+var renderStepBuild = (props = {}) => {
+  return render(/* @__PURE__ */ jsx(StepBuild, { ...defaultProps, ...props }));
+};
+describe("StepBuild component", () => {
+  let cleanup;
+  afterEach(() => {
+    cleanup?.();
+    cleanup = void 0;
+    vi.clearAllMocks();
+  });
+  describe("rendering", () => {
+    it("should render CategoryGrid with correct categories for domain", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+      globalExpect(output).not.toContain("API Framework");
+      globalExpect(output).not.toContain("Database");
+    });
+    it("should render API categories when domain is api", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        domain: "api"
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("API Framework");
+      globalExpect(output).toContain("Database");
+      globalExpect(output).not.toContain("Styling");
+      globalExpect(output).not.toContain("Client State");
+    });
+    it("should render skills as options", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Vue");
+      globalExpect(output).toContain("Tailwind");
+      globalExpect(output).toContain("SCSS");
+    });
+    it("should show required indicator (*) for required categories", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("*");
+    });
+    it("should show footer with keyboard hints", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("ESC");
+      globalExpect(output).toContain("ENTER");
+    });
+  });
+  describe("progress indicator", () => {
+    it("should show SectionProgress when multiple domains selected", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        selectedDomains: ["web", "api"],
+        currentDomainIndex: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Domain:");
+      globalExpect(output).toContain("Web");
+      globalExpect(output).toContain("[1/2]");
+      globalExpect(output).toContain("Next: API");
+    });
+    it("should hide SectionProgress when single domain selected", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        selectedDomains: ["web"],
+        currentDomainIndex: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("[1/1]");
+    });
+    it("should show 'Last step' when on final domain", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        selectedDomains: ["web", "api"],
+        domain: "api",
+        currentDomainIndex: 1
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Domain:");
+      globalExpect(output).toContain("API");
+      globalExpect(output).toContain("[2/2]");
+      globalExpect(output).toContain("Last step");
+    });
+    it("should show correct domain display names", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        selectedDomains: ["web", "api", "cli"],
+        currentDomainIndex: 1,
+        domain: "api"
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("API");
+      globalExpect(output).toContain("Next: CLI");
+    });
+  });
+  describe("category filtering", () => {
+    it("should filter categories correctly by domain", () => {
+      const { lastFrame: webFrame, unmount: webUnmount } = renderStepBuild({
+        domain: "web"
+      });
+      const webOutput = webFrame();
+      webUnmount();
+      const { lastFrame: apiFrame, unmount: apiUnmount } = renderStepBuild({
+        domain: "api"
+      });
+      cleanup = apiUnmount;
+      const apiOutput = apiFrame();
+      globalExpect(webOutput).toContain("Framework");
+      globalExpect(webOutput).toContain("Styling");
+      globalExpect(webOutput).toContain("Client State");
+      globalExpect(webOutput).not.toContain("API Framework");
+      globalExpect(apiOutput).toContain("API Framework");
+      globalExpect(apiOutput).toContain("Database");
+      globalExpect(apiOutput).not.toContain("Styling");
+    });
+    it("should sort categories by order", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      const frameworkIndex = output?.indexOf("Framework") ?? -1;
+      const stylingIndex = output?.indexOf("Styling") ?? -1;
+      const stateIndex = output?.indexOf("Client State") ?? -1;
+      globalExpect(frameworkIndex).toBeLessThan(stylingIndex);
+      globalExpect(stylingIndex).toBeLessThan(stateIndex);
+    });
+  });
+  describe("option states", () => {
+    it("should show selected options correctly", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        allSelections: ["react (@vince)"]
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u25CF");
+    });
+    it("should pass expertMode to CategoryGrid", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        expertMode: true
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Expert Mode: ON");
+    });
+    it("should pass showDescriptions to CategoryGrid", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        showDescriptions: true
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Show descriptions: ON");
+    });
+  });
+  describe("keyboard navigation", () => {
+    it("should call onContinue when Enter is pressed with valid selections", async () => {
+      const onContinue = vi.fn();
+      const { stdin, unmount } = renderStepBuild({
+        onContinue,
+        selections: {
+          framework: ["react"],
+          styling: ["tailwind"]
+        }
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ENTER);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onContinue).toHaveBeenCalled();
+    });
+    it("should call onBack when Escape is pressed", async () => {
+      const onBack = vi.fn();
+      const { stdin, unmount } = renderStepBuild({ onBack });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ESCAPE);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onBack).toHaveBeenCalled();
+    });
+    it("should pass focus callbacks to CategoryGrid", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderStepBuild({
+        onFocusChange,
+        focusedRow: 0,
+        focusedCol: 0
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("\x1B[B");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalled();
+    });
+    it("should pass toggle callback to CategoryGrid", async () => {
+      const onToggle = vi.fn();
+      const { stdin, unmount } = renderStepBuild({
+        onToggle,
+        focusedRow: 0,
+        focusedCol: 0
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).toHaveBeenCalled();
+    });
+  });
+  describe("toggle callbacks", () => {
+    it("should pass onToggleDescriptions to CategoryGrid", async () => {
+      const onToggleDescriptions = vi.fn();
+      const { stdin, unmount } = renderStepBuild({ onToggleDescriptions });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("	");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggleDescriptions).toHaveBeenCalled();
+    });
+    it("should pass onToggleExpertMode to CategoryGrid", async () => {
+      const onToggleExpertMode = vi.fn();
+      const { stdin, unmount } = renderStepBuild({ onToggleExpertMode });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("e");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggleExpertMode).toHaveBeenCalled();
+    });
+  });
+  describe("edge cases", () => {
+    it("should handle domain with no categories", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        domain: "mobile"
+        // No mobile categories in test matrix
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("No categories to display");
+    });
+    it("should handle unknown domain gracefully", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        domain: "unknown"
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toBeDefined();
+    });
+    it("should handle empty allSelections", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        allSelections: []
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+    });
+    it("should handle allSelections with skills from other domains", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        domain: "web",
+        allSelections: ["hono (@vince)", "postgres (@vince)"]
+        // API skills
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+    });
+  });
+  describe("multi-domain scenarios", () => {
+    it("should work for first domain in multi-domain flow", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        domain: "web",
+        selectedDomains: ["web", "api"],
+        currentDomainIndex: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Domain:");
+      globalExpect(output).toContain("Web");
+      globalExpect(output).toContain("[1/2]");
+      globalExpect(output).toContain("Next: API");
+    });
+    it("should work for last domain in multi-domain flow", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        domain: "api",
+        selectedDomains: ["web", "api"],
+        currentDomainIndex: 1
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Domain:");
+      globalExpect(output).toContain("API");
+      globalExpect(output).toContain("[2/2]");
+      globalExpect(output).toContain("Last step");
+    });
+    it("should show three-domain progress correctly", () => {
+      const cliFrameworkCategory = createCategory(
+        "cli-framework",
+        "CLI Framework",
+        {
+          parent: "cli",
+          domain: "cli",
+          required: true,
+          order: 0
+        }
+      );
+      const cliCategory = createCategory("cli", "CLI", {
+        description: "CLI development",
+        order: 2
+      });
+      const commanderSkill = createSkill(
+        "commander (@vince)",
+        "Commander",
+        "cli-framework",
+        {
+          alias: "commander"
+        }
+      );
+      const matrixWithCli = createTestMatrix(
+        [
+          webCategory,
+          apiCategory,
+          cliCategory,
+          frameworkCategory,
+          stylingCategory,
+          stateCategory,
+          apiFrameworkCategory,
+          databaseCategory,
+          cliFrameworkCategory
+        ],
+        [
+          reactSkill,
+          vueSkill,
+          tailwindSkill,
+          scssSkill,
+          zustandSkill,
+          honoSkill,
+          expressSkill,
+          postgresSkill,
+          commanderSkill
+        ]
+      );
+      const { lastFrame, unmount } = renderStepBuild({
+        matrix: matrixWithCli,
+        domain: "api",
+        selectedDomains: ["web", "api", "cli"],
+        currentDomainIndex: 1
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("[2/3]");
+      globalExpect(output).toContain("Next: CLI");
+    });
+  });
+  describe("header and selection count", () => {
+    it("should show header with domain name", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Configure your");
+      globalExpect(output).toContain("Web");
+      globalExpect(output).toContain("stack:");
+    });
+    it("should show selection count in header", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("selected");
+    });
+    it("should update selection count when items are selected", () => {
+      const { lastFrame, unmount } = renderStepBuild({
+        allSelections: ["react (@vince)", "tailwind (@vince)"]
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("selected");
+    });
+  });
+  describe("keyboard help text", () => {
+    it("should show keyboard shortcuts help in footer", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("SPACE select");
+      globalExpect(output).toContain("TAB descriptions");
+      globalExpect(output).toContain("ENTER continue");
+      globalExpect(output).toContain("ESC");
+      globalExpect(output).toContain("back");
+    });
+    it("should show arrow key navigation hints", () => {
+      const { lastFrame, unmount } = renderStepBuild();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("options");
+      globalExpect(output).toContain("categories");
+    });
+  });
+  describe("validateBuildStep", () => {
+    it("should return valid when required categories have selections", () => {
+      const categories = [
+        {
+          id: "framework",
+          name: "Framework",
+          required: true,
+          exclusive: true,
+          options: [
+            { id: "react", label: "React", state: "normal", selected: true }
+          ]
+        }
+      ];
+      const selections = { framework: ["react"] };
+      const result = validateBuildStep(categories, selections);
+      globalExpect(result.valid).toBe(true);
+      globalExpect(result.message).toBeUndefined();
+    });
+    it("should return invalid when required category has no selection", () => {
+      const categories = [
+        {
+          id: "framework",
+          name: "Framework",
+          required: true,
+          exclusive: true,
+          options: [
+            { id: "react", label: "React", state: "normal", selected: false }
+          ]
+        }
+      ];
+      const selections = {};
+      const result = validateBuildStep(categories, selections);
+      globalExpect(result.valid).toBe(false);
+      globalExpect(result.message).toContain("Framework");
+    });
+    it("should return valid when optional categories have no selections", () => {
+      const categories = [
+        {
+          id: "state",
+          name: "State Management",
+          required: false,
+          exclusive: true,
+          options: [
+            {
+              id: "zustand",
+              label: "Zustand",
+              state: "normal",
+              selected: false
+            }
+          ]
+        }
+      ];
+      const selections = {};
+      const result = validateBuildStep(categories, selections);
+      globalExpect(result.valid).toBe(true);
+    });
+    it("should return invalid for first missing required category", () => {
+      const categories = [
+        {
+          id: "framework",
+          name: "Framework",
+          required: true,
+          exclusive: true,
+          options: []
+        },
+        {
+          id: "styling",
+          name: "Styling",
+          required: true,
+          exclusive: true,
+          options: []
+        }
+      ];
+      const selections = {};
+      const result = validateBuildStep(categories, selections);
+      globalExpect(result.valid).toBe(false);
+      globalExpect(result.message).toContain("Framework");
+    });
+  });
+  describe("validation on continue", () => {
+    it("should show validation error when trying to continue without required selection", async () => {
+      const onContinue = vi.fn();
+      const { stdin, lastFrame, unmount } = renderStepBuild({
+        onContinue,
+        selections: {}
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ENTER);
+      await delay(INPUT_DELAY_MS);
+      const output = lastFrame();
+      globalExpect(output).toContain("Please select");
+      globalExpect(onContinue).not.toHaveBeenCalled();
+    });
+    it("should call onContinue when validation passes", async () => {
+      const onContinue = vi.fn();
+      const { stdin, unmount } = renderStepBuild({
+        onContinue,
+        selections: {
+          framework: ["react"],
+          styling: ["tailwind"]
+        }
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ENTER);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onContinue).toHaveBeenCalled();
+    });
+  });
+});
+describe("getDisplayLabel", () => {
+  it("should strip author suffix from name", () => {
+    globalExpect(getDisplayLabel({ name: "React (@vince)" })).toBe("React");
+  });
+  it("should preserve original capitalization", () => {
+    globalExpect(getDisplayLabel({ name: "SCSS Modules (@vince)" })).toBe(
+      "SCSS Modules"
+    );
+  });
+  it("should handle hyphenated author names", () => {
+    globalExpect(getDisplayLabel({ name: "React (@vince-team)" })).toBe("React");
+  });
+  it("should handle names without author suffix", () => {
+    globalExpect(getDisplayLabel({ name: "React" })).toBe("React");
+  });
+  it("should handle extra whitespace before author suffix", () => {
+    globalExpect(getDisplayLabel({ name: "React  (@vince)" })).toBe("React");
+  });
+  it("should not strip non-author parentheses", () => {
+    globalExpect(getDisplayLabel({ name: "React (library)" })).toBe(
+      "React (library)"
+    );
+  });
+  it("should ignore alias and use name for display", () => {
+    globalExpect(
+      getDisplayLabel({ alias: "scss-modules", name: "SCSS Modules (@vince)" })
+    ).toBe("SCSS Modules");
+  });
+});
+//# sourceMappingURL=step-build.test.js.map