Not sure what happened here...

2026-05-27 09:53:44 +02:00
parent 648d376a12
commit 7cef6da5f2
33 changed files with 664 additions and 191 deletions
@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi, describe, it, expect } from 'vitest';
+import Timetable from '../../../../src/components/stats/SleepTimetable';
+import { useStats } from '../../../../src/hooks/useStats';
+
+vi.mock('../../../../src/hooks/useStats', () => ({
+  useStats: vi.fn(),
+}));
+
+describe('SleepTimetable', () => {
+  const defaultProps = {
+    from_date: '2025-04-20',
+    to_date: '2025-04-21',
+    day_start: '22:00',
+    day_end: '08:00',
+  };
+
+  it('renders loading state', () => {
+    (useStats as any).mockReturnValue({ timetable: null, isLoading: true });
+    render(<Timetable {...defaultProps} />);
+    expect(screen.getByText(/Loading timetable.../i)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no data is available', () => {
+    (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLoading: false });
+    render(<Timetable {...defaultProps} />);
+    expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+  });
+
+  it('renders the grid correctly with hourly rows and biennial labels', () => {
+    (useStats as any).mockReturnValue({
+      timetable: {
+        slots: [
+          {
+            date: '2025-04-20',
+            sleeping: true,
+            slot_start: '01:00',
+            slot_end: '05:00',
+          },
+        ],
+      },
+      isLoading: false,
+    });
+
+    render(<Timetable {...defaultProps} />);
+
+    // Check for day headers
+    expect(screen.getByText(/SUN/i)).toBeInTheDocument(); // 2025-04-20 is Sunday
+    expect(screen.getByText(/MON/i)).toBeInTheDocument(); // 2025-04-21 is Monday
+
+    // Check for time labels (every 1 hour: 00, 01, 02...)
+    expect(screen.getByText('00:00')).toBeInTheDocument();
+    expect(screen.getByText('01:00')).toBeInTheDocument();
+    expect(screen.getByText('02:00')).toBeInTheDocument();
+    expect(screen.getByText('03:00')).toBeInTheDocument();
+    expect(screen.getByText('04:00')).toBeInTheDocument();
+    expect(screen.getByText('22:00')).toBeInTheDocument();
+    expect(screen.getByText('23:00')).toBeInTheDocument();
+  });
+
+  it('colors sleeping intervals correctly', () => {
+    (useStats as any).mockReturnValue({
+      timetable: {
+        slots: [
+          {
+            date: '2025-04-20',
+            sleeping: true,
+            slot_start: '01:00',
+            slot_end: '03:00', // Covers 01:00 and 02:00
+          },
+        ],
+      },
+      isLoading: false,
+    });
+
+    const { container } = render(<Timetable {...defaultProps} />);
+
+    // We are looking for the grid cells. 
+    // Since they don't have text, we look at their classes/backgrounds.
+    const cells = container.querySelectorAll('.h-8');
+    
+    const greenCells = container.querySelectorAll('.bg-green-500');
+    expect(greenCells.length).toBeGreaterThan(0);
+
+    const grayCells = container.querySelectorAll('.bg-gray-50');
+    expect(grayCells.length).toBeGreaterThan(0);
+  });
+});