Working on fixing sleep timetable & add gitea workflows

2026-05-20 17:30:13 +02:00
parent e38fae1940
commit b361fc5172
9 changed files with 182 additions and 171 deletions
@@ -0,0 +1,99 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Sleep Timetable Timezone Alignment', () => {
+  test.use({ 
+    timezoneId: 'America/Los_Angeles',
+    locale: 'en-US'
+  });
+
+  test('red marker (current time) should align with the correct grid column/row for sleeping sessions', async ({ page }) => {
+    // 1. Mock the current time to be 08:00 AM local (PDT/PST)
+    // Since we can't easily mock system time in Playwright without extra tools, 
+    // we will rely on the fact that 'new Date()' is called in the component.
+    // We can use `page.addInitScript` to mock Date.
+    const mockDate = new Date('2026-05-17T08:00:00-07:00'); 
+    await page.addInitScript((date) => {
+      const originalDate = globalThis.Date;
+      function MockDate(...args: any[]) {
+        if (args.length === 0) return new originalDate(date.getTime());
+        return new originalDate(...args);
+      }
+      MockDate.prototype = originalDate.prototype;
+      MockDate.now = () => date.getTime();
+      globalThis.Date = MockDate as any;
+    }, mockDate);
+
+    // 2. Mock the API response for timetable
+    // We want to simulate a session that is currently happening in local time.
+    // If it's 08:00 AM now, and they are sleeping, the slot for 08:00 should be green.
+    // The API returns slots with 'sleeping: true'.
+    // Note: the component's logic uses `timetable.slots` and checks `isSleepingInInterval`.
+    // The slots come from the backend with 'slot_start' and 'slot_end'.
+    await page.route('**/api/stats/timetable*', async (route) => {
+      const json = {
+        slots: [
+          // A session that covers 07:00 to 09:00 on May 17th
+          { date: '2026-05-17', slot_start: '07:00', slot_end: '07:15', sleeping: true },
+          { date: '2026-05-17', slot_start: '07:15', slot_end: '07:30', sleeping: true },
+          { date: '2026-05-17', slot_start: '07:30', slot_end: '07:45', sleeping: true },
+          { date: '2026-05-17', slot_start: '07:45', slot_end: '08:00', sleeping: true },
+          { date: '2026-05-17', slot_start: '08:00', slot_end: '08:15', sleeping: true },
+          { date: '2026-05-17', slot_start: '08:15', slot_end: '08:30', sleeping: true },
+          { date: '2026-05-17', slot_start: '08:30', slot_end: '08:45', sleeping: true },
+          { date: '2026-05-17', slot_start: '08:45', slot_end: '09:00', sleeping: true },
+        ]
+      };
+      await route.fulfill({ json });
+    });
+
+    // Also mock the daily summary as it's used by useStats
+    await page.route('**/api/stats/daily-summary*', async (route) => {
+      await route.fulfill({ json: { days: [] } });
+    });
+
+    // Also mock wake-sleep times as it's used by useStats
+    await page.route('**/api/stats/wake-sleep-times*', async (route) => {
+      await route.fulfill({ json: { days: [] } });
+    });
+
+    // 3. Navigate to the stats page
+    await page.goto('/stats'); // Assuming /stats is the route for StatsPage
+
+    // 4. Verify that the red marker (at 08:00) is inside a green cell
+    // The red marker has class 'bg-red-500'
+    const redMarker = page.locator('.bg-red-500');
+    await expect(redMarker).toBeVisible();
+
+    // We want to check if the cell at 08:00 is green.
+    // In our mocked data, the slots for 08:00 are sleeping: true.
+    // The component renders cells with className={`h-8 w-full ${sleeping ? 'bg-green-500' : 'bg-gray-50'}`}
+    // Since we can't easily target a specific "cell" by index in a grid without more info,
+    // we check if there's at least one green cell that matches our criteria.
+    const greenCells = page.locator('.bg-green-500');
+    await expect(greenCells.count()).toBeGreaterThan(0);
+
+    // To be really precise, we can check the position of the red marker 
+    // and see if there is a green cell at that same vertical position.
+    const markerBox = await redMarker.boundingBox();
+    if (markerBox) {
+        // The marker is at 08:00, which is (8*60)/1440 = 33.33% from the top of the container
+        // We can check if the cell at that height is green.
+        const timetableContainer = page.locator('.relative'); 
+        // Note: 'relative' is the container for the grid and marker.
+        // We look for a green cell that intersects with the red marker's Y position.
+        const allGreenCells = page.locator('.bg-green-500');
+        const count = await allGreenCells.count();
+        let foundAlignedCell = false;
+        for (let i = 0; i < count; i++) {
+            const cellBox = await allGreenCells.nth(i).boundingBox();
+            if (cellBox && markerBox.y >= cellBox.y - 2 && markerBox.y <= cellBox.y + cellBox.height + 2) {
+                foundAlignedCell = true;
+                break;
+            }
+        }
+        expect(foundAlignedCell).toBe(true);
+    } else {
+        throw new Error('Could not get bounding box for red marker');
+    }
+  });
+});