- PROJECT.md, README.md, TEST_GUIDE.md: status line refreshed; rate-limiter doc-vs-code drift fixed; HTML export section rewritten for the SvelteKit- static viewer; SSE event names + new events documented; config seed block extended with planned toggles + privacy_note; decision log entries added. - docs/CONCEPT_HTML_VIEWER.md, docs/CONCEPT_MOBILE_UI.md: banner the design intent as shipped; point at the source-of-truth code paths. - docs/CONCEPT_DIASHOW.md: planned-then-shipped design for the live diashow (two-queue policy, pluggable transitions, data-mode aware). - docs/FEATURES.md: capability matrix by role (Guest / Host / Admin) plus prose per area (auth, posting, feed, moderation, admin, export, gestures, data mode, quotas, privacy note, extensibility). - docs/USER_JOURNEYS.md: step-by-step flows for every supported scenario, including PIN reset by host, data mode, privacy note, gestures, and the admin toggles. - docs/IDEAS.md: speculative extensions (global diashow, reactions, multi-tenancy, animation pack, etc.) — explicitly out of v0.16 scope. - backend/migrations/README.md, frontend/src/lib/README.md: codify the "never edit a shipped migration" rule and the lib/ conventions (one store per concern, gestures via actions, sheets via ContextSheet, transitions as drop-in components). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
110 lines
6.9 KiB
Markdown
110 lines
6.9 KiB
Markdown
## Frontend Testing — Step by Step
|
|
|
|
Please test each step in order and report any errors (console errors, wrong text, broken UI, API errors).
|
|
|
|
### Step 1 — Join flow + PIN modal
|
|
1. Open **http://localhost:5173/** in your browser (or navigate there if already open)
|
|
2. You should land on the **join page** (`/join`) with a name input
|
|
3. Enter your name (e.g. `Max`) and click **Beitreten**
|
|
4. ✅ Expected: A modal appears showing your 4-digit PIN in large monospace font with a "Kopieren" button
|
|
5. Click **Weiter zur Galerie**
|
|
|
|
### Step 2 — Onboarding guide
|
|
6. You should land on the **feed page** (`/feed`)
|
|
7. ✅ Expected: A dark overlay appears at the bottom (or center on desktop) — the onboarding guide — showing step 1 of 4 with a step indicator and the Willkommen screen
|
|
8. Click **Weiter** through all 4 steps, then **Los geht's!**
|
|
9. ✅ Expected: Overlay disappears
|
|
|
|
### Step 3 — Feed & navigation
|
|
10. ✅ Expected: Feed shows the empty state ("Noch keine Fotos." or similar) with a hint to upload
|
|
11. ✅ Expected: A **persistent bottom nav** is visible with three slots — 🏠 **Feed** on the left, an elevated 📷+ **FAB** in the center, 👤 **Account** on the right
|
|
|
|
### Step 4 — My Account page
|
|
12. Tap the **👤 Account** tab in the bottom nav
|
|
13. ✅ Expected: `/account` page shows your name (`Max`), a blue "Gast" badge, session expiry date, and your PIN displayed large in an amber box
|
|
14. Tap **Kopieren** — check the clipboard contains your PIN
|
|
15. ✅ Expected: Button briefly shows "Kopiert!"
|
|
16. Tap the 🏠 **Feed** tab to go back
|
|
|
|
### Step 5 — Upload
|
|
17. Tap the central **📷+ FAB** in the bottom nav
|
|
18. ✅ Expected: A bottom sheet slides up offering **Kamera** and **Galerie** options
|
|
19. Tap **Galerie** → pick a photo from your device library
|
|
20. ✅ Expected: Preview screen (`/upload`) shows the staged file with an optional caption / hashtag editor
|
|
21. Tap **Hochladen**
|
|
22. ✅ Expected: You return to the feed immediately; the FAB shows a small badge while uploading; the photo appears in the feed once processing completes
|
|
|
|
### Step 6 — Onboarding guide not shown again
|
|
23. Reload the page at `/feed`
|
|
24. ✅ Expected: The onboarding overlay does **not** appear (already dismissed)
|
|
|
|
### Step 7 — Recover (open a private/incognito window)
|
|
25. Open a new **private/incognito** window at **http://localhost:5173/recover**
|
|
26. Enter the same name (`Max`) and the PIN you copied
|
|
27. ✅ Expected: You're redirected to the feed with the same account
|
|
|
|
### Step 8 — Upload rate-limit auto-retry
|
|
28. Upload more than the per-hour limit of photos in quick succession to trigger the rate limit
|
|
29. ✅ Expected: When the limit is hit, remaining items stay **Wartend** (not error)
|
|
30. ✅ Expected: An amber banner appears in the queue: "Upload-Limit erreicht. Wird in Xs automatisch fortgesetzt."
|
|
31. ✅ Expected: The countdown ticks down and uploads resume automatically when it reaches 0
|
|
|
|
### Step 9 — Name uniqueness (case-insensitive)
|
|
32. In a private/incognito window go to **http://localhost:5173/join**
|
|
33. Enter `max` or `MAX` — the same name already taken in Step 1 (different case)
|
|
34. ✅ Expected: Instead of creating a new account, an amber warning appears: „Max ist bereits vergeben." with name tips
|
|
35. ✅ Expected: A PIN input and **Anmelden** button appear, plus an **Anderen Namen wählen** button
|
|
36. Enter your PIN from Step 1 and click **Anmelden**
|
|
37. ✅ Expected: You're signed in to the existing `Max` account and redirected to the feed
|
|
38. Alternatively, click **Anderen Namen wählen** — ✅ Expected: the name input reappears with `max` pre-filled so you can edit it
|
|
|
|
---
|
|
|
|
## Admin & Host Features
|
|
|
|
For these steps you need an admin session. Go to **http://localhost:5173/admin/login** and enter the admin password (`admin123` for the dev environment). You'll be redirected to the dashboard automatically.
|
|
|
|
### Step 10 — Admin Dashboard: Stats & Config
|
|
1. Go to **http://localhost:5173/admin**
|
|
2. ✅ Expected: Stats card shows user count, upload count, comment count, and a disk-usage progress bar
|
|
3. In the **Konfiguration** section, change **Upload-Limit pro Stunde** to a different value (e.g. `5`) and click **Speichern**
|
|
4. ✅ Expected: Toast "Konfiguration gespeichert." appears briefly
|
|
5. Reload — ✅ Expected: the changed value persists
|
|
|
|
### Step 11 — Admin Dashboard: Export Jobs
|
|
6. The **Export-Jobs** section shows all past jobs (likely empty if gallery hasn't been released yet)
|
|
7. Click **Aktualisieren** — ✅ Expected: list refreshes without a full page reload
|
|
|
|
### Step 12 — Host Dashboard: Event Controls
|
|
8. Navigate to **http://localhost:5173/host** (or click "Host-Dashboard" from the admin page)
|
|
9. ✅ Expected: Event name shown in the header; two status dots (Uploads open/locked, Export released/locked)
|
|
10. Click **Uploads sperren**
|
|
11. ✅ Expected: Toast "Uploads wurden gesperrt."; button changes to "Uploads wieder öffnen"; status dot turns red
|
|
12. Try uploading a photo as a guest — ✅ Expected: "Uploads sind gesperrt." error
|
|
13. Click **Uploads wieder öffnen** — ✅ Expected: dot turns green; uploads work again
|
|
|
|
### Step 13 — Host Dashboard: User Management
|
|
14. The **Gäste** list shows all registered users with upload counts and sizes
|
|
15. Find a guest and click **Host** next to their name
|
|
16. ✅ Expected: Toast "X ist jetzt Host."; a blue "Host" badge appears next to their name
|
|
17. As admin, a **Degradieren** button is now visible — click it
|
|
18. ✅ Expected: Toast "X ist jetzt Gast."; badge disappears
|
|
|
|
### Step 14 — Host Dashboard: Ban & Unban
|
|
19. Click **Sperren** next to a guest
|
|
20. ✅ Expected: A confirmation modal opens asking what to do with their uploads, with a checkbox "Uploads aus der Galerie ausblenden"
|
|
21. Leave the checkbox unchecked and click **Sperren**
|
|
22. ✅ Expected: Toast "X wurde gesperrt."; a red "Gesperrt" badge appears; buttons change to **Entsperren**
|
|
23. Try uploading as that banned user — ✅ Expected: "Du bist gesperrt." error
|
|
24. Click **Entsperren** — ✅ Expected: ban lifted; badge gone
|
|
|
|
### Step 15 — Gallery Release & Export
|
|
25. Make sure you have at least a few photos uploaded, then on the Host Dashboard click **Galerie freigeben**
|
|
26. ✅ Expected: Toast "Galerie wurde freigegeben. Export wird vorbereitet…"; button becomes disabled "Galerie bereits freigegeben"
|
|
27. Navigate to **http://localhost:5173/export** as any logged-in user
|
|
28. ✅ Expected: Two cards — **ZIP-Archiv** and **HTML-Viewer** — both initially showing "Wird vorbereitet…" or a progress bar
|
|
29. Wait for both to show "Bereit zum Download" (reload or wait for SSE to update the UI)
|
|
30. Click **Download** on the ZIP card — ✅ Expected: `Gallery.zip` downloads
|
|
31. Click **Download** on the HTML card — ✅ Expected: A guide modal appears explaining how to open the file; click **Herunterladen** to get `Memories.zip`
|
|
32. In the Admin Dashboard → **Export-Jobs**, click **Aktualisieren** — ✅ Expected: both jobs show "Fertig" with green badges
|