# S05: Frontend — Nested Rendering, TOC, Citations — UAT

**Milestone:** M014
**Written:** 2026-04-03T01:47:43.749Z

# S05 UAT — Frontend Nested Rendering, TOC, Citations

## Preconditions
- Chrysopedia running at http://ub01:8096 with healthy API
- At least one v1-format technique page exists (current production data)
- For v2 tests: either S04 has populated v2 pages, or use browser dev tools to mock API response

## Test Cases

### TC1: V1 Format Backward Compatibility
1. Navigate to any existing technique page (e.g., http://ub01:8096/techniques/copycatt-bass-sound-design)
2. **Expected:** Page renders identically to pre-S05 behavior — dict-keyed sections as H2 headings with paragraph content below each
3. **Expected:** No TOC component visible on v1 pages
4. **Expected:** No JavaScript console errors

### TC2: V2 Format — Table of Contents Rendering
1. Navigate to a v2-format technique page (body_sections_format = 2)
2. **Expected:** A TOC card appears near the top with numbered section links
3. **Expected:** TOC entries are nested — H2 sections at top level, H3 subsections indented beneath
4. Click a TOC entry
5. **Expected:** Page scrolls to the corresponding section heading, accounting for fixed header offset

### TC3: V2 Format — Nested Section Structure
1. On a v2-format technique page, inspect the section headings
2. **Expected:** Top-level sections render as H2 with slugified id attributes
3. **Expected:** Subsections render as H3 with compound id attributes (parentSlug--childSlug)
4. **Expected:** Sections that have subsections do NOT render an empty paragraph before the subsection list (D024)
5. **Expected:** Sections without subsections render their content directly

### TC4: V2 Format — Citation Links
1. On a v2-format technique page, locate citation markers in prose text (e.g., [1] or [2,3])
2. **Expected:** Citations render as superscript links, not plain bracketed text
3. **Expected:** Clicking a citation scrolls to the corresponding key moment in the moments list
4. **Expected:** Citations with invalid indices (referencing non-existent key moments) render as plain text

### TC5: CSS and Visual Polish
1. On a v2-format technique page, inspect visual styling
2. **Expected:** TOC has card-like styling (background, border, padding)
3. **Expected:** Subsections have left-border visual treatment
4. **Expected:** Citation superscripts have distinct hover state
5. Resize viewport to mobile width
6. **Expected:** TOC and sections reflow cleanly on narrow viewports

### TC6: Build Integrity
1. Run `cd frontend && npm run build`
2. **Expected:** TypeScript compilation and Vite build succeed with 0 errors
3. **Expected:** Output includes all 56+ modules

### TC7: Production Deployment Health
1. `curl -s -o /dev/null -w '%{http_code}' http://ub01:8096/` → **Expected:** 200
2. `curl -s -o /dev/null -w '%{http_code}' http://ub01:8096/health` → **Expected:** 200
3. Open any technique page in browser, check Network tab
4. **Expected:** JS bundle loads successfully, no 404s on assets

## Edge Cases
- **V2 page with no subsections on any section:** All sections render content directly, no compound IDs
- **V2 page with empty key_moments array:** Citation links have no targets — should render as plain text
- **Very long TOC (10+ sections):** TOC should be scrollable or wrap cleanly
