@akiojin/gwt 4.10.0 → 4.12.0

package/src/cli/ui/__tests__/solid/components/WizardPopup.test.tsx

@@ -0,0 +1,231 @@
+/** @jsxImportSource @opentui/solid */
+import { describe, expect, it } from "bun:test";
+import { testRender, useKeyboard } from "@opentui/solid";
+import {
+  WizardPopup,
+  useWizardScroll,
+} from "../../../components/solid/WizardPopup.js";
+
+const renderWizard = async (
+  props: {
+    visible: boolean;
+    onClose?: () => void;
+    onComplete?: (result: unknown) => void;
+  },
+  size: { width: number; height: number } = { width: 80, height: 24 },
+) => {
+  const testSetup = await testRender(
+    () => (
+      <WizardPopup
+        visible={props.visible}
+        onClose={props.onClose ?? (() => {})}
+        onComplete={props.onComplete ?? (() => {})}
+      >
+        <text>Test Content</text>
+      </WizardPopup>
+    ),
+    size,
+  );
+  await testSetup.renderOnce();
+
+  return {
+    captureCharFrame: testSetup.captureCharFrame,
+    renderOnce: testSetup.renderOnce,
+    mockInput: testSetup.mockInput,
+    mockMouse: testSetup.mockMouse,
+    cleanup: () => testSetup.renderer.destroy(),
+  };
+};
+
+describe("WizardPopup", () => {
+  // T401: ウィザードポップアップの表示/非表示テスト
+  describe("visibility", () => {
+    it("renders wizard popup when visible is true", async () => {
+      const { captureCharFrame, cleanup } = await renderWizard({
+        visible: true,
+      });
+
+      try {
+        const frame = captureCharFrame();
+        // ウィザードポップアップの枠線が表示されることを確認
+        expect(frame).toMatch(/[┌┐└┘│─]/);
+      } finally {
+        cleanup();
+      }
+    });
+
+    it("does not render when visible is false", async () => {
+      const { captureCharFrame, cleanup } = await renderWizard({
+        visible: false,
+      });
+
+      try {
+        const frame = captureCharFrame();
+        // ウィザードポップアップが表示されないことを確認（枠線がない）
+        expect(frame).not.toMatch(/[┌┐└┘│─]/);
+      } finally {
+        cleanup();
+      }
+    });
+  });
+
+  // T402: 背景オーバーレイの表示テスト
+  describe("overlay", () => {
+    it("renders background overlay when visible", async () => {
+      const { captureCharFrame, cleanup } = await renderWizard({
+        visible: true,
+      });
+
+      try {
+        const frame = captureCharFrame();
+        // ポップアップが画面中央に表示されることを確認（枠線）
+        expect(frame).toMatch(/[┌┐└┘│─]/);
+      } finally {
+        cleanup();
+      }
+    });
+  });
+
+  // T403: ウィザードは子コンテンツを表示する
+  describe("content display", () => {
+    it("shows children content when visible", async () => {
+      // デフォルトのTest Contentが表示されることを確認
+      const { captureCharFrame, cleanup } = await renderWizard({
+        visible: true,
+      });
+
+      try {
+        const frame = captureCharFrame();
+        // 子コンテンツが表示されることを確認
+        expect(frame).toContain("Test Content");
+      } finally {
+        cleanup();
+      }
+    });
+  });
+
+  // T404: 枠線表示の確認テスト
+  describe("border display", () => {
+    it("displays wizard content when visible", async () => {
+      const { captureCharFrame, cleanup } = await renderWizard({
+        visible: true,
+      });
+
+      try {
+        const frame = captureCharFrame();
+        // デフォルトコンテンツが表示されることを確認
+        expect(frame).toContain("Test Content");
+      } finally {
+        cleanup();
+      }
+    });
+
+    it("renders border when visible", async () => {
+      const { captureCharFrame, cleanup } = await renderWizard({
+        visible: true,
+      });
+
+      try {
+        const frame = captureCharFrame();
+        // 枠線が表示されることを確認
+        expect(frame).toMatch(/[┌┐└┘│─]/);
+      } finally {
+        cleanup();
+      }
+    });
+  });
+
+  // T701: ポップアップ内のスクロール検証
+  describe("scrolling", () => {
+    it("scrolls long content within the popup", async () => {
+      const testSetup = await testRender(
+        () => (
+          <WizardPopup visible onClose={() => {}} onComplete={() => {}}>
+            <box flexDirection="column">
+              {Array.from({ length: 30 }, (_, index) => (
+                <text>{`Line ${String(index + 1).padStart(2, "0")}`}</text>
+              ))}
+            </box>
+          </WizardPopup>
+        ),
+        { width: 60, height: 20 },
+      );
+      await testSetup.renderOnce();
+
+      try {
+        const frame = testSetup.captureCharFrame();
+        expect(frame).toContain("Line 01");
+        expect(frame).not.toContain("Line 20");
+
+        for (let i = 0; i < 16; i += 1) {
+          await testSetup.mockMouse.scroll(30, 10, "down");
+          await testSetup.renderOnce();
+        }
+
+        const scrolledFrame = testSetup.captureCharFrame();
+        expect(scrolledFrame).toContain("Line 20");
+      } finally {
+        testSetup.renderer.destroy();
+      }
+    });
+  });
+
+  // T703: 上下キーでのスクロール検証
+  describe("keyboard scrolling", () => {
+    const ArrowKeyScrollContent = () => {
+      const scroll = useWizardScroll();
+      useKeyboard((key) => {
+        if (!scroll) {
+          return;
+        }
+        if (key.name === "down") {
+          if (scroll.scrollByLines(1)) {
+            key.preventDefault();
+          }
+          return;
+        }
+        if (key.name === "up") {
+          if (scroll.scrollByLines(-1)) {
+            key.preventDefault();
+          }
+        }
+      });
+
+      return (
+        <box flexDirection="column">
+          {Array.from({ length: 30 }, (_, index) => (
+            <text>{`Line ${String(index + 1).padStart(2, "0")}`}</text>
+          ))}
+        </box>
+      );
+    };
+
+    it("scrolls long content with arrow keys", async () => {
+      const testSetup = await testRender(
+        () => (
+          <WizardPopup visible onClose={() => {}} onComplete={() => {}}>
+            <ArrowKeyScrollContent />
+          </WizardPopup>
+        ),
+        { width: 60, height: 20 },
+      );
+      await testSetup.renderOnce();
+
+      try {
+        const frame = testSetup.captureCharFrame();
+        expect(frame).toContain("Line 01");
+        expect(frame).not.toContain("Line 20");
+
+        for (let i = 0; i < 16; i += 1) {
+          testSetup.mockInput.pressArrow("down");
+          await testSetup.renderOnce();
+        }
+
+        const scrolledFrame = testSetup.captureCharFrame();
+        expect(scrolledFrame).toContain("Line 20");
+      } finally {
+        testSetup.renderer.destroy();
+      }
+    });
+  });
+});

