feat(frontend): add Vitest testing infrastructure with React Testing …

frontend/package.json

@@ -18,6 +18,9 @@
     "lint:dead-code:trace": "knip --trace",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "cap:sync": "npx cap sync",
     "cap:open:android": "npx cap open android",
     "cap:run:android": "npx cap run android",
@@ -87,6 +90,9 @@
     "@rjsf/utils": "6.0.0-beta.11",
     "@rjsf/validator-ajv8": "6.0.0-beta.11",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/lodash": "^4.17.20",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
@@ -103,11 +109,14 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-unused-imports": "^4.1.4",
+    "jsdom": "^25.0.1",
     "knip": "^5.70.2",
+    "msw": "^2.6.6",
     "postcss": "^8.4.32",
     "prettier": "^3.6.1",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.9.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^2.1.6"
   }
 }

frontend/src/hooks/__tests__/useAttemptExecution.test.tsx

@@ -0,0 +1,236 @@
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, Mock } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { useAttemptExecution } from '../useAttemptExecution';
+import { attemptsApi, executionProcessesApi } from '@/lib/api';
+import type { ExecutionProcess } from 'shared/types';
+
+// Mock the API module
+vi.mock('@/lib/api', () => ({
+  attemptsApi: {
+    stop: vi.fn(),
+  },
+  executionProcessesApi: {
+    getDetails: vi.fn(),
+  },
+}));
+
+// Mock the store
+const mockSetIsStopping = vi.fn();
+vi.mock('@/stores/useTaskDetailsUiStore', () => ({
+  useTaskStopping: () => ({
+    isStopping: false,
+    setIsStopping: mockSetIsStopping,
+  }),
+}));
+
+// Mock execution processes context
+const mockContextValue = {
+  executionProcessesVisible: [] as ExecutionProcess[],
+  isAttemptRunningVisible: false,
+  isLoading: false,
+};
+
+vi.mock('@/contexts/ExecutionProcessesContext', () => ({
+  useExecutionProcessesContext: () => mockContextValue,
+}));
+
+// Helper to create wrapper with QueryClient
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  };
+};
+
+// Mock execution process data
+const createMockProcess = (
+  overrides: Partial<ExecutionProcess> = {}
+): ExecutionProcess => ({
+  id: `process-${Math.random().toString(36).slice(2)}`,
+  task_attempt_id: 'attempt-123',
+  status: 'running',
+  run_reason: 'codingagent',
+  variant: null,
+  pid: 12345,
+  prompt: 'Test prompt',
+  exit_code: null,
+  dropped: false,
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+  ...overrides,
+});
+
+describe('useAttemptExecution', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset mock context to default values
+    mockContextValue.executionProcessesVisible = [];
+    mockContextValue.isAttemptRunningVisible = false;
+    mockContextValue.isLoading = false;
+  });
+
+  describe('initial state', () => {
+    it('should return empty processes when context has none', () => {
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      expect(result.current.processes).toEqual([]);
+      expect(result.current.attemptData.processes).toEqual([]);
+      expect(result.current.isAttemptRunning).toBe(false);
+    });
+
+    it('should return loading state from context', () => {
+      mockContextValue.isLoading = true;
+
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      expect(result.current.isLoading).toBe(true);
+    });
+  });
+
+  describe('with execution processes', () => {
+    it('should return processes from context', () => {
+      const mockProcesses = [
+        createMockProcess({ id: 'process-1' }),
+        createMockProcess({ id: 'process-2' }),
+      ];
+      mockContextValue.executionProcessesVisible = mockProcesses;
+      mockContextValue.isAttemptRunningVisible = true;
+
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      expect(result.current.processes).toHaveLength(2);
+      expect(result.current.isAttemptRunning).toBe(true);
+    });
+
+    it('should fetch details for setup script processes', async () => {
+      const setupProcess = createMockProcess({
+        id: 'setup-1',
+        run_reason: 'setupscript',
+      });
+      const detailedProcess = { ...setupProcess, prompt: 'Detailed prompt' };
+
+      mockContextValue.executionProcessesVisible = [setupProcess];
+      (executionProcessesApi.getDetails as Mock).mockResolvedValue(
+        detailedProcess
+      );
+
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      // Wait for the query to complete
+      await waitFor(() => {
+        expect(executionProcessesApi.getDetails).toHaveBeenCalledWith(
+          'setup-1'
+        );
+      });
+    });
+  });
+
+  describe('stopExecution', () => {
+    it('should call attemptsApi.stop when attempt is running', async () => {
+      mockContextValue.isAttemptRunningVisible = true;
+      (attemptsApi.stop as Mock).mockResolvedValue(undefined);
+
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.stopExecution();
+      });
+
+      expect(attemptsApi.stop).toHaveBeenCalledWith('attempt-123');
+      expect(mockSetIsStopping).toHaveBeenCalledWith(true);
+      expect(mockSetIsStopping).toHaveBeenCalledWith(false);
+    });
+
+    it('should not call stop when attempt is not running', async () => {
+      mockContextValue.isAttemptRunningVisible = false;
+
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.stopExecution();
+      });
+
+      expect(attemptsApi.stop).not.toHaveBeenCalled();
+    });
+
+    it('should not call stop when attemptId is undefined', async () => {
+      mockContextValue.isAttemptRunningVisible = true;
+
+      const { result } = renderHook(
+        () => useAttemptExecution(undefined, 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await result.current.stopExecution();
+      });
+
+      expect(attemptsApi.stop).not.toHaveBeenCalled();
+    });
+
+    it('should handle stop error', async () => {
+      mockContextValue.isAttemptRunningVisible = true;
+      const error = new Error('Failed to stop');
+      (attemptsApi.stop as Mock).mockRejectedValue(error);
+
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      await expect(
+        act(async () => {
+          await result.current.stopExecution();
+        })
+      ).rejects.toThrow('Failed to stop');
+
+      // Should still set isStopping back to false on error
+      expect(mockSetIsStopping).toHaveBeenLastCalledWith(false);
+    });
+  });
+
+  describe('attemptData', () => {
+    it('should build attemptData with processes and empty details when no setup processes', () => {
+      const mockProcesses = [
+        createMockProcess({ run_reason: 'codingagent' }),
+      ];
+      mockContextValue.executionProcessesVisible = mockProcesses;
+
+      const { result } = renderHook(
+        () => useAttemptExecution('attempt-123', 'task-123'),
+        { wrapper: createWrapper() }
+      );
+
+      expect(result.current.attemptData.processes).toEqual(mockProcesses);
+      expect(result.current.attemptData.runningProcessDetails).toEqual({});
+    });
+  });
+});

