HYACINTH-1146 Integrate frontend testing using Vitest

[wtomaszewska]

Ticket HYACINTH-1146

Overview

This PR introduces a frontend testing infrastructure using Vitest, Testing Library, and MSW (Mock Service Worker). The focus is on integration tests that verify component rendering, user interactions, and API integration. Additionally, Capybara E2E tests were added to ensure the Rails-React integration works correctly.

Testing Infrastructure

Vitest Configuration

• Configured Vitest with jsdom environment for DOM testing

Dependencies Added

• vitest - Test runner
• @testing-library/react, @testing-library/dom, @testing-library/jest-dom - React testing utilities
• @testing-library/user-event - User interaction simulation
• msw - API mocking
• jsdom - DOM environment for tests

CI Integration

• Added yarn test --run step to run frontend tests in CI pipeline

Test Helpers

• Setup (src/testing/setup.ts) - global test setup that:
  • Starts MSW server before all tests
  • Resets handlers after each test (automatic cleanup)
  • Closes the MSW server after all tests complete
• Mock API (src/testing/mock-api.ts)
  • mockApi(method, path, body, status) - registers mock API responses for individual tests
  • Supports all HTTP methods (get, post, put, delete, patch)
  • Automatically prefixes paths with api/v2
• Data Generators (src/testing/data-generators.ts) - factory functions for creating test data:
  • buildUser(overrides?) - creates a User object with sensible defaults
  • buildProjectPermission(overrides?) - creates a ProjectPermission object
• Test Utilities (src/testing/test-utils.tsx)
  • renderApp(ui, options)
    • Renders a component inside QueryClientProvider + MemoryRouter
    • Useful for testing individual route components
  • renderWithRoutes(routesFactory, options)
    • For testing loaders, error boundaries, and full route trees
    • Passes QueryClient to the route factory so loaders can prefetch data
    • Essential for testing clientLoader authorization checks

Frontend Tests

Library Tests (src/lib/__tests__)

• auth.test.ts (unit tests) - tests useCurrentUser hook (successful user fetch and graceful null return on API failure)
• loader-authorization.test.ts (unit tests) - Tests requireAuthorization function - role checking, error throwing and edge cases (no roles required, empty roles array)
• authorization.test.ts (integration tests) - Tests route-level authorization using actual route loaders and error boundaries - verifies non-admins see access denied, admins can access and self-edit redirects to settings

Route Tests (src/app/routes)

Users Routes (src/app/routes/users/__tests__)

• index.test.tsx - Users list table rendering, column headers, sorting, UID links, “Create New User” button
• new.test.tsx - Empty form rendering, enabled UID field, default checkbox states, form submission success/error
• edit.test.tsx - Form pre-population from API, disabled UID field, save success/error alerts, API key generation UI
• project-permissions.test.tsx - Admin info message display, non-admin permissions table, editable checkboxes, add/remove permissions

Settings Routes (src/app/routes/settings/__tests__)

• settings.test.tsx - Current user form rendering, disabled fields when editing self, API key section, save success/error
• project-permissions.test.tsx - Admin info message, read-only permissions table for non-admins, disabled checkboxes, no edit controls

Component Tests (src/components/ui)

• table-builder/__tests__/table-builder.test.tsx - Table Builder is a reusable component that uses TanStack Table to display data and enable sorting. In the future, we’ll probably enhance it with filtering, pagination, etc. Since many pages will rely on this component, we want to ensure sufficient test coverage. The tests verify:
  • Rendering: column headers, data rows, custom cell renderers, empty state
  • Sorting: ascending/descending toggle, unsortable columns, sort indicator icons

Backend Tests (Capybara)

React Application Authentication (ui_v2_spec.rb)
Since the React application is rendered under /ui/v2 and relies on Rails for authentication, Capybara feature specs were added to verify the Rails-React integration.

---

Running Tests

# Run frontend tests in watch mode
yarn test

# Run frontend tests once (CI mode)
yarn test --run

# Run Capybara feature specs
bundle exec rspec spec/features/ui_v2_spec.rb

[elohanlon]

This PR is fantastic! Really well done. This is the kind of frontend test coverage we want in our apps, and such a good foundation for future testing.

I left a few very minor suggested changes, but otherwise really like everything I'm seeing here.

[elohanlon]

One additional test that could be good to add here: verifying that requireAuthorization does an OR-based (as opposed to AND-based) role check when an array of multiple roles is supplied as the second parameter. Example: requireAuthorization(queryClient, [ROLES.ADMIN, ROLES.USER]);

[wtomaszewska]

Good idea, added the test

[elohanlon]

🎉