mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
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:
1 parent
77a3ad3bc8
commit
0cf23f34ca
1 file changed
+70
@@ -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.
|
||||
Reference in new issue
Block a user