frontend/src/hooks/__tests__/useFilteredTasks.test.ts

@@ -0,0 +1,103 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useFilteredTasks } from '../useFilteredTasks';
+import type { Task, TaskStatus } from 'shared/types';
+
+// Helper to create mock tasks
+const createMockTask = (overrides: Partial<Task> = {}): Task => ({
+  id: `task-${Math.random().toString(36).slice(2)}`,
+  project_id: 'project-1',
+  title: 'Test Task',
+  description: 'Test description',
+  status: 'todo',
+  parent_task_attempt: null,
+  dev_server_id: null,
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+  ...overrides,
+});
+
+describe('useFilteredTasks', () => {
+  it('should return empty array when tasks is empty', () => {
+    const { result } = renderHook(() => useFilteredTasks([], 'todo'));
+    expect(result.current).toEqual([]);
+  });
+
+  it('should filter tasks by status', () => {
+    const tasks: Task[] = [
+      createMockTask({ id: '1', status: 'todo' }),
+      createMockTask({ id: '2', status: 'inprogress' }),
+      createMockTask({ id: '3', status: 'todo' }),
+      createMockTask({ id: '4', status: 'done' }),
+    ];
+
+    const { result } = renderHook(() => useFilteredTasks(tasks, 'todo'));
+
+    expect(result.current).toHaveLength(2);
+    expect(result.current.map((t) => t.id)).toEqual(['1', '3']);
+  });
+
+  it('should filter out agent status tasks', () => {
+    const tasks: Task[] = [
+      createMockTask({ id: '1', status: 'agent' }),
+      createMockTask({ id: '2', status: 'todo' }),
+    ];
+
+    const { result } = renderHook(() => useFilteredTasks(tasks, 'agent'));
+
+    // Agent tasks should be filtered out even when filtering for 'agent' status
+    expect(result.current).toHaveLength(0);
+  });
+
+  it('should return all tasks matching the status when no agent tasks', () => {
+    const tasks: Task[] = [
+      createMockTask({ id: '1', status: 'inprogress' }),
+      createMockTask({ id: '2', status: 'inprogress' }),
+      createMockTask({ id: '3', status: 'inprogress' }),
+    ];
+
+    const { result } = renderHook(() => useFilteredTasks(tasks, 'inprogress'));
+
+    expect(result.current).toHaveLength(3);
+  });
+
+  it('should update when tasks change', () => {
+    const initialTasks: Task[] = [createMockTask({ id: '1', status: 'todo' })];
+
+    const { result, rerender } = renderHook(
+      ({ tasks, status }) => useFilteredTasks(tasks, status),
+      { initialProps: { tasks: initialTasks, status: 'todo' as TaskStatus } }
+    );
+
+    expect(result.current).toHaveLength(1);
+
+    const updatedTasks: Task[] = [
+      ...initialTasks,
+      createMockTask({ id: '2', status: 'todo' }),
+    ];
+
+    rerender({ tasks: updatedTasks, status: 'todo' });
+
+    expect(result.current).toHaveLength(2);
+  });
+
+  it('should update when status filter changes', () => {
+    const tasks: Task[] = [
+      createMockTask({ id: '1', status: 'todo' }),
+      createMockTask({ id: '2', status: 'inprogress' }),
+    ];
+
+    const { result, rerender } = renderHook(
+      ({ tasks, status }) => useFilteredTasks(tasks, status),
+      { initialProps: { tasks, status: 'todo' as TaskStatus } }
+    );
+
+    expect(result.current).toHaveLength(1);
+    expect(result.current[0].id).toBe('1');
+
+    rerender({ tasks, status: 'inprogress' });
+
+    expect(result.current).toHaveLength(1);
+    expect(result.current[0].id).toBe('2');
+  });
+});