From fac3b1820192bcb4a3fb262bce1c280ee70d39a1 Mon Sep 17 00:00:00 2001 From: Mischa Date: Sun, 21 Jun 2026 22:05:41 +0200 Subject: [PATCH] =?UTF-8?q?docs:=20fix=20TC-M=20QA=20cases=20=E2=80=94=20c?= =?UTF-8?q?orrect=20URLs,=20hover=20rule,=20highlight=20detail?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr --- docs/working/qa/test-plan.md | 91 +++++++++++++++++++----------------- 1 file changed, 47 insertions(+), 44 deletions(-) diff --git a/docs/working/qa/test-plan.md b/docs/working/qa/test-plan.md index 442f50e..ab3d528 100644 --- a/docs/working/qa/test-plan.md +++ b/docs/working/qa/test-plan.md @@ -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 -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 | |---|---|---| -| 1 | Open `/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 | -| 3 | Scroll back up to top | Button disappears | -| 4 | Scroll down again, click `↑ Top` | Page scrolls smoothly to top; button disappears | -| 5 | Inspect URL bar after clicking | Hash is removed from URL (no `#entry-*` leftover) | +| 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 the bottom-right corner | +| 3 | Scroll back up near the top | Button disappears | +| 4 | Scroll down again, then click `↑ Top` | Page scrolls smoothly to the top; button disappears | +| 5 | Check URL bar after clicking top | No `#entry-*` hash in URL (the button clears any leftover hash) | **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 | |---|---|---| -| 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 | -| 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-` | -| 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.** --- -### TC-M.3: Map marker click highlights entry +### TC-M.3: Map marker click highlights matched entry | Step | Action | Expected Result | |---|---|---| -| 1 | Click a map marker | After scroll settles (~350ms), the matching entry card briefly highlights (e.g. background flash) | -| 2 | Highlight fades | After ~700ms the highlight is gone; no permanent style change | +| 1 | Click a map marker | Page scrolls to entry; after ~350ms the matched entry card shows a teal-tinted background | +| 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 | |---|---|---| -| 1 | Open a trip page on iOS Safari or Android Chrome | — | -| 2 | Scroll down so the address bar hides (viewport 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 | -| 4 | Repeat on desktop Firefox and Chrome | Lightbox covers full window — no regression | +| 1 | Open a trip page on a mobile browser (iOS Safari or Android Chrome) | — | +| 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 the bottom | +| 4 | Repeat on desktop Firefox and Chrome | Lightbox covers the full window — no regression on desktop | -**Manual verification required on physical device.** -**Root cause fixed:** `.pswp { height: 100dvh }` — dynamic viewport height unit. +**Manual verification required on a physical device.** +**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 | |---|---|---| -| 1 | Open a journal entry photo in the lightbox (click expand icon) | Lightbox opens | -| 2 | Press `→` arrow key | Next image slides in from the right with a subtle fade; no instant jump | -| 3 | Press `←` arrow key | Previous image slides in from the left with a subtle fade | -| 4 | Hold down `→` rapidly | Each keypress triggers a fresh animation; no stuck state | -| 5 | Swipe with mouse/touch | Swipe animation unaffected (unchanged, should still animate as before) | -| 6 | Repeat in Firefox | Same smooth animation — Firefox was the repro browser for the original bug | +| 1 | Open a journal entry that has multiple photos; click the expand icon | Lightbox opens fullscreen | +| 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 smoothly from the left with a fade | +| 4 | Press `→` rapidly several times | Each keypress restarts the animation from scratch; no stuck/broken state | +| 5 | Navigate with mouse drag or touch swipe | Swipe animation unchanged — the fix only affects keyboard navigation | +| 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.** -**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). +**Manual verification required; must test in Firefox specifically.** +**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 | |---|---|---| -| 1 | Open a trip page on desktop (≥1024px) | Journal entries with multiple photos show `‹` / `›` arrow buttons beside the photo strip | -| 2 | Click `›` | Strip scrolls to next photo with smooth animation | -| 3 | Click `‹` | Strip scrolls back | -| 4 | Check arrows are outside the photo strip frame | Arrows not clipped by `overflow: hidden` on the photo container | -| 5 | On mobile | Arrows not shown (CSS hides them); dots navigation still works | +| 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 smoothly to the next photo | +| 3 | Click `‹` | Strip scrolls back to the previous photo | +| 4 | Inspect DOM | Arrow buttons (`div.strip-controls`) are siblings of `.journal-photo-wrap`, **not** children — they are outside the overflow:hidden container | +| 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.** -**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 | |---|---|---| -| 1 | Open `/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 | -| 3 | Open `/` (home page in trip mode) | Same journal entry and story card markup | -| 4 | On all three pages: tap photo expand icon | PhotoSwipe lightbox opens identically | -| 5 | On all three pages: click map marker | Scrolls to entry correctly with header offset | -| 6 | On all three pages: keyboard arrows in lightbox | Animation works | +| 1 | Open `http://localhost:8081/trips/italy-2026-demo` (trip page) | Journal entries and story cards render correctly | +| 2 | Open `http://localhost:8081/trips/italy-2026-demo/dailies` | Identical entry markup — same photo strips, dots, expand button | +| 3 | Open `http://localhost:8081/home` (home page, currently in between-trips mode — see note) | — | +| 4 | On trip page and dailies: tap photo expand icon | PhotoSwipe lightbox opens identically on both | +| 5 | On trip page and dailies: click a map marker | Scrolls to entry with correct header offset on both | +| 6 | On trip page and dailies: keyboard arrows in lightbox | Animation works on both | -**Manual verification required on all three pages.** -**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. +**Manual verification required on trip page and dailies.** +**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.