Files
intotheeast-com/docs/working/specs/2026-06-21-playwright-tests-design.md

139 lines
4.7 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 P1P5 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 AX1AX5 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 (A1A5, G1G5, M1M8, 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`