mirror/crumbs-original
1
0
Fork 1
mirror of https://github.com/bretzel-app/crumbs.git synced 2026-10-14 12:28:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: eliminate E2E dark mode test flakiness

Browse Source 
- Use test.describe.serial to prevent parallel preference conflicts
- Set up waitForResponse listener BEFORE click (response may arrive
  before listener is registered)
- Add waitForLoadState('networkidle') after navigations

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-21 08:47:20 +01:00
committed by Fred Cabassut
co-authored by Claude Opus 4.6
parent 36a5d44b12
commit 9e4c27e141
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/dark-mode.spec.ts
+17 -6
View File
@@ -1,22 +1,29 @@
import { test, expect } from './helpers/fixtures.js'; import { test, expect } from './helpers/fixtures.js';
test.describe('Dark mode', () => { test.describe.serial('Dark mode', () => {
test('Scenario: Theme toggle persists selection across page reload', async ({ test('Scenario: Theme toggle persists selection across page reload', async ({
authenticatedPage: page authenticatedPage: page
}) => { }) => {
// Given the user is on the preferences page // Given the user is on the preferences page
await page.goto('/settings/preferences'); await page.goto('/settings/preferences');
await page.waitForLoadState('networkidle');
// When the user selects dark theme // When the user selects dark theme
// Set up response listener BEFORE clicking (response may arrive before waitForResponse)
const prefSaved = page.waitForResponse((r) => r.url().includes('/api/preferences') && r.ok());
await page.getByTestId('pref-theme-dark').click(); await page.getByTestId('pref-theme-dark').click();
// Then the page applies dark theme // Then the page applies dark theme
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
// Wait for preference to persist to server before reloading
await prefSaved;
// When the page is reloaded // When the page is reloaded
await page.reload(); await page.reload();
await page.waitForLoadState('networkidle');
// Then the dark theme persists without flash // Then the dark theme persists (FOUC script applies it before paint)
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
await expect(page.getByTestId('pref-theme-dark')).toHaveClass(/font-medium/); await expect(page.getByTestId('pref-theme-dark')).toHaveClass(/font-medium/);
}); });
@@ -26,6 +33,7 @@ test.describe('Dark mode', () => {
}) => { }) => {
// Given dark theme is active // Given dark theme is active
await page.goto('/settings/preferences'); await page.goto('/settings/preferences');
await page.waitForLoadState('networkidle');
await page.getByTestId('pref-theme-dark').click(); await page.getByTestId('pref-theme-dark').click();
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
@@ -42,13 +50,13 @@ test.describe('Dark mode', () => {
// Given the OS prefers dark mode // Given the OS prefers dark mode
await page.emulateMedia({ colorScheme: 'dark' }); await page.emulateMedia({ colorScheme: 'dark' });
// When the user selects system theme // When the user navigates to preferences with system theme active
await page.goto('/settings/preferences'); await page.goto('/settings/preferences');
await page.waitForLoadState('networkidle');
await page.getByTestId('pref-theme-system').click(); await page.getByTestId('pref-theme-system').click();
// Then the page applies dark theme from system preference // Then the page applies dark theme from system preference
// Use toHaveAttribute with timeout to handle async $effect execution await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark', { timeout: 5000 });
}); });
test('Scenario: Note cards use dark colors in dark mode', async ({ test('Scenario: Note cards use dark colors in dark mode', async ({
@@ -56,12 +64,15 @@ test.describe('Dark mode', () => {
}) => { }) => {
// Given dark theme is active // Given dark theme is active
await page.goto('/settings/preferences'); await page.goto('/settings/preferences');
await page.waitForLoadState('networkidle');
await page.getByTestId('pref-theme-dark').click(); await page.getByTestId('pref-theme-dark').click();
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
// When viewing the notes page // When viewing the notes page
await page.goto('/'); await page.goto('/');
await page.waitForLoadState('networkidle');
// Then note cards should have dark background colors // Then note cards should have dark background colors (if any exist)
const noteCard = page.getByTestId('note-card').first(); const noteCard = page.getByTestId('note-card').first();
if (await noteCard.isVisible()) { if (await noteCard.isVisible()) {
const bg = await noteCard.evaluate((el) => getComputedStyle(el).backgroundColor); const bg = await noteCard.evaluate((el) => getComputedStyle(el).backgroundColor);