package/src/cli/ui/__tests__/solid/components/WizardSteps.test.tsx

@@ -0,0 +1,241 @@
+/** @jsxImportSource @opentui/solid */
+import { describe, expect, it } from "bun:test";
+import { testRender } from "@opentui/solid";
+import {
+  BranchTypeStep,
+  BranchNameStep,
+  AgentSelectStep,
+  ModelSelectStep,
+  ReasoningLevelStep,
+  ExecutionModeStep,
+  SkipPermissionsStep,
+} from "../../../components/solid/WizardSteps.js";
+
+// T405: ブランチタイプ選択ステップのテスト
+describe("BranchTypeStep", () => {
+  it("renders branch type options", async () => {
+    const testSetup = await testRender(
+      () => <BranchTypeStep onSelect={() => {}} onBack={() => {}} />,
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      const frame = testSetup.captureCharFrame();
+      // タイトルと最初の選択肢（feature/）が表示されることを確認
+      expect(frame).toContain("Select branch type");
+      expect(frame).toContain("feature/");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+
+  it("calls onSelect with selected branch type", async () => {
+    let selectedType = "";
+    const testSetup = await testRender(
+      () => (
+        <BranchTypeStep
+          onSelect={(type) => {
+            selectedType = type;
+          }}
+          onBack={() => {}}
+        />
+      ),
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      // Enterキーで選択
+      testSetup.mockInput.pressEnter();
+      await testSetup.renderOnce();
+      expect(selectedType).toBe("feature/");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+});
+
+// T406: ブランチ名入力ステップのテスト
+describe("BranchNameStep", () => {
+  it("renders branch name input", async () => {
+    const testSetup = await testRender(
+      () => (
+        <BranchNameStep
+          branchType="feature/"
+          onSubmit={() => {}}
+          onBack={() => {}}
+        />
+      ),
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      const frame = testSetup.captureCharFrame();
+      expect(frame).toContain("feature/");
+      expect(frame).toContain("Branch name");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+
+  it("calls onSubmit with entered branch name", async () => {
+    let submittedName = "";
+    const testSetup = await testRender(
+      () => (
+        <BranchNameStep
+          branchType="feature/"
+          onSubmit={(name) => {
+            submittedName = name;
+          }}
+          onBack={() => {}}
+        />
+      ),
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      // ブランチ名を入力
+      await testSetup.mockInput.typeText("my-feature");
+      await testSetup.renderOnce();
+      // Enterで確定
+      testSetup.mockInput.pressEnter();
+      await testSetup.renderOnce();
+      expect(submittedName).toBe("my-feature");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+});
+
+// T407: コーディングエージェント選択ステップのテスト
+describe("AgentSelectStep", () => {
+  it("renders agent options", async () => {
+    const testSetup = await testRender(
+      () => <AgentSelectStep onSelect={() => {}} onBack={() => {}} />,
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      const frame = testSetup.captureCharFrame();
+      expect(frame).toContain("Claude Code");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+});
+
+// T408: モデル選択ステップのテスト
+describe("ModelSelectStep", () => {
+  it("renders model options for Claude Code", async () => {
+    const testSetup = await testRender(
+      () => (
+        <ModelSelectStep
+          agentId="claude-code"
+          onSelect={() => {}}
+          onBack={() => {}}
+        />
+      ),
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      const frame = testSetup.captureCharFrame();
+      expect(frame).toContain("Model");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+});
+
+// T409: 推論レベル選択ステップ（Codexのみ）のテスト
+describe("ReasoningLevelStep", () => {
+  it("renders reasoning level options", async () => {
+    const testSetup = await testRender(
+      () => <ReasoningLevelStep onSelect={() => {}} onBack={() => {}} />,
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      const frame = testSetup.captureCharFrame();
+      // タイトルと最初の選択肢（low）が表示されることを確認
+      expect(frame).toContain("reasoning level");
+      expect(frame).toContain("low");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+});
+
+// T410: 実行モード選択ステップのテスト
+describe("ExecutionModeStep", () => {
+  it("renders execution mode options", async () => {
+    const testSetup = await testRender(
+      () => <ExecutionModeStep onSelect={() => {}} onBack={() => {}} />,
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      const frame = testSetup.captureCharFrame();
+      // タイトルと最初の選択肢（Normal）が表示されることを確認
+      expect(frame).toContain("execution mode");
+      expect(frame).toContain("Normal");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+});
+
+// T411: 権限スキップ確認ステップのテスト
+describe("SkipPermissionsStep", () => {
+  it("renders skip permissions options", async () => {
+    const testSetup = await testRender(
+      () => <SkipPermissionsStep onSelect={() => {}} onBack={() => {}} />,
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      const frame = testSetup.captureCharFrame();
+      // タイトルと最初の選択肢（Yes）が表示されることを確認
+      expect(frame).toContain("Skip permission");
+      expect(frame).toContain("Yes");
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+
+  it("calls onSelect with true when Yes is selected", async () => {
+    let selected: boolean | null = null;
+    const testSetup = await testRender(
+      () => (
+        <SkipPermissionsStep
+          onSelect={(value) => {
+            selected = value;
+          }}
+          onBack={() => {}}
+        />
+      ),
+      { width: 60, height: 20 },
+    );
+    await testSetup.renderOnce();
+
+    try {
+      // Enterキーで選択（デフォルトはYes）
+      testSetup.mockInput.pressEnter();
+      await testSetup.renderOnce();
+      if (selected === null) {
+        throw new Error("Expected selection");
+      }
+      expect(selected === true).toBe(true);
+    } finally {
+      testSetup.renderer.destroy();
+    }
+  });
+});