@akiojin/gwt 2.0.0

package/src/cli/ui/__tests__/components/common/Select.test.tsx

@@ -0,0 +1,246 @@
+/**
+ * @vitest-environment happy-dom
+ */
+/* eslint-disable no-control-regex */
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import React from 'react';
+import { Select } from '../../../components/common/Select.js';
+
+// Helper to wait for async updates
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+interface TestItem {
+  label: string;
+  value: string;
+}
+
+describe('Select', () => {
+  const mockItems: TestItem[] = [
+    { label: 'Option 1', value: 'opt1' },
+    { label: 'Option 2', value: 'opt2' },
+    { label: 'Option 3', value: 'opt3' },
+    { label: 'Option 4', value: 'opt4' },
+    { label: 'Option 5', value: 'opt5' },
+  ];
+
+  describe('Rendering', () => {
+    it('should render all items', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      expect(lastFrame()).toContain('Option 1');
+      expect(lastFrame()).toContain('Option 2');
+      expect(lastFrame()).toContain('Option 3');
+    });
+
+    it('should highlight first item by default', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      // Cyan color code indicates selected item
+      expect(lastFrame()).toContain('›');
+    });
+
+    it('should highlight item at initialIndex', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(
+        <Select items={mockItems} onSelect={onSelect} initialIndex={2} />
+      );
+
+      const output = lastFrame();
+      // Should have exactly one selected indicator
+      const selectedCount = (output.match(/›/g) || []).length;
+      expect(selectedCount).toBe(1);
+    });
+
+    it('should render with empty items array', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={[]} onSelect={onSelect} />);
+
+      expect(lastFrame()).toBeDefined();
+    });
+
+    it('should respect limit prop for scrolling', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} limit={3} />);
+
+      const output = lastFrame();
+      // Should only show 3 items when limit is 3
+      expect(output).toContain('Option 1');
+      expect(output).toContain('Option 2');
+      expect(output).toContain('Option 3');
+      // Option 4 and 5 should not be visible initially
+      expect(output).not.toContain('Option 4');
+      expect(output).not.toContain('Option 5');
+    });
+  });
+
+  describe('Navigation - No Looping (Critical Feature)', () => {
+    it('should implement boundary checks to prevent looping', () => {
+      // Unit test: verify the logic used in implementation
+      // Math.max(0, current - 1) - prevents going below 0
+      // Math.min(items.length - 1, current + 1) - prevents going above max
+
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      // Verify component renders (implementation uses Math.max/min for boundaries)
+      expect(lastFrame()).toBeDefined();
+      expect(lastFrame()).toContain('Option 1');
+    });
+
+    it('should start at first item by default', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      const output = lastFrame();
+      // First line should have the selection indicator
+      const lines = output.split('\n').filter((l) => l.trim());
+      expect(lines[0]).toContain('›');
+      expect(lines[0]).toContain('Option 1');
+    });
+
+    it('should respect initialIndex without looping', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(
+        <Select items={mockItems} onSelect={onSelect} initialIndex={4} />
+      );
+
+      // Should start at last item (index 4)
+      const output = lastFrame();
+      expect(output).toContain('Option 5');
+      expect(output).toContain('›');
+    });
+
+    it('should handle initialIndex at 0', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(
+        <Select items={mockItems} onSelect={onSelect} initialIndex={0} />
+      );
+
+      const output = lastFrame();
+      const lines = output.split('\n').filter((l) => l.trim());
+      expect(lines[0]).toContain('Option 1');
+    });
+  });
+
+  describe('Navigation - Input Handling', () => {
+    it('should use useInput hook for keyboard handling', () => {
+      // Verify component accepts keyboard input by checking it renders properly
+      const onSelect = vi.fn();
+      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      // Component should handle input without errors
+      expect(() => stdin.write('\u001B[B')).not.toThrow();
+      expect(() => stdin.write('\u001B[A')).not.toThrow();
+      expect(() => stdin.write('j')).not.toThrow();
+      expect(() => stdin.write('k')).not.toThrow();
+    });
+
+    it('should support vim-style navigation keys (j/k)', () => {
+      const onSelect = vi.fn();
+      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      // Should accept j and k keys
+      expect(() => stdin.write('j')).not.toThrow();
+      expect(() => stdin.write('k')).not.toThrow();
+    });
+
+    it('should support arrow keys', () => {
+      const onSelect = vi.fn();
+      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      // Should accept arrow keys
+      expect(() => stdin.write('\u001B[A')).not.toThrow(); // Up
+      expect(() => stdin.write('\u001B[B')).not.toThrow(); // Down
+    });
+  });
+
+  describe('Selection', () => {
+    it('should call onSelect when Enter is pressed', () => {
+      const onSelect = vi.fn();
+      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      stdin.write('\r'); // Enter key
+
+      // Should be called at least once
+      expect(onSelect).toHaveBeenCalled();
+    });
+
+    it('should pass selected item to onSelect callback', () => {
+      const onSelect = vi.fn();
+      render(<Select items={mockItems} onSelect={onSelect} initialIndex={2} />);
+
+      // onSelect should be configured to receive item objects
+      // Actual keyboard testing is limited by ink-testing-library
+      expect(onSelect).toBeInstanceOf(Function);
+    });
+
+    it('should handle Enter key without errors', () => {
+      const onSelect = vi.fn();
+      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      expect(() => stdin.write('\r')).not.toThrow();
+    });
+  });
+
+  describe('Scrolling with limit', () => {
+    it('should implement offset-based scrolling logic', () => {
+      // Verify limit prop is accepted and used for slicing
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} limit={3} />);
+
+      const output = lastFrame();
+      // Should show limited items initially
+      expect(output).toContain('Option 1');
+      expect(output).toContain('Option 2');
+      expect(output).toContain('Option 3');
+    });
+
+    it('should handle limit smaller than items length', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} limit={2} />);
+
+      const output = lastFrame();
+      const lines = output.split('\n').filter((l) => l.trim());
+      // Should only show 2 items
+      expect(lines.length).toBeLessThanOrEqual(2);
+    });
+
+    it('should handle limit larger than items length', () => {
+      const onSelect = vi.fn();
+      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} limit={100} />);
+
+      // Should show all items without error
+      const output = lastFrame();
+      expect(output).toContain('Option 1');
+      expect(output).toContain('Option 5');
+    });
+  });
+
+  describe('Key propagation (Critical Feature)', () => {
+    it('should not interfere with other keys like q', () => {
+      const onSelect = vi.fn();
+      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      // Press q key (should be ignored by Select and propagate to parent)
+      stdin.write('q');
+
+      // onSelect should not be called
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('should not interfere with other keys like m, n, c', () => {
+      const onSelect = vi.fn();
+      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+
+      stdin.write('m');
+      stdin.write('n');
+      stdin.write('c');
+
+      // None of these should trigger selection
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/cli/ui/__tests__/components/parts/Footer.test.tsx

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Footer } from '../../../components/parts/Footer.js';
+import { Window } from 'happy-dom';
+
+describe('Footer', () => {
+  beforeEach(() => {
+    // Setup happy-dom
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+  });
+
+  const mockActions = [
+    { key: 'enter', description: 'Select' },
+    { key: 'esc', description: 'Back' },
+    { key: 'h', description: 'Help' },
+  ];
+
+  it('should render all actions', () => {
+    const { getByText } = render(<Footer actions={mockActions} />);
+
+    expect(getByText(/enter/)).toBeDefined();
+    expect(getByText(/Select/)).toBeDefined();
+    expect(getByText(/esc/)).toBeDefined();
+    expect(getByText(/Back/)).toBeDefined();
+    expect(getByText(/h/)).toBeDefined();
+    expect(getByText(/Help/)).toBeDefined();
+  });
+
+  it('should render with empty actions array', () => {
+    const { container } = render(<Footer actions={[]} />);
+
+    expect(container).toBeDefined();
+  });
+
+  it('should render single action', () => {
+    const singleAction = [{ key: 'esc', description: 'Exit' }];
+    const { getByText } = render(<Footer actions={singleAction} />);
+
+    expect(getByText(/esc/)).toBeDefined();
+    expect(getByText(/Exit/)).toBeDefined();
+  });
+
+  it('should render actions in a horizontal layout', () => {
+    const { container } = render(<Footer actions={mockActions} />);
+
+    // Verify component renders without error
+    expect(container).toBeDefined();
+  });
+
+  it('should accept custom separator', () => {
+    const { getAllByText } = render(<Footer actions={mockActions} separator=" | " />);
+
+    const separators = getAllByText(/\|/);
+    expect(separators.length).toBeGreaterThan(0);
+  });
+});

package/src/cli/ui/__tests__/components/parts/Header.test.tsx

@@ -0,0 +1,54 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Header } from '../../../components/parts/Header.js';
+import { Window } from 'happy-dom';
+
+describe('Header', () => {
+  beforeEach(() => {
+    // Setup happy-dom
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+  });
+
+  it('should render title', () => {
+    const { getByText } = render(<Header title="gwt" />);
+
+    expect(getByText('gwt')).toBeDefined();
+  });
+
+  it('should render divider', () => {
+    const { getByText } = render(<Header title="Test" />);
+
+    // Check for a line of dashes (divider)
+    expect(getByText(/─+/)).toBeDefined();
+  });
+
+  it('should render title in bold and cyan by default', () => {
+    const { container } = render(<Header title="Test Title" />);
+
+    expect(container).toBeDefined();
+  });
+
+  it('should accept custom title color', () => {
+    const { container } = render(<Header title="Test" titleColor="green" />);
+
+    expect(container).toBeDefined();
+  });
+
+  it('should accept custom divider character', () => {
+    const { getByText } = render(<Header title="Test" dividerChar="=" />);
+
+    expect(getByText(/=+/)).toBeDefined();
+  });
+
+  it('should render without divider when showDivider is false', () => {
+    const { queryByText } = render(<Header title="Test" showDivider={false} />);
+
+    expect(queryByText(/─+/)).toBeNull();
+  });
+});

package/src/cli/ui/__tests__/components/parts/ScrollableList.test.tsx

@@ -0,0 +1,68 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ScrollableList } from '../../../components/parts/ScrollableList.js';
+import { Text } from 'ink';
+import { Window } from 'happy-dom';
+
+describe('ScrollableList', () => {
+  beforeEach(() => {
+    // Setup happy-dom
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+  });
+
+  it('should render children', () => {
+    const { getByText } = render(
+      <ScrollableList>
+        <Text>Item 1</Text>
+        <Text>Item 2</Text>
+        <Text>Item 3</Text>
+      </ScrollableList>
+    );
+
+    expect(getByText('Item 1')).toBeDefined();
+    expect(getByText('Item 2')).toBeDefined();
+    expect(getByText('Item 3')).toBeDefined();
+  });
+
+  it('should render with no children', () => {
+    const { container } = render(<ScrollableList>{null}</ScrollableList>);
+
+    expect(container).toBeDefined();
+  });
+
+  it('should accept maxHeight prop', () => {
+    const { container } = render(
+      <ScrollableList maxHeight={10}>
+        <Text>Content</Text>
+      </ScrollableList>
+    );
+
+    expect(container).toBeDefined();
+  });
+
+  it('should render in a vertical layout', () => {
+    const { container } = render(
+      <ScrollableList>
+        <Text>Content</Text>
+      </ScrollableList>
+    );
+
+    expect(container).toBeDefined();
+  });
+
+  it('should handle single child', () => {
+    const { getByText } = render(
+      <ScrollableList>
+        <Text>Single Item</Text>
+      </ScrollableList>
+    );
+
+    expect(getByText('Single Item')).toBeDefined();
+  });
+});

package/src/cli/ui/__tests__/components/parts/Stats.test.tsx

@@ -0,0 +1,135 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Stats } from '../../../components/parts/Stats.js';
+import type { Statistics } from '../../../types.js';
+import { Window } from 'happy-dom';
+
+describe('Stats', () => {
+  beforeEach(() => {
+    // Setup happy-dom
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+  });
+
+  const mockStats: Statistics = {
+    localCount: 10,
+    remoteCount: 8,
+    worktreeCount: 3,
+    changesCount: 2,
+    lastUpdated: new Date('2025-01-25T12:00:00Z'),
+  };
+
+  it('should render all statistics', () => {
+    const { getByText } = render(<Stats stats={mockStats} />);
+
+    expect(getByText(/Local:/)).toBeDefined();
+    expect(getByText(/10/)).toBeDefined();
+    expect(getByText(/Remote:/)).toBeDefined();
+    expect(getByText(/8/)).toBeDefined();
+    expect(getByText(/Worktrees:/)).toBeDefined();
+    expect(getByText(/3/)).toBeDefined();
+    expect(getByText(/Changes:/)).toBeDefined();
+    expect(getByText(/2/)).toBeDefined();
+  });
+
+  it('should render with zero counts', () => {
+    const zeroStats: Statistics = {
+      localCount: 0,
+      remoteCount: 0,
+      worktreeCount: 0,
+      changesCount: 0,
+      lastUpdated: new Date(),
+    };
+
+    const { getByText, getAllByText } = render(<Stats stats={zeroStats} />);
+
+    expect(getByText(/Local:/)).toBeDefined();
+    const zeros = getAllByText(/0/);
+    expect(zeros.length).toBe(4); // All 4 counts are 0
+  });
+
+  it('should render in a horizontal layout', () => {
+    const { container } = render(<Stats stats={mockStats} />);
+
+    // Verify component renders without error
+    expect(container).toBeDefined();
+  });
+
+  it('should accept custom separator', () => {
+    const { getAllByText } = render(<Stats stats={mockStats} separator=" | " />);
+
+    const separators = getAllByText(/\|/);
+    expect(separators.length).toBeGreaterThan(0);
+  });
+
+  it('should handle large numbers', () => {
+    const largeStats: Statistics = {
+      localCount: 999,
+      remoteCount: 888,
+      worktreeCount: 777,
+      changesCount: 666,
+      lastUpdated: new Date(),
+    };
+
+    const { getByText } = render(<Stats stats={largeStats} />);
+
+    expect(getByText(/999/)).toBeDefined();
+    expect(getByText(/888/)).toBeDefined();
+    expect(getByText(/777/)).toBeDefined();
+    expect(getByText(/666/)).toBeDefined();
+  });
+
+  it('should display lastUpdated when provided', () => {
+    const now = new Date();
+    const lastUpdated = new Date(now.getTime() - 5000); // 5 seconds ago
+
+    const { getByText } = render(<Stats stats={mockStats} lastUpdated={lastUpdated} />);
+
+    expect(getByText(/Updated:/)).toBeDefined();
+    expect(getByText(/ago/)).toBeDefined();
+  });
+
+  it('should not display lastUpdated when null', () => {
+    const { queryByText } = render(<Stats stats={mockStats} lastUpdated={null} />);
+
+    expect(queryByText(/Updated:/)).toBeNull();
+  });
+
+  it('should not display lastUpdated when not provided', () => {
+    const { queryByText } = render(<Stats stats={mockStats} />);
+
+    expect(queryByText(/Updated:/)).toBeNull();
+  });
+
+  it('should format relative time correctly (seconds)', () => {
+    const now = new Date();
+    const lastUpdated = new Date(now.getTime() - 30000); // 30 seconds ago
+
+    const { getByText } = render(<Stats stats={mockStats} lastUpdated={lastUpdated} />);
+
+    expect(getByText(/30s ago/)).toBeDefined();
+  });
+
+  it('should format relative time correctly (minutes)', () => {
+    const now = new Date();
+    const lastUpdated = new Date(now.getTime() - 120000); // 2 minutes ago
+
+    const { getByText } = render(<Stats stats={mockStats} lastUpdated={lastUpdated} />);
+
+    expect(getByText(/2m ago/)).toBeDefined();
+  });
+
+  it('should format relative time correctly (hours)', () => {
+    const now = new Date();
+    const lastUpdated = new Date(now.getTime() - 7200000); // 2 hours ago
+
+    const { getByText } = render(<Stats stats={mockStats} lastUpdated={lastUpdated} />);
+
+    expect(getByText(/2h ago/)).toBeDefined();
+  });
+});