Pagination (but according to agent, not done)

2026-05-31 17:40:03 +02:00
parent 5534a25ce5
commit cdc57a441b
18 changed files with 7697 additions and 117 deletions
@@ -0,0 +1,127 @@
+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.getByText('2024-01-06')).toBeVisible();
+  });
+});