@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/hooks/__tests__/use-batched-updates.test.ts

@@ -0,0 +1,315 @@
+import { renderHook, act } from "@testing-library/react";
+import { useBatchedUpdates, BURST_THRESHOLD, BURST_WINDOW_MS, CATCHUP_HOLD_MS } from "../use-batched-updates";
+
+// ---------------------------------------------------------------------------
+// Mock the SSE event stream subscribe function
+// ---------------------------------------------------------------------------
+
+type EventCallback = (event: { type: string; runId?: string }) => void;
+let subscriberCallbacks: Set<EventCallback> = new Set();
+
+vi.mock("../use-event-stream", () => ({
+  subscribe: (callback: EventCallback) => {
+    subscriberCallbacks.add(callback);
+    return () => {
+      subscriberCallbacks.delete(callback);
+    };
+  },
+}));
+
+function emitSSE(event: { type: string; runId?: string }) {
+  subscriberCallbacks.forEach((cb) => cb(event));
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("useBatchedUpdates", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    subscriberCallbacks = new Set();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("starts inactive with 0 buffered count", () => {
+    const { result } = renderHook(() => useBatchedUpdates());
+    expect(result.current.active).toBe(false);
+    expect(result.current.bufferedCount).toBe(0);
+  });
+
+  it("does not activate for a small number of events", () => {
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+      })
+    );
+
+    // Send fewer events than the threshold
+    for (let i = 0; i < BURST_THRESHOLD - 1; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(false);
+  });
+
+  it("activates catch-up mode when burst threshold is reached", () => {
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+      })
+    );
+
+    // Send enough events to trigger burst detection
+    for (let i = 0; i < BURST_THRESHOLD; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(true);
+    expect(result.current.bufferedCount).toBe(BURST_THRESHOLD);
+  });
+
+  it("increments bufferedCount for events received during catch-up mode", () => {
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+      })
+    );
+
+    // Trigger catch-up mode
+    for (let i = 0; i < BURST_THRESHOLD; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(true);
+
+    // Send more events
+    act(() => {
+      emitSSE({ type: "update", runId: "extra-1" });
+    });
+    act(() => {
+      emitSSE({ type: "update", runId: "extra-2" });
+    });
+
+    expect(result.current.bufferedCount).toBe(BURST_THRESHOLD + 2);
+  });
+
+  it("ignores non-data events (connected, disconnect, error)", () => {
+    const { result } = renderHook(() => useBatchedUpdates());
+
+    act(() => {
+      emitSSE({ type: "connected" });
+      emitSSE({ type: "disconnect" });
+      emitSSE({ type: "error" });
+    });
+
+    expect(result.current.active).toBe(false);
+    expect(result.current.bufferedCount).toBe(0);
+  });
+
+  it("respects sseFilter — does not count filtered-out events", () => {
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+      })
+    );
+
+    // Send events that don't match the filter
+    for (let i = 0; i < BURST_THRESHOLD + 5; i++) {
+      act(() => {
+        emitSSE({ type: "heartbeat", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(false);
+  });
+
+  it("auto-exits catch-up mode after hold period with no new events", async () => {
+    const onFlush = vi.fn();
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+        onFlush,
+      })
+    );
+
+    // Trigger catch-up mode
+    for (let i = 0; i < BURST_THRESHOLD; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(true);
+
+    // Wait for the hold period to expire
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(CATCHUP_HOLD_MS + 100);
+    });
+
+    expect(result.current.active).toBe(false);
+    expect(result.current.bufferedCount).toBe(0);
+    expect(onFlush).toHaveBeenCalledTimes(1);
+  });
+
+  it("resets the hold timer when new events arrive during catch-up", async () => {
+    const onFlush = vi.fn();
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+        onFlush,
+      })
+    );
+
+    // Trigger catch-up mode
+    for (let i = 0; i < BURST_THRESHOLD; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(true);
+
+    // Wait almost to the hold timeout
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(CATCHUP_HOLD_MS - 500);
+    });
+
+    // Send another event — should reset the timer
+    act(() => {
+      emitSSE({ type: "update", runId: "late-event" });
+    });
+
+    // The original timeout would have expired by now, but the timer was reset
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+    expect(result.current.active).toBe(true);
+    expect(onFlush).not.toHaveBeenCalled();
+
+    // Now wait for the full hold period from the last event
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(CATCHUP_HOLD_MS);
+    });
+    expect(result.current.active).toBe(false);
+    expect(onFlush).toHaveBeenCalledTimes(1);
+  });
+
+  it("flush() immediately exits catch-up mode and calls onFlush", () => {
+    const onFlush = vi.fn();
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+        onFlush,
+      })
+    );
+
+    // Trigger catch-up mode
+    for (let i = 0; i < BURST_THRESHOLD; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(true);
+
+    // Flush
+    act(() => {
+      result.current.flush();
+    });
+
+    expect(result.current.active).toBe(false);
+    expect(result.current.bufferedCount).toBe(0);
+    expect(onFlush).toHaveBeenCalledTimes(1);
+  });
+
+  it("flush() is a no-op when not in catch-up mode", () => {
+    const onFlush = vi.fn();
+    const { result } = renderHook(() =>
+      useBatchedUpdates({ onFlush })
+    );
+
+    act(() => {
+      result.current.flush();
+    });
+
+    expect(onFlush).not.toHaveBeenCalled();
+  });
+
+  it("does nothing when disabled", () => {
+    const { result } = renderHook(() =>
+      useBatchedUpdates({ enabled: false })
+    );
+
+    // Send many events
+    for (let i = 0; i < BURST_THRESHOLD + 5; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    expect(result.current.active).toBe(false);
+  });
+
+  it("cleans up on unmount", () => {
+    const { unmount } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+      })
+    );
+
+    // Verify we have a subscriber
+    expect(subscriberCallbacks.size).toBeGreaterThan(0);
+
+    unmount();
+
+    // Subscriber should be removed
+    // Note: the exact count depends on how many hooks subscribe,
+    // but after unmount the hook's subscriber should be gone
+    const _countAfter = subscriberCallbacks.size;
+    // Verify no errors when emitting after unmount
+    act(() => {
+      emitSSE({ type: "update" });
+    });
+  });
+
+  it("prunes old timestamps outside burst window", async () => {
+    const { result } = renderHook(() =>
+      useBatchedUpdates({
+        sseFilter: (e) => e.type === "update",
+      })
+    );
+
+    // Send some events
+    for (let i = 0; i < BURST_THRESHOLD - 2; i++) {
+      act(() => {
+        emitSSE({ type: "update", runId: `run-${i}` });
+      });
+    }
+
+    // Wait longer than the burst window so old timestamps expire
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(BURST_WINDOW_MS + 100);
+    });
+
+    // Send a few more events — not enough to reach threshold from scratch
+    act(() => {
+      emitSSE({ type: "update", runId: "late-1" });
+    });
+    act(() => {
+      emitSSE({ type: "update", runId: "late-2" });
+    });
+
+    // Should NOT be in catch-up mode because old events were pruned
+    expect(result.current.active).toBe(false);
+  });
+});

