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

docs: add QA test cases for 2026-06-21 mobile UX session

Browse Source 
Covers: back-to-top button, marker scroll offset, iOS viewport gap,
PhotoSwipe keyboard animation, photo strip arrows, and partial
consistency across trip/dailies/home feed pages.

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 21:52:43 +02:00
parent 35a9393537
commit 7b4a4d2b9c
1 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/working/qa/test-plan.md
+108
View File
@@ -626,3 +626,111 @@ The slug is built from `date(Y-m-d-Hi)` + title lowercased with `[^a-z0-9]+` rep
### Accessibility ### Accessibility
- [ ] Focus ring visible on all interactive elements (keyboard navigation) - [ ] Focus ring visible on all interactive elements (keyboard navigation)
- [ ] With prefers-reduced-motion: no animations/transitions fire - [ ] With prefers-reduced-motion: no animations/transitions fire
---
## 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).
> **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.
---
### TC-M.1: Back-to-top button appears on scroll
| 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) |
**Manual verification required.**
---
### TC-M.2: Map marker click scrolls entry below sticky header
| Step | Action | Expected Result |
|---|---|---|
| 1 | Open `/trips/italy-2026-demo` | Trip page loads with MapLibre map above 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 |
| 4 | Check URL bar | Hash updated to `#entry-<slug>` |
| 5 | Repeat on mobile (375px) | Same result — title fully visible below header |
**Manual verification required on both desktop and mobile.**
---
### TC-M.3: Map marker click highlights 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 |
**Manual verification required.**
---
### TC-M.4: PhotoSwipe lightbox covers full viewport on mobile
| 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 |
**Manual verification required on physical device.**
**Root cause fixed:** `.pswp { height: 100dvh }` — dynamic viewport height unit.
---
### TC-M.5: PhotoSwipe keyboard arrow animation (fullscreen lightbox)
| 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 |
**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).
---
### TC-M.6: Photo strip prev/next arrows visible on desktop
| 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 |
**Manual verification required.**
**Root cause of earlier regression:** Arrows were inserted inside `.journal-photo-wrap` (overflow:hidden). Fixed by inserting after the wrap element.
---
### TC-M.7: Entry partials consistent across all 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 |
**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.