timetable maybe working, very cloase at least

frontend/tests/unit/components/stats/SleepTimetable.test.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import '@testing-library/jest-dom';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
@@ -35,78 +35,46 @@ describe('SleepTimetable', () => {
     expect(screen.getByText(/No data available/i)).toBeInTheDocument();
   });
 
-  it('renders in desktop mode (chronological order)', () => {
-    (useStats as any).mockReturnValue({
-      timetable: { slots: [{ date: '2025-04-18', sleeping: true, slot_start: '01:00', slot_end: '05:00' }] },
-      isLoading: false,
-    });
+  it('shows sleeping status for intervals spanning midnight across days', () => {
+    const day1 = '2025-04-18';
+    const day2 = '2025-04-19';
 
-    vi.stubGlobal('innerWidth', 1024);
-    render(<Timetable {...defaultProps} />);
-
-    // Check for day headers in chronological order
-    const days = screen.getAllByText(/^[A-Z]{3}$/i); // SUN, MON, etc.
-    // 2025-04-18 is Friday (FRI)
-    expect(days[0]).toHaveTextContent(/FRI/i);
-    expect(days[1]).toHaveTextContent(/SAT/i);
-  });
-
-  it('renders in medium mode (3-day tabs and 3-column grid)', () => {
-    (useStats as any).mockReturnValue({
-      timetable: { slots: [{ date: '2025-04-18', sleeping: true, slot_start: '01:00', slot_end: '05:00' }] },
-      isLoading: false,
-    });
-
-    vi.stubGlobal('innerWidth', 600);
-    render(<Timetable {...defaultProps} />);
-    fireEvent(window, new Event('resize'));
-
-    // Check for 3-day interval tabs
-    // In reversed order (25, 24, 23...), the first group is Wed - Fri
-    expect(screen.getByRole('button', { name: /Wed \d+ - Fri \d+/i })).toBeInTheDocument();
-  });
-
-  it('renders in small mode (single-day tabs and 1-column grid)', () => {
-    (useStats as any).mockReturnValue({
-      timetable: { slots: [{ date: '2025-04-18', sleeping: true, slot_start: '01:00', slot_end: '05:00' }] },
-      isLoading: false,
-    });
-
-    vi.stubGlobal('innerWidth', 300);
-    render(<Timetable {...defaultProps} />);
-    fireEvent(window, new Event('resize'));
-
-    // Check for single-day tabs
-    const dayTabs = screen.getAllByRole('button');
-    // At least one tab should have the text FRI
-    const friTab = dayTabs.find(tab => tab.textContent?.toUpperCase().includes('FRI'));
-    expect(friTab).toBeInTheDocument();
-  });
-
-  it('colors sleeping intervals correctly', () => {
     (useStats as any).mockReturnValue({
       timetable: {
         slots: [
           {
-            date: '2025-04-18',
+            date: day1,
             sleeping: true,
-            slot_start: '01:00',
-            slot_end: '03:00', // Covers 01:00 and 02:00
+            slot_start: '23:00',
+            slot_end: '23:45',
+          },
+          {
+            date: day2,
+            sleeping: true,
+            slot_start: '00:00',
+            slot_end: '01:00',
           },
         ],
       },
       isLoading: false,
     });
 
-    const { container } = render(<Timetable {...defaultProps} />);
+    const testProps = {
+      from_date: day1,
+      to_date: day2,
+      day_start: '22:00',
+      day_end: '08:00',
+    };
 
-    // We are looking for the grid cells. 
-    // Since they don't have text, we look at their classes/backgrounds.
-    
-    const greenCells = container.querySelectorAll('.bg-green-500');
-    expect(greenCells.length).toBeGreaterThan(0);
+    vi.stubGlobal('innerWidth', 1024); // Desktop mode
+    const { container } = render(<Timetable {...testProps} />);
 
-    const grayCells = container.querySelectorAll('.bg-gray-50');
-    expect(grayCells.length).toBeGreaterThan(0);
+    // Check Day 1: 23:00
+    const cellD1_2300 = container.querySelector(`[data-testid="cell-${day1}-23:00"]`);
+    expect(cellD1_2300).toHaveClass('bg-green-500');
+
+    // Check Day 2: 00:15
+    const cellD2_0015 = container.querySelector(`[data-testid="cell-${day2}-00:15"]`);
+    expect(cellD2_0015).toHaveClass('bg-green-500');
   });
-});
+});