wip: get timetable to work

2026-04-27 16:37:48 +02:00
parent 54e382cbb3
commit 81120547ae
10 changed files with 176 additions and 347 deletions
@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Timetable Mocked Data', () => {
+  test.beforeEach(async ({ page }) => {
+    // Mock current time to 12:00 PM for consistent red line position (50% through the day)
+    await page.clock.setFixedTime(new Date('2026-04-25T12:00:00'));
+
+    // Mock API responses
+    await page.route('**/api/stats/daily-summary*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          total_sleep_minutes: 480,
+        }),
+      });
+    });
+
+    await page.route('**/api/stats/timetable*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          slots: [
+            { date: '2026-04-25', slot_start: '22:00', slot_end: '06:00', sleeping: true },
+            { date: '2026-04-24', slot_start: '23:00', slot_end: '07:00', sleeping: true },
+          ],
+        }),
+      });
+    });
+
+    await page.route('**/api/stats/wake-sleep-times*', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          wakeup_times: [],
+          bedtime_times: [],
+        }),
+      });
+    });
+
+    await page.goto('http://localhost:5173/stats');
+  });
+
+  test('Timetable should render with correct sleep blocks and red line position', async ({ page }) => {
+    // Find the container that holds the timetable. 
+    const componentContainer = page.locator('div').filter({ 
+      has: page.locator('h3', { hasText: 'Sleep Timetable' }) 
+    }).first();
+
+    await expect(componentContainer).toBeVisible();
+
+    // Check if some sleep blocks are green
+    const sleepingBlock = page.locator('.bg-green-500').first();
+    await expect(sleepingBlock).toBeVisible();
+
+    // The red line should be at roughly 50% of the grid height if it's 12:00 PM
+    const redLine = page.locator('.bg-red-500').first();
+    await expect(redLine).toBeVisible();
+
+    const redLineBox = await redLine.boundingBox();
+    // We need to find the grid container specifically for precise alignment check
+    const gridContainer = componentContainer.locator('.relative').first();
+    const gridBox = await gridContainer.boundingBox();
+
+    if (gridBox && redLineBox) {
+        // The red line's Y position relative to the grid container should be ~50%
+        const relativeY = redLineBox.y - gridBox.y;
+        const percentage = (relativeY / gridBox.height) * 100;
+        
+        console.log(`Red line relative Y: ${relativeY}, Grid height: ${gridBox.height}, Percentage: ${percentage}%`);
+        
+        // At 12:00 PM, it should be exactly at 50%
+        expect(percentage).toBeCloseTo(50, 0);
+    } else {
+        throw new Error('Could not get bounding boxes for red line or grid container');
+    }
+  });
+});