@akiojin/gwt 2.0.0

package/src/cli/ui/__tests__/performance/branchList.performance.test.tsx

@@ -0,0 +1,180 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import React from 'react';
+import { BranchListScreen } from '../../components/screens/BranchListScreen.js';
+import type { BranchItem, Statistics } from '../../types.js';
+
+/**
+ * Generate mock branch items for performance testing
+ */
+function generateMockBranches(count: number): BranchItem[] {
+  const branches: BranchItem[] = [];
+  const types = ['feature', 'hotfix', 'release', 'other'] as const;
+  const branchTypes = ['main', 'develop', 'feature', 'hotfix', 'release', 'other'] as const;
+
+  for (let i = 0; i < count; i++) {
+    const type = types[i % types.length];
+    const branchType = branchTypes[i % branchTypes.length];
+    const hasWorktree = i % 3 === 0;
+
+    branches.push({
+      name: `${type}/test-branch-${i.toString().padStart(4, '0')}`,
+      branchType,
+      type: i % 10 === 0 ? 'remote' : 'local',
+      isCurrent: i === 0,
+      worktree: hasWorktree
+        ? {
+            path: `/mock/worktree/${type}-${i}`,
+            branch: `${type}/test-branch-${i.toString().padStart(4, '0')}`,
+            isAccessible: i % 5 !== 0, // Some inaccessible
+          }
+        : undefined,
+      worktreeStatus: hasWorktree ? (i % 5 !== 0 ? 'active' : 'inaccessible') : undefined,
+      hasChanges: i % 4 === 0,
+      icons: [],
+      label: `${type}/test-branch-${i.toString().padStart(4, '0')}`,
+      value: `${type}/test-branch-${i.toString().padStart(4, '0')}`,
+    });
+  }
+
+  return branches;
+}
+
+// Unused for now - keeping for potential future use
+// const mockStats: Statistics = {
+//   total: 0,
+//   local: 0,
+//   remote: 0,
+//   current: 0,
+//   feature: 0,
+//   hotfix: 0,
+//   release: 0,
+//   worktree: 0,
+// };
+
+describe('BranchListScreen Performance', () => {
+  it('should render 100+ branches within acceptable time', () => {
+    const branches = generateMockBranches(150);
+    const stats: Statistics = {
+      total: branches.length,
+      local: branches.filter((b) => b.type === 'local').length,
+      remote: branches.filter((b) => b.type === 'remote').length,
+      current: 1,
+      feature: branches.filter((b) => b.branchType === 'feature').length,
+      hotfix: branches.filter((b) => b.branchType === 'hotfix').length,
+      release: branches.filter((b) => b.branchType === 'release').length,
+      worktree: branches.filter((b) => b.worktree).length,
+    };
+
+    const startTime = performance.now();
+
+    const { unmount } = render(
+      <BranchListScreen
+        branches={branches}
+        stats={stats}
+        onSelect={() => {}}
+        onNavigate={() => {}}
+        onQuit={() => {}}
+      />
+    );
+
+    const renderTime = performance.now() - startTime;
+
+    unmount();
+
+    // Rendering should complete within 500ms (generous threshold)
+    expect(renderTime).toBeLessThan(500);
+
+    // Log performance metrics
+    console.log(`\n📊 Performance Test Results:`);
+    console.log(`   Branches: ${branches.length}`);
+    console.log(`   Render time: ${renderTime.toFixed(2)}ms`);
+    console.log(`   Average per branch: ${(renderTime / branches.length).toFixed(3)}ms`);
+  });
+
+  it('should handle re-render efficiently when stats update', () => {
+    const branches = generateMockBranches(100);
+    const stats: Statistics = {
+      total: branches.length,
+      local: branches.filter((b) => b.type === 'local').length,
+      remote: branches.filter((b) => b.type === 'remote').length,
+      current: 1,
+      feature: branches.filter((b) => b.branchType === 'feature').length,
+      hotfix: branches.filter((b) => b.branchType === 'hotfix').length,
+      release: branches.filter((b) => b.branchType === 'release').length,
+      worktree: branches.filter((b) => b.worktree).length,
+    };
+
+    const { rerender, unmount } = render(
+      <BranchListScreen
+        branches={branches}
+        stats={stats}
+        onSelect={() => {}}
+        onNavigate={() => {}}
+        onQuit={() => {}}
+        lastUpdated={new Date()}
+      />
+    );
+
+    // Simulate stats update (real-time refresh)
+    const startTime = performance.now();
+
+    rerender(
+      <BranchListScreen
+        branches={branches}
+        stats={{ ...stats, total: stats.total + 1 }}
+        onSelect={() => {}}
+        onNavigate={() => {}}
+        onQuit={() => {}}
+        lastUpdated={new Date()}
+      />
+    );
+
+    const rerenderTime = performance.now() - startTime;
+
+    unmount();
+
+    // Re-render should be very fast (< 100ms)
+    expect(rerenderTime).toBeLessThan(100);
+
+    console.log(`\n🔄 Re-render Performance:`);
+    console.log(`   Re-render time: ${rerenderTime.toFixed(2)}ms`);
+  });
+
+  it('should handle large branch list (200+ branches)', () => {
+    const branches = generateMockBranches(250);
+    const stats: Statistics = {
+      total: branches.length,
+      local: branches.filter((b) => b.type === 'local').length,
+      remote: branches.filter((b) => b.type === 'remote').length,
+      current: 1,
+      feature: branches.filter((b) => b.branchType === 'feature').length,
+      hotfix: branches.filter((b) => b.branchType === 'hotfix').length,
+      release: branches.filter((b) => b.branchType === 'release').length,
+      worktree: branches.filter((b) => b.worktree).length,
+    };
+
+    const startTime = performance.now();
+
+    const { unmount } = render(
+      <BranchListScreen
+        branches={branches}
+        stats={stats}
+        onSelect={() => {}}
+        onNavigate={() => {}}
+        onQuit={() => {}}
+      />
+    );
+
+    const renderTime = performance.now() - startTime;
+
+    unmount();
+
+    // Even with 250+ branches, should render within 1 second
+    expect(renderTime).toBeLessThan(1000);
+
+    console.log(`\n🚀 Large Branch List Performance:`);
+    console.log(`   Branches: ${branches.length}`);
+    console.log(`   Render time: ${renderTime.toFixed(2)}ms`);
+  });
+});

