Files
supabase/apps/studio/tests/vitestSetup.ts
T
Drake CostaandJoshen Lim af5e591b84 Refactor NewAccessTokenButton to use shadcn components (#36972)
* chore: Refactor `NewAccessTokenButton` to use shadcn components

This brings `NewAccessTokenButton` into conformance with the latest UI patterns of using shadcn based components, zod schemas, and react-hook-form for form submission.

I based this refactor on the implementation of `CreateSecretAPIKeyDialog`, which already made use of the above.

* add success and failure toasts

* add smoke test for `NewAccessTokenButton`, fix vitest config

This adds a minimal test for `NewAccessTokenButton` but more importantly fixes a critical bug in the vitest configuration for `studio`.

Because `restoreMocks: true` was set in the config, this meant that the mock implementation for `window.matchMedia` defined in the `tests/vitestSetup.ts` file was being **reset** to an empty function before each test suite was run. While this didn't appear to be a problem before, that appears to be because none of the existing tests had `motion.div` in their component trees. Since `motion.div` calls `addListener` on a media query as part of it's lifecycle, that meant that any test which included it would fail as `addListener` would be undefined in this situation. Removing `restoreMocks: true` from the config results in the desired mocking behavior.

This change is necessary in order to test any component that has the `FormItemLayout` component, as it uses `framer-motion` to animate in error messages for input elements.

* add warning comment in case of future config regression

* update test cases, reset form on dialog close, testing setup fixes

This fixes an issue with the polyfills for the testing environment, where a call to `useMutation` would fail as a result of `TransformStream` being set to `null`.

Basic tests for access token creation and form resetting added. Adds `@faker-js/faker` to the studio app devDependencies to generate mock data for `msw` endpoint response.

Adds `shx` to the docs app devDependencies to ensure that the `codegen:examples` script runs cross-platform.

* ensure mocked date is a string

* update testing setup, pollyfills and add rich type support to addAPIMock

* Update studio testing setup files

Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components

* chore: Refactor `NewAccessTokenButton` to use shadcn components

This brings `NewAccessTokenButton` into conformance with the latest UI patterns of using shadcn based components, zod schemas, and react-hook-form for form submission.

I based this refactor on the implementation of `CreateSecretAPIKeyDialog`, which already made use of the above.

* add success and failure toasts

* add smoke test for `NewAccessTokenButton`, fix vitest config

This adds a minimal test for `NewAccessTokenButton` but more importantly fixes a critical bug in the vitest configuration for `studio`.

Because `restoreMocks: true` was set in the config, this meant that the mock implementation for `window.matchMedia` defined in the `tests/vitestSetup.ts` file was being **reset** to an empty function before each test suite was run. While this didn't appear to be a problem before, that appears to be because none of the existing tests had `motion.div` in their component trees. Since `motion.div` calls `addListener` on a media query as part of it's lifecycle, that meant that any test which included it would fail as `addListener` would be undefined in this situation. Removing `restoreMocks: true` from the config results in the desired mocking behavior.

This change is necessary in order to test any component that has the `FormItemLayout` component, as it uses `framer-motion` to animate in error messages for input elements.

* update test cases, reset form on dialog close, testing setup fixes

This fixes an issue with the polyfills for the testing environment, where a call to `useMutation` would fail as a result of `TransformStream` being set to `null`.

Basic tests for access token creation and form resetting added. Adds `@faker-js/faker` to the studio app devDependencies to generate mock data for `msw` endpoint response.

Adds `shx` to the docs app devDependencies to ensure that the `codegen:examples` script runs cross-platform.

* ensure mocked date is a string

* update testing setup, pollyfills and add rich type support to addAPIMock

* fix imports

* fix missing listen call for msw, resolve test type error

* fix imports

* Update studio testing setup files

Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components

* fix missing listen call for msw, resolve test type error

* fix imports

* Shift test file

* Smol fix

* Nit

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-07-23 16:54:31 +08:00

51 lines
1.3 KiB
TypeScript

import '@testing-library/jest-dom/vitest'
import { cleanup, configure } from '@testing-library/react'
import { createDynamicRouteParser } from 'next-router-mock/dist/dynamic-routes'
import { afterAll, afterEach, beforeAll, vi } from 'vitest'
import { routerMock } from './lib/route-mock'
import { mswServer } from './lib/msw'
// Uncomment this if HTML in errors are being annoying.
//
// configure({
// getElementError: (message, container) => {
// const error = new Error(message ?? 'Element not found')
// error.name = 'ElementNotFoundError'
// return error
// },
// })
beforeAll(() => {
mswServer.listen({ onUnhandledRequest: `error` })
vi.mock('next/router', () => require('next-router-mock'))
vi.mock('next/navigation', async () => {
const actual = await vi.importActual('next/navigation')
return {
...actual,
useRouter: () => {
return {
push: vi.fn(),
replace: vi.fn(),
}
},
usePathname: () => vi.fn(),
useSearchParams: () => ({
get: vi.fn(),
}),
}
})
vi.mock('next/compat/router', () => require('next-router-mock'))
routerMock.useParser(createDynamicRouteParser(['/projects/[ref]']))
})
afterEach(() => {
mswServer.resetHandlers()
cleanup()
})
afterAll(() => {
mswServer.close()
})