[E2E] Test: Projects Showcase + Experience Timeline + CI Badges #10

New Issue

2026-09-08T04:47:57Z

rock commented

2026-09-08 04:47:57 +00:00

Parent

Ref: #5
Depends on: #6

Objective

Test project cards rendering, CI badge live fetch, media embeds, experience timeline scroll animations.

Components Under Test

components/ProjectShowcase.tsx — Project cards, CI badges, media, links
components/ExperienceTimeline.tsx — Timeline, CI badges, skill tags, scroll links
app/api/ci-status/route.ts — CI status API

Test Cases

Projects Section (`projects.spec.ts`)

Section heading renders ("Projects" or translated)
All 5 project cards render:
- Homelab (status: building, has 3 CI repos)
- Poimen Memory (status: building, has 1 CI repo)
- Poimen Workflow (status: building, has 1 CI repo)
- RBC (status: completed, has image media)
- AWS (status: live, has video media + article link)
Each card shows: title, description, stat, status badge
Status badges show correct state (building/completed/live)
RBC card displays image (/rbc-images.jpeg)
AWS card has YouTube video embed link
AWS card "Read Article" link points to LinkedIn
"Ask Poimen" button on cards opens terminal

CI Badges (mock API)

Homelab card shows 3 CI badges (portfolio, homelab-frontend, kmsvc)
Each badge fetches from /api/ci-status?repo=...
Success status shows green checkmark
Failure status shows red X
Loading state shows spinner
Badge SHA links to Forgejo commit URL

Experience Timeline (`timeline.spec.ts`)

Timeline section renders
All experience entries visible on scroll
Framer Motion animations trigger on viewport entry
Skill tags render per entry (Kubernetes, Terraform, Go, etc.)
CI badges in timeline fetch and display
"Learn more" links scroll to corresponding project card (#project-homelab, #project-rbc, #project-aws)
NavCanada link opens external URL

Scroll Animations

Projects section animates on scroll into view (whileInView)
Stagger animation: cards appear sequentially (0.15s delay each)

API Mocking

await page.route('**/api/ci-status*', async route => {
  const url = new URL(route.request().url())
  const repo = url.searchParams.get('repo')
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({
      sha: 'abc1234',
      conclusion: 'success',
      status: 'completed',
    }),
  })
})

Acceptance

All 5 project cards render with correct content
CI badges show mocked status correctly
Timeline scroll animations trigger
Media (image/video) loads without errors
Internal anchor links (#project-*) scroll to correct cards

## Parent Ref: #5 Depends on: #6 ## Objective Test project cards rendering, CI badge live fetch, media embeds, experience timeline scroll animations. ## Components Under Test - `components/ProjectShowcase.tsx` — Project cards, CI badges, media, links - `components/ExperienceTimeline.tsx` — Timeline, CI badges, skill tags, scroll links - `app/api/ci-status/route.ts` — CI status API ## Test Cases ### Projects Section (`projects.spec.ts`) - [ ] Section heading renders ("Projects" or translated) - [ ] All 5 project cards render: - Homelab (status: building, has 3 CI repos) - Poimen Memory (status: building, has 1 CI repo) - Poimen Workflow (status: building, has 1 CI repo) - RBC (status: completed, has image media) - AWS (status: live, has video media + article link) - [ ] Each card shows: title, description, stat, status badge - [ ] Status badges show correct state (building/completed/live) - [ ] RBC card displays image (`/rbc-images.jpeg`) - [ ] AWS card has YouTube video embed link - [ ] AWS card "Read Article" link points to LinkedIn - [ ] "Ask Poimen" button on cards opens terminal ### CI Badges (mock API) - [ ] Homelab card shows 3 CI badges (portfolio, homelab-frontend, kmsvc) - [ ] Each badge fetches from `/api/ci-status?repo=...` - [ ] Success status shows green checkmark - [ ] Failure status shows red X - [ ] Loading state shows spinner - [ ] Badge SHA links to Forgejo commit URL ### Experience Timeline (`timeline.spec.ts`) - [ ] Timeline section renders - [ ] All experience entries visible on scroll - [ ] Framer Motion animations trigger on viewport entry - [ ] Skill tags render per entry (Kubernetes, Terraform, Go, etc.) - [ ] CI badges in timeline fetch and display - [ ] "Learn more" links scroll to corresponding project card (`#project-homelab`, `#project-rbc`, `#project-aws`) - [ ] NavCanada link opens external URL ### Scroll Animations - [ ] Projects section animates on scroll into view (`whileInView`) - [ ] Stagger animation: cards appear sequentially (0.15s delay each) ## API Mocking ```ts await page.route('**/api/ci-status*', async route => { const url = new URL(route.request().url()) const repo = url.searchParams.get('repo') await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ sha: 'abc1234', conclusion: 'success', status: 'completed', }), }) }) ``` ## Acceptance - All 5 project cards render with correct content - CI badges show mocked status correctly - Timeline scroll animations trigger - Media (image/video) loads without errors - Internal anchor links (`#project-*`) scroll to correct cards

rock referenced this issue

2026-09-08 04:48:30 +00:00

[E2E] CI Integration: Gitea Workflow + Docker Test Pod #12

rock added this to the Functional Testing milestone 2026-09-08 04:55:47 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rock/riotpiao.com#10

[E2E] Test: Projects Showcase + Experience Timeline + CI Badges #10