127 lines
4.6 KiB
TypeScript
127 lines
4.6 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Pagination', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Monitor network requests to see if our mock is hit
|
|
page.on('request', request => console.log('>>', request.method(), request.url()));
|
|
page.on('response', response => console.log('<<', response.status(), response.url()));
|
|
|
|
// Mock the sessions API
|
|
await page.route('**/api/sessions', async (route) => {
|
|
const mockSessions = Array.from({ length: 15 }, (_, i) => ({
|
|
id: i + 1,
|
|
start_time: new Date(2024, 0, 1 + i).toISOString(),
|
|
end_time: new Date(2024, 0, 1 + i, 8, 0).toISOString(),
|
|
notes: null,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString(),
|
|
}));
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ sessions: mockSessions, total: 15 }),
|
|
});
|
|
});
|
|
|
|
// Mock other stats APIs to prevent crashes from accessing undefined properties
|
|
await page.route(/\/api\/stats\/.*/, async (route) => {
|
|
const url = route.request().url();
|
|
let body = {};
|
|
|
|
if (url.includes('summary')) {
|
|
body = {
|
|
total_sleeps: 10,
|
|
avg_sleeps_per_day: 2.5,
|
|
total_sleeps_all_time: 100,
|
|
avg_sleeps_per_day_all_time: 2.0,
|
|
};
|
|
} else if (url.includes('daily-summary')) {
|
|
body = {
|
|
days: [
|
|
{ date: '2024-01-01', total_minutes: 480, day_minutes: 240, night_minutes: 240 },
|
|
],
|
|
};
|
|
} else if (url.includes('timetable')) {
|
|
body = {
|
|
slots: [],
|
|
};
|
|
} else if (url.includes('wake-sleep-times')) {
|
|
body = {
|
|
days: [
|
|
{ date: '2024-01-01', wakeup_minutes: 480, bedtime_minutes: 1200 },
|
|
],
|
|
};
|
|
}
|
|
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(body),
|
|
});
|
|
});
|
|
|
|
await page.goto('http://localhost:5173/stats');
|
|
});
|
|
|
|
test('Pagination component is visible when sessions exceed page size', async ({ page }) => {
|
|
// Wait for one of the mocked dates to appear to ensure data is loaded
|
|
await expect(page.locator('body')).toContainText('2024-01-01', { timeout: 10000 });
|
|
await page.screenshot({ path: 'screenshots/pagination_visible.png' });
|
|
|
|
const pagination = page.getByTestId('pagination');
|
|
await expect(pagination).toBeVisible();
|
|
|
|
// Use a more specific selector for the first page button
|
|
await expect(page.getByTestId('pagination').getByRole('button', { name: '1' })).toBeVisible();
|
|
});
|
|
|
|
test('Changing results per page in settings updates the list', async ({ page }) => {
|
|
// Wait for data to load first
|
|
await expect(page.locator('body')).toContainText('2024-01-01', { timeout: 10000 });
|
|
await page.screenshot({ path: 'screenshots/before_settings_change.png' });
|
|
|
|
// Open Settings
|
|
await page.getByRole('button', { name: /Settings/i }).click();
|
|
await expect(page.locator('text=Results per page')).toBeVisible();
|
|
|
|
// Change to 5
|
|
await page.getByLabel(/Results per page/i).selectOption('5');
|
|
await page.getByRole('button', { name: /Save/i }).click();
|
|
|
|
// Wait for the UI to update and settings to be saved
|
|
await page.waitForTimeout(2000);
|
|
|
|
await page.screenshot({ path: 'screenshots/after_settings_change.png' });
|
|
|
|
// Verify sessions per page is 5 (only 5 should be visible)
|
|
const sessionRows = page.locator('.session-list .border-b');
|
|
await expect(sessionRows).toHaveCount(5);
|
|
|
|
// Verify settings is saved in localStorage
|
|
const localStorage = await page.evaluate(() => {
|
|
return window.localStorage.getItem('baby-sleep-settings');
|
|
});
|
|
expect(localStorage).toContain('"sessionsPerPage":5');
|
|
});
|
|
|
|
test('Navigating through pages works', async ({ page }) => {
|
|
// Wait for data to load first
|
|
await expect(page.locator('body')).toContainText('2024-01-01', { timeout: 10000 });
|
|
|
|
// Set to 5 via settings first
|
|
await page.getByRole('button', { name: /Settings/i }).click();
|
|
await page.getByLabel(/Results per page/i).selectOption('5');
|
|
await page.getByRole('button', { name: /Save/i }).click();
|
|
await page.waitForTimeout(2000);
|
|
|
|
const nextButton = page.getByRole('button', { name: /Next/i });
|
|
await expect(nextButton).toBeVisible();
|
|
|
|
await nextButton.click();
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Should now show sessions from index 5 to 9 (if total is 15)
|
|
// Mocked start_time for i=5 is 2024-01-06
|
|
await expect(page.locator('.text-gray-900').filter({ hasText: '2024-01-06' }).first()).toBeVisible();
|
|
});
|
|
}); |