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

2026-06-11 09:09:02 +02:00
parent a9e1e96622
commit bb58389675
33 changed files with 3257 additions and 275 deletions
@@ -0,0 +1,135 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import BedtimePlot from '../../../../src/components/stats/BedtimePlot';
+import { useStats } from '../../../../src/hooks/useStats';
+import { XAxis, YAxis, Tooltip } from 'recharts';
+
+vi.mock('../../../../src/hooks/useStats', () => ({
+  useStats: vi.fn(),
+}));
+
+vi.mock('recharts', async () => {
+  const actual = await vi.importActual<typeof import('recharts')>('recharts');
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
+    LineChart: ({ children }: any) => <div data-testid="line-chart">{children}</div>,
+    XAxis: vi.fn(({ tickFormatter }) => <div data-testid="x-axis" data-tick-formatter={String(tickFormatter)} />),
+    YAxis: vi.fn(({ tickFormatter }) => <div data-testid="y-axis" data-tick-formatter={String(tickFormatter)} />),
+    CartesianGrid: vi.fn(),
+    Tooltip: vi.fn(({ formatter, labelFormatter }) => <div data-testid="tooltip" />),
+    Line: vi.fn(),
+  };
+});
+
+describe('BedtimePlot', () => {
+  const props = {
+    from_date: '2024-01-01',
+    to_date: '2024-01-07',
+    wakeup_ref: '07:00',
+    bedtime_ref: '20:00',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders loading state', () => {
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: undefined,
+      isLoading: true,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    expect(screen.getByText(/Loading plot.../i)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no data is available', () => {
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: { days: [] },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    expect(screen.getByText(/No data available for this period./i)).toBeInTheDocument();
+  });
+
+  it('renders chart and statistics correctly with data', () => {
+    const today = new Date().toISOString().split('T')[0];
+    const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [
+          { date: today, bedtime_minutes: 0 },     // Exactly at ref (20:00)
+          { date: yesterday, bedtime_minutes: -60 }, // 19:00
+          { date: '2024-01-05', bedtime_minutes: 60 }, // 21:00
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    
+    expect(screen.getByText(/Bedtime/i)).toBeInTheDocument();
+
+    // Verify statistical calculations
+    expect(screen.getByText(/19:00/i)).toBeInTheDocument(); 
+    expect(screen.getByText(/21:00/i)).toBeInTheDocument(); 
+    
+    const timeValues = screen.getAllByText(/20:00/i);
+    expect(timeValues).toHaveLength(2); 
+  });
+
+  it('renders correctly when all data points are null', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [
+          { date: today, bedtime_minutes: null },
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+    
+    expect(screen.getByText(/Bedtime/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Earliest/i)).not.toBeInTheDocument();
+  });
+
+  it('verifies YAxis tickFormatter handles numeric values', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [
+          { date: today, bedtime_minutes: 30 },
+        ],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+
+    const yAxisCall = vi.mocked(YAxis).mock.calls[0][0];
+    expect(yAxisCall.tickFormatter(30)).toBe('20:30');
+  });
+  it('verifies Tooltip formatter handles various value types', () => {
+    const today = new Date().toISOString().split('T')[0];
+
+    vi.mocked(useStats).mockReturnValue({
+      wakeupBedtime: {
+        days: [{ date: today, bedtime_minutes: 30 }],
+      },
+      isLoading: false,
+    } as any);
+
+    render(<BedtimePlot {...props} />);
+
+    const tooltipCall = vi.mocked(Tooltip).mock.calls[0][0];
+    expect(tooltipCall.formatter(30)).toEqual(['20:30', 'Bedtime']);
+    expect(tooltipCall.formatter('N/A')).toEqual(['N/A', 'Bedtime']);
+  });
+});