mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 16:41:08 +02:00
79d112657c
Smallest possible foundation for the persona-driven visual regression
suite (M5 in docs/plans/mana-mcp-and-personas.md). One flow, two
viewports, one persona — enough to prove the stack end-to-end:
seed-script → mana-auth → API login → cookie injection → web app →
screenshot → disk. Extending is copy-paste per flow.
tests/personas/
playwright.config.ts
Own config separate from the root tests/e2e/ suite. Two viewports
(1440×900 desktop Chrome + Pixel 5 mobile) — more can be added
once baselines settle without quadrupling the review load.
Diff threshold 0.2 %, animations disabled, snapshots land under
__snapshots__/{spec}/{arg}-{project}.png. No auto-webServer —
the whole point is to catch regressions against the real stack
the user runs, not a hermetic one; if the stack is down, tests
fail loud.
fixtures/persona-auth.ts
Typed Playwright `test.extend` with a `personaKey` worker option
and a `personaPage` fixture that returns a pre-logged-in Page
pointed at `/`. Login is API-side: POST /api/v1/auth/login with
the deterministic HMAC-SHA256 password, parse Set-Cookie headers,
inject into the browser context. Derivation is a bit-identical
mirror of scripts/personas/password.ts and
services/mana-persona-runner/src/password.ts — a 3-way contract.
Changing one without the others locks the suite out of every
persona. PERSONAS map exports all 10 catalog emails for typed
access.
flows/home.spec.ts
One smoke flow. Asserts the persona isn't redirected to /login,
hides any [data-testid="live-time"] so clock widgets don't
invalidate diffs, captures a full-page screenshot. When this
goes green, the whole pipeline is plumbed. Copy this file to
add per-module tours.
package.json
@mana/tests-personas workspace. Scripts: `test`, `test:update`,
`report` (HTML diff viewer).
README.md
Prerequisites (stack up + seeded + ideally persona-runner ticked
once), run recipe, env vars, architecture diagram, extension
pattern.
root package.json: `pnpm test:personas` + `:update`.
.gitignore: playwright-report-personas/ + test-results/ so generated
artefacts never get committed.
Type-check / list: `playwright test --list` succeeds, 2 tests (one
per viewport) registered for home.spec.ts.
Not attempted in this commit (user action to run the stack):
- Actual baseline capture (needs docker up + db:push + seed:personas
+ ANTHROPIC_API_KEY + diag/tick).
- Additional flows (todo, journal, notes, habits, calendar). They're
copy-paste per README. Land when the stack is smoked.
- Nightly CI job. Will land once baselines are stable.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
/**
|
|
* Home-tour spec — smallest possible end-to-end signal.
|
|
*
|
|
* Runs the suite's auth fixture, lands on `/`, verifies the app loaded
|
|
* under the persona's account (dashboard chrome visible), captures a
|
|
* baseline screenshot.
|
|
*
|
|
* When this goes green, the whole persona-visual stack is plumbed:
|
|
* seed-script → mana-auth → API login → cookie injection → web app →
|
|
* screenshot. Copy this file, change the route in `page.goto`, and you
|
|
* have a new module flow.
|
|
*/
|
|
|
|
import { test, expect } from '../fixtures/persona-auth';
|
|
|
|
// Worker-scoped fixture — must be top-level, not inside describe.
|
|
test.use({ personaKey: 'anna' });
|
|
|
|
test.describe('home — Anna', () => {
|
|
test('dashboard renders', async ({ personaPage, persona }) => {
|
|
// Sanity: we're logged in as the right user.
|
|
// The URL should be inside the authenticated (app) group, not /login.
|
|
await expect(personaPage).not.toHaveURL(/\/login(\?|$)/);
|
|
|
|
// Give any lazy-loaded dashboard widgets a beat to settle, then
|
|
// freeze dynamic timestamps so screenshots are deterministic.
|
|
await personaPage.waitForLoadState('networkidle');
|
|
await personaPage.evaluate(() => {
|
|
// Hide any element that renders a live clock / relative time.
|
|
// Tests can update this list if specific selectors are known.
|
|
for (const el of document.querySelectorAll<HTMLElement>('[data-testid="live-time"]')) {
|
|
el.style.visibility = 'hidden';
|
|
}
|
|
});
|
|
|
|
await expect(personaPage).toHaveScreenshot(`home-${persona.archetype}.png`, {
|
|
fullPage: true,
|
|
});
|
|
});
|
|
});
|