# S02: Topics, Creator Stats & Card Polish — UAT

**Milestone:** M011
**Written:** 2026-03-31T08:36:24.689Z

# S02 UAT — Topics, Creator Stats & Card Polish

## Preconditions
- Chrysopedia frontend running (http://ub01:8096 or local dev server)
- At least one creator with multiple topic categories in the database
- At least one technique with more than 4 topic tags
- At least one subtopic with 0 techniques

---

## Test 1: Topics Page Loads Collapsed

1. Navigate to `/topics`
2. **Expected:** All 7 category cards are visible but no subtopic lists are shown
3. Click any category card header
4. **Expected:** Subtopics expand with a smooth ~300ms slide animation (not an instant pop)
5. Click the same category header again
6. **Expected:** Subtopics collapse with the same smooth animation
7. Click two different categories in sequence
8. **Expected:** Both expand independently; expanding one does not collapse the other

## Test 2: Empty Subtopic Coming Soon Badge

1. Navigate to `/topics`
2. Expand a category that contains a subtopic with 0 techniques
3. **Expected:** The empty subtopic shows its name with a "Coming soon" pill badge
4. **Expected:** The empty subtopic text is dimmed (opacity ~0.5) and the cursor is `default` (not pointer)
5. Click the empty subtopic
6. **Expected:** Nothing happens — it is not a link, no navigation occurs
7. Hover over the empty subtopic
8. **Expected:** No background highlight (unlike active subtopics)

## Test 3: Creator Stats Colored Pills

1. Navigate to `/creators` and click a creator with multiple topic categories
2. **Expected:** The stats line shows topic categories as colored pill badges (not plain text with dots)
3. **Expected:** Each pill has a distinct color corresponding to its topic category (same colors as Topics page category borders)
4. **Expected:** Pills wrap naturally if the container is narrow (flex-wrap behavior)

## Test 4: Tag Overflow on Cards

1. Navigate to the homepage (`/`)
2. Find a technique card (featured or recent) that has more than 4 tags in the database
3. **Expected:** Exactly 4 tag pills are visible, followed by a "+N more" pill in muted/italic style
4. Navigate to `/search` and search for a term that returns a technique with >4 tags
5. **Expected:** Same overflow behavior — 4 tags + "+N more"
6. Navigate to a subtopic page with a technique that has >4 tags
7. **Expected:** Same overflow behavior
8. Navigate to a creator detail page with a technique that has >4 tags
9. **Expected:** Same overflow behavior

## Test 5: Tag Overflow Edge Cases

1. Find a technique card with exactly 4 tags
2. **Expected:** All 4 tags shown, no "+N more" pill
3. Find a technique card with fewer than 4 tags (e.g., 2)
4. **Expected:** All tags shown, no "+N more" pill
5. Find a technique card with exactly 5 tags
6. **Expected:** 4 tags shown + "+1 more" pill

## Test 6: Collapse Animation is CSS-Based (Not Conditional Render)

1. Navigate to `/topics`
2. Open browser DevTools → Elements panel
3. Expand a category
4. **Expected:** The subtopics wrapper div is always present in the DOM (not conditionally rendered). Its `data-expanded` attribute toggles between true/absent. The `grid-template-rows` CSS property transitions between `0fr` and `1fr`.

