Stsezhka

Appearance

Spec: BikeTrack E2E Regression Testing Plan ​

Objective ​

This document outlines the full end-to-end (E2E) regression testing suite for the BikeTrack Planner application. It is designed to be executed by a QA/Test Agent (e.g., via Playwright) to ensure that core map functionalities, route generation, POI management, and Phase 2 advanced features remain stable.

Environments & Tooling ​

  • Framework: Playwright (TypeScript)
  • Target browsers: Chromium, WebKit, Firefox
  • State Management Assertions: Verify Zustand states (MapMode, Planner, Poi) align with the visual rendering.
  • Map Context: MapLibre GL JS canvas assertions (mocking geolocations, evaluating canvas drawing, checking DOM for HTML markers).

Test Suites ​

Suite 1: Core Routing & Waypoints ​

Goal: Verify basic point-to-point route building and waypoint manipulation.

  • [ ] TC 1.1: Add Waypoints via Click
    • Click on the map -> verifies A marker appears.
    • Click elsewhere -> verifies B marker appears.
    • Asserts that a routing API request is triggered and a route line is drawn.
  • [ ] TC 1.2: Waypoint Drag & Drop
    • Drag marker B to a new location.
    • Asserts that the routing request is re-triggered and the line recalculates.
  • [ ] TC 1.3: Start & Finish Labels (Phase 2)
    • Add 3 waypoints.
    • Asserts that the first marker has a "Start" green label.
    • Asserts that the middle marker is "A" (blue).
    • Asserts that the last marker is "Finish" (dark/checkered).
  • [ ] TC 1.4: Delete Waypoint
    • Click on a marker to open the popup.
    • Click "Delete".
    • Asserts that the marker disappears and the route recalculates between the remaining points.

Suite 2: POI Management ​

Goal: Verify that Points of Interest can be created, updated, and deleted seamlessly.

  • [ ] TC 2.1: Create POI
    • Right-click on the map -> Select "Create POI".
    • Fill out the POI popup form (Name, Type).
    • Submit.
    • Asserts that the POI appears in the poiStore and on the map.
  • [ ] TC 2.2: Optimistic UI Rollback
    • Intercept network request to force POI creation failure.
    • Attempt to create POI.
    • Asserts that an error toast appears and the POI is removed from the map.

Suite 3: Advanced Route Features (Phase 2) ​

Goal: Verify GPX preview and comparison functionality.

  • [ ] TC 3.1: GPX Import Preview
    • Click "Import GPX" in Floating Toolbar.
    • Upload a valid GPX mock file.
    • Asserts that PreviewConfirmPanel appears at the bottom.
    • Asserts that the dashed preview track is rendered.
  • [ ] TC 3.2: Cancel GPX Import
    • From the preview state, click "Cancel".
    • Asserts that the panel disappears, the dashed line is removed, and the existing route remains untouched.
  • [ ] TC 3.3: Confirm GPX Import
    • From the preview state, click "Import".
    • Asserts that the main route changes, distance updates in the BottomBar, and preview elements are unmounted.
  • [ ] TC 3.4: Track Comparison Layer
    • Click "Compare GPX" in the Floating Toolbar.
    • Upload a secondary GPX track.
    • Asserts that a pink "ghost" comparison layer appears.
    • Asserts that route statistics (BottomBar) do not change.
    • Click "Clear Compare" and verify the ghost layer disappears.

Suite 4: Map Controls & Settings ​

Goal: Verify visual settings and toggles.

  • [ ] TC 4.1: Theme Toggle (Phase 2)
    • Click the Sun/Moon ThemeToggle button.
    • Asserts that data-theme="light" is appended to document.documentElement.
    • Asserts that CSS variables correctly update background colors (e.g., surface is white).
    • Refresh the page -> Asserts the theme preference persists.
  • [ ] TC 4.2: 3D Terrain Toggle
    • Toggle 3D Terrain in MapControls.
    • Asserts that the MapLibre terrain source is activated.
  • [ ] TC 4.3: Undo/Redo Shortcuts
    • Add a point, add another point.
    • Press Ctrl/Cmd + Z.
    • Asserts that the last point disappears.
    • Press Ctrl/Cmd + Shift + Z (or Ctrl/Cmd + Y).
    • Asserts that the point reappears.

Suite 5: Library & Storage ​

Goal: Verify track saving and loading from Firebase/local storage.

  • [ ] TC 5.1: Save Track
    • Click "Save" in Floating Toolbar.
    • Fill out the form in the SaveModal.
    • Asserts that the track appears in the Library list.
  • [ ] TC 5.2: Open Track from Library
    • Navigate to Library Page.
    • Select a track.
    • Asserts that the app switches to the map view, sets isTrackMode to true, and draws a yellow highlight (#f9e2af) outline on the map edges.

Execution Guidelines for QA Agent ​

  1. Use page.evaluate() to deeply inspect Zustand stores where DOM assertions are insufficient.
  2. For map clicks, wait for the map to become fully idle (page.waitForFunction(() => map.loaded())) before firing events.
  3. Utilize test.use({ locale: 'en-US' }) to prevent language discrepancies in date/distance formatting assertions.
  4. Fail fast: If the routing backend mock is not responding, skip Suite 1.