A try of overhauling the frontend tests, bailed after 24h+

frontend/tests/unit/StatusBanner.test.tsx

@@ -1,83 +1,86 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-
-import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
 import '@testing-library/jest-dom';
+import { render, screen, waitFor, act } from '@testing-library/react';
 import StatusBanner from '../../src/components/tracker/StatusBanner';
 import { useSleepSession } from '../../src/hooks/useSleepSession';
-import { formatElapsedTime } from '../../src/utils/time';
 
+// Mock the hook
 vi.mock('../../src/hooks/useSleepSession', () => ({
   useSleepSession: vi.fn(),
 }));
 
-describe('StatusBanner - Timezone Fix', () => {
+describe('StatusBanner', () => {
   beforeEach(() => {
     vi.useFakeTimers();
   });
 
   afterEach(() => {
+    vi.restoreAllMocks();
     vi.useRealTimers();
-    vi.clearAllMocks();
   });
 
-  describe('formatElapsedTime', () => {
-    it('should show correct elapsed time for session started ~49 minutes ago', () => {
-      vi.setSystemTime(new Date('2026-04-24T08:51:00Z'));
+  it('renders loading state when isLoading is true', () => {
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: null,
+      isLoading: true,
+    } as any);
 
-      const result = formatElapsedTime('2026-04-24T08:02:00');
-
-      expect(result).toBe('49m');
-    });
-
-    it('should show hours and minutes for longer sessions', () => {
-      vi.setSystemTime(new Date('2026-04-24T10:02:00Z'));
-
-      const result = formatElapsedTime('2026-04-24T08:02:00');
-
-      expect(result).toBe('2h 0m');
-    });
-
-    it('should show minutes only for sessions under an hour', () => {
-      vi.setSystemTime(new Date('2026-04-24T08:07:00Z'));
-
-      const result = formatElapsedTime('2026-04-24T08:02:00');
-
-      expect(result).toBe('5m');
-    });
+    render(<StatusBanner />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
 
-  describe('StatusBanner display', () => {
-    it('shows correct elapsed time for active session', () => {
-      vi.setSystemTime(new Date('2026-04-24T08:51:00Z'));
+  it('renders sleeping state when an active session exists', () => {
+    const startTime = '2026-06-10T10:00:00Z';
+    // Set "now" to 1 hour and 30 minutes after start_time
+    const now = new Date('2026-06-10T11:30:00Z');
+    vi.setSystemTime(now);
 
-      vi.mocked(useSleepSession).mockReturnValue({
-        activeSession: {
-          id: 4,
-          start_time: '2026-04-24T08:02:00',
-          end_time: null,
-          notes: null,
-          created_at: '2026-04-24T08:02:28.942902',
-          updated_at: '2026-04-24T08:02:28.942927',
-        },
-        isLoading: false,
-      } as any);
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: { start_time: startTime },
+      isLoading: false,
+    } as any);
 
-      render(<StatusBanner />);
+    render(<StatusBanner />);
 
-      expect(screen.getByText(/Baby is sleeping/)).toBeInTheDocument();
-      expect(screen.getByText(/\(49m\)/)).toBeInTheDocument();
+    expect(screen.getByText('Baby is sleeping')).toBeInTheDocument();
+    expect(screen.getByText(/😴/)).toBeInTheDocument();
+    // formatElapsedTime logic: diff is 90m -> "1h 30m"
+    expect(screen.getByText('(1h 30m)')).toBeInTheDocument();
+  });
+
+  it('updates elapsed time as time passes', async () => {
+    const startTime = '2026-06-10T10:00:00Z';
+    // Start at 5 minutes after
+    const now = new Date('2026-06-10T10:05:00Z');
+    vi.setSystemTime(now);
+
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: { start_time: startTime },
+      isLoading: false,
+    } as any);
+
+    render(<StatusBanner />);
+
+    expect(screen.getByText('(5m)')).toBeInTheDocument();
+
+    // Advance time by 10 minutes
+    await act(async () => {
+      vi.advanceTimersByTime(10 * 60 * 1000);
     });
 
-    it('shows awake state when no active session', () => {
-      vi.mocked(useSleepSession).mockReturnValue({
-        activeSession: null,
-        isLoading: false,
-      } as any);
+    // Now it should be 15m
+    expect(screen.getByText('(15m)')).toBeInTheDocument();
+  });
 
-      render(<StatusBanner />);
+  it('renders awake state when no active session and not loading', () => {
+    vi.mocked(useSleepSession).mockReturnValue({
+      activeSession: null,
+      isLoading: false,
+    } as any);
 
-      expect(screen.getByText(/Baby is awake/)).toBeInTheDocument();
-    });
+    render(<StatusBanner />);
+
+    expect(screen.getByText('Baby is awake')).toBeInTheDocument();
+    expect(screen.getByText(/👶/)).toBeInTheDocument();
   });
 });