asyncapi
[FEATURE] Strengthen frontend test coverage with component tests, a11y checks, and visual regression
Why do we need this improvement?
We currently rely mainly on: • Basic Cypress E2E smoke tests (navigation: Home, Tools, Docs) • Lighthouse CI for performance
But we don’t validate: • React component behavior in isolation (e.g. filtering logic, prop rendering) • Accessibility on real user flows (forms, filters, interactive UI) • Visual regressions when CSS/layout changes
This means: • UI bugs can slip through as long as the happy-path E2E still works. • Accessibility issues are only caught manually (if at all). • Styling or layout regressions might reach production without any automated signal.
To reach a robust and maintainable frontend, we need component-level tests, automated a11y checks, and at least a baseline of visual regression testing.
How will this change help?
• Higher confidence in UI changes:
Jest + React Testing Library tests will verify that our components (e.g. ToolsDashboard, Filter, ToolsCard) behave as expected when props/state change.
• Prevent regressions earlier:
Component tests will catch logic bugs before they reach E2E, speeding up feedback and reducing debugging time.
• Built-in accessibility safety net:
Integrating cypress-axe will automatically flag WCAG violations on each page visit in E2E tests, improving the baseline accessibility of the app.
• Protection against CSS/layout breaks:
Visual regression tooling (Storybook test runner or Percy) will highlight unintended UI changes when styles are modified.
• Better CI signal and DX:
npm test will run both build-related tests and real component tests, giving contributors a single, reliable command to validate changes locally and in CI.
Screenshots
How could it be implemented/designed?
-> Add Component Unit Tests (Jest + React Testing Library)
🚧 Breaking changes
Yes
👀 Have you checked for similar open issues?
- [x] I checked and didn't find a similar issue
🏢 Have you read the Contributing Guidelines?
- [x] I have read the Contributing Guidelines
Are you willing to work on this issue?
Yes I am willing to submit a PR!
@derberg take a look on this most of the components are not in test coverage we can add this to prevent future bugs Thank you ☺️
We don't need a11y tests or integration tests as there is not much backend data usage. The cypress tests can do the meaningful.
Thanks for reporting but would have to close as test suite improvement takes a lot of developer overhead to maintain while the benefits are much less, as I have seen so far for this repository.
