test(briefwechsel): capture visual-regression baselines for the row layout #313

New Issue

marcel · 2026-04-23T21:10:02+02:00

marcel commented

2026-04-23 21:10:02 +02:00

Context

Flagged by @tobiwendt + @saraholt in the round-2 review of PR #311:

The CI pipeline eventually needs a visual-baseline capture step (likely a manual one-time artifact upload, then committed). The visual spec is dead code in CI until baselines exist.

Once baselines are committed, flip the default of the VISUAL env flag to true so CI runs the sweep without an opt-in.

PR #311 shipped frontend/e2e/briefwechsel-rows.visual.spec.ts with the snapshot block gated on VISUAL=1. The structural test in the same file runs unconditionally, so the row layout is still covered in CI — but the pixel-level regression protection is idle until this one-time capture runs.

Steps

Start a clean test environment locally (docker compose up -d; backend running with admin seed + empty DB).

Run once to generate all six baselines against a seeded bilateral pair:

cd frontend
VISUAL=1 npx playwright test --update-snapshots briefwechsel-rows

Sanity-check the six generated PNGs in frontend/e2e/briefwechsel-rows.visual.spec.ts-snapshots/:
- briefwechsel-mobile-light.png (375×812 light)
- briefwechsel-mobile-dark.png (375×812 dark)
- briefwechsel-tablet-light.png (768×1024 light)
- briefwechsel-tablet-dark.png (768×1024 dark)
- briefwechsel-desktop-light.png (1280×800 light)
- briefwechsel-desktop-dark.png (1280×800 dark)
Each should show the seeded "Visual Sender-" ↔ "Visual Receiver-" correspondence with one row and a DistributionBar.
Commit the baselines.
Flip the VISUAL default to true in the spec (one-line change) so CI exercises the snapshot block by default:
```
- const VISUAL = process.env.VISUAL === '1';
+ const VISUAL = process.env.VISUAL !== '0';
```
Open a PR against main with both the baselines and the flip.

Acceptance criteria

Six baseline PNGs committed under frontend/e2e/briefwechsel-rows.visual.spec.ts-snapshots/.
VISUAL default flipped so the snapshot block runs in CI without opt-in.
CI run passes on the same commit where baselines are introduced (round-trip verification).

References

PR #311 (the feature this baselines) — merged to main
ADR-005 (spec/context for the row layout)

## Context Flagged by @tobiwendt + @saraholt in the round-2 review of PR #311: > The CI pipeline eventually needs a visual-baseline capture step (likely a manual one-time artifact upload, then committed). The visual spec is dead code in CI until baselines exist. > Once baselines are committed, flip the default of the VISUAL env flag to true so CI runs the sweep without an opt-in. PR #311 shipped `frontend/e2e/briefwechsel-rows.visual.spec.ts` with the snapshot block gated on `VISUAL=1`. The structural test in the same file runs unconditionally, so the row layout is still covered in CI — but the pixel-level regression protection is idle until this one-time capture runs. ## Steps 1. Start a clean test environment locally (`docker compose up -d`; backend running with admin seed + empty DB). 2. Run once to generate all six baselines against a seeded bilateral pair: ```bash cd frontend VISUAL=1 npx playwright test --update-snapshots briefwechsel-rows ``` 3. Sanity-check the six generated PNGs in `frontend/e2e/briefwechsel-rows.visual.spec.ts-snapshots/`: - `briefwechsel-mobile-light.png` (375×812 light) - `briefwechsel-mobile-dark.png` (375×812 dark) - `briefwechsel-tablet-light.png` (768×1024 light) - `briefwechsel-tablet-dark.png` (768×1024 dark) - `briefwechsel-desktop-light.png` (1280×800 light) - `briefwechsel-desktop-dark.png` (1280×800 dark) Each should show the seeded "Visual Sender-<ts>" ↔ "Visual Receiver-<ts>" correspondence with one row and a DistributionBar. 4. Commit the baselines. 5. Flip the `VISUAL` default to `true` in the spec (one-line change) so CI exercises the snapshot block by default: ```diff - const VISUAL = process.env.VISUAL === '1'; + const VISUAL = process.env.VISUAL !== '0'; ``` 6. Open a PR against `main` with both the baselines and the flip. ## Acceptance criteria - Six baseline PNGs committed under `frontend/e2e/briefwechsel-rows.visual.spec.ts-snapshots/`. - `VISUAL` default flipped so the snapshot block runs in CI without opt-in. - CI run passes on the same commit where baselines are introduced (round-trip verification). ## References - PR #311 (the feature this baselines) — merged to main - ADR-005 (spec/context for the row layout)

marcel added the devops test labels 2026-04-23 21:10:09 +02:00

marcel referenced this issue

2026-04-23 21:10:45 +02:00

feat(briefwechsel): thumbnail rows with summary quote and bilateral distribution bar (#305) #311

marcel referenced this issue

2026-04-23 21:20:55 +02:00

feat(briefwechsel): thumbnail rows with summary quote and bilateral distribution bar (#305) #311

marcel referenced this issue

2026-04-23 21:21:11 +02:00

feat(briefwechsel): thumbnail rows with summary quote and bilateral distribution bar (#305) #311

marcel referenced this issue

2026-04-23 21:21:16 +02:00