package/src/cli/ui/__tests__/performance/useMemoOptimization.test.tsx

@@ -0,0 +1,237 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import React, { useMemo } from 'react';
+import { Window } from 'happy-dom';
+import type { BranchInfo, WorktreeInfo } from '../../types.js';
+import { formatBranchItems } from '../../utils/branchFormatter.js';
+
+/**
+ * T082-1: useMemo optimization tests
+ * Tests that branchItems are not unnecessarily regenerated when data content is the same
+ */
+
+// Mock useGitData hook
+vi.mock('../../hooks/useGitData.js', () => ({
+  useGitData: vi.fn(),
+}));
+
+import { useGitData } from '../../hooks/useGitData.js';
+// const mockUseGitData = useGitData as ReturnType<typeof vi.fn>;
+
+// Helper function to create a stable hash of branch data
+function createBranchHash(branches: BranchInfo[]): string {
+  return branches
+    .map((b) => `${b.name}-${b.type}-${b.isCurrent}`)
+    .join(',');
+}
+
+// Helper function to create a stable hash of worktree data
+function createWorktreeHash(worktrees: WorktreeInfo[]): string {
+  return worktrees
+    .map((w) => `${w.branch}-${w.path}`)
+    .join(',');
+}
+
+// Test component that uses optimized useMemo
+function TestComponent({ branches, worktrees }: { branches: BranchInfo[]; worktrees: WorktreeInfo[] }) {
+  // Count how many times formatBranchItems is called
+  const formatCallCount = React.useRef(0);
+
+  // Optimized useMemo with content-based dependencies
+  const branchItems = useMemo(() => {
+    formatCallCount.current++;
+    const worktreeMap = new Map();
+    for (const wt of worktrees) {
+      worktreeMap.set(wt.branch, {
+        path: wt.path,
+        locked: false,
+        prunable: wt.isAccessible === false,
+        isAccessible: wt.isAccessible ?? true,
+      });
+    }
+    return formatBranchItems(branches, worktreeMap);
+  }, [
+    createBranchHash(branches),
+    createWorktreeHash(worktrees),
+  ]);
+
+  return (
+    <div data-testid="branch-count">{branchItems.length}</div>
+  );
+}
+
+describe('useMemo Optimization (T082-1)', () => {
+  beforeEach(() => {
+    const window = new Window();
+    globalThis.window = window as any;
+    globalThis.document = window.document as any;
+    vi.clearAllMocks();
+  });
+
+  it('should not regenerate branchItems when data content is the same', () => {
+    const mockBranches: BranchInfo[] = [
+      {
+        name: 'main',
+        branchType: 'main',
+        type: 'local',
+        isCurrent: true,
+      },
+      {
+        name: 'feature/test-1',
+        branchType: 'feature',
+        type: 'local',
+        isCurrent: false,
+      },
+    ];
+
+    const mockWorktrees: WorktreeInfo[] = [
+      {
+        path: '/mock/worktree/feature-test-1',
+        branch: 'feature/test-1',
+        isAccessible: true,
+      },
+    ];
+
+    const { rerender } = render(
+      <TestComponent branches={mockBranches} worktrees={mockWorktrees} />
+    );
+
+    // Create new arrays with the same content
+    const sameBranches: BranchInfo[] = [
+      {
+        name: 'main',
+        branchType: 'main',
+        type: 'local',
+        isCurrent: true,
+      },
+      {
+        name: 'feature/test-1',
+        branchType: 'feature',
+        type: 'local',
+        isCurrent: false,
+      },
+    ];
+
+    const sameWorktrees: WorktreeInfo[] = [
+      {
+        path: '/mock/worktree/feature-test-1',
+        branch: 'feature/test-1',
+        isAccessible: true,
+      },
+    ];
+
+    // Verify that arrays are different references
+    expect(sameBranches).not.toBe(mockBranches);
+    expect(sameWorktrees).not.toBe(mockWorktrees);
+
+    // Verify that content is the same
+    expect(createBranchHash(sameBranches)).toBe(createBranchHash(mockBranches));
+    expect(createWorktreeHash(sameWorktrees)).toBe(createWorktreeHash(mockWorktrees));
+
+    // Re-render with same content but different references
+    rerender(
+      <TestComponent branches={sameBranches} worktrees={sameWorktrees} />
+    );
+
+    // formatBranchItems should only be called once (not twice)
+    // This test would fail with the current implementation because useMemo
+    // depends on array references, not content
+  });
+
+  it('should regenerate branchItems when data content changes', () => {
+    const initialBranches: BranchInfo[] = [
+      {
+        name: 'main',
+        branchType: 'main',
+        type: 'local',
+        isCurrent: true,
+      },
+    ];
+
+    const { rerender } = render(
+      <TestComponent branches={initialBranches} worktrees={[]} />
+    );
+
+    // Add a new branch
+    const updatedBranches: BranchInfo[] = [
+      ...initialBranches,
+      {
+        name: 'feature/new',
+        branchType: 'feature',
+        type: 'local',
+        isCurrent: false,
+      },
+    ];
+
+    // Verify content changed
+    expect(createBranchHash(updatedBranches)).not.toBe(createBranchHash(initialBranches));
+
+    // Re-render with new content
+    rerender(
+      <TestComponent branches={updatedBranches} worktrees={[]} />
+    );
+
+    // formatBranchItems should be called twice (once for initial, once for update)
+  });
+
+  it('should handle branch order changes correctly', () => {
+    const branches1: BranchInfo[] = [
+      {
+        name: 'main',
+        branchType: 'main',
+        type: 'local',
+        isCurrent: true,
+      },
+      {
+        name: 'feature/test',
+        branchType: 'feature',
+        type: 'local',
+        isCurrent: false,
+      },
+    ];
+
+    const branches2: BranchInfo[] = [
+      {
+        name: 'feature/test',
+        branchType: 'feature',
+        type: 'local',
+        isCurrent: false,
+      },
+      {
+        name: 'main',
+        branchType: 'main',
+        type: 'local',
+        isCurrent: true,
+      },
+    ];
+
+    // Different order should produce different hashes
+    expect(createBranchHash(branches1)).not.toBe(createBranchHash(branches2));
+  });
+
+  it('should detect subtle branch property changes', () => {
+    const branches1: BranchInfo[] = [
+      {
+        name: 'main',
+        branchType: 'main',
+        type: 'local',
+        isCurrent: false,
+      },
+    ];
+
+    const branches2: BranchInfo[] = [
+      {
+        name: 'main',
+        branchType: 'main',
+        type: 'local',
+        isCurrent: true, // Changed from false to true
+      },
+    ];
+
+    // isCurrent change should be detected
+    expect(createBranchHash(branches1)).not.toBe(createBranchHash(branches2));
+  });
+});