@akiojin/gwt 2.0.0

package/src/cli/ui/__tests__/components/screens/AIToolSelectorScreen.test.tsx

@@ -0,0 +1,153 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { AIToolSelectorScreen } from '../../../components/screens/AIToolSelectorScreen.js';
+import { Window } from 'happy-dom';
+
+// Mock getAllTools
+vi.mock('../../../config/tools.js', () => ({
+  getAllTools: vi.fn().mockResolvedValue([
+    {
+      id: 'claude-code',
+      displayName: 'Claude Code',
+      isBuiltin: true,
+    },
+    {
+      id: 'codex-cli',
+      displayName: 'Codex CLI',
+      isBuiltin: true,
+    },
+  ]),
+}));
+
+describe('AIToolSelectorScreen', () => {
+  beforeEach(() => {
+    // Setup happy-dom
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+  });
+
+  it('should render header with title', () => {
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const { getByText } = render(
+      <AIToolSelectorScreen onBack={onBack} onSelect={onSelect} />
+    );
+
+    expect(getByText(/AI Tool Selection/i)).toBeDefined();
+  });
+
+  it('should render AI tool options', async () => {
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const { getByText } = render(
+      <AIToolSelectorScreen onBack={onBack} onSelect={onSelect} />
+    );
+
+    // Wait for tools to load
+    await waitFor(() => {
+      expect(getByText(/Claude Code/i)).toBeDefined();
+      expect(getByText(/Codex CLI/i)).toBeDefined();
+    });
+  });
+
+  it('should render footer with actions', () => {
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const { getAllByText } = render(
+      <AIToolSelectorScreen onBack={onBack} onSelect={onSelect} />
+    );
+
+    expect(getAllByText(/enter/i).length).toBeGreaterThan(0);
+    expect(getAllByText(/esc/i).length).toBeGreaterThan(0);
+  });
+
+  it('should use terminal height for layout calculation', () => {
+    const originalRows = process.stdout.rows;
+    process.stdout.rows = 30;
+
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const { container } = render(
+      <AIToolSelectorScreen onBack={onBack} onSelect={onSelect} />
+    );
+
+    expect(container).toBeDefined();
+
+    process.stdout.rows = originalRows;
+  });
+
+  it('should handle back navigation with ESC key', () => {
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const { container } = render(
+      <AIToolSelectorScreen onBack={onBack} onSelect={onSelect} />
+    );
+
+    // Test will verify onBack is called when ESC is pressed
+    expect(container).toBeDefined();
+  });
+
+  it('should handle tool selection', () => {
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const { container } = render(
+      <AIToolSelectorScreen onBack={onBack} onSelect={onSelect} />
+    );
+
+    // Test will verify onSelect is called with correct tool
+    expect(container).toBeDefined();
+  });
+
+  /**
+   * T210: カスタムツール表示のテスト
+   */
+  describe('Custom tool display', () => {
+    it('should load tools from getAllTools() dynamically', async () => {
+      // TODO: 実装後にテストを記述
+      // getAllTools()がモックされ、呼び出されることを確認
+      // モックの戻り値がツールアイテムとして表示されることを確認
+      expect(true).toBe(true);
+    });
+
+    it('should display both builtin and custom tools', async () => {
+      // TODO: 実装後にテストを記述
+      // getAllTools()がビルトインツール（claude-code, codex-cli）と
+      // カスタムツール（例: aider）を返す場合、
+      // すべてのツールが表示されることを確認
+      expect(true).toBe(true);
+    });
+
+    it('should display custom tool with icon if defined', async () => {
+      // TODO: 実装後にテストを記述
+      // カスタムツールにiconフィールドがある場合、
+      // それが表示されることを確認
+      expect(true).toBe(true);
+    });
+
+    it('should display custom tool without icon if not defined', async () => {
+      // TODO: 実装後にテストを記述
+      // カスタムツールにiconフィールドがない場合、
+      // ツール名のみが表示されることを確認
+      expect(true).toBe(true);
+    });
+
+    it('should handle custom tool selection', async () => {
+      // TODO: 実装後にテストを記述
+      // カスタムツールを選択した場合、
+      // onSelect()がカスタムツールのIDで呼び出されることを確認
+      expect(true).toBe(true);
+    });
+
+    it('should display only builtin tools if no custom tools exist', async () => {
+      // TODO: 実装後にテストを記述
+      // getAllTools()がビルトインツールのみを返す場合、
+      // ビルトインツールのみが表示されることを確認
+      expect(true).toBe(true);
+    });
+  });
+});

