@a5c-ai/babysitter-observer-dashboard 5.0.1-staging.05ee168a

package/src/hooks/__tests__/use-polling.test.ts

@@ -0,0 +1,274 @@
+import { renderHook, act } from '@testing-library/react';
+import { usePolling } from '../use-polling';
+
+/**
+ * Create a Response-like object that resilientFetch can consume.
+ * Uses real Response constructor for correct headers/ok/status behavior,
+ * but wraps json() to resolve immediately (avoids fake-timer issues with
+ * the real ReadableStream-based body parsing).
+ */
+function makeResponse(body: string, init: ResponseInit): Response {
+  const res = new Response(body, init);
+  // Override json() so it resolves on the next microtask tick rather than
+  // going through the ReadableStream path that can stall under fake timers.
+  const parsed = JSON.parse(body);
+  Object.defineProperty(res, 'json', {
+    value: () => Promise.resolve(parsed),
+  });
+  return res;
+}
+
+function mockFetchSuccess(data: unknown) {
+  return vi.fn().mockImplementation(() =>
+    Promise.resolve(
+      makeResponse(JSON.stringify(data), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })
+    )
+  );
+}
+
+function mockFetchFailure(status: number) {
+  return vi.fn().mockImplementation(() =>
+    Promise.resolve(
+      new Response(`HTTP ${status}`, {
+        status,
+        headers: { 'Content-Type': 'text/plain' },
+      })
+    )
+  );
+}
+
+describe('usePolling', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal('fetch', mockFetchSuccess({ items: [1, 2, 3] }));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('fetches data immediately on mount', async () => {
+    const { result } = renderHook(() =>
+      usePolling<{ items: number[] }>('/api/data')
+    );
+
+    expect(result.current.loading).toBe(true);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.data).toEqual({ items: [1, 2, 3] });
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+    expect(fetch).toHaveBeenCalledWith('/api/data', expect.anything());
+  });
+
+  it('polls at the specified interval', async () => {
+    renderHook(() =>
+      usePolling('/api/data', { interval: 5000 })
+    );
+
+    // Initial fetch
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    // After one interval
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(5000);
+    });
+    expect(fetch).toHaveBeenCalledTimes(2);
+
+    // After another interval
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(5000);
+    });
+    expect(fetch).toHaveBeenCalledTimes(3);
+  });
+
+  it('uses default interval of 2000ms', async () => {
+    renderHook(() => usePolling('/api/data'));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2000);
+    });
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not poll when enabled is false', async () => {
+    const { result } = renderHook(() =>
+      usePolling('/api/data', { enabled: false })
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10000);
+    });
+
+    expect(fetch).not.toHaveBeenCalled();
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('does not fetch when url is empty', async () => {
+    const { result } = renderHook(() => usePolling(''));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10000);
+    });
+
+    expect(fetch).not.toHaveBeenCalled();
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('handles fetch error', async () => {
+    // Use 422 (non-retryable 4xx) to avoid retries — resilientFetch retries 5xx and 404
+    vi.stubGlobal('fetch', mockFetchFailure(422));
+
+    const { result } = renderHook(() => usePolling('/api/data'));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.error).toBe('HTTP 422');
+    expect(result.current.loading).toBe(false);
+    expect(result.current.data).toBeNull();
+  });
+
+  it('handles network error', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('Network error')));
+
+    // Use a long interval so the poll timer doesn't abort in-progress retries
+    // resilientFetch retries network errors: attempt 0 + sleep(1s) + attempt 1 + sleep(2s) + attempt 2 = ~3s
+    const { result } = renderHook(() => usePolling('/api/data', { interval: 30000 }));
+
+    // Advance enough time for all retries to complete
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(4000);
+    });
+
+    expect(result.current.error).toBe('Network error');
+    expect(result.current.loading).toBe(false);
+  });
+
+  it('clears error on successful fetch after error', async () => {
+    // Use a 422 error (non-retryable 4xx) so the first call fails immediately,
+    // then subsequent calls succeed
+    const fetchMock = vi.fn()
+      .mockResolvedValueOnce(
+        new Response('Bad request', {
+          status: 422,
+          headers: { 'Content-Type': 'text/plain' },
+        })
+      )
+      .mockImplementation(() =>
+        Promise.resolve(
+          makeResponse(JSON.stringify({ ok: true }), {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          })
+        )
+      );
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { result } = renderHook(() =>
+      usePolling('/api/data', { interval: 1000 })
+    );
+
+    // First fetch fails (422, no retry)
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(result.current.error).toBe('Bad request');
+
+    // Second fetch succeeds on next poll
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+    expect(result.current.error).toBeNull();
+    expect(result.current.data).toEqual({ ok: true });
+  });
+
+  it('provides a manual refresh function', async () => {
+    const { result } = renderHook(() => usePolling('/api/data'));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      result.current.refresh();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it('cleans up interval on unmount', async () => {
+    const { unmount } = renderHook(() =>
+      usePolling('/api/data', { interval: 1000 })
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(5000);
+    });
+    // Should not have been called again after unmount (only the initial fetch)
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('restarts polling when url changes', async () => {
+    const { rerender } = renderHook(
+      ({ url }) => usePolling(url, { interval: 1000 }),
+      { initialProps: { url: '/api/data1' } }
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenLastCalledWith('/api/data1', expect.anything());
+
+    rerender({ url: '/api/data2' });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenLastCalledWith('/api/data2', expect.anything());
+  });
+
+  it('restarts polling when enabled toggles', async () => {
+    const { rerender, result: _result } = renderHook(
+      ({ enabled }) => usePolling('/api/data', { enabled, interval: 1000 }),
+      { initialProps: { enabled: false } }
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(5000);
+    });
+    expect(fetch).not.toHaveBeenCalled();
+
+    // Enable polling
+    rerender({ enabled: true });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/__tests__/use-project-runs.test.ts

@@ -0,0 +1,163 @@
+import { renderHook, act } from '@testing-library/react';
+import { createMockRun } from '@/test/fixtures';
+import { useProjectRuns } from '../use-project-runs';
+
+type MockEventSourceInstance = {
+  onopen: ((event: Event) => void) | null;
+  onmessage: ((event: MessageEvent) => void) | null;
+  onerror: ((event: Event) => void) | null;
+  close: ReturnType<typeof vi.fn>;
+  readyState: number;
+  url: string;
+};
+
+let mockEventSourceInstances: MockEventSourceInstance[] = [];
+
+class MockEventSource {
+  static CONNECTING = 0;
+  static OPEN = 1;
+  static CLOSED = 2;
+
+  onopen: ((event: Event) => void) | null = null;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  onerror: ((event: Event) => void) | null = null;
+  close = vi.fn();
+  readyState = MockEventSource.OPEN;
+  url: string;
+
+  constructor(url: string) {
+    this.url = url;
+    mockEventSourceInstances.push(this);
+  }
+}
+
+const mockRuns = [
+  createMockRun({ runId: 'run-1', projectName: 'my-project' }),
+  createMockRun({ runId: 'run-2', projectName: 'my-project' }),
+];
+
+describe('useProjectRuns', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockEventSourceInstances = [];
+    vi.stubGlobal('EventSource', MockEventSource);
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockImplementation(() =>
+        Promise.resolve(
+          new Response(
+            JSON.stringify({
+              runs: mockRuns,
+              totalCount: 2,
+              project: 'my-project',
+            }),
+            { status: 200, headers: { 'Content-Type': 'application/json' } }
+          )
+        )
+      )
+    );
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('fetches project runs and returns data', async () => {
+    const { result } = renderHook(() => useProjectRuns('my-project'));
+
+    expect(result.current.loading).toBe(true);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.runs).toHaveLength(2);
+    expect(result.current.totalCount).toBe(2);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('constructs URL with correct query params', async () => {
+    renderHook(() =>
+      useProjectRuns('my-project', {
+        limit: 20,
+        offset: 10,
+        search: 'test',
+        status: 'completed',
+      })
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    const calledUrl = (fetch as ReturnType<typeof vi.fn>).mock.calls[0][0] as string;
+    expect(calledUrl).toContain('project=my-project');
+    expect(calledUrl).toContain('limit=20');
+    expect(calledUrl).toContain('offset=10');
+    expect(calledUrl).toContain('search=test');
+    expect(calledUrl).toContain('status=completed');
+  });
+
+  it('uses default limit and offset', async () => {
+    renderHook(() => useProjectRuns('my-project'));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    const calledUrl = (fetch as ReturnType<typeof vi.fn>).mock.calls[0][0] as string;
+    expect(calledUrl).toContain('limit=10');
+    expect(calledUrl).toContain('offset=0');
+  });
+
+  it('returns empty runs when enabled is false', async () => {
+    const { result } = renderHook(() =>
+      useProjectRuns('my-project', { enabled: false })
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.runs).toEqual([]);
+    expect(result.current.totalCount).toBe(0);
+  });
+
+  it('handles fetch error', async () => {
+    // Use a 422 error to avoid retries from resilientFetch (404 and 5xx are retryable)
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockImplementation(() =>
+        Promise.resolve(
+          new Response('HTTP 422', { status: 422 })
+        )
+      )
+    );
+
+    const { result } = renderHook(() => useProjectRuns('my-project'));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.error).toBe('HTTP 422');
+    expect(result.current.runs).toEqual([]);
+  });
+
+  it('provides a refresh function', async () => {
+    const { result } = renderHook(() => useProjectRuns('my-project'));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      result.current.refresh();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+});

package/src/hooks/__tests__/use-projects.test.ts

@@ -0,0 +1,248 @@
+import { renderHook, act } from '@testing-library/react';
+import { createMockProjectSummary } from '@/test/fixtures';
+import { useProjects } from '../use-projects';
+
+type MockEventSourceInstance = {
+  onopen: ((event: Event) => void) | null;
+  onmessage: ((event: MessageEvent) => void) | null;
+  onerror: ((event: Event) => void) | null;
+  close: ReturnType<typeof vi.fn>;
+  readyState: number;
+  url: string;
+};
+
+let mockEventSourceInstances: MockEventSourceInstance[] = [];
+
+class MockEventSource {
+  static CONNECTING = 0;
+  static OPEN = 1;
+  static CLOSED = 2;
+
+  onopen: ((event: Event) => void) | null = null;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  onerror: ((event: Event) => void) | null = null;
+  close = vi.fn();
+  readyState = MockEventSource.OPEN;
+  url: string;
+
+  constructor(url: string) {
+    this.url = url;
+    mockEventSourceInstances.push(this);
+  }
+}
+
+const mockProjects = [
+  createMockProjectSummary({ projectName: 'project-a', totalRuns: 5 }),
+  createMockProjectSummary({ projectName: 'project-b', totalRuns: 3 }),
+];
+
+describe('useProjects', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockEventSourceInstances = [];
+    vi.stubGlobal('EventSource', MockEventSource);
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response(JSON.stringify({ projects: mockProjects }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        })
+      )
+    );
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('fetches project list and returns data', async () => {
+    const { result } = renderHook(() => useProjects());
+
+    expect(result.current.loading).toBe(true);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.projects).toHaveLength(2);
+    expect(result.current.projects[0].projectName).toBe('project-a');
+    expect(result.current.projects[1].projectName).toBe('project-b');
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('calls /api/runs?mode=projects endpoint', async () => {
+    renderHook(() => useProjects());
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(fetch).toHaveBeenCalledWith('/api/runs?mode=projects', expect.anything());
+  });
+
+  it('uses custom interval', async () => {
+    renderHook(() => useProjects(10000));
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10000);
+    });
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  it('returns empty projects array when data is null', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response(JSON.stringify(null), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        })
+      )
+    );
+
+    const { result } = renderHook(() => useProjects());
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.projects).toEqual([]);
+  });
+
+  it('handles fetch error', async () => {
+    // Use 422 (non-retryable 4xx) to avoid retries from resilientFetch
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response('HTTP 422', { status: 422 })
+      )
+    );
+
+    const { result } = renderHook(() => useProjects());
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    expect(result.current.error).toBe('HTTP 422');
+    expect(result.current.projects).toEqual([]);
+  });
+
+  it('does not refetch on disconnect or error SSE events', async () => {
+    renderHook(() => useProjects());
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    const callsAfterInit = (fetch as ReturnType<typeof vi.fn>).mock.calls.length;
+
+    // Simulate disconnect event via EventSource
+    const instance = mockEventSourceInstances[0];
+    if (instance?.onmessage) {
+      act(() => {
+        instance.onmessage!(
+          new MessageEvent('message', {
+            data: JSON.stringify({ type: 'disconnect' }),
+          })
+        );
+      });
+    }
+
+    // Wait past debounce window
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(200);
+    });
+
+    // No additional fetch should have been triggered by disconnect
+    expect((fetch as ReturnType<typeof vi.fn>).mock.calls.length).toBe(callsAfterInit);
+
+    // Simulate error event
+    if (instance?.onmessage) {
+      act(() => {
+        instance.onmessage!(
+          new MessageEvent('message', {
+            data: JSON.stringify({ type: 'error', error: 'test' }),
+          })
+        );
+      });
+    }
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(200);
+    });
+
+    // Still no additional fetch
+    expect((fetch as ReturnType<typeof vi.fn>).mock.calls.length).toBe(callsAfterInit);
+  });
+
+  it('refetches on update and new-run SSE events', async () => {
+    renderHook(() => useProjects());
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    const callsAfterInit = (fetch as ReturnType<typeof vi.fn>).mock.calls.length;
+
+    const instance = mockEventSourceInstances[0];
+    if (instance?.onmessage) {
+      // Simulate update event
+      act(() => {
+        instance.onmessage!(
+          new MessageEvent('message', {
+            data: JSON.stringify({ type: 'update', runId: 'run-1' }),
+          })
+        );
+      });
+    }
+
+    // Wait past debounce window (1500ms)
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1500);
+    });
+
+    const callsAfterFirstEvent = (fetch as ReturnType<typeof vi.fn>).mock.calls.length;
+    // Should have at least one additional fetch after the SSE event
+    expect(callsAfterFirstEvent).toBeGreaterThan(callsAfterInit);
+
+    if (instance?.onmessage) {
+      // Simulate new-run event
+      act(() => {
+        instance.onmessage!(
+          new MessageEvent('message', {
+            data: JSON.stringify({ type: 'new-run', runId: 'run-2' }),
+          })
+        );
+      });
+    }
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1500);
+    });
+
+    // Should have at least one more fetch after the second SSE event
+    expect((fetch as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThan(callsAfterFirstEvent);
+  });
+
+  it('provides a refresh function', async () => {
+    const { result } = renderHook(() => useProjects());
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      result.current.refresh();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+});