mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Drake CostaandTerry Sutton
d6fe8476f3
* 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 * add missing changes * Move `EditSecretModal` to be child of `SecretRow` In the accompanying PR for `DeleteSecretModal`, that one will also be moved over to `SecretRow` * 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 * add missing changes * Move `EditSecretModal` to be child of `SecretRow` In the accompanying PR for `DeleteSecretModal`, that one will also be moved over to `SecretRow` * fix imports * Update test, fix rebase errors * remove unnecessary code * resolve type errors * 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 * remove duplicate test * update testing setup * implement requested changes * cleanup unnecessary conditional logic for undefined `secret` prop * remove unused import * remove unnecessary code * cleanup, replace lodash import with JS * add required router mock * fix broken lockfile --------- Co-authored-by: Terry Sutton <saltcod@gmail.com>
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { TextDecoder, TextEncoder } from 'node:util'
|
|
import { ReadableStream, TransformStream } from 'node:stream/web'
|
|
import { vi } from 'vitest'
|
|
import { configMocks } from 'jsdom-testing-mocks'
|
|
import { act } from '@testing-library/react'
|
|
|
|
configMocks({ act })
|
|
|
|
// Warning: `restoreMocks: true` in vitest.config.ts will
|
|
// cause this global mockImplementation to be **reset**
|
|
// before any tests are run!
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
writable: true,
|
|
value: vi.fn().mockImplementation((query) => ({
|
|
matches: false,
|
|
media: query,
|
|
onchange: null,
|
|
addListener: vi.fn(), // deprecated
|
|
removeListener: vi.fn(), // deprecated
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
})),
|
|
})
|
|
|
|
Object.defineProperties(globalThis, {
|
|
TextDecoder: { value: TextDecoder },
|
|
TextEncoder: { value: TextEncoder },
|
|
CSS: {
|
|
value: {
|
|
supports: (_k: any, _v: any) => false,
|
|
escape: (v: any) => v,
|
|
},
|
|
},
|
|
ReadableStream: { value: ReadableStream },
|
|
TransformStream: { value: TransformStream },
|
|
})
|
|
|
|
window.HTMLElement.prototype.hasPointerCapture = vi.fn()
|