Skip to content

Set up vitest testing infrastructure, with sample test cases for status badge component#191

Merged
AbirAbbas merged 3 commits intoAgent-Field:mainfrom
iammohitvs:feat/vitest-testing-infrastructure
Feb 27, 2026
Merged

Set up vitest testing infrastructure, with sample test cases for status badge component#191
AbirAbbas merged 3 commits intoAgent-Field:mainfrom
iammohitvs:feat/vitest-testing-infrastructure

Conversation

@iammohitvs
Copy link
Contributor

Summary

Sets up Vitest testing infrastructure for the Web UI (control-plane/web/client/), which previously had zero test coverage.

New files:

vitest.config.ts - Vitest config with jsdom environment, @ path alias, and v8 coverage provider
src/test/setup.ts - imports @testing-library/jest-dom to extend Vitest with DOM matchers
src/test/components/status/StatusBadge.test.tsx - comprehensive test suite for StatusBadge and related exports

Modified files:

package.json - added devDependencies (vitest, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, @vitest/coverage-v8, jsdom) and scripts (test, test:watch, test:coverage)
scripts/test-all.sh - wires npm run test into the global test runner alongside the existing lint step

Status Badge tests (StatusBadge.test.tsx) :

  • All AgentState (5), HealthStatus (7), and LifecycleStatus (8) values
  • Prop priority ordering (state > healthStatus > lifecycleStatus)
  • showIcon, size, showHealthScore, and state_transition props
  • status prop (AgentStatus object), including animate-pulse during transitions
  • AgentStateBadge, HealthStatusBadge, LifecycleStatusBadge convenience exports
  • getHealthScoreColor and getHealthScoreBadgeVariant utility functions
  • Reason for such extensive testing on the status badge component: to reach 100% coverage score

Testing

  • ./scripts/test-all.sh
  • Additional verification (please describe):
    • All vitest tests: npm run test
    • Tests with coverage report: npm run test:coverage
    • Test with live watching: npm run test:watch
    • Can run individual test StatusBadge.test.tsx via: npm run test -- src/test/components/status/StatusBadge.test.tsx

Checklist

  • I updated documentation where applicable.
  • I added or updated tests (or none were needed).
  • I updated CHANGELOG.md.

Screenshots (if UI-related)

Screenshot 2026-02-27 at 9 48 01 AM Screenshot 2026-02-27 at 9 48 38 AM Screenshot 2026-02-27 at 2 54 27 PM

Related issues

Fixes: #103

@AbirAbbas AbirAbbas force-pushed the feat/vitest-testing-infrastructure branch from 00c5612 to 6b1b5cf Compare February 27, 2026 15:21
@AbirAbbas
Copy link
Contributor

AbirAbbas commented Feb 27, 2026

will merge it just fixing changelog and cla workflow

@AbirAbbas AbirAbbas force-pushed the feat/vitest-testing-infrastructure branch from 6b1b5cf to 00c5612 Compare February 27, 2026 15:30
Resolve CHANGELOG.md conflict: keep vitest entry under [Unreleased]
above the existing rc.4 release.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@AbirAbbas AbirAbbas merged commit 0c5147f into Agent-Field:main Feb 27, 2026
12 of 13 checks passed
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.

[Web UI] Set up vitest testing infrastructure

2 participants