81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
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');
|
|
}
|
|
});
|
|
});
|