[Web UI] Set up vitest testing infrastructure

[santoshkumarradha]

Summary

The Web UI currently has zero test coverage. Set up vitest testing infrastructure to enable unit testing of React components and hooks.

Current State

• Location: control-plane/web/client/
• Framework: React + TypeScript + Vite
• Test files: None (0 test files exist)
• Components: 216 React components untested

Tasks

1. Install vitest and React Testing Library as dev dependencies
2. Create vitest.config.ts configuration file
3. Set up test utilities and mocks for common patterns
4. Add a simple example test for one component (e.g., StatusBadge.tsx)
5. Add test scripts to package.json (test, test:watch, test:coverage)

Acceptance Criteria

• npm test runs vitest successfully
• At least one example test passes
• Test coverage can be generated with npm run test:coverage
• Configuration supports testing React components with jsdom environment

Files to Modify/Create

• control-plane/web/client/vitest.config.ts (new)
• control-plane/web/client/src/test/setup.ts (new)
• control-plane/web/client/package.json (add devDependencies and scripts)
• control-plane/web/client/src/components/ui/StatusBadge.test.tsx (example test)

Resources

• Vitest Documentation
• React Testing Library

---

Using AI to solve this issue? Read our AI-Assisted Contributions guide for testing requirements, prompt strategies, and common pitfalls to avoid.

[iammohitvs]

Hi @santoshkumarradha !

Followed this issue here from #115 . Would love to work on this, and hopefully follow up with linked issues related to this!

[santoshkumarradha]

Sure thing! Go ahead please 🚀@iammohitvs

[github-actions]

Thanks for picking this up, @iammohitvs! 🎉

Here's what to expect:

• We'll check in after 7 days if we haven't heard an update
• After 14 days, we'll send a second reminder
• After 21 days without activity, we'll unassign to let others contribute

Tips for success:

• Drop a comment when you start working on it
• Share any blockers - we're here to help!
• Link your PR with Fixes #103 in the description

Happy coding! 🚀

[iammohitvs]

Hi @santoshkumarradha

Pr raised for the vitest infrastructure on the frontend! Let me know if changes are preferred, will gladly make them!