# S03: Global Search & Mobile Navigation — UAT

**Milestone:** M011
**Written:** 2026-03-31T08:46:50.106Z

# S03 UAT: Global Search & Mobile Navigation

## Preconditions
- Chrysopedia frontend running (dev server or production build)
- Browser with DevTools available for viewport resizing

---

## Test 1: Nav Search Bar Visibility

**Steps:**
1. Navigate to homepage (`/`)
2. Observe the navigation header

**Expected:** No search bar in the nav header (homepage has its own hero search)

3. Navigate to `/topics`
4. Observe the navigation header

**Expected:** Compact search input visible in the nav bar between brand and right section

5. Navigate to `/creators`, then any `/technique/:slug` page

**Expected:** Search bar present in nav on both pages

---

## Test 2: Nav Search Functionality

**Steps:**
1. On `/topics`, click the nav search input
2. Type "reverb"
3. Observe typeahead dropdown

**Expected:** Typeahead dropdown appears with results, positioned with high z-index over page content

4. Press Enter

**Expected:** Navigates to search results page for "reverb"

---

## Test 3: Cmd+K Keyboard Shortcut

**Steps:**
1. Navigate to `/creators`
2. Click somewhere on the page body (not in search)
3. Press Cmd+K (Mac) or Ctrl+K (Windows/Linux)

**Expected:** Nav search input receives focus. Browser default Cmd+K behavior is prevented.

4. Type a query and press Enter

**Expected:** Search executes normally

---

## Test 4: Cmd+K Not Active on Homepage

**Steps:**
1. Navigate to homepage (`/`)
2. Press Cmd+K

**Expected:** No nav search to focus (homepage uses hero search). Browser default may trigger.

---

## Test 5: Hamburger Menu Visibility

**Steps:**
1. Open DevTools, set viewport to 390×844 (iPhone 14)
2. Navigate to any page

**Expected:** Hamburger button (☰) visible in header. Desktop nav links hidden.

3. Set viewport to 1024×768 (desktop)

**Expected:** Hamburger button hidden. Desktop nav links visible inline.

---

## Test 6: Hamburger Menu Toggle

**Steps:**
1. At mobile viewport (390px wide), tap hamburger button

**Expected:** Nav panel slides open below header. Hamburger icon changes to X. Links stacked vertically.

2. Tap X button

**Expected:** Nav panel closes with transition. Icon reverts to ☰.

---

## Test 7: Mobile Touch Targets

**Steps:**
1. At mobile viewport, open hamburger menu
2. Inspect nav links in DevTools

**Expected:** Each nav link has min-height of 44px. Padding provides comfortable touch area.

---

## Test 8: Auto-Close on Route Change

**Steps:**
1. At mobile viewport, open hamburger menu
2. Tap a nav link (e.g., "Topics")

**Expected:** Page navigates to Topics. Menu closes automatically.

---

## Test 9: Auto-Close on Escape

**Steps:**
1. At mobile viewport, open hamburger menu
2. Press Escape key

**Expected:** Menu closes. Focus returns to page.

---

## Test 10: Auto-Close on Outside Click

**Steps:**
1. At mobile viewport, open hamburger menu
2. Tap/click on the page content area below the menu

**Expected:** Menu closes.

---

## Test 11: Mobile Search in Menu

**Steps:**
1. At mobile viewport, open hamburger menu
2. Locate search input inside the menu panel

**Expected:** Search input is present and full-width inside mobile menu.

3. Type a query and submit

**Expected:** Search executes, menu closes on navigation.

---

## Test 12: Desktop Layout Unchanged

**Steps:**
1. At desktop viewport (1280px wide), navigate through all pages

**Expected:** No hamburger button. Nav links displayed inline. Search bar compact in header on non-home pages. No layout regressions from S01/S02 work.

---

## Edge Cases

- **Rapid toggle:** Quickly tap hamburger open/close 5 times — no stuck state
- **Resize while open:** Open menu at mobile width, drag viewport to desktop width — menu should close or hide gracefully
- **Multiple Cmd+K presses:** Press Cmd+K repeatedly — input stays focused, no errors in console
