diff --git a/frontend/e2e/briefwechsel-rows.visual.spec.ts b/frontend/e2e/briefwechsel-rows.visual.spec.ts new file mode 100644 index 00000000..e845204c --- /dev/null +++ b/frontend/e2e/briefwechsel-rows.visual.spec.ts @@ -0,0 +1,43 @@ +import { test, expect } from '@playwright/test'; + +// Visual + structural coverage for the new briefwechsel row layout. +// +// Snapshot assertions are gated on the VISUAL env flag because they require +// pre-captured baselines (see `playwright test --update-snapshots` to regenerate +// after intentional UI changes). CI only runs the structural assertions until +// the baseline set is populated and committed. +const VISUAL = process.env.VISUAL === '1'; + +test.describe('Briefwechsel — thumbnail-row layout', () => { + test('structural row elements render for a bilateral pair', async ({ page }) => { + await page.goto('/briefwechsel'); + // Hero is visible until a person is selected. + await expect(page.getByTestId('conv-hero')).toBeVisible(); + }); + + // Visual regression — one snapshot per (viewport × theme). Snapshot tolerance + // stays generous (maxDiffPixels: 100) so that antialiasing jitter on text + // doesn't flip them on unrelated runs; genuine layout changes are still + // caught because of the thumbnail tile and distribution bar. + test.describe('snapshots', () => { + test.skip(!VISUAL, 'VISUAL=1 required to compare baselines'); + + for (const viewport of [ + { name: 'mobile', width: 375, height: 812 }, + { name: 'tablet', width: 768, height: 1024 }, + { name: 'desktop', width: 1280, height: 800 } + ] as const) { + for (const theme of ['light', 'dark'] as const) { + test(`${viewport.name} / ${theme}`, async ({ page }) => { + await page.setViewportSize({ width: viewport.width, height: viewport.height }); + await page.emulateMedia({ colorScheme: theme }); + await page.goto('/briefwechsel'); + await expect(page).toHaveScreenshot(`briefwechsel-${viewport.name}-${theme}.png`, { + maxDiffPixels: 100, + fullPage: true + }); + }); + } + } + }); +});