rock/riotpiao.com
0
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

[E2E] Test: Header Navigation + Dropdowns + Language Toggle #8

New Issue
Open
opened 2026-09-08 04:47:17 +00:00 by rock · 0 comments
rock commented 2026-09-08 04:47:17 +00:00
Owner
Copy Link
Copy Source

Parent

Ref: #5
Depends on: #6

Objective

Test sticky header, navigation dropdowns (Skills/Contact/Education), click-outside-close behavior, and en/zh language toggle.

Components Under Test

  • components/Header.tsx — Nav, dropdowns, language toggle, terminal toggle, mobile menu
  • lib/LanguageContext.tsx — Language state, translations

Test Cases

Header (header.spec.ts)

  • Header renders with avatar image + title + subtitle
  • Header is sticky (stays visible on scroll)
  • Home button scrolls to top
  • "Ask Poimen" button toggles terminal state

Dropdowns

  • Skills dropdown opens on click
  • Skills dropdown shows skill categories + tags
  • Click outside Skills dropdown closes it
  • Contact dropdown opens on click
  • Contact section shows email + copy button
  • Copy button copies to clipboard (verify via navigator.clipboard)
  • Education dropdown opens on click
  • Click outside any dropdown closes it
  • Only one dropdown open at a time (open Skills, click Contact → Skills closes)

Language Toggle

  • Language toggle button visible (shows "中" or "EN")
  • Click toggle switches from EN to ZH
  • Hero title changes to Chinese text
  • Projects section updates to Chinese
  • Header nav labels update
  • Click toggle again returns to EN
  • All sections revert to English text

Mobile Menu (< 768px)

  • Hamburger menu icon visible on mobile
  • Click hamburger opens mobile menu
  • All nav items present in mobile menu
  • Language toggle works in mobile menu
  • Close mobile menu

Selectors Strategy

// Header
page.locator('header')
page.locator('img[alt="Profile"]')

// Dropdowns
page.locator('button:has-text("Skills")')
page.locator('button:has-text("Contact")')
page.locator('button:has-text("Education")')

// Language
page.locator('button:has-text("中")') // or 'EN'

// Mobile
page.locator('button:has(svg.lucide-menu)')  // hamburger icon

Acceptance

  • All dropdowns open/close correctly
  • Click-outside-close works for all 3 dropdowns
  • Language toggle round-trip (EN → ZH → EN) verified
  • Mobile menu functional at 375px viewport
## Parent Ref: #5 Depends on: #6 ## Objective Test sticky header, navigation dropdowns (Skills/Contact/Education), click-outside-close behavior, and en/zh language toggle. ## Components Under Test - `components/Header.tsx` — Nav, dropdowns, language toggle, terminal toggle, mobile menu - `lib/LanguageContext.tsx` — Language state, translations ## Test Cases ### Header (`header.spec.ts`) - [ ] Header renders with avatar image + title + subtitle - [ ] Header is sticky (stays visible on scroll) - [ ] Home button scrolls to top - [ ] "Ask Poimen" button toggles terminal state ### Dropdowns - [ ] Skills dropdown opens on click - [ ] Skills dropdown shows skill categories + tags - [ ] Click outside Skills dropdown closes it - [ ] Contact dropdown opens on click - [ ] Contact section shows email + copy button - [ ] Copy button copies to clipboard (verify via `navigator.clipboard`) - [ ] Education dropdown opens on click - [ ] Click outside any dropdown closes it - [ ] Only one dropdown open at a time (open Skills, click Contact → Skills closes) ### Language Toggle - [ ] Language toggle button visible (shows "中" or "EN") - [ ] Click toggle switches from EN to ZH - [ ] Hero title changes to Chinese text - [ ] Projects section updates to Chinese - [ ] Header nav labels update - [ ] Click toggle again returns to EN - [ ] All sections revert to English text ### Mobile Menu (< 768px) - [ ] Hamburger menu icon visible on mobile - [ ] Click hamburger opens mobile menu - [ ] All nav items present in mobile menu - [ ] Language toggle works in mobile menu - [ ] Close mobile menu ## Selectors Strategy ```ts // Header page.locator('header') page.locator('img[alt="Profile"]') // Dropdowns page.locator('button:has-text("Skills")') page.locator('button:has-text("Contact")') page.locator('button:has-text("Education")') // Language page.locator('button:has-text("中")') // or 'EN' // Mobile page.locator('button:has(svg.lucide-menu)') // hamburger icon ``` ## Acceptance - All dropdowns open/close correctly - Click-outside-close works for all 3 dropdowns - Language toggle round-trip (EN → ZH → EN) verified - Mobile menu functional at 375px viewport
rock added this to the Functional Testing milestone 2026-09-08 04:55:47 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone Functional Testing
Projects
Clear projects
No projects
Assignees
Clear assignees
rock (Rock)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: rock/riotpiao.com#8