docs: add Playwright test improvement and expansion design spec
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WPJztrVGbwic2xTG7G9fjM
This commit is contained in:
@@ -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
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<gpx version="1.1" creator="test" xmlns="http://www.topografix.com/GPX/1/1">
|
||||||
|
<trk><trkseg>
|
||||||
|
<trkpt lat="43.7696" lon="11.2558"><ele>50</ele></trkpt>
|
||||||
|
</trkseg></trk>
|
||||||
|
</gpx>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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/<filename>` 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`
|
||||||
Reference in New Issue
Block a user