Migrate thunder-gate tests to Vitest Browser Mode and Vitest v4

[DonOmalVindula]

Purpose

This pull request refactors test and component code throughout the thunder-develop frontend to improve type safety and clarity when working with mock functions. The main change is replacing the use of ReturnType<typeof vi.fn> with the explicit Mock type imported from vitest. This makes mock variable types more accurate and consistent, especially in test files. Additionally, one minor improvement updates a useRef type for better compatibility.

The most important changes are:

Test type improvements:

• Replaced all instances of ReturnType<typeof vi.fn> with the explicit Mock type for mock variables in test files across applications and flows features, including API and component tests.

Component type improvement:

• Updated the type of applyTimeoutRef in EditTokenSettings.tsx from NodeJS.Timeout | null to ReturnType<typeof setTimeout> | null for better compatibility across environments.

These changes enhance code maintainability and reduce the risk of type errors when working with mocks in tests.

Related Issues

• Evaluate & remove @testing-library/* + Migrate to Vitest Browser Mode for browser based testing #1261

Related PRs

• N/A

Checklist

• Followed the contribution guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Tests provided. (Add links if there are any)
  • Unit Tests
  • Integration Tests
• Breaking changes. (Fill if applicable)
  • Breaking changes section filled.
  • breaking change label added.

Security checks

• Followed secure coding standards in WSO2 Secure Coding Guidelines
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.

[Copilot]

Pull request overview

This pull request migrates thunder-gate tests from @testing-library/react with JSDOM to Vitest Browser Mode with Playwright, running tests in actual Chromium browsers. This addresses limitations of JSDOM that don't fully reflect real browser behavior and eliminates the need for extensive DOM API mocking.

Changes:

• Added browser-specific test utilities to @thunder/test-utils package (browser.ts, browser-test-utils.tsx, setup-browser.ts)
• Configured Vitest with Playwright provider for thunder-gate tests
• Migrated all 18 test files from @testing-library APIs to native Vitest Browser Mode APIs (page object, userEvent, expect.element, expect.poll)
• Implemented vi.hoisted() pattern for proper mock function hoisting in browser mode
• Removed @testing-library dependencies from thunder-gate and replaced with playwright and @vitest/browser packages

Reviewed changes

Copilot reviewed 25 out of 27 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
frontend/pnpm-workspace.yaml	Added @vitest/browser, @vitest/browser-playwright, playwright, and vitest-browser-react to catalog
frontend/pnpm-lock.yaml	Updated dependency resolution for new browser mode packages
frontend/packages/thunder-test-utils/src/setup-browser.ts	Browser mode test setup with i18n and Asgardeo mocks
frontend/packages/thunder-test-utils/src/browser.ts	Exports browser-specific test utilities and Vitest Browser Mode APIs
frontend/packages/thunder-test-utils/src/browser-test-utils.tsx	Implements custom render and renderHook functions for browser mode with provider wrapping
frontend/packages/thunder-test-utils/rolldown.config.js	Added build configuration for browser mode utilities (ESM only)
frontend/packages/thunder-test-utils/package.json	Added package exports for ./browser and ./setup-browser, added vitest-browser-react dependency
frontend/apps/thunder-gate/vite.config.ts	Configured browser mode with Playwright provider, chromium browser, and headless mode
frontend/apps/thunder-gate/src/test/setup.ts	Updated to import setup-browser instead of jsdom setup
frontend/apps/thunder-gate/src/tests/**/*.test.tsx	Migrated 18 test files to use page object queries, userEvent, expect.element, and expect.poll
frontend/apps/thunder-gate/package.json	Removed @testing-library dependencies, added @vitest/browser, playwright, and vitest-browser-react
.gitignore	Added screenshots directory to ignore Vitest Browser Mode screenshots

Files not reviewed (1)

• frontend/pnpm-lock.yaml: Language not supported

[Copilot]

Pull request overview

Copilot reviewed 25 out of 27 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• frontend/pnpm-lock.yaml: Language not supported

[Copilot]

Pull request overview

Copilot reviewed 25 out of 27 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• frontend/pnpm-lock.yaml: Language not supported

[Copilot]

Pull request overview

Copilot reviewed 53 out of 55 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• frontend/pnpm-lock.yaml: Language not supported

[Copilot]

Pull request overview

Copilot reviewed 55 out of 57 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• frontend/pnpm-lock.yaml: Language not supported