Add initial UI tests with Vitest #4615
Conversation
|
@jjgriff93 This PR is pretty much all copilot's work. Interested in your thoughts. |
Unit Test Results0 tests 0 ✅ 0s ⏱️ Results for commit 8188e81. ♻️ This comment has been updated with latest results. |
| import { ResourceType } from "../../models/resourceType"; | ||
|
|
||
| // Mock FluentUI components | ||
| vi.mock("@fluentui/react", async () => { |
There was a problem hiding this comment.
A lot of Fluent UI mocking in each individual test, can this be consolidated and re-used?
There was a problem hiding this comment.
Had a go at sorting that. What you think?
@marrobi Looks like a correct setup! Using vitest over jest is my preference also. Haven't combed through every individual test but something that jumps out is there's a lot of repeat mocking that might be able to be consolidated and re-used. If you're happy with the checks it's decided to do on each component and they all make sense (the ones I skimmed through seem to) then good to go |
…robi/initial-ui-tests
…robi/initial-ui-tests
There was a problem hiding this comment.
Pull Request Overview
Introduce initial UI tests and supporting configuration, mocks, and utilities to establish a testing baseline using Vitest and React Testing Library.
- Add Vitest configuration with JS DOM environment, setup files, coverage reporter, and thresholds in vite.config.ts
- Provide shared test utilities, global mocks, and FluentUI component stubs under
src/test-utils/ - Implement global test setup in
src/setupTests.tsand add initial unit/component tests for core components
Reviewed Changes
Copilot reviewed 36 out of 36 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| ui/app/vite.config.ts | Configure Vitest testing, coverage, and setup files |
| ui/app/src/setupTests.ts | Initialize global mocks (ResizeObserver, crypto) |
| ui/app/src/test-utils/* | Add test utilities, mock data, and FluentUI mocks |
Comments suppressed due to low confidence (1)
ui/app/src/setupTests.ts:8
- Use globalThis instead of global to assign mocks (e.g., globalThis.ResizeObserver) to ensure compatibility across environments.
global.ResizeObserver = vi.fn().mockImplementation(() => ({
| templateVersion: '1.0.0', | ||
| availableUpgrades: [], | ||
| deploymentStatus: 'deployed', | ||
| updatedWhen: Date.now(), |
There was a problem hiding this comment.
[nitpick] Using Date.now() at module initialization can lead to unstable mock timestamps; consider injecting a fixed timestamp or factory function for predictable test data.
| updatedWhen: Date.now(), | |
| updatedWhen: FIXED_TIMESTAMP, |
2 participants
Introduce unit and component tests using Vitest and React Testing Library, enhancing testing practices and ensuring better code coverage. Update project configuration to support testing and mock necessary global objects for a seamless testing experience.
Updated copilot instruction and docs.
This is a first batch to ensure aligned on approach.