@akiojin/gwt 2.2.0 → 2.3.0

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

@@ -1,11 +1,11 @@
 /**
  * @vitest-environment happy-dom
  */
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render } from '@testing-library/react';
-import React, { useState } from 'react';
-import { Window } from 'happy-dom';
-import { Select, type SelectItem } from '../../../components/common/Select.js';
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "@testing-library/react";
+import React, { useState } from "react";
+import { Window } from "happy-dom";
+import { Select, type SelectItem } from "../../../components/common/Select.js";
 
 /**
  * T082-2: React.memo optimization tests
@@ -16,7 +16,7 @@ import { Select, type SelectItem } from '../../../components/common/Select.js';
  * The actual functionality works correctly in production.
  */
 
-describe.skip('Select Component React.memo (T082-2)', () => {
+describe.skip("Select Component React.memo (T082-2)", () => {
   beforeEach(() => {
     const window = new Window();
     globalThis.window = window as any;
@@ -24,15 +24,15 @@ describe.skip('Select Component React.memo (T082-2)', () => {
     vi.clearAllMocks();
   });
 
-  it('should not re-render when items array reference changes but content is the same', () => {
+  it("should not re-render when items array reference changes but content is the same", () => {
     const onSelect = vi.fn();
     const renderCount = 0;
 
     // Wrapper component to track renders
     function TestWrapper() {
       const [items, setItems] = useState<SelectItem[]>([
-        { label: 'Item 1', value: '1' },
-        { label: 'Item 2', value: '2' },
+        { label: "Item 1", value: "1" },
+        { label: "Item 2", value: "2" },
       ]);
 
       const [counter, setCounter] = useState(0);
@@ -40,23 +40,20 @@ describe.skip('Select Component React.memo (T082-2)', () => {
       return (
         <div>
           <div data-testid="counter">{counter}</div>
-          <Select
-            items={items}
-            onSelect={onSelect}
-          />
+          <Select items={items} onSelect={onSelect} />
           <button
             data-testid="same-content"
             onClick={() => {
               // Create new array with same content
               setItems([
-                { label: 'Item 1', value: '1' },
-                { label: 'Item 2', value: '2' },
+                { label: "Item 1", value: "1" },
+                { label: "Item 2", value: "2" },
               ]);
             }}
           />
           <button
             data-testid="increment"
-            onClick={() => setCounter(c => c + 1)}
+            onClick={() => setCounter((c) => c + 1)}
           />
         </div>
       );
@@ -65,19 +62,19 @@ describe.skip('Select Component React.memo (T082-2)', () => {
     const { getByTestId } = render(<TestWrapper />);
 
     // Click "same-content" button to trigger re-render with same items
-    const sameContentButton = getByTestId('same-content') as HTMLButtonElement;
+    const sameContentButton = getByTestId("same-content") as HTMLButtonElement;
     sameContentButton.click();
 
     // With React.memo, Select should not re-render if items content is the same
     // Without React.memo, this test would show that Select re-renders unnecessarily
   });
 
-  it('should re-render when items content actually changes', () => {
+  it("should re-render when items content actually changes", () => {
     const onSelect = vi.fn();
 
     function TestWrapper() {
       const [items, setItems] = useState<SelectItem[]>([
-        { label: 'Item 1', value: '1' },
+        { label: "Item 1", value: "1" },
       ]);
 
       return (
@@ -86,10 +83,7 @@ describe.skip('Select Component React.memo (T082-2)', () => {
           <button
             data-testid="add-item"
             onClick={() => {
-              setItems([
-                ...items,
-                { label: 'Item 2', value: '2' },
-              ]);
+              setItems([...items, { label: "Item 2", value: "2" }]);
             }}
           />
         </div>
@@ -99,35 +93,40 @@ describe.skip('Select Component React.memo (T082-2)', () => {
     const { getByTestId, container } = render(<TestWrapper />);
 
     // Initially should have 1 item
-    expect(container.textContent).toContain('Item 1');
-    expect(container.textContent).not.toContain('Item 2');
+    expect(container.textContent).toContain("Item 1");
+    expect(container.textContent).not.toContain("Item 2");
 
     // Click "add-item" button
-    const addButton = getByTestId('add-item') as HTMLButtonElement;
+    const addButton = getByTestId("add-item") as HTMLButtonElement;
     addButton.click();
 
     // Should now have 2 items (Select should re-render)
-    expect(container.textContent).toContain('Item 1');
-    expect(container.textContent).toContain('Item 2');
+    expect(container.textContent).toContain("Item 1");
+    expect(container.textContent).toContain("Item 2");
   });
 
-  it('should not re-render when other props are the same', () => {
+  it("should not re-render when other props are the same", () => {
     const onSelect = vi.fn();
 
     function TestWrapper() {
       const [items] = useState<SelectItem[]>([
-        { label: 'Item 1', value: '1' },
-        { label: 'Item 2', value: '2' },
+        { label: "Item 1", value: "1" },
+        { label: "Item 2", value: "2" },
       ]);
       const [unrelatedState, setUnrelatedState] = useState(0);
 
       return (
         <div>
           <div data-testid="unrelated">{unrelatedState}</div>
-          <Select items={items} onSelect={onSelect} limit={10} disabled={false} />
+          <Select
+            items={items}
+            onSelect={onSelect}
+            limit={10}
+            disabled={false}
+          />
           <button
             data-testid="update-unrelated"
-            onClick={() => setUnrelatedState(s => s + 1)}
+            onClick={() => setUnrelatedState((s) => s + 1)}
           />
         </div>
       );
@@ -136,22 +135,22 @@ describe.skip('Select Component React.memo (T082-2)', () => {
     const { getByTestId } = render(<TestWrapper />);
 
     // Update unrelated state
-    const updateButton = getByTestId('update-unrelated') as HTMLButtonElement;
+    const updateButton = getByTestId("update-unrelated") as HTMLButtonElement;
     updateButton.click();
 
     // Verify unrelated state changed
-    expect(getByTestId('unrelated').textContent).toBe('1');
+    expect(getByTestId("unrelated").textContent).toBe("1");
 
     // With React.memo, Select should not re-render because its props haven't changed
   });
 
-  it('should re-render when limit prop changes', () => {
+  it("should re-render when limit prop changes", () => {
     const onSelect = vi.fn();
     const items: SelectItem[] = [
-      { label: 'Item 1', value: '1' },
-      { label: 'Item 2', value: '2' },
-      { label: 'Item 3', value: '3' },
-      { label: 'Item 4', value: '4' },
+      { label: "Item 1", value: "1" },
+      { label: "Item 2", value: "2" },
+      { label: "Item 3", value: "3" },
+      { label: "Item 4", value: "4" },
     ];
 
     function TestWrapper() {
@@ -160,10 +159,7 @@ describe.skip('Select Component React.memo (T082-2)', () => {
       return (
         <div>
           <Select items={items} onSelect={onSelect} limit={limit} />
-          <button
-            data-testid="change-limit"
-            onClick={() => setLimit(3)}
-          />
+          <button data-testid="change-limit" onClick={() => setLimit(3)} />
         </div>
       );
     }
@@ -172,25 +168,23 @@ describe.skip('Select Component React.memo (T082-2)', () => {
 
     // Initially should show 2 items (limit=2)
     const initialText = container.textContent;
-    expect(initialText).toContain('Item 1');
-    expect(initialText).toContain('Item 2');
+    expect(initialText).toContain("Item 1");
+    expect(initialText).toContain("Item 2");
 
     // Change limit
-    const changeLimitButton = getByTestId('change-limit') as HTMLButtonElement;
+    const changeLimitButton = getByTestId("change-limit") as HTMLButtonElement;
     changeLimitButton.click();
 
     // Should now show 3 items (Select should re-render)
     const updatedText = container.textContent;
-    expect(updatedText).toContain('Item 1');
-    expect(updatedText).toContain('Item 2');
-    expect(updatedText).toContain('Item 3');
+    expect(updatedText).toContain("Item 1");
+    expect(updatedText).toContain("Item 2");
+    expect(updatedText).toContain("Item 3");
   });
 
-  it('should re-render when disabled prop changes', () => {
+  it("should re-render when disabled prop changes", () => {
     const onSelect = vi.fn();
-    const items: SelectItem[] = [
-      { label: 'Item 1', value: '1' },
-    ];
+    const items: SelectItem[] = [{ label: "Item 1", value: "1" }];
 
     function TestWrapper() {
       const [disabled, setDisabled] = useState(false);
@@ -200,7 +194,7 @@ describe.skip('Select Component React.memo (T082-2)', () => {
           <Select items={items} onSelect={onSelect} disabled={disabled} />
           <button
             data-testid="toggle-disabled"
-            onClick={() => setDisabled(d => !d)}
+            onClick={() => setDisabled((d) => !d)}
           />
         </div>
       );
@@ -209,24 +203,24 @@ describe.skip('Select Component React.memo (T082-2)', () => {
     const { getByTestId } = render(<TestWrapper />);
 
     // Toggle disabled
-    const toggleButton = getByTestId('toggle-disabled') as HTMLButtonElement;
+    const toggleButton = getByTestId("toggle-disabled") as HTMLButtonElement;
     toggleButton.click();
 
     // Select should re-render with new disabled prop
   });
 
-  it('should use custom comparison for items array', () => {
+  it("should use custom comparison for items array", () => {
     const onSelect = vi.fn();
 
     // Two arrays with same content but different references
     const items1: SelectItem[] = [
-      { label: 'Item 1', value: '1' },
-      { label: 'Item 2', value: '2' },
+      { label: "Item 1", value: "1" },
+      { label: "Item 2", value: "2" },
     ];
 
     const items2: SelectItem[] = [
-      { label: 'Item 1', value: '1' },
-      { label: 'Item 2', value: '2' },
+      { label: "Item 1", value: "1" },
+      { label: "Item 2", value: "2" },
     ];
 
     // Verify they're different references
@@ -245,10 +239,7 @@ describe.skip('Select Component React.memo (T082-2)', () => {
       return (
         <div>
           <Select items={items} onSelect={onSelect} />
-          <button
-            data-testid="swap-items"
-            onClick={() => setItems(items2)}
-          />
+          <button data-testid="swap-items" onClick={() => setItems(items2)} />
         </div>
       );
     }
@@ -256,7 +247,7 @@ describe.skip('Select Component React.memo (T082-2)', () => {
     const { getByTestId } = render(<TestWrapper />);
 
     // Swap to items2 (same content, different reference)
-    const swapButton = getByTestId('swap-items') as HTMLButtonElement;
+    const swapButton = getByTestId("swap-items") as HTMLButtonElement;
     swapButton.click();
 
     // With custom comparison in React.memo, Select should not re-render

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

@@ -2,10 +2,10 @@
  * @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';
+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));
@@ -15,37 +15,41 @@ interface TestItem {
   value: string;
 }
 
-describe('Select', () => {
+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' },
+    { 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', () => {
+  describe("Rendering", () => {
+    it("should render all items", () => {
       const onSelect = vi.fn();
-      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} />);
+      const { lastFrame } = render(
+        <Select items={mockItems} onSelect={onSelect} />,
+      );
 
-      expect(lastFrame()).toContain('Option 1');
-      expect(lastFrame()).toContain('Option 2');
-      expect(lastFrame()).toContain('Option 3');
+      expect(lastFrame()).toContain("Option 1");
+      expect(lastFrame()).toContain("Option 2");
+      expect(lastFrame()).toContain("Option 3");
     });
 
-    it('should highlight first item by default', () => {
+    it("should highlight first item by default", () => {
       const onSelect = vi.fn();
-      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} />);
+      const { lastFrame } = render(
+        <Select items={mockItems} onSelect={onSelect} />,
+      );
 
       // Cyan color code indicates selected item
-      expect(lastFrame()).toContain('›');
+      expect(lastFrame()).toContain("›");
     });
 
-    it('should highlight item at initialIndex', () => {
+    it("should highlight item at initialIndex", () => {
       const onSelect = vi.fn();
       const { lastFrame } = render(
-        <Select items={mockItems} onSelect={onSelect} initialIndex={2} />
+        <Select items={mockItems} onSelect={onSelect} initialIndex={2} />,
       );
 
       const output = lastFrame();
@@ -54,121 +58,135 @@ describe('Select', () => {
       expect(selectedCount).toBe(1);
     });
 
-    it('should render with empty items array', () => {
+    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', () => {
+    it("should respect limit prop for scrolling", () => {
       const onSelect = vi.fn();
-      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} limit={3} />);
+      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');
+      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');
+      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', () => {
+  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} />);
+      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');
+      expect(lastFrame()).toContain("Option 1");
     });
 
-    it('should start at first item by default', () => {
+    it("should start at first item by default", () => {
       const onSelect = vi.fn();
-      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} />);
+      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');
+      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', () => {
+    it("should respect initialIndex without looping", () => {
       const onSelect = vi.fn();
       const { lastFrame } = render(
-        <Select items={mockItems} onSelect={onSelect} initialIndex={4} />
+        <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('›');
+      expect(output).toContain("Option 5");
+      expect(output).toContain("›");
     });
 
-    it('should handle initialIndex at 0', () => {
+    it("should handle initialIndex at 0", () => {
       const onSelect = vi.fn();
       const { lastFrame } = render(
-        <Select items={mockItems} onSelect={onSelect} initialIndex={0} />
+        <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');
+      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', () => {
+  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} />);
+      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();
+      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)', () => {
+    it("should support vim-style navigation keys (j/k)", () => {
       const onSelect = vi.fn();
-      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+      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();
+      expect(() => stdin.write("j")).not.toThrow();
+      expect(() => stdin.write("k")).not.toThrow();
     });
 
-    it('should support arrow keys', () => {
+    it("should support arrow keys", () => {
       const onSelect = vi.fn();
-      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+      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
+      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', () => {
+  describe("Selection", () => {
+    it("should call onSelect when Enter is pressed", () => {
       const onSelect = vi.fn();
-      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+      const { stdin } = render(
+        <Select items={mockItems} onSelect={onSelect} />,
+      );
 
-      stdin.write('\r'); // Enter key
+      stdin.write("\r"); // Enter key
 
       // Should be called at least once
       expect(onSelect).toHaveBeenCalled();
     });
 
-    it('should pass selected item to onSelect callback', () => {
+    it("should pass selected item to onSelect callback", () => {
       const onSelect = vi.fn();
       render(<Select items={mockItems} onSelect={onSelect} initialIndex={2} />);
 
@@ -177,67 +195,79 @@ describe('Select', () => {
       expect(onSelect).toBeInstanceOf(Function);
     });
 
-    it('should handle Enter key without errors', () => {
+    it("should handle Enter key without errors", () => {
       const onSelect = vi.fn();
-      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+      const { stdin } = render(
+        <Select items={mockItems} onSelect={onSelect} />,
+      );
 
-      expect(() => stdin.write('\r')).not.toThrow();
+      expect(() => stdin.write("\r")).not.toThrow();
     });
   });
 
-  describe('Scrolling with limit', () => {
-    it('should implement offset-based scrolling logic', () => {
+  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 { 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');
+      expect(output).toContain("Option 1");
+      expect(output).toContain("Option 2");
+      expect(output).toContain("Option 3");
     });
 
-    it('should handle limit smaller than items length', () => {
+    it("should handle limit smaller than items length", () => {
       const onSelect = vi.fn();
-      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} limit={2} />);
+      const { lastFrame } = render(
+        <Select items={mockItems} onSelect={onSelect} limit={2} />,
+      );
 
       const output = lastFrame();
-      const lines = output.split('\n').filter((l) => l.trim());
+      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', () => {
+    it("should handle limit larger than items length", () => {
       const onSelect = vi.fn();
-      const { lastFrame } = render(<Select items={mockItems} onSelect={onSelect} limit={100} />);
+      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');
+      expect(output).toContain("Option 1");
+      expect(output).toContain("Option 5");
     });
   });
 
-  describe('Key propagation (Critical Feature)', () => {
-    it('should not interfere with other keys like q', () => {
+  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} />);
+      const { stdin } = render(
+        <Select items={mockItems} onSelect={onSelect} />,
+      );
 
       // Press q key (should be ignored by Select and propagate to parent)
-      stdin.write('q');
+      stdin.write("q");
 
       // onSelect should not be called
       expect(onSelect).not.toHaveBeenCalled();
     });
 
-    it('should not interfere with other keys like m, n, c', () => {
+    it("should not interfere with other keys like m, n, c", () => {
       const onSelect = vi.fn();
-      const { stdin } = render(<Select items={mockItems} onSelect={onSelect} />);
+      const { stdin } = render(
+        <Select items={mockItems} onSelect={onSelect} />,
+      );
 
-      stdin.write('m');
-      stdin.write('n');
-      stdin.write('c');
+      stdin.write("m");
+      stdin.write("n");
+      stdin.write("c");
 
       // None of these should trigger selection
       expect(onSelect).not.toHaveBeenCalled();