mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
* 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>
51 lines
1.3 KiB
TypeScript
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()
|
|
})
|