From c703a099672b0e04356bb7329b6e9814f8f2f5f9 Mon Sep 17 00:00:00 2001 From: Mischa Date: Sun, 21 Jun 2026 15:09:44 +0200 Subject: [PATCH] docs: add Playwright test improvement and expansion design spec Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01WPJztrVGbwic2xTG7G9fjM --- .../2026-06-21-playwright-tests-design.md | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 docs/working/specs/2026-06-21-playwright-tests-design.md diff --git a/docs/working/specs/2026-06-21-playwright-tests-design.md b/docs/working/specs/2026-06-21-playwright-tests-design.md new file mode 100644 index 0000000..22ef472 --- /dev/null +++ b/docs/working/specs/2026-06-21-playwright-tests-design.md @@ -0,0 +1,138 @@ +# Playwright Tests — Improvement & Expansion + +**Date:** 2026-06-21 +**Status:** Approved + +--- + +## Goal + +Reorganise the flat `tests/ui/` directory into feature-scoped subdirectories, add a dedicated GPX Manager test suite (end-to-end), plug three gaps in the post form suite, and extend the axe accessibility scans to two new pages. + +--- + +## Folder Structure + +Current flat layout becomes: + +``` +tests/ + fixtures/ + test-photo.jpg (existing) + test-nonimage.txt (existing) + test-route.gpx (new — minimal valid GPX XML, ~200 bytes, one trackpoint) + ui/ + auth/ + auth.setup.js (moved) + auth.spec.js (moved) + post/ + post.spec.js (moved + P6-P8 added) + validation.spec.js (moved) + gpx/ + gpx-journey.spec.js (moved) + gpx-manager.spec.js (new) + maps/ + maps.spec.js (moved) + stories/ + stories.spec.js (moved) + dailies/ + dailies.spec.js (moved) + home/ + home.spec.js (moved) + home-highlights.spec.js (moved) + nav/ + nav.spec.js (moved) + trip/ + trip-filter.spec.js (moved) + a11y/ + accessibility.spec.js (moved + AX6-AX7 added) + helpers.js (stays at ui/ root — shared by all subdirs) + global-setup.js (unchanged) +``` + +`playwright.config.js` requires no changes — `testDir: './tests/ui'` recurses automatically. The `auth.setup.js` `testMatch: /auth\.setup\.js/` resolves by filename regardless of depth. + +--- + +## New Fixture: `test-route.gpx` + +Minimal valid GPX 1.1 file, one trackpoint. Accepted by Grav's media handler without triggering real GPX parsing in the app. + +```xml + + + + 50 + + +``` + +--- + +## New Tests: `gpx/gpx-manager.spec.js` + +All tests run against the live Grav API (end-to-end, no mocking). + +### Auth + +| ID | Description | +|----|-------------| +| GM1 | `/gpx-manager` with auth renders one `.gpx-trip` section per published trip | +| GM2 | `/gpx-manager` without auth shows `#grav-login` inline login form (fresh context, no storageState) | + +### File Listing + +| ID | Description | +|----|-------------| +| GM3 | After the page loads, the file list for italy-2026-demo either shows a table or the "No GPX files." empty state — the `.gpx-loading` placeholder must not remain | + +### Upload + +| ID | Description | +|----|-------------| +| GM4 | Upload `test-route.gpx` to italy-2026-demo → filename `test-route.gpx` appears in the file list table | +| GM5 | Upload a file with a non-slug name ("My Route 1.gpx", same buffer, fake name via `setInputFiles({ name, mimeType, buffer })`) → list shows `my-route-1.gpx` (slugified) | +| GM6 | Submit the upload form without selecting a file → `.gpx-status` shows "Choose a file first." | + +### Delete + +| ID | Description | +|----|-------------| +| GM7 | After uploading `test-route.gpx`, click its Delete button, confirm the dialog → row disappears from the file list | + +### Cleanup + +`afterAll` reads `tests/.auth/user.json`, extracts the session cookie, and issues Node-level `fetch` `DELETE` calls to `/api/v1/pages/trips/italy-2026-demo/media/` for any fixture files that remain (guards against mid-test failures leaving orphaned files). + +--- + +## Post Form Additions: `post/post.spec.js` + +Three new tests appended to the existing P1–P5 suite. P2 (photo upload) stays skipped. + +| ID | Description | +|----|-------------| +| P6 | Successful submit shows "Entry posted successfully!" text in the page (currently the test only waits for `.form-messages, .notices` without asserting content) | +| P7 | Date field is pre-filled on page load with a timestamp within 5 minutes of `Date.now()` (blueprint `default: now`, format `Y-m-d H:i`) | +| P8 | After a successful submit, title and content fields are empty (blueprint `reset: true` flushes the form) | + +--- + +## Accessibility Additions: `a11y/accessibility.spec.js` + +Two new axe scans appended to the existing AX1–AX5 block. + +| ID | URL | Notes | +|----|-----|-------| +| AX6 | `/gpx-manager` | API mocked with `page.route()` so the file list renders without a real upload dependency | +| AX7 | `/trips/italy-2026-demo/stories/val-dorcia-at-dawn` | Story page not yet covered by any axe scan | + +--- + +## What Does Not Change + +- `playwright.config.js` — untouched +- `tests/global-setup.js` — untouched +- All existing test IDs (A1–A5, G1–G5, M1–M8, etc.) — test logic is unchanged; files are moved, not rewritten +- P2 — stays skipped; photo upload path needs post-form improvements first +- `helpers.js` — stays at `tests/ui/helpers.js`; import paths in moved specs update from `./helpers` to `../helpers`