mirror of
https://github.com/supabase/supabase.git
synced 2026-06-29 11:57:37 -04:00
Ali Waseem
6236ee9ef9
## 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>
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import { screen } from '@testing-library/react'
|
|
import { platformComponents as components } from 'api-types'
|
|
import { HttpResponse } from 'msw'
|
|
import { describe, expect, test } from 'vitest'
|
|
|
|
import { OrgNotFound } from './OrgNotFound'
|
|
import type { ProfileContextType } from '@/lib/profile'
|
|
import { createMockOrganizationResponse } from '@/tests/helpers'
|
|
import { customRender } from '@/tests/lib/custom-render'
|
|
import { addAPIMock, type APIErrorBody } from '@/tests/lib/msw'
|
|
|
|
type OrganizationResponse = components['schemas']['OrganizationResponse']
|
|
type OrganizationProjectsResponse = components['schemas']['OrganizationProjectsResponse']
|
|
|
|
const PROFILE_CONTEXT: ProfileContextType = {
|
|
profile: {
|
|
id: 1,
|
|
auth0_id: 'auth0|test',
|
|
gotrue_id: 'gotrue-test',
|
|
username: 'testuser',
|
|
primary_email: 'test@example.com',
|
|
first_name: null,
|
|
last_name: null,
|
|
mobile: null,
|
|
is_alpha_user: false,
|
|
is_sso_user: false,
|
|
disabled_features: [],
|
|
free_project_limit: null,
|
|
},
|
|
error: null,
|
|
isLoading: false,
|
|
isError: false,
|
|
isSuccess: true,
|
|
}
|
|
|
|
const mockEmptyProjectsResponse = () => {
|
|
addAPIMock({
|
|
method: 'get',
|
|
path: '/platform/organizations/:slug/projects',
|
|
response: () =>
|
|
HttpResponse.json<OrganizationProjectsResponse>({
|
|
pagination: { count: 0, limit: 96, offset: 0 },
|
|
projects: [],
|
|
}),
|
|
})
|
|
}
|
|
|
|
describe('OrgNotFound', () => {
|
|
test('renders the not-found admonition with the slug', async () => {
|
|
addAPIMock({
|
|
method: 'get',
|
|
path: '/platform/organizations',
|
|
response: () => HttpResponse.json<OrganizationResponse[]>([]),
|
|
})
|
|
|
|
customRender(<OrgNotFound slug="ghost-org" />, { profileContext: PROFILE_CONTEXT })
|
|
|
|
expect(await screen.findByText('Organization not found')).toBeInTheDocument()
|
|
expect(screen.getByText('ghost-org')).toBeInTheDocument()
|
|
})
|
|
|
|
test('renders an organization card for each org returned from the API', async () => {
|
|
addAPIMock({
|
|
method: 'get',
|
|
path: '/platform/organizations',
|
|
response: () =>
|
|
HttpResponse.json<OrganizationResponse[]>([
|
|
createMockOrganizationResponse({ slug: 'acme-prod', name: 'Acme Production' }),
|
|
createMockOrganizationResponse({ slug: 'acme-dev', name: 'Acme Development' }),
|
|
]),
|
|
})
|
|
mockEmptyProjectsResponse()
|
|
|
|
customRender(<OrgNotFound slug="ghost-org" />, { profileContext: PROFILE_CONTEXT })
|
|
|
|
expect(await screen.findByText('Acme Production')).toBeInTheDocument()
|
|
expect(screen.getByText('Acme Development')).toBeInTheDocument()
|
|
})
|
|
|
|
test('shows an error admonition when the organizations query fails', async () => {
|
|
addAPIMock({
|
|
method: 'get',
|
|
path: '/platform/organizations',
|
|
response: () =>
|
|
HttpResponse.json<APIErrorBody>({ message: 'Boom from the backend' }, { status: 500 }),
|
|
})
|
|
|
|
customRender(<OrgNotFound slug="ghost-org" />, { profileContext: PROFILE_CONTEXT })
|
|
|
|
expect(await screen.findByText('Failed to load organizations')).toBeInTheDocument()
|
|
})
|
|
})
|