Skip to content

frontend: add a focused unit and component test foundation #328

Description

@WalksWithASwagger

Summary

Add a focused frontend unit and component regression-test foundation around the portal's highest-risk pure behavior.

Context

  • Blocked by frontend: remove unreachable UI scaffolding and dead dependencies #319 to serialize frontend/package.json and frontend/package-lock.json.
  • Roadmap phase: Phase 1 - polish and stability
  • Relevant files: frontend/package.json, frontend/package-lock.json, new Vitest setup/configuration, focused source helpers/components, root package.json, and CI only if the tests cannot be folded into frontend:verify
  • Current behavior: the frontend relies on type checking, build, lint, and coarse portal E2E with no unit/component test framework.
  • Desired behavior: risky normalization, serialization, and request-state behavior has fast hermetic regression coverage.

Implementation Notes

  • Use Vitest, jsdom, and React Testing Library in the existing Vite stack.
  • Extract only the minimum pure seams required for testing; do not refactor the full Generate route.
  • Mock fetch and filesystem/browser boundaries.
  • Keep all tests offline and fixture-driven.

Acceptance Criteria

  • frontend:test runs a hermetic Vitest suite.
  • Tests cover generation request/error normalization and result/reference URL handling.
  • Tests cover library rating/totals normalization and CSV/manifest escaping.
  • At least one stateful component renders success and error states.
  • CI or frontend:verify invokes the new suite exactly once.
  • Existing frontend build, lint, type check, and portal E2E remain green.

Tests/Evals

  • Use focused behavior assertions rather than full-page snapshots.
  • No provider calls, credentials, local outputs, or live servers beyond existing hermetic harnesses.

Verification

  • npm --prefix frontend ci
  • npm run frontend:test
  • npm run frontend:verify
  • npm run e2e:portal
  • npm test

Agent Instructions

Human Checkpoints

  • Stop if useful coverage requires a redesign of the Generate route rather than a small pure extraction.

Out of Scope

  • Whole-page snapshots or exhaustive Generate-route coverage.
  • Coverage thresholds and visual baseline CI.
  • UI redesign or state-management replacement.
  • Provider integration tests.

Linear

Not applicable. Rafiki delivery is GitHub-only; do not create or update a Linear issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    blockedWork cannot proceed until a blocker is resolved.phase-1Phase 1 — Polish & Stabilitytech-debtTechnical debttestsTest coverage, smoke checks, and acceptance automationtype:taskImplementation task

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions