Split ElevationChart + PlannerMap into deep modules; add visual regression testing

ElevationChart (1013 lines) split into:
- elevation-chart-draw.ts — pure drawElevationChart(ctx, w, h, params) function
- use-elevation-data.ts — useElevationData(routeData) hook
- ElevationChart.tsx — ~300 lines, interaction + render only

PlannerMap (869 lines) split into:
- MapHelpers.tsx — 7 Leaflet sub-components (MapExposer, RouteFitter, MapClickHandler,
  CursorTracker, NoGoAreaButton, OverlaySync, PoiRefresher)
- use-waypoint-manager.ts — all waypoint CRUD + route data sync
- use-gpx-drop.ts — GPX drag-and-drop hook
- PlannerMap.tsx — ~200 lines, orchestration only

Add Vitest browser visual regression tests for drawElevationChart via
@vitest/browser + Playwright (toMatchScreenshot). Tests cover plain, grade,
elevation, surface color modes plus hover and drag-select states.

Add update-visual-snapshots.yml workflow: triggered by workflow_dispatch or
the `update-snapshots` PR label; commits snapshots back to the branch.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-05-10 16:41:23 +02:00
parent 6c5fb6df0e
commit 34529a9432
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
13 changed files with 1764 additions and 1322 deletions

View file

@ -9,7 +9,9 @@
"start": "node server.ts",
"typecheck": "react-router typegen && tsc",
"lint": "eslint .",
"test": "vitest run"
"test": "vitest run",
"test:visual": "vitest run --config vitest.browser.config.ts",
"test:visual:update": "vitest run --config vitest.browser.config.ts --update-snapshots"
},
"dependencies": {
"@codemirror/commands": "^6.10.3",
@ -22,9 +24,9 @@
"@sentry/node": "catalog:",
"@sentry/react": "catalog:",
"@trails-cool/db": "workspace:*",
"@trails-cool/jobs": "workspace:*",
"@trails-cool/gpx": "workspace:*",
"@trails-cool/i18n": "workspace:*",
"@trails-cool/jobs": "workspace:*",
"@trails-cool/map": "workspace:*",
"@trails-cool/map-core": "workspace:*",
"@trails-cool/sentry-config": "workspace:*",
@ -52,6 +54,7 @@
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"@types/ws": "^8.18.1",
"@vitest/browser": "^4.1.5",
"leaflet.markercluster": "^1.5.3",
"pino-pretty": "^13.1.3",
"tailwindcss": "catalog:",