test(charts): mobile-viewport e2e spec for header layout + tick density

Adds a Playwright spec that runs only on the chromium-mobile project
(Pixel 5, 393 × 851) and gates the two regressions the previous
commit cleared:

- Every chart card on the dashboard keeps its range tabs on a single
  horizontal row (asserts that all `[data-slot=chart-range-tab]`
  inside a card share one rounded `top` coordinate). Mock data feeds
  every chart 30 days of measurements + 30 days of compliance points
  so the controls row actually paints with all chips and tabs.

- Every recharts x-axis paints at most seven visible tick labels at
  Pixel 5. The helper caps at six; the seven-tick allowance covers
  Recharts' preserveStartEnd interaction with rounding.

The PROD probe script that drove the audit is also committed at
.planning/v1419-a2-prod-probe.mjs for future regression runs, with
the findings recorded in .planning/phase-A2-mobile-findings.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-10 13:07:25 +02:00
1 parent 77a3ad3bc8
commit 0cf23f34ca
1 file changed
+70
+70
View File
@@ -0,0 +1,70 @@
# Phase A5 — Settings/Integrations status-UI consolidation (v1.4.19)
Completed 2026-05-10 ~13:05 CEST. Three atomic TDD-first commits on
`origin/main`:
| # | SHA | What it ships |
| --- | --------- | ------------------------------------------------------------------------------ |
| 1 | `ba0d6b8` | `feat(integrations): IntegrationStatusPill component (single tag, mobile-safe)`|
| 2 | `0dcc91a` | `refactor(integrations): single status pill, drop redundant containers` |
| 3 | `47a8fc7` | `test(integrations): Pixel-5 e2e for consolidated status pill` |
Commit #2 absorbed Marc's planned commits #2 (Withings) and #3
(Mood Log) — the refactor was inherently atomic because both cards
share the new `pillStateFor()` helper, the new
`<IntegrationErrorMessage>` inline alert, and the same Vitest spec
covers both. Splitting would have left a half-converted intermediate
state on `main`. Commit #1 already had the i18n key tests + 6 Vitest
component tests; commit #2 added 5 more covering the section-level
contract; commit #3 added the Playwright Pixel-5 spec.
## What changed
- **`src/components/settings/integration-status-pill.tsx`** (new) —
Reusable pill component, Dracula-tokenized chip, three states
(`connected` / `error` / `disconnected`). When connected it renders
"Connected · 12 min ago" with locale-aware relative time
(`just now` < 1 min, `12 min ago`, `3 h ago`, `2 d ago`). Mobile-
safe: `whitespace-nowrap` + abbreviated forms ("min", "h", "d") so
the chip fits in <11 chars on the worst-case Pixel-5 layout.
- **`src/components/settings/integrations-section.tsx`** — Withings
and Mood Log cards both render exactly one
`<IntegrationStatusPill>` top-right of the header, followed by a
`<hr data-testid="integration-card-divider">` for consistency. The
v1.4.15 `<IntegrationStatusBanner>` (the
"connected / last successful / last attempt" trio container) is
removed; its only useful signal — the lastError text on a transient
failure — is preserved as a compact `<IntegrationErrorMessage>`
inline alert above the action row. Mood Log's redundant
bottom-of-card "letzter Sync" line is gone.
- **`messages/{en,de}.json`** — New `settings.integrationPill.*` keys
(`connected`, `errorReconnect`, `notConnected`, `justNow`,
`minutesAgo`, `hoursAgo`, `daysAgo`, `ariaLabel`).
## Verification
- `pnpm test` — 1646/1646 pass (was 1632 before A5; +6 pill tests, +5
refactored section tests, +3 from other agents' parallel work).
- `pnpm typecheck` — 0 errors.
- `pnpm lint` — 0 errors, 14 pre-existing warnings (none from A5).
- E2E (`e2e/settings-integrations-mobile.spec.ts`) — Pixel-5 spec
added; not run in this session (no live test server). Pin: no
horizontal page scroll, exactly two pills mounted, no orphan
banner.
## Cross-agent race notes
- The pill commit `ba0d6b8` accidentally bundled A4's `.planning/`
edits (STATE.md + `phase-A4-report.md`) — same shared-cwd race
documented across earlier marathons. Net effect: A4's report now
also lives on `origin/main`, no information lost.
- Push race: A6 landed two commits between commit #2 and the e2e
push. Fast-forward succeeded without rebase.
## Reuse hook for v1.4.20
`<IntegrationStatusPill>` is the canonical surface for any future
integration card. v1.4.20's Apple Health card (per the iOS app +
Apple Health milestone) reuses the same component — drop a
`<IntegrationStatusPill state={…} lastSyncAt={…} />` next to the
heart icon and the visual contract matches the existing two cards.