Skip to content

test(frontend): add Vitest + React Testing Library suite (#9)#125

Draft
Ayomipo18 wants to merge 1 commit into
Climate-Vision:mainfrom
Ayomipo18:feature/issue-9-frontend-tests
Draft

test(frontend): add Vitest + React Testing Library suite (#9)#125
Ayomipo18 wants to merge 1 commit into
Climate-Vision:mainfrom
Ayomipo18:feature/issue-9-frontend-tests

Conversation

@Ayomipo18

Copy link
Copy Markdown
Contributor

Summary

Sets up the frontend unit-test harness and adds an initial suite, so contributors can refactor UI components safely. Closes #9.

What's included

  • Tooling: Vitest + React Testing Library + jsdom, a vitest.config.ts (jsdom env), and a jest-dom setup file.
  • Scripts: npm test (vitest run) and npm test:watch.
  • Tests (4 files, 14 cases):
    • Badge / StatusBadge / SeverityBadge / AnalysisTypeBadge — label mapping + fallbacks
    • ui/StatusBadge — run-status label + accessible aria-label + unknown-status fallback
    • ProgressBar — percentage label and clamping (above max / negative)
    • RunHistory page smoke test — renders heading + empty state, with the API layer mocked
  • CI: runs npm test in the existing frontend job.

Notes / scope

  • Tests + config only — no component logic or UI was changed.
  • Started with the most isolated, deterministic units plus one page smoke test. I deliberately kept chart-heavy components (recharts ResponsiveContainer needs ResizeObserver, awkward under jsdom) out of this first pass; happy to add them in a follow-up if you'd like.

Verification

npm ci && npm run build && npm test all green locally (14/14).

Opened as a draft for early feedback per CONTRIBUTING.

Set up the frontend unit-test harness (Vitest, Testing Library, jsdom) and
add an initial suite so UI components can be refactored safely.

- Add vitest.config.ts (jsdom env) and a jest-dom test setup file
- Add `test`/`test:watch` npm scripts
- Cover Badge, StatusBadge and ProgressBar presentational components
- Add a RunHistory page smoke test (renders + empty state) with the API
  layer mocked
- Run `npm test` in the frontend CI job

Closes Climate-Vision#9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Good First Issue] Add frontend unit tests with Vitest + React Testing Library

1 participant