m038/intotheeast-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fix TC-M QA cases — correct URLs, hover rule, highlight detail

Browse Source 
- Wrong active trip slug in intro (japan-korea → us-canada-mex-2024)
- Home page URL /home not /
- TC-M.3: describe teal-fade animation precisely, not "background flash"
- TC-M.6: arrows hidden by hover:none (touch devices), not by screen width
- TC-M.7: add note that home feed only renders in trip mode; explain how to verify

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
Mischa
2026-06-21 22:05:41 +02:00
parent 7b4a4d2b9c
commit fac3b18201
1 changed files with 47 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/working/qa/test-plan.md
+46 -43
View File
@@ -631,9 +631,9 @@ The slug is built from `date(Y-m-d-Hi)` + title lowercased with `[^a-z0-9]+` rep
## Mobile UX — Session 2026-06-21 ## Mobile UX — Session 2026-06-21
These test cases cover the improvements made in session 2026-06-21. Test page: **http://localhost:8081/trips/japan-korea-2026** (trip page, primary view). These test cases cover the improvements made in session 2026-06-21.
> **Context:** All changes target `trip.html.twig`, `home.html.twig`, and `dailies.html.twig`. Entry HTML is now shared via `partials/entry-journal.html.twig` and `partials/entry-story.html.twig`. The demo trip at `/trips/italy-2026-demo` has enough entries + stories to exercise all cases. > **Context:** All changes target `trip.html.twig`, `home.html.twig`, and `dailies.html.twig`. Entry HTML is now shared via `partials/entry-journal.html.twig` and `partials/entry-story.html.twig`. Use the demo trip at `/trips/italy-2026-demo` — it has controlled content (12 journal entries + 4 stories + 7 GPX files). The home page is at `/home`. The active trip is currently `us-canada-mex-2024`.
--- ---
@@ -641,11 +641,11 @@ These test cases cover the improvements made in session 2026-06-21. Test page: *
| Step | Action | Expected Result | | Step | Action | Expected Result |
|---|---|---| |---|---|---|
| 1 | Open `/trips/italy-2026-demo` in desktop or mobile browser | Page loads; no back-to-top button visible | | 1 | Open `http://localhost:8081/trips/italy-2026-demo` in desktop or mobile browser | Page loads; no back-to-top button visible |
| 2 | Scroll down past ~80% of viewport height | `↑ Top` button appears in bottom-right corner | | 2 | Scroll down past ~80% of viewport height | `↑ Top` button appears in the bottom-right corner |
| 3 | Scroll back up to top | Button disappears | | 3 | Scroll back up near the top | Button disappears |
| 4 | Scroll down again, click `↑ Top` | Page scrolls smoothly to top; button disappears | | 4 | Scroll down again, then click `↑ Top` | Page scrolls smoothly to the top; button disappears |
| 5 | Inspect URL bar after clicking | Hash is removed from URL (no `#entry-*` leftover) | | 5 | Check URL bar after clicking top | No `#entry-*` hash in URL (the button clears any leftover hash) |
**Manual verification required.** **Manual verification required.**
@@ -655,24 +655,25 @@ These test cases cover the improvements made in session 2026-06-21. Test page: *
| Step | Action | Expected Result | | Step | Action | Expected Result |
|---|---|---| |---|---|---|
| 1 | Open `/trips/italy-2026-demo` | Trip page loads with MapLibre map above feed | | 1 | Open `http://localhost:8081/trips/italy-2026-demo` | Trip page loads with MapLibre mini-map above the feed |
| 2 | Click any map marker | Page scrolls to the matching journal entry | | 2 | Click any map marker | Page scrolls to the matching journal entry |
| 3 | Check scroll position | Entry title is **below** the sticky site header — not hidden behind it | | 3 | Check scroll position | Entry title is fully visible **below** the sticky site header — not hidden behind it |
| 4 | Check URL bar | Hash updated to `#entry-<slug>` | | 4 | Check URL bar | Hash updated to `#entry-<slug>` |
| 5 | Repeat on mobile (375px) | Same result — title fully visible below header | | 5 | Repeat on mobile (375px viewport) | Same result — title fully visible below header on small screen |
**Manual verification required on both desktop and mobile.** **Manual verification required on both desktop and mobile.**
--- ---
### TC-M.3: Map marker click highlights entry ### TC-M.3: Map marker click highlights matched entry
| Step | Action | Expected Result | | Step | Action | Expected Result |
|---|---|---| |---|---|---|
| 1 | Click a map marker | After scroll settles (~350ms), the matching entry card briefly highlights (e.g. background flash) | | 1 | Click a map marker | Page scrolls to entry; after ~350ms the matched entry card shows a teal-tinted background |
| 2 | Highlight fades | After ~700ms the highlight is gone; no permanent style change | | 2 | Highlight fades out | Over 700ms the teal background fades to transparent; no permanent style change after |
**Manual verification required.** **Manual verification required.**
**Implementation detail:** CSS animation `card-highlight` (0%: teal-tinted bg → 100%: transparent). Class `is-highlighted` is added 350ms after click (after scroll settles) and removed after 700ms.
--- ---
@@ -680,13 +681,13 @@ These test cases cover the improvements made in session 2026-06-21. Test page: *
| Step | Action | Expected Result | | Step | Action | Expected Result |
|---|---|---| |---|---|---|
| 1 | Open a trip page on iOS Safari or Android Chrome | — | | 1 | Open a trip page on a mobile browser (iOS Safari or Android Chrome) | — |
| 2 | Scroll down so the address bar hides (viewport expands) | — | | 2 | Scroll down so the browser address bar hides (viewport visually expands) | — |
| 3 | Tap a photo to open the lightbox | Lightbox background covers the **full** visible area — no gap at bottom where the old address bar was | | 3 | Tap a photo to open the lightbox | Lightbox background covers the **full visible area** — no gap at the bottom |
| 4 | Repeat on desktop Firefox and Chrome | Lightbox covers full window — no regression | | 4 | Repeat on desktop Firefox and Chrome | Lightbox covers the full window — no regression on desktop |
**Manual verification required on physical device.** **Manual verification required on a physical device.**
**Root cause fixed:** `.pswp { height: 100dvh }` — dynamic viewport height unit. **Root cause fixed:** `.pswp { height: 100dvh }` — `100dvh` tracks the live viewport dynamically; `100vh` was freezing at the initial height before the address bar hid.
--- ---
@@ -694,43 +695,45 @@ These test cases cover the improvements made in session 2026-06-21. Test page: *
| Step | Action | Expected Result | | Step | Action | Expected Result |
|---|---|---| |---|---|---|
| 1 | Open a journal entry photo in the lightbox (click expand icon) | Lightbox opens | | 1 | Open a journal entry that has multiple photos; click the expand icon | Lightbox opens fullscreen |
| 2 | Press `→` arrow key | Next image slides in from the right with a subtle fade; no instant jump | | 2 | Press `→` arrow key | Next image slides in smoothly from the right with a fade; no instant jump |
| 3 | Press `←` arrow key | Previous image slides in from the left with a subtle fade | | 3 | Press `←` arrow key | Previous image slides in smoothly from the left with a fade |
| 4 | Hold down `→` rapidly | Each keypress triggers a fresh animation; no stuck state | | 4 | Press `→` rapidly several times | Each keypress restarts the animation from scratch; no stuck/broken state |
| 5 | Swipe with mouse/touch | Swipe animation unaffected (unchanged, should still animate as before) | | 5 | Navigate with mouse drag or touch swipe | Swipe animation unchanged — the fix only affects keyboard navigation |
| 6 | Repeat in Firefox | Same smooth animation — Firefox was the repro browser for the original bug | | 6 | Repeat steps 2–4 in Firefox | Same smooth animation — Firefox Linux was the original repro environment |
**Manual verification required in Firefox (Linux/Mac/Windows) and Chrome.** **Manual verification required; must test in Firefox specifically.**
**Root cause fixed:** `pswp.currSlide.el` was `undefined` (`.el` belongs to the itemHolder, not the Slide). Changed to `pswp.currSlide.container` (the `.pswp__zoom-wrap` element). **Root cause fixed:** `pswp.currSlide.el` is `undefined` in the PhotoSwipe v5 Slide class — `.el` is a property of the itemHolder wrapper, not the Slide. Changed to `pswp.currSlide.container` (the `.pswp__zoom-wrap` element), which is the correct Slide DOM reference.
--- ---
### TC-M.6: Photo strip prev/next arrows visible on desktop ### TC-M.6: Photo strip prev/next arrows on pointer devices
| Step | Action | Expected Result | | Step | Action | Expected Result |
|---|---|---| |---|---|---|
| 1 | Open a trip page on desktop (≥1024px) | Journal entries with multiple photos show `‹` / `›` arrow buttons beside the photo strip | | 1 | Open `http://localhost:8081/trips/italy-2026-demo` on a desktop with a mouse | Journal entries with multiple photos show `‹` / `›` arrow buttons positioned outside the photo strip |
| 2 | Click `›` | Strip scrolls to next photo with smooth animation | | 2 | Click `›` | Strip scrolls smoothly to the next photo |
| 3 | Click `‹` | Strip scrolls back | | 3 | Click `‹` | Strip scrolls back to the previous photo |
| 4 | Check arrows are outside the photo strip frame | Arrows not clipped by `overflow: hidden` on the photo container | | 4 | Inspect DOM | Arrow buttons (`div.strip-controls`) are siblings of `.journal-photo-wrap`, **not** children — they are outside the overflow:hidden container |
| 5 | On mobile | Arrows not shown (CSS hides them); dots navigation still works | | 5 | Open the same page on a touchscreen (phone or touch-only tablet) | Arrow buttons are not rendered / hidden; dot navigation still works |
**Manual verification required.** **Manual verification required.**
**Root cause of earlier regression:** Arrows were inserted inside `.journal-photo-wrap` (overflow:hidden). Fixed by inserting after the wrap element. **Note:** Arrows are hidden via `@media (hover: none)` — the rule targets touch-primary devices, not screen width. A desktop touchscreen monitor would also hide arrows.
**Root cause of earlier regression:** Arrows were being inserted inside `.journal-photo-wrap` (which has `overflow: hidden`) and were clipped. Fixed by inserting them after the wrap element.
--- ---
### TC-M.7: Entry partials consistent across all feed pages ### TC-M.7: Entry partials consistent across all three feed pages
| Step | Action | Expected Result | | Step | Action | Expected Result |
|---|---|---| |---|---|---|
| 1 | Open `/trips/italy-2026-demo` (trip page) | Journal entries and story cards render correctly | | 1 | Open `http://localhost:8081/trips/italy-2026-demo` (trip page) | Journal entries and story cards render correctly |
| 2 | Open `/trips/italy-2026-demo/dailies` | Same entry markup, same photo strips, same dots, same expand button | | 2 | Open `http://localhost:8081/trips/italy-2026-demo/dailies` | Identical entry markup — same photo strips, dots, expand button |
| 3 | Open `/` (home page in trip mode) | Same journal entry and story card markup | | 3 | Open `http://localhost:8081/home` (home page, currently in between-trips mode — see note) | — |
| 4 | On all three pages: tap photo expand icon | PhotoSwipe lightbox opens identically | | 4 | On trip page and dailies: tap photo expand icon | PhotoSwipe lightbox opens identically on both |
| 5 | On all three pages: click map marker | Scrolls to entry correctly with header offset | | 5 | On trip page and dailies: click a map marker | Scrolls to entry with correct header offset on both |
| 6 | On all three pages: keyboard arrows in lightbox | Animation works | | 6 | On trip page and dailies: keyboard arrows in lightbox | Animation works on both |
**Manual verification required on all three pages.** **Manual verification required on trip page and dailies.**
**Context:** Entry HTML was extracted from trip.html.twig into shared partials (`partials/entry-journal.html.twig`, `partials/entry-story.html.twig`) and included from all three templates. **Note on home page:** The home page only renders the journal feed in **trip mode** (when `active_trip` is set and the trip is ongoing). Currently `active_trip` is `us-canada-mex-2024` and the trip may be in between-trips mode, so the home page may not show a journal feed. Verify by checking `http://localhost:8081/home` — if it shows the between-trips highlights grid, the home page feed cannot be tested without switching active trip or adjusting the trip dates.
**Context:** Entry HTML was extracted into shared partials (`partials/entry-journal.html.twig`, `partials/entry-story.html.twig`) and included from all three templates.