trails/apps/planner/vitest.browser.config.ts
Ullrich Schäfer 34529a9432
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>
2026-05-10 16:41:23 +02:00

33 lines
1.1 KiB
TypeScript

import { defineConfig } from "vitest/config";
import { resolve } from "node:path";
// Separate config for Vitest browser visual regression tests.
// Run with: pnpm --filter @trails-cool/planner test:visual
// Update snapshots: pnpm --filter @trails-cool/planner test:visual:update
//
// Snapshots live next to each test file in a __screenshots__/ directory.
// On CI, snapshots are updated via the "Update visual snapshots" workflow
// (.github/workflows/update-visual-snapshots.yml), triggered manually or
// by adding the `update-snapshots` label to a PR.
export default defineConfig({
esbuild: {
jsx: "automatic",
},
resolve: {
alias: {
"~": resolve(import.meta.dirname, "app"),
},
},
test: {
name: "browser",
include: ["app/**/*.browser.test.{ts,tsx}"],
browser: {
enabled: true,
// Provider is resolved from whichever @vitest/browser peer is installed.
// playwright is the default when @playwright/test is available.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
provider: "playwright" as any,
instances: [{ browser: "chromium" }],
},
},
});