Files
supabase/apps/studio/tests/lib/route-mock.ts
Drake CostaandTerry Sutton d6fe8476f3 Refactor EditSecretModal to use shadcn components (#37258)
* 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>
2025-08-08 15:42:06 -02:30

27 lines
1.1 KiB
TypeScript

import { glob } from 'fs/promises'
import _routerMock from 'next-router-mock'
import { createDynamicRouteParser } from 'next-router-mock/dynamic-routes'
import { normalize, posix, sep, join } from 'path'
export const routerMock = _routerMock
const pipe =
<T>(...fns: Array<(arg: T) => T>) =>
(value: T) =>
fns.reduce((acc, fn) => fn(acc), value)
// normalize file paths to posix format (windows FS support)
const toPosix = (str: string) => str.replaceAll(sep, posix.sep)
const pagesRoot = toPosix(join(process.cwd(), `./pages`))
// remove the base filepath
const removePrefix = (str: string) => str.replace(pagesRoot, ``)
// remove the file extension or index segment
const removeExt = (str: string) => str.replace(/.tsx|\/index.tsx/, ``)
// Glob the `pages/` directory for all dynamic route segments
const paths = [
...(await Array.fromAsync(glob(`${pagesRoot}/**/*\].tsx`))),
...(await Array.fromAsync(glob(`${pagesRoot}/**/**\]/**/index.tsx`))),
].map(pipe(normalize, toPosix, removePrefix, removeExt))
routerMock.useParser(createDynamicRouteParser(paths))