# S04: Trending Searches Homepage Block — UAT

**Milestone:** M015
**Written:** 2026-04-03T04:38:38.405Z

# S04 UAT: Trending Searches Homepage Block

## Preconditions
- Chrysopedia web UI running at http://ub01:8096
- At least a few search queries have been made so the popular searches API returns data
- Browser with DevTools available

## Test Cases

### TC1: Trending section renders with real data
1. Navigate to http://ub01:8096
2. Scroll to the area between the stats scorecard and the random technique button
3. **Expected:** A "Trending Searches" section is visible with pill-shaped links showing search terms

### TC2: Pill links navigate to search results
1. On the homepage, click any trending search pill (e.g., "reverb")
2. **Expected:** Browser navigates to `/search?q=reverb` and search results for that term are displayed
3. Click browser back button
4. **Expected:** Homepage loads with trending section still visible

### TC3: Multiple terms render as distinct pills
1. On the homepage, inspect the trending section
2. **Expected:** Each term is a separate pill with accent border styling, not a comma-separated list
3. **Expected:** Pills wrap to multiple lines if there are many terms

### TC4: Section hidden when no data
1. Open DevTools Network tab
2. Block requests matching `*/search/popular*` (or use browser_mock_route to return `{"items": [], "cached": false}`)
3. Hard refresh the homepage
4. **Expected:** No "Trending Searches" section appears. No error shown to user. Rest of homepage renders normally.

### TC5: Section hidden on API error
1. Open DevTools Network tab
2. Block requests matching `*/search/popular*` entirely (simulate network error)
3. Hard refresh the homepage
4. **Expected:** No "Trending Searches" section appears. No console errors break the page. Stats scorecard and random button still render.

### TC6: Visual consistency
1. Navigate to http://ub01:8096
2. Inspect the trending section visually
3. **Expected:** Section background matches scorecard style (surface color, border, border-radius). Pills have subtle cyan accent border. Heading uses muted text color with letter-spacing. Stagger animation plays on page load.

### TC7: Pill links use proper encoding
1. If a trending term contains special characters or spaces, click it
2. **Expected:** URL shows properly encoded query parameter (e.g., `/search?q=sound%20design`)

