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>
33 lines
1.1 KiB
TypeScript
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" }],
|
|
},
|
|
},
|
|
});
|