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

[E2E] Test: Hero Section + Bio Modal #7

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

Parent

Ref: #5
Depends on: #6

Objective

Test hero section rendering, animations, and bio modal interaction flow.

Components Under Test

  • app/page.tsx — Hero section, bio modal
  • components/HeroBlobFlow.tsx — Avatar, rotating role text, hire-me image
  • lib/LanguageContext.tsx — t.hero.*, t.bio.* translations

Test Cases

Hero Section (main-page.spec.ts)

  • Page loads successfully (status 200)
  • <h1> title renders with correct text
  • Subtitle text visible
  • Description paragraph visible
  • "Explore More" button visible and clickable
  • Terminal hint text visible (mentions Cmd+K)
  • Avatar image loads (/avatar.jpeg)
  • Hire-me image loads (/hire-me.png or /hire-me-light.png based on theme)
  • Role text rotates (wait 2s, verify text changes via AnimatePresence)

Bio Modal (bio-modal.spec.ts)

  • Click "Explore More" → modal appears
  • Modal header shows bio title
  • Intro paragraph visible
  • Expertise section renders (title + content)
  • Highlights section renders (list items)
  • Education section renders
  • Current focus text visible
  • Close button (X icon) closes modal
  • Click outside modal backdrop closes modal
  • Modal has scroll for overflow content (max-h-96 overflow-y-auto)
  • ESC key behavior (if implemented — verify)

Selectors Strategy

// Hero
page.locator('h1')
page.locator('button:has-text("Explore")')
page.locator('img[alt="Profile"]')
page.locator('img[alt*="hire"]')

// Bio Modal
page.locator('.fixed.inset-0')  // backdrop
page.locator('h2:has-text("Bio")')  // modal title
page.locator('button:has(svg)')  // X close button in modal header

Acceptance

  • All hero elements render within 5s
  • Bio modal open/close cycle works 3 consecutive times without flake
  • Role rotation verified (at least 2 different roles observed)
## Parent Ref: #5 Depends on: #6 ## Objective Test hero section rendering, animations, and bio modal interaction flow. ## Components Under Test - `app/page.tsx` — Hero section, bio modal - `components/HeroBlobFlow.tsx` — Avatar, rotating role text, hire-me image - `lib/LanguageContext.tsx` — `t.hero.*`, `t.bio.*` translations ## Test Cases ### Hero Section (`main-page.spec.ts`) - [ ] Page loads successfully (status 200) - [ ] `<h1>` title renders with correct text - [ ] Subtitle text visible - [ ] Description paragraph visible - [ ] "Explore More" button visible and clickable - [ ] Terminal hint text visible (mentions Cmd+K) - [ ] Avatar image loads (`/avatar.jpeg`) - [ ] Hire-me image loads (`/hire-me.png` or `/hire-me-light.png` based on theme) - [ ] Role text rotates (wait 2s, verify text changes via `AnimatePresence`) ### Bio Modal (`bio-modal.spec.ts`) - [ ] Click "Explore More" → modal appears - [ ] Modal header shows bio title - [ ] Intro paragraph visible - [ ] Expertise section renders (title + content) - [ ] Highlights section renders (list items) - [ ] Education section renders - [ ] Current focus text visible - [ ] Close button (X icon) closes modal - [ ] Click outside modal backdrop closes modal - [ ] Modal has scroll for overflow content (`max-h-96 overflow-y-auto`) - [ ] ESC key behavior (if implemented — verify) ## Selectors Strategy ```ts // Hero page.locator('h1') page.locator('button:has-text("Explore")') page.locator('img[alt="Profile"]') page.locator('img[alt*="hire"]') // Bio Modal page.locator('.fixed.inset-0') // backdrop page.locator('h2:has-text("Bio")') // modal title page.locator('button:has(svg)') // X close button in modal header ``` ## Acceptance - All hero elements render within 5s - Bio modal open/close cycle works 3 consecutive times without flake - Role rotation verified (at least 2 different roles observed)
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#7