Visual baselines were generated as chromium-darwin.png on macOS; CI on
Linux looked for chromium-linux.png and every test failed with
"snapshot doesn't exist". Override snapshotPathTemplate to omit the
platform suffix so darwin and linux share the same baseline. Pixel
diffs from font hinting are an accepted trade-off — visual regression
gives signal for big visual breaks, not 1-pixel differences.
Existing 26 baselines renamed from *-chromium-darwin.png to
*-chromium.png to match.
Driven by:
- contribution-amount redesign on /join and /accept-invite
- board post card text color fix (a11y)
- --text-faint variable adjustment (a11y)
- STATUS_LABELS softer member-facing copy
- dev-DB seed drift on /events and /connections
Vue hydration silently drops class attribute updates when SSR and client
render different branches of a v-if chain — per the project's Auth SSR
Pattern, useAuth is client-only and server always renders unauthenticated,
so PageHeader (v-else branch) was rendering inside a leftover .loading /
.loading-state div from the v-else-if branch. On mobile that div was
being masked by the visual-test commonMasks (.loading-state), producing
a large fuchsia block in the snapshot.
Wrapping the v-if/v-else-if/v-else chain in <ClientOnly> ensures the
server renders nothing for the auth-gated content and the client performs
a clean first render, matching the pattern already used in dashboard.vue.
Also update admin-dashboard-desktop for minor anti-aliasing drift.
Adds 13 new visual regression baselines:
- Public: about (desktop + mobile), members (desktop + mobile)
- Authenticated desktop: member-account, member-activity, connections,
admin-dashboard, members-detail
- Authenticated mobile: member-dashboard, member-profile,
member-account, connections
Switches to a single serial test.describe with a beforeAll that logs in
once and saves the auth cookie via storageState. This avoids repeated
/api/dev/test-login calls that exhausted the dev server's MongoDB
connections under parallel execution.
Masks added: .tl-time, .stat-val, .item-date, .mc-avatar, .cc-avatar,
.profile-avatar, .filter-count — covering activity timestamps, stat
values, member join dates, avatars, and member counts.
