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:
parent
6c5fb6df0e
commit
34529a9432
13 changed files with 1764 additions and 1322 deletions
103
.github/workflows/update-visual-snapshots.yml
vendored
Normal file
103
.github/workflows/update-visual-snapshots.yml
vendored
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
name: Update visual snapshots
|
||||
|
||||
# How to use this workflow
|
||||
# ========================
|
||||
#
|
||||
# Visual snapshots live in `apps/planner/app/**/__screenshots__/` and are
|
||||
# committed to the repo. They are generated by Vitest browser mode running
|
||||
# the Planner's `*.browser.test.tsx` files against real Chromium via Playwright.
|
||||
#
|
||||
# When to update snapshots:
|
||||
# - You intentionally changed the look of the elevation chart (new color mode,
|
||||
# layout change, etc.) and the old snapshots are now wrong.
|
||||
# - You added a new `*.browser.test.tsx` test and need the initial snapshots.
|
||||
#
|
||||
# Two ways to trigger this workflow:
|
||||
#
|
||||
# 1. Manual dispatch (workflow_dispatch):
|
||||
# Go to Actions → "Update visual snapshots" → "Run workflow".
|
||||
# Choose the branch you want updated. The workflow will commit the new
|
||||
# snapshots back to that branch.
|
||||
#
|
||||
# 2. PR label (update-snapshots):
|
||||
# Add the `update-snapshots` label to any PR. The workflow will update
|
||||
# snapshots on the PR's head branch. Remove the label after to avoid
|
||||
# re-triggering on every subsequent push.
|
||||
#
|
||||
# After the workflow commits updated snapshots, pull the branch locally:
|
||||
# git pull origin <your-branch>
|
||||
#
|
||||
# Running locally:
|
||||
# pnpm --filter @trails-cool/planner test:visual # run tests
|
||||
# pnpm --filter @trails-cool/planner test:visual:update # update snapshots
|
||||
#
|
||||
# Platform note:
|
||||
# Snapshots are generated on ubuntu-latest to keep CI and local results
|
||||
# consistent. Snapshots generated on macOS or Windows will have subtle
|
||||
# font-rendering differences and will fail on CI. Always use this workflow
|
||||
# (or a Linux machine / Docker) to produce the canonical snapshots.
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
branch:
|
||||
description: "Branch to update snapshots on"
|
||||
required: false
|
||||
default: ""
|
||||
|
||||
pull_request:
|
||||
types: [labeled]
|
||||
|
||||
jobs:
|
||||
update-snapshots:
|
||||
# Only run for manual dispatch, or when the label is "update-snapshots"
|
||||
if: >
|
||||
github.event_name == 'workflow_dispatch' ||
|
||||
(github.event_name == 'pull_request' && github.event.label.name == 'update-snapshots')
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
contents: write # needed to push snapshot commits back
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: ${{ github.event.pull_request.head.ref || github.event.inputs.branch || github.ref }}
|
||||
# Use a token with push rights so the commit-back step can push
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Setup pnpm
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: ".nvmrc"
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Install Playwright Chromium
|
||||
run: pnpm exec playwright install chromium --with-deps
|
||||
|
||||
- name: Update visual snapshots
|
||||
run: pnpm --filter @trails-cool/planner test:visual:update
|
||||
|
||||
- name: Commit updated snapshots
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
commit_message: "chore: update visual snapshots [skip ci]"
|
||||
file_pattern: "apps/planner/app/**/__screenshots__/**"
|
||||
commit_user_name: "github-actions[bot]"
|
||||
commit_user_email: "github-actions[bot]@users.noreply.github.com"
|
||||
|
||||
- name: Upload snapshots as artifact
|
||||
if: always()
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: visual-snapshots
|
||||
path: apps/planner/app/**/__screenshots__/
|
||||
if-no-files-found: ignore
|
||||
Loading…
Add table
Add a link
Reference in a new issue