package/src/cli/ui/__tests__/components/screens/BranchCreatorScreen.test.tsx

@@ -0,0 +1,215 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render as rtlRender, act } from '@testing-library/react';
+import React from 'react';
+import { BranchCreatorScreen } from '../../../components/screens/BranchCreatorScreen.js';
+import { Window } from 'happy-dom';
+import { render as inkRender } from 'ink-testing-library';
+
+describe('BranchCreatorScreen', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    // Setup happy-dom
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should render header with title', () => {
+    const onBack = vi.fn();
+    const onCreate = vi.fn().mockResolvedValue(undefined);
+    const { getByText } = rtlRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    expect(getByText(/New Branch/i)).toBeDefined();
+  });
+
+  it('should render branch type selection initially', () => {
+    const onBack = vi.fn();
+    const onCreate = vi.fn().mockResolvedValue(undefined);
+    const { getByText } = rtlRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    expect(getByText(/Select branch type/i)).toBeDefined();
+    expect(getByText(/feature/i)).toBeDefined();
+    expect(getByText(/hotfix/i)).toBeDefined();
+    expect(getByText(/release/i)).toBeDefined();
+  });
+
+  it('should render footer with actions', () => {
+    const onBack = vi.fn();
+    const onCreate = vi.fn().mockResolvedValue(undefined);
+    const { getAllByText } = rtlRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    expect(getAllByText(/enter/i).length).toBeGreaterThan(0);
+    expect(getAllByText(/esc/i).length).toBeGreaterThan(0);
+  });
+
+  it('should show branch name input after type selection', () => {
+    const onBack = vi.fn();
+    const onCreate = vi.fn().mockResolvedValue(undefined);
+    const { container } = rtlRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    // Test will verify the screen transitions from type selection to name input
+    expect(container).toBeDefined();
+  });
+
+  it('should handle branch creation', () => {
+    const onBack = vi.fn();
+    const onCreate = vi.fn().mockResolvedValue(undefined);
+    const { container } = rtlRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    // Test will verify onCreate is called with correct branch name
+    expect(container).toBeDefined();
+  });
+
+  it('should use terminal height for layout calculation', () => {
+    const originalRows = process.stdout.rows;
+    process.stdout.rows = 30;
+
+    const onBack = vi.fn();
+    const onCreate = vi.fn().mockResolvedValue(undefined);
+    const { container } = rtlRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    expect(container).toBeDefined();
+
+    process.stdout.rows = originalRows;
+  });
+
+  it('should handle back navigation with ESC key', () => {
+    const onBack = vi.fn();
+    const onCreate = vi.fn().mockResolvedValue(undefined);
+    const { container } = rtlRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    // Test will verify onBack is called when ESC is pressed
+    expect(container).toBeDefined();
+  });
+
+  it('should display creating state while waiting for branch creation', async () => {
+    expect.assertions(3);
+    const onBack = vi.fn();
+    let resolveCreate: (() => void) | null = null;
+    const onCreate = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveCreate = resolve;
+        })
+    );
+    const { stdin, lastFrame } = inkRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    // Select default branch type (feature)
+    await act(async () => {
+      stdin.write('\r');
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    const branchName = 'new-branch';
+    for (const char of branchName) {
+      await act(async () => {
+        stdin.write(char);
+      });
+    }
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    // Submit branch name
+    await act(async () => {
+      stdin.write('\r');
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(onCreate).toHaveBeenCalledWith(`feature/${branchName}`);
+    expect(lastFrame()).toContain('Creating branch');
+    expect(lastFrame()).toContain(`feature/${branchName}`);
+
+    await act(async () => {
+      resolveCreate?.();
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+  });
+
+  it('should ignore ESC input while branch creation is in progress', async () => {
+    expect.assertions(2);
+    const onBack = vi.fn();
+    let resolveCreate: (() => void) | null = null;
+    const onCreate = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveCreate = resolve;
+        })
+    );
+    const { stdin, lastFrame } = inkRender(
+      <BranchCreatorScreen onBack={onBack} onCreate={onCreate} disableAnimation />
+    );
+
+    // Move to name input
+    await act(async () => {
+      stdin.write('\r');
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    const branchName = 'blocking-branch';
+    for (const char of branchName) {
+      await act(async () => {
+        stdin.write(char);
+      });
+    }
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      stdin.write('\r');
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    // Attempt to cancel with ESC during creation
+    await act(async () => {
+      stdin.write('\u001B');
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(onBack).not.toHaveBeenCalled();
+    expect(lastFrame()).toContain('Creating branch');
+
+    await act(async () => {
+      resolveCreate?.();
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+  });
+});

package/src/cli/ui/__tests__/components/screens/BranchListScreen.test.tsx

@@ -0,0 +1,293 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act, render } from '@testing-library/react';
+import { render as inkRender } from 'ink-testing-library';
+import React from 'react';
+import { BranchListScreen } from '../../../components/screens/BranchListScreen.js';
+import type { BranchInfo, BranchItem, Statistics } from '../../../types.js';
+import { formatBranchItem } from '../../../utils/branchFormatter.js';
+import stringWidth from 'string-width';
+import { Window } from 'happy-dom';
+
+const stripAnsi = (value: string): string => value.replace(/\u001b\[[0-9;]*m/g, '');
+const stripControlSequences = (value: string): string =>
+  value.replace(/\u001b\[([0-9;?]*)([A-Za-z])/g, (_, params, command) => {
+    if (command === 'C') {
+      const count = Number(params || '1');
+      return ' '.repeat(Number.isNaN(count) ? 0 : count);
+    }
+    return '';
+  });
+
+describe('BranchListScreen', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    // Setup happy-dom
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const mockBranches: BranchItem[] = [
+    {
+      name: 'main',
+      type: 'local',
+      branchType: 'main',
+      isCurrent: true,
+      icons: ['⚡', '⭐'],
+      hasChanges: false,
+      label: '⚡ ⭐ main',
+      value: 'main',
+      latestCommitTimestamp: 1_700_000_000,
+    },
+    {
+      name: 'feature/test',
+      type: 'local',
+      branchType: 'feature',
+      isCurrent: false,
+      icons: ['✨'],
+      hasChanges: false,
+      label: '✨ feature/test',
+      value: 'feature/test',
+      latestCommitTimestamp: 1_699_000_000,
+    },
+  ];
+
+  const mockStats: Statistics = {
+    localCount: 2,
+    remoteCount: 1,
+    worktreeCount: 0,
+    changesCount: 0,
+    lastUpdated: new Date(),
+  };
+
+  it('should render header with title', () => {
+    const onSelect = vi.fn();
+    const { getByText } = render(
+      <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />
+    );
+
+    expect(getByText(/gwt - Branch Selection/i)).toBeDefined();
+  });
+
+  it('should render statistics', () => {
+    const onSelect = vi.fn();
+    const { container, getByText } = render(
+      <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />
+    );
+
+    expect(container.textContent).toContain('Local: 2');
+    expect(getByText(/Remote:/)).toBeDefined();
+  });
+
+  it('should render branch list', () => {
+    const onSelect = vi.fn();
+    const { getByText } = render(
+      <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />
+    );
+
+    expect(getByText(/main/)).toBeDefined();
+    expect(getByText(/feature\/test/)).toBeDefined();
+  });
+
+  it('should render footer with actions', () => {
+    const onSelect = vi.fn();
+    const { getAllByText } = render(
+      <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />
+    );
+
+    // Check for enter key (main screen doesn't have q key, exit is Ctrl+C only)
+    expect(getAllByText(/enter/i).length).toBeGreaterThan(0);
+  });
+
+  it('should handle empty branch list', () => {
+    const onSelect = vi.fn();
+    const emptyStats: Statistics = {
+      localCount: 0,
+      remoteCount: 0,
+      worktreeCount: 0,
+      changesCount: 0,
+      lastUpdated: new Date(),
+    };
+
+    const { container } = render(
+      <BranchListScreen branches={[]} stats={emptyStats} onSelect={onSelect} />
+    );
+
+    expect(container).toBeDefined();
+  });
+
+  it('should display loading indicator after the configured delay', async () => {
+    const onSelect = vi.fn();
+    const { queryByText, getByText } = render(
+      <BranchListScreen
+        branches={mockBranches}
+        stats={mockStats}
+        onSelect={onSelect}
+        loading={true}
+        loadingIndicatorDelay={10}
+      />
+    );
+
+    await act(async () => {
+      if (typeof (vi as any).advanceTimersByTime === 'function') {
+        (vi as any).advanceTimersByTime(10);
+      } else {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      }
+    });
+
+    expect(getByText(/Loading Git information/i)).toBeDefined();
+  });
+
+  it('should display error state', () => {
+    const onSelect = vi.fn();
+    const error = new Error('Failed to load branches');
+    const { getByText } = render(
+      <BranchListScreen branches={[]} stats={mockStats} onSelect={onSelect} error={error} />
+    );
+
+    expect(getByText(/Error:/i)).toBeDefined();
+    expect(getByText(/Failed to load branches/i)).toBeDefined();
+  });
+
+  it('should use terminal height for layout calculation', () => {
+    const onSelect = vi.fn();
+
+    // Mock process.stdout
+    const originalRows = process.stdout.rows;
+    process.stdout.rows = 30;
+
+    const { container } = render(
+      <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />
+    );
+
+    expect(container).toBeDefined();
+
+    // Restore
+    process.stdout.rows = originalRows;
+  });
+
+  it('should display branch icons', () => {
+    const onSelect = vi.fn();
+    const { getByText } = render(
+      <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />
+    );
+
+    // Check for icons in labels
+    expect(getByText(/⚡/)).toBeDefined(); // main icon
+    expect(getByText(/⭐/)).toBeDefined(); // current icon
+    expect(getByText(/✨/)).toBeDefined(); // feature icon
+  });
+
+  it('should render latest commit timestamp for each branch', () => {
+    const onSelect = vi.fn();
+    const { container } = render(
+      <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />
+    );
+
+    const textContent = container.textContent ?? '';
+    const matches = textContent.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}/g) ?? [];
+    expect(matches.length).toBe(mockBranches.length);
+  });
+
+  it('should highlight the selected branch with cyan background', async () => {
+    process.env.FORCE_COLOR = '1';
+    const onSelect = vi.fn();
+    let renderResult: ReturnType<typeof inkRender>;
+    await act(async () => {
+      renderResult = inkRender(
+        <BranchListScreen branches={mockBranches} stats={mockStats} onSelect={onSelect} />,
+        { stripAnsi: false }
+      );
+    });
+
+    const frame = renderResult!.lastFrame() ?? '';
+    expect(frame).toContain('\u001b[46m'); // cyan background ANSI code
+  });
+
+  it('should align timestamps even when unpushed icon is displayed', async () => {
+    process.env.FORCE_COLOR = '1';
+    const onSelect = vi.fn();
+
+    const originalColumns = process.stdout.columns;
+    process.stdout.columns = 94;
+
+    const branchInfos: BranchInfo[] = [
+      {
+        name: 'feature/update-ui',
+        type: 'local',
+        branchType: 'feature',
+        isCurrent: false,
+        hasUnpushedCommits: true,
+        latestCommitTimestamp: 1_700_000_000,
+      },
+      {
+        name: 'origin/main',
+        type: 'remote',
+        branchType: 'main',
+        isCurrent: false,
+        hasUnpushedCommits: false,
+        latestCommitTimestamp: 1_699_999_000,
+      },
+      {
+        name: 'main',
+        type: 'local',
+        branchType: 'main',
+        isCurrent: true,
+        hasUnpushedCommits: false,
+        latestCommitTimestamp: 1_699_998_000,
+      },
+    ];
+
+    const branchesWithUnpushed: BranchItem[] = branchInfos.map((branch) =>
+      formatBranchItem(branch)
+    );
+
+    try {
+      let renderResult: ReturnType<typeof inkRender>;
+      await act(async () => {
+        renderResult = inkRender(
+          <BranchListScreen branches={branchesWithUnpushed} stats={mockStats} onSelect={onSelect} />,
+          { stripAnsi: false }
+        );
+      });
+
+      const frame = renderResult!.lastFrame() ?? '';
+      const timestampLines = frame
+        .split('\n')
+        .map((line) => stripControlSequences(stripAnsi(line)))
+        .filter((line) => /\d{4}-\d{2}-\d{2} \d{2}:\d{2}/.test(line));
+
+      expect(timestampLines.length).toBeGreaterThanOrEqual(3);
+
+      const timestampWidths = timestampLines.map((line) => {
+        const match = line.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}/);
+        const index = match?.index ?? 0;
+        const beforeTimestamp = line.slice(0, index);
+
+        let width = 0;
+        for (const char of Array.from(beforeTimestamp)) {
+          if (char === '\u2B06' || char === '\u2601') {
+            width += 1;
+            continue;
+          }
+          width += stringWidth(char);
+        }
+        return width;
+      });
+
+      const uniquePositions = new Set(timestampWidths);
+
+      expect(uniquePositions.size).toBe(1);
+    } finally {
+      process.stdout.columns = originalColumns;
+    }
+  });
+});