<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Tests**
- Reduced diagnostic logging during automated CI test runs.
- Request, mock, and request-handling details remain available in non-CI
environments for troubleshooting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Right now our tests for API mocking is using vi.mock and mocking that
query or fetch handler. This is not the right approach IMO, 2 years ago
@jordienr added MSW with some very powerful helpers. The idea is to move
component test that rely on API using MSW within ViteTest. Principles
are simple:
- Mock API responses
- Mount your component that uses API responses
- Tests and assert on UI
- Added Skill for Clanker
This pattern is 100 times better than what we have
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Tests**
* Expanded and strengthened test suites for secrets, org lookup, support
flows, OAuth auth, and onboarding; mocks now use contract-backed
responses for more realistic coverage.
* **Documentation**
* Added a comprehensive guide describing a standardized pattern for
component tests that mock network requests.
* **Chores**
* Improved test helpers, typing for API mocks, and test runner
configuration for more reliable and maintainable tests.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46439?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
* 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>
* 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
* 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
* Move non-layout Storage related components to `components/interfaces`
* Fix paths
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Ivan Vasilov
