70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
|
import { test, expect, type Page } from '@playwright/test';
|
||
|
|
|
||
|
|
import { login, navigateTo } from '../smoke/helpers';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initiative 4 (e2e testing) — visual regression baseline for the new
|
||
|
|
* Reports UI (Initiative 1, `docs/reports-content-spec.md`). Mirrors the
|
||
|
|
* list/landing pattern in `snapshots.spec.ts` so the two specs share the
|
||
|
|
* same project config (project=visual, matched by /visual/.*\.spec\.ts/).
|
||
|
|
*
|
||
|
|
* NOTE — NO baseline images are committed with this change. A human must run
|
||
|
|
*
|
||
|
|
* pnpm exec playwright test --project=visual --update-snapshots
|
||
|
|
*
|
||
|
|
* once the Reports UI is visually settled to generate the PNGs under
|
||
|
|
* tests/e2e/visual/reports.spec.ts-snapshots/. Until then these cases will
|
||
|
|
* report "missing snapshot" on the first run (expected) — this is by design:
|
||
|
|
* the task brief explicitly asked NOT to generate/commit baselines, only to
|
||
|
|
* wire up the spec cases so the baselines can be captured later.
|
||
|
|
*
|
||
|
|
* The Reports landing (`/reports`) is a stable list/landing screen — it does
|
||
|
|
* not depend on per-row fixture data, so it tolerates seed drift the same way
|
||
|
|
* the other visual baselines do. The category sub-pages (sales / financial /
|
||
|
|
* operational) are charts-heavy; they're included but a generous
|
||
|
|
* maxDiffPixelRatio absorbs antialiasing differences across machines.
|
||
|
|
*/
|
||
|
|
|
||
|
|
const REPORT_PAGES = [
|
||
|
|
{ name: 'reports-landing', path: '/reports' },
|
||
|
|
{ name: 'reports-sales', path: '/reports/sales' },
|
||
|
|
{ name: 'reports-financial', path: '/reports/financial' },
|
||
|
|
{ name: 'reports-operational', path: '/reports/operational' },
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
async function settle(page: Page) {
|
||
|
|
// Quiet animations / timers / blinking carets so dynamic content doesn't
|
||
|
|
// produce flaky pixel diffs (identical to snapshots.spec.ts).
|
||
|
|
await page.addStyleTag({
|
||
|
|
content: `
|
||
|
|
*, *::before, *::after {
|
||
|
|
animation-duration: 0s !important;
|
||
|
|
animation-delay: 0s !important;
|
||
|
|
transition-duration: 0s !important;
|
||
|
|
transition-delay: 0s !important;
|
||
|
|
caret-color: transparent !important;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
});
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
// Let TanStack Query + chart libraries flush their first paint.
|
||
|
|
await page.waitForTimeout(750);
|
||
|
|
}
|
||
|
|
|
||
|
|
test.describe('Visual regression — Reports UI', () => {
|
||
|
|
for (const p of REPORT_PAGES) {
|
||
|
|
test(`${p.name} matches baseline`, async ({ page }) => {
|
||
|
|
await login(page, 'super_admin');
|
||
|
|
await navigateTo(page, p.path);
|
||
|
|
await settle(page);
|
||
|
|
|
||
|
|
await expect(page).toHaveScreenshot(`${p.name}.png`, {
|
||
|
|
fullPage: true,
|
||
|
|
// Charts/SVG render with sub-pixel antialiasing variance across
|
||
|
|
// machines — match the tolerance the existing visual baselines use.
|
||
|
|
maxDiffPixelRatio: 0.02,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|