Golden and accessibility integration tests

epic-peer-mentor-detail-screen-ui-components-task-014 — Create golden screenshot tests for CertificationStatusBadge (all states), PeerMentorProfileHeader (with and without avatar, with expired cert), and CertificationAlertBanner. Run accessibility audit using Flutter's SemanticsController to verify all Semantics labels are present and non-empty. Validate WCAG contrast ratios programmatically using a contrast-ratio utility against design tokens. All tests must pass in CI on both light and dark theme.

high priority medium complexity testing pending testing specialist Tier 5

Acceptance Criteria

Golden files exist for: CertificationStatusBadge × 3 states × 2 themes = 6 goldens; PeerMentorProfileHeader × 3 variants (with avatar, without avatar, expired cert) × 2 themes = 6 goldens; CertificationAlertBanner × 2 states (expiring-soon, expired) × 2 themes = 4 goldens — total 16 golden files

All golden tests pass on CI using a fixed Flutter version and a Linux headless renderer (no font rendering variance)

SemanticsController audit: every interactive widget has a non-empty `label`; every tappable widget has a non-empty `hint`; no widget has both `label` and `attributedLabel` conflicting

Contrast ratio utility asserts ≥4.5:1 for all normal body text tokens and ≥3:1 for large/heading text tokens in both light and dark theme

CI pipeline step `flutter test --update-goldens` is only run manually (flag-gated), not automatically on every PR

Test failures produce a diff image artifact in CI for visual comparison

All 16 golden files are committed to the repository under `test/goldens/`

Technical Requirements

frameworks

Flutter

flutter_test

golden_toolkit (optional, for multi-device golden helpers)

data models

CertificationStatus

PeerMentorProfile

performance requirements

Golden test suite completes in under 90 seconds on CI

Images stored as PNG with lossless compression to minimise repository size

security requirements

Golden files must not contain real user data — use only fixture/mock data

ui components

CertificationStatusBadge

PeerMentorProfileHeader

CertificationAlertBanner

ThemeData (light + dark)

Execution Context

Execution Tier

Tier 5

Tier 5 - 253 tasks

Can start after Tier 4 completes

View Full Execution Plan

Implementation Notes

Golden tests are inherently fragile across OS/font rendering differences. Pin the Flutter SDK version in CI (via `flutter version` or `fvm`) and use the `flutter_test` software renderer rather than Skia GPU to avoid GPU-dependent pixel variance. Store goldens in `test/goldens//_.png`. For the contrast utility, implement `double relativeLuminance(Color c)` using the WCAG formula: `L = 0.2126*R + 0.7152*G + 0.0722*B` after linearising sRGB values.

Then `ratio = (L1+0.05)/(L2+0.05)` where L1 is the lighter. Extract colors from `ThemeData` / design token constants directly — do not re-implement color values. For the SemanticsController audit, call `tester.ensureSemantics()` at the start of the test and `semantics.dispose()` in tearDown.

Testing Requirements

Three test categories in this task: (1) Golden tests — use `matchesGoldenFile` with `RepaintBoundary`-wrapped widgets rendered at a fixed device pixel ratio (e.g. 1.0) on a fixed screen size (e.g. 400×800) to ensure reproducibility. Run on Linux CI with `--platform chrome` or the Flutter test runner's software renderer.

(2) Semantics audit — use `tester.getSemantics(find.byType(Widget))` and `SemanticsController` to enumerate all semantic nodes; assert label/hint presence. (3) Contrast audit — write a helper `assertContrastRatio(Color fg, Color bg, {double minRatio})` that computes relative luminance per WCAG 2.1 formula; call it for each color-pair from the design token system used by the three widgets in both themes.

Component

Peer Mentor Profile Header

ui low

Dependencies (1)

Write flutter_test widget tests for all six components in this epic: OrgLabelsProvider (stream emission, fallback), CertificationStatusBadge (all three states, both sizes), CertificationAlertBanner (HLF shown, non-HLF hidden, countdown accuracy), PeerMentorProfileHeader (avatar, fallback initials, error state), AssignedContactsList (populated, empty state, Blindeforbundet badge), and MentorActivitySummaryPanel (with data, empty state, tap callback). Target 80%+ branch coverage. epic-peer-mentor-detail-screen-ui-components-task-013

Epic Risks (2)

medium impact medium prob dependency

The org labels system may not yet have label keys defined for peer mentor detail screen terminology (role labels, section headings), requiring additions to the label key registry that must be coordinated with the admin configuration team.

Mitigation & Contingency

Mitigation: Audit existing label keys in the terminology system before starting OrgLabelsProvider integration. Submit required new label keys for admin configuration in parallel with component implementation.

Contingency: If label keys are not available at integration time, use hardcoded English fallbacks with a clear TODO for admin configuration, ensuring the widget renders correctly while keys are being provisioned.

high impact low prob technical

The design token semantic colors (warning, error surface) may not meet WCAG 2.2 AA 4.5:1 contrast ratio when rendered on the app's background surface tokens, requiring design system changes that affect the entire app.

Mitigation & Contingency

Mitigation: Run contrast ratio validation on the token palette during Epic 1 design token implementation. Flag any failing pairs to the design system owner before building UI components that depend on them.

Contingency: If tokens fail contrast requirements, define supplementary high-contrast override tokens specific to alert and badge contexts that meet AA without modifying the global palette.

Quick Links

All Tasks Execution Plan