DSM-171: Frontend testing setup using Vitest and Testing Library

[wtomaszewska]

Ticket DSM-171

Note: This frontend testing setup is identical to the one implemented in the Hyacinth app.

This PR introduces frontend tests using Vitest, Testing Library, and MSW (Mock Service Worker). The focus is on integration tests that verify component rendering and user interactions (sorting columns).

Updated folder structure

vite-plugin-ruby forcibly sets Vite's root to sourceCodeDir. If the React app's entry point (app/javascript) lives in a different directory than the tests (app/s3browser where the frontend code and tests live), the tests are not picked up correctly. To solve this, I moved all frontend code under app/javascript so that the entry point file, the frontend code, and the tests share the same parent directory.

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 the "read" HTTP method, which matches the API client's implementation (the app is currently read-only)
• Data Generators (src/testing/data-generators.ts) - factory functions for creating test data
• Test Utilities (src/testing/test-utils.tsx)
  • renderApp(ui, options) - renders a component inside QueryClientProvider + MemoryRouter for testing route components

Frontend Tests

Frontend tests cover all the routes users can navigate to.

• bucket-contents.test.tsx
• buckets.test.tsx
• object-details.test.tsx

Note: Pagination tests are not included, as the underlying bugs need to be addressed before we start adding tests.

[goldsmithb]

This is great! I just left one small suggestion

[goldsmithb]

Since url has a default value of '/' and is always truthy, perhaps this could be simplified to just:

initialEntries: ['/', url],
initialIndex: 1,

though it would have a redundant entry if the url is root (but I don't think it would be consequential).

Or something like:

const isRoot = url === '/';
const router = createMemoryRouter([{ path: routePath, element: ui }], {
    initialEntries: isRoot ? ['/'] : ['/', url],
    initialIndex: isRoot ? 0 : 1,
});