diff --git a/docs/MOBILE_TESTING_GUIDE.md b/docs/MOBILE_TESTING_GUIDE.md new file mode 100644 index 0000000..456b1b1 --- /dev/null +++ b/docs/MOBILE_TESTING_GUIDE.md @@ -0,0 +1,392 @@ +# Mobile Testing Guide — EventSnap v0.15.0 + +## Setup + +### Dev Servers + +| Service | URL | Notes | +|---------|-----|-------| +| Frontend | `http://localhost:5173` | Vite dev server, hot-reload | +| Backend API | `http://localhost:3000` | Rust/Axum | +| Database | `localhost:5432` | PostgreSQL (Docker) | + +The frontend dev server proxies `/api` and `/media` to the backend automatically. + +**Mobile device access:** Connect your phone to the same Wi-Fi network. +Find your machine's local IP (`ip a | grep 192.168` or `hostname -I`), then open +`http://:5173` on your phone. + +### Browser DevTools Mobile Emulation (quick testing without a phone) + +1. Open Chrome → DevTools (`F12`) → Toggle device toolbar (`Ctrl+Shift+M`) +2. Select **iPhone 14 Pro** or **Pixel 7** from the device dropdown +3. Reload the page — safe-area insets and viewport are emulated +4. To test touch gestures: enable "Touch" in the three-dot menu inside the device toolbar + +--- + +## Test Accounts + +Use the following to get all three roles: + +| Role | How to get it | +|------|--------------| +| Guest | Join at `/join` with any name | +| Host | Promote a guest via Host Dashboard, or set role in DB | +| Admin | POST to `/api/v1/admin/login` or navigate to `/admin/login` | + +Admin password: `admin123` (set in `.env`) + +--- + +## Section 1 — Bottom Navigation Bar + +**Goal:** Verify the tab bar is present, thumb-accessible, and correct per role. + +### 1.1 Bar Presence & Safe Area +- [ ] Open `/feed` — a bottom tab bar with **Galerie**, a blue circle FAB, and **Konto** appears +- [ ] On a real iPhone/Safari: the bar does **not** overlap the home indicator (safe-area padding) +- [ ] On Chrome DevTools with an iPhone device: the bar is above the viewport bottom +- [ ] Scroll down on a long feed — the bar stays **fixed** at the bottom at all times +- [ ] The bar has a frosted-glass blur effect (`bg-white/90 backdrop-blur-md`) + +### 1.2 Active Tab Indicator +- [ ] On `/feed` — the Galerie icon is **blue**; Konto icon is gray +- [ ] Tap **Konto** — navigates to `/account`; Konto icon turns blue, Galerie goes gray +- [ ] Tap **Galerie** — navigates back to `/feed` + +### 1.3 Role Gating +- [ ] Log in as a **guest** — bar shows Galerie · FAB · Konto (3 items) +- [ ] Log in as a **host** — same 3 items (dashboard links are inside Account, not the bar) +- [ ] Log in as **admin** — same 3 items + +### 1.4 Auth Pages Hide the Bar +- [ ] Visit `/join` — **no** bottom bar +- [ ] Visit `/recover` — **no** bottom bar +- [ ] Visit `/admin/login` — **no** bottom bar + +--- + +## Section 2 — Upload FAB & Bottom Sheet + +**Goal:** Verify the FAB opens the upload sheet and both source options work. + +### 2.1 FAB Appearance +- [ ] The FAB is a blue circle elevated ~12 px above the tab bar +- [ ] A camera icon with an implicit "+" meaning is shown +- [ ] When uploads are in the queue (pending or uploading), a **red badge number** appears on the FAB + +### 2.2 Sheet Opens & Closes +- [ ] Tap the FAB — a bottom sheet slides up smoothly (~300 ms) from below +- [ ] Sheet shows: **Galerie** (blue icon), **Kamera** (purple icon), **Abbrechen** +- [ ] Tap the gray backdrop — sheet slides **back down** and closes +- [ ] Tap **Abbrechen** — sheet closes +- [ ] Swipe the drag handle downward — sheet closes *(if touch gestures are enabled)* + +### 2.3 Gallery Source +- [ ] Tap **Galerie** — the native file picker opens +- [ ] Select 1–3 images or videos +- [ ] Sheet closes; you are navigated to `/upload` (the composer page) +- [ ] Thumbnail strip at the top shows your selected files +- [ ] **Bottom nav is gone** on this page (immersive full-screen) + +### 2.4 Camera Source +- [ ] Tap the FAB → **Kamera** +- [ ] Browser asks for camera permission — grant it +- [ ] Full-screen camera UI appears (existing CameraCapture component) +- [ ] Take a photo +- [ ] Camera closes; you are navigated to `/upload` with the captured image in the strip + +### 2.5 Upload Composer Page +- [ ] Back `×` button top-left → returns to `/feed`, clears pending files +- [ ] Thumbnail strip scrolls horizontally when >3 files +- [ ] Each thumbnail has a small `×` to remove it — tapping removes that file only +- [ ] Caption `