642: Setup vitest and wire it up to Codecov

[tahminator]

642

Description of changes

Checklist before review

• I have done a thorough self-review of the PR
• Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
• If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
• All tests have passed
• I have successfully deployed this PR to staging
• I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Staging

[github-actions]

Available PR Commands

• /ai - Triggers all AI review commands at once
• /review - AI review of the PR changes
• /describe - AI-powered description of the PR
• /improve - AI-powered suggestions
• /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

[github-actions]

Title

642: Setup vitest and wire it up to Codecov

---

PR Type

Tests, Enhancement, Configuration changes

---

Description

• Add Vitest and RTL setup

• Create MSW handlers and mocks

• 100% tests for LeaderboardMetadata

• Optional mock server in dev

---

Diagram Walkthrough

flowchart LR
  Vitest["Vitest + RTL setup"] -- "jsdom, globals, setupFiles" --> ViteCfg["vite.config.ts"]
  ViteCfg -- "enables tests" --> Tests["LeaderboardMetadata.test.tsx"]
  MSW["MSW handlers/mocks"] -- "API mocking" --> Tests
  AppMock["launchMockServer()" ] -- "VITE_MOCK=true" --> Main["main.tsx"]
  TestUtils["Test providers (Mantine, Router, React Query)"] -- "render helper" --> Tests
  APIRes["ApiResponse typing fix"] -- "payload?: undefined" --> Tests

Loading

File Walkthrough

	Relevant files
Tests	5 files LeaderboardMetadata.test.tsx Comprehensive tests for LeaderboardMetadata components      +406/-0  index.ts MSW handlers for leaderboard metadata endpoints                    +137/-0  index.tsx Test utilities with providers for rendering                            +40/-0    defaults.tsx Global test setup and matchMedia mock                                        +19/-0    index.tsx Browser MSW setup and launcher export                                        +5/-0
Enhancement	4 files LeaderboardMetadata.tsx Add testids and minor UI tweaks for testing                            +17/-4    main.tsx Conditionally launch browser mock server in dev                    +8/-3      PrettyCounter.tsx Add data-testid for PrettyCounter                                                +5/-1      apiResponse.ts Relax ApiError payload typing for tests                                    +1/-1
Configuration changes	6 files vite.config.ts Configure Vitest environment and setup files                          +12/-0    package.json Add test scripts and testing dependencies                                +12/-2    extensions.json Recommend Vitest Explorer extension                                            +2/-2      example.env.staging Add VITE_STAGING flag for frontend                                              +4/-0      tsconfig.app.json Include Vitest globals type definitions                                    +1/-0      example.env Add VITE_MOCK flag for enabling MSW                                            +3/-0
Dependencies	1 files pnpm-lock.yaml Lockfile updates for new test dependencies                              +1154/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Flaky Test Risk Tests rely on document title/meta side effects and MSW handlers; ensure cleanup between tests (e.g., resetting document.head and timers) to avoid cross-test leakage and flakiness. it("should set document title after successful API call", async () => { renderProviderFn?.(<CurrentLeaderboardMetadata />); await waitFor(() => { expect(document.title).toBe( 'CodeBloom - std::string november = "hello world"', ); }); }); it("should set document description after successful API call", async () => { renderProviderFn?.(<CurrentLeaderboardMetadata />); await waitFor(() => { const metaDescription = document.querySelector( 'meta[name="description"]', ); expect(metaDescription).toBeInTheDocument(); expect(metaDescription).toHaveAttribute( "content", "CodeBloom - View your rank in the leaderboard", ); }); }); Handler Duplication Two identical GET handlers are registered for the same endpoint in successful handlers; MSW will use the last match—confirm this is intended and doesn’t mask different cases. http.get(currentMetadata.url.toString(), () => { return HttpResponse.json({ payload: { id: uuid(), createdAt: d().toISOString(), shouldExpireBy: d().add(10, "days").toISOString(), syntaxHighlightingLanguage: "cpp", name: 'std::string november = "hello world"', deletedAt: null, }, success: true, message: "Leaderboard metadata loaded!", } satisfies ReturnType<typeof currentMetadata.res>); }), http.get(metadataById.url.toString(), () => { return HttpResponse.json({ payload: { id: uuid(), createdAt: d().toISOString(), shouldExpireBy: d().add(10, "days").toISOString(), syntaxHighlightingLanguage: "cpp", name: 'std::string november = "hello world"', deletedAt: null, }, success: true, message: "Leaderboard metadata loaded!", } satisfies ReturnType<typeof metadataById.res>); }), http.get(metadataById.url.toString(), () => { return HttpResponse.json({ payload: { id: uuid(), createdAt: d().toISOString(), shouldExpireBy: d().add(10, "days").toISOString(), syntaxHighlightingLanguage: "cpp", name: 'std::string november = "hello world"', deletedAt: null, }, success: true, message: "Leaderboard metadata loaded!", } satisfies ReturnType<typeof metadataById.res>); }), Mock Server Guard The mock server launches when VITE_MOCK is "true"; ensure this never runs in production builds and that CI/staging envs set the variable explicitly to avoid unexpected network interception. if (import.meta.env.VITE_MOCK === "true") { launchMockServer(); }

[codecov]

Codecov Report

❌ Patch coverage is 87.87879% with 4 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
js/src/__mocks__/leaderboard/index.ts	85.71%	4 Missing ⚠️

📢 Thoughts on this report? Let us know!