AI removed features....

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 import '@testing-library/jest-dom';
-import { vi, describe, it, expect } from 'vitest';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
 import Timetable from '../../../../src/components/stats/SleepTimetable';
 import { useStats } from '../../../../src/hooks/useStats';
 
@@ -12,12 +12,17 @@ vi.mock('../../../../src/hooks/useStats', () => ({
 
 describe('SleepTimetable', () => {
   const defaultProps = {
-    from_date: '2025-04-20',
-    to_date: '2025-04-21',
+    from_date: '2025-04-18',
+    to_date: '2025-04-25',
     day_start: '22:00',
     day_end: '08:00',
   };
 
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal('innerWidth', 1024);
+  });
+
   it('renders loading state', () => {
     (useStats as any).mockReturnValue({ timetable: null, isLoading: true });
     render(<Timetable {...defaultProps} />);
@@ -30,35 +35,52 @@ describe('SleepTimetable', () => {
     expect(screen.getByText(/No data available/i)).toBeInTheDocument();
   });
 
-  it('renders the grid correctly with hourly rows and biennial labels', () => {
+  it('renders in desktop mode (chronological order)', () => {
     (useStats as any).mockReturnValue({
-      timetable: {
-        slots: [
-          {
-            date: '2025-04-20',
-            sleeping: true,
-            slot_start: '01:00',
-            slot_end: '05:00',
-          },
-        ],
-      },
+      timetable: { slots: [{ date: '2025-04-18', sleeping: true, slot_start: '01:00', slot_end: '05:00' }] },
       isLoading: false,
     });
 
+    vi.stubGlobal('innerWidth', 1024);
     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 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);
+  });
 
-    // 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('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 Fri - Wed
+    expect(screen.getByRole('button', { name: /FRI - WED/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', () => {
@@ -66,7 +88,7 @@ describe('SleepTimetable', () => {
       timetable: {
         slots: [
           {
-            date: '2025-04-20',
+            date: '2025-04-18',
             sleeping: true,
             slot_start: '01:00',
             slot_end: '03:00', // Covers 01:00 and 02:00
@@ -87,4 +109,4 @@ describe('SleepTimetable', () => {
     const grayCells = container.querySelectorAll('.bg-gray-50');
     expect(grayCells.length).toBeGreaterThan(0);
   });
-});
+});