package/src/hooks/__tests__/use-event-stream.test.ts

@@ -0,0 +1,243 @@
+import { renderHook, act } from '@testing-library/react';
+import { useEventStream, subscribe } from '../use-event-stream';
+
+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);
+    // Simulate async open
+    setTimeout(() => {
+      if (this.onopen) {
+        this.onopen(new Event('open'));
+      }
+    }, 0);
+  }
+}
+
+// We need to track unsubscribe functions to clean up between tests
+let activeUnsubscribers: Array<() => void> = [];
+
+describe('use-event-stream', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockEventSourceInstances = [];
+    vi.stubGlobal('EventSource', MockEventSource);
+  });
+
+  afterEach(() => {
+    // Unsubscribe all active subscribers to reset module-level state
+    for (const unsub of activeUnsubscribers) {
+      unsub();
+    }
+    activeUnsubscribers = [];
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  describe('subscribe', () => {
+    it('creates a shared EventSource on first subscriber', () => {
+      const callback = vi.fn();
+      const unsubscribe = subscribe(callback);
+      activeUnsubscribers.push(unsubscribe);
+
+      expect(mockEventSourceInstances).toHaveLength(1);
+      expect(mockEventSourceInstances[0].url).toBe('/api/stream');
+    });
+
+    it('reuses the same EventSource for multiple subscribers', () => {
+      const cb1 = vi.fn();
+      const cb2 = vi.fn();
+
+      const unsub1 = subscribe(cb1);
+      const unsub2 = subscribe(cb2);
+      activeUnsubscribers.push(unsub1, unsub2);
+
+      expect(mockEventSourceInstances).toHaveLength(1);
+    });
+
+    it('delivers messages to all subscribers', () => {
+      const cb1 = vi.fn();
+      const cb2 = vi.fn();
+
+      const unsub1 = subscribe(cb1);
+      const unsub2 = subscribe(cb2);
+      activeUnsubscribers.push(unsub1, unsub2);
+
+      const instance = mockEventSourceInstances[0];
+      const messageData = { type: 'run_updated', runId: 'run-1' };
+
+      instance.onmessage!(
+        new MessageEvent('message', { data: JSON.stringify(messageData) })
+      );
+
+      expect(cb1).toHaveBeenCalledWith(messageData);
+      expect(cb2).toHaveBeenCalledWith(messageData);
+    });
+
+    it('closes EventSource when last subscriber unsubscribes', () => {
+      const cb1 = vi.fn();
+      const cb2 = vi.fn();
+
+      const unsub1 = subscribe(cb1);
+      const unsub2 = subscribe(cb2);
+
+      unsub1();
+      // Still one subscriber, should not close
+      expect(mockEventSourceInstances[0].close).not.toHaveBeenCalled();
+
+      unsub2();
+      // Last subscriber gone, should close
+      expect(mockEventSourceInstances[0].close).toHaveBeenCalled();
+      // Do not add to activeUnsubscribers since we already cleaned up
+    });
+
+    it('notifies subscribers with disconnect event on SSE error', () => {
+      const callback = vi.fn();
+      const unsub = subscribe(callback);
+      activeUnsubscribers.push(unsub);
+
+      const instance = mockEventSourceInstances[0];
+
+      instance.onerror!(new Event('error'));
+
+      expect(callback).toHaveBeenCalledWith({ type: 'disconnect' });
+    });
+
+    it('attempts reconnect with backoff on error', async () => {
+      const callback = vi.fn();
+      const unsub = subscribe(callback);
+      activeUnsubscribers.push(unsub);
+
+      const instance = mockEventSourceInstances[0];
+
+      // Trigger error
+      instance.onerror!(new Event('error'));
+
+      expect(mockEventSourceInstances).toHaveLength(1); // only original
+
+      // After reconnectAttempts++ (0->1), delay = delays[1] = 2000ms
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2000);
+      });
+
+      expect(mockEventSourceInstances).toHaveLength(2); // reconnected
+    });
+  });
+
+  describe('useEventStream', () => {
+    it('returns connected, lastEvent, error initial state', () => {
+      const { result } = renderHook(() => useEventStream());
+
+      expect(result.current.connected).toBe(false);
+      expect(result.current.lastEvent).toBeNull();
+      expect(result.current.error).toBeNull();
+    });
+
+    it('updates lastEvent when a message is received', () => {
+      const { result } = renderHook(() => useEventStream());
+
+      const instance = mockEventSourceInstances[0];
+      const eventData = { type: 'run_completed', runId: 'run-1' };
+
+      act(() => {
+        instance.onmessage!(
+          new MessageEvent('message', { data: JSON.stringify(eventData) })
+        );
+      });
+
+      expect(result.current.lastEvent).toEqual(eventData);
+      expect(result.current.connected).toBe(true);
+    });
+
+    it('does not set connected=true for disconnect events', () => {
+      const { result } = renderHook(() => useEventStream());
+
+      const instance = mockEventSourceInstances[0];
+
+      // First send a real event to set connected=true
+      act(() => {
+        instance.onmessage!(
+          new MessageEvent('message', { data: JSON.stringify({ type: 'update', runId: 'r1' }) })
+        );
+      });
+      expect(result.current.connected).toBe(true);
+
+      // Now trigger SSE error which emits disconnect
+      act(() => {
+        instance.onerror!(new Event('error'));
+      });
+
+      // connected should not have been set to true by the disconnect event
+      // (the interval checker will eventually update it, but the event itself should not)
+      expect(result.current.lastEvent).toEqual({ type: 'disconnect' });
+    });
+
+    it('does not set connected=true for error events', () => {
+      const { result } = renderHook(() => useEventStream());
+
+      const instance = mockEventSourceInstances[0];
+
+      // Send a server-side error event (type: 'error')
+      act(() => {
+        instance.onmessage!(
+          new MessageEvent('message', { data: JSON.stringify({ type: 'error', error: 'test' }) })
+        );
+      });
+
+      // lastEvent should be set but connected should remain false
+      expect(result.current.lastEvent).toEqual({ type: 'error', error: 'test' });
+      expect(result.current.connected).toBe(false);
+    });
+
+    it('cleans up on unmount', () => {
+      const { unmount } = renderHook(() => useEventStream());
+
+      expect(mockEventSourceInstances).toHaveLength(1);
+
+      unmount();
+
+      // After unmount, the EventSource should be closed
+      expect(mockEventSourceInstances[0].close).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('use-event-stream (no EventSource)', () => {
+  beforeEach(() => {
+    // Remove EventSource from global scope
+    vi.stubGlobal('EventSource', undefined);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('sets error when EventSource is not supported', () => {
+    const { result } = renderHook(() => useEventStream());
+
+    expect(result.current.error).toBe('EventSource not supported');
+    expect(result.current.connected).toBe(false);
+  });
+});