Files
supabase__supabase/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.test.tsx
Alaister Young 1966209483 chore(deps): upgrade vitest to v5 (#49994)
Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the
handful of things v5 turned into hard errors, and drops the
`vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes
redundant.

**Changed:**
- `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog)
- `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies
moved to module scope (v5 throws on nested calls). Affects the Studio
and docs setup files and four Studio tests.
- `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()`
instead of assigning `global.navigator`, which now reaches jsdom's
getter-only property.
- `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used
to leak a throwing mock for the rest of the file, which v5's coverage
provider now trips over. A later test in the same file had been
asserting the leak's side effect (valid JSON reported as invalid) and
now asserts the correct behavior.
- `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation
resolves through a peer now, so it lands on each package's own `vitest`
instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type
errors in dev-tools after the reshuffle.
- `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range.
- `vite: catalog:` added to dev-tools, www, and common. Without it they
resolved a newer vite than the catalog pin, which forked a second vitest
instance in the lockfile. There's now one.
- ai-commands custom matcher types use v5's `Matchers<R, T>` form.
- 110 test files: `vi.clearAllMocks()` removed from
`beforeEach`/`afterEach` hooks, along with hooks that only did that and
the imports they left unused. Calls that also reset/restore mocks are
untouched. Second commit, mechanical.

**Added:**
- `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter
output there)

**Removed:**
- `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves
tsconfig paths itself.

Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `vitest` and `@vitest/*` while
5.0.0 was inside the workspace's 3-day `minimumReleaseAge` window. That
window has closed, so the exclusion is gone and nothing bypasses the
release-age gate.

**Perf** (local, medians of 3 runs, same machine):

| Suite | v4.1.4 | v5.0.0 |
|---|---|---|
| studio | 144.1s | 141.7s (-2%) |
| studio `--coverage` | 156.9s | 146.4s (-7%) |
| ui-patterns | 6.27s | 5.07s (-19%) |
| ui `--coverage` | 3.35s | 2.14s (-36%) |
| www | 0.89s | 0.47s (-47%) |

Studio is dominated by jsdom environment setup per file, which v5
doesn't change. `vitest doctor` recommends keeping the current pool
config: the vm pools and `isolate: false` all break tests.

## To test

- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for vitest.
- CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint
should all be green. The lint ratchet was checked locally: warning
counts on touched Studio files are identical to master.
- `pnpm test:studio` locally passes with coverage (588 files, 6240
tests).
- Open a Studio test that uses `toBeInTheDocument` in your editor and
confirm no type errors on jest-dom matchers, in Studio and in
`packages/dev-tools`.
- Known pre-existing failures unrelated to this PR: one dev-tools test
(`getEventCountBadge` capped pill) fails on master too.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Tests
- Improved test coverage for JSON validation and mobile navigation
behavior.
- Updated test setup, cleanup, environment configuration, and matcher
support across application and shared package suites.
- Removed obsolete coverage for alternate MCP transport selection.

## Chores
- Streamlined TypeScript path resolution and Vitest reporter output
handling.
- Updated testing libraries and Vitest tooling across documentation,
Studio, website, and shared packages.
- Added Vitest reporter output to ignored files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-09-10 16:45:54 +08:00

271 lines
7.3 KiB
TypeScript

import { fireEvent, screen } from '@testing-library/react'
import { mockAnimationsApi } from 'jsdom-testing-mocks'
import type { MouseEventHandler, ReactNode } from 'react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { ProjectNeedsSecuring } from './ProjectNeedsSecuring'
import { render } from '@/tests/helpers'
const {
mockUseFlag,
mockUseProjectLintsQuery,
mockUseSelectedProjectQuery,
mockUseTablesQuery,
mockUseProjectPostgrestConfigQuery,
mockUseTablePrivilegesQuery,
mockUseLocalStorageQuery,
mockUseRouter,
mockRouterPush,
} = vi.hoisted(() => ({
mockUseFlag: vi.fn(),
mockUseProjectLintsQuery: vi.fn(),
mockUseSelectedProjectQuery: vi.fn(),
mockUseTablesQuery: vi.fn(),
mockUseProjectPostgrestConfigQuery: vi.fn(),
mockUseTablePrivilegesQuery: vi.fn(),
mockUseLocalStorageQuery: vi.fn(),
mockUseRouter: vi.fn(),
mockRouterPush: vi.fn(),
}))
vi.mock('common', async () => {
const actual = await vi.importActual<typeof import('common')>('common')
return {
...actual,
useFlag: mockUseFlag,
useParams: () => ({ ref: 'project-ref' }),
}
})
vi.mock('next/router', () => ({
useRouter: () => mockUseRouter(),
}))
vi.mock('next/link', () => ({
default: ({
href,
children,
onClick,
...props
}: {
href: string
children: ReactNode
onClick?: MouseEventHandler<HTMLAnchorElement>
[key: string]: unknown
}) => (
<a href={href} onClick={onClick} {...props}>
{children}
</a>
),
}))
vi.mock('@/data/lint/lint-query', () => ({
useProjectLintsQuery: mockUseProjectLintsQuery,
}))
vi.mock('@/hooks/misc/useSelectedProject', () => ({
useSelectedProjectQuery: mockUseSelectedProjectQuery,
}))
vi.mock('@/data/tables/tables-query', () => ({
useTablesQuery: mockUseTablesQuery,
}))
vi.mock('@/data/config/project-postgrest-config-query', () => ({
parseDbSchemaString: vi.fn((value: string) => value.split(',').map((schema) => schema.trim())),
useProjectPostgrestConfigQuery: mockUseProjectPostgrestConfigQuery,
}))
vi.mock('@/data/privileges/table-privileges-query', () => ({
useTablePrivilegesQuery: mockUseTablePrivilegesQuery,
}))
vi.mock('@/hooks/misc/useLocalStorage', () => ({
useLocalStorageQuery: mockUseLocalStorageQuery,
}))
vi.mock('sonner', () => ({
toast: {
error: vi.fn(),
},
}))
const issueLint = {
cache_key: 'lint-1',
name: 'rls_disabled_in_public',
detail: 'RLS is disabled on public.invoices',
description: 'RLS disabled',
level: 'ERROR',
categories: ['SECURITY'],
metadata: {
schema: 'public',
name: 'invoices',
},
}
const tables = [
{
id: 1,
name: 'invoices',
schema: 'public',
rls_enabled: false,
},
{
id: 2,
name: 'profiles',
schema: 'public',
rls_enabled: false,
},
{
id: 3,
name: 'customers',
schema: 'public',
rls_enabled: true,
},
]
const tablePrivileges = [
{
schema: 'public',
name: 'invoices',
privileges: [
{
grantee: 'anon',
privilege_type: 'SELECT',
},
],
},
]
describe('ProjectNeedsSecuring', () => {
beforeEach(() => {
mockAnimationsApi()
mockUseFlag.mockReturnValue(true)
mockUseRouter.mockReturnValue({ pathname: '/project/[ref]', push: mockRouterPush })
mockUseSelectedProjectQuery.mockReturnValue({
data: { connectionString: 'postgresql://example' },
})
mockUseProjectLintsQuery.mockReturnValue({
data: [issueLint],
isPending: false,
isError: false,
})
mockUseTablesQuery.mockReturnValue({
data: tables,
isPending: false,
isError: false,
})
mockUseProjectPostgrestConfigQuery.mockReturnValue({
data: 'public',
isPending: false,
isError: false,
})
mockUseTablePrivilegesQuery.mockReturnValue({
data: tablePrivileges,
isPending: false,
isError: false,
})
mockUseLocalStorageQuery.mockReturnValue([null, vi.fn(), { isLoading: false }])
})
afterEach(() => {
window.localStorage.clear()
})
it('renders the security gate when an exposed table has RLS disabled and the project has not been dismissed', () => {
render(
<ProjectNeedsSecuring>
<div data-testid="project-children">Project content</div>
</ProjectNeedsSecuring>
)
expect(screen.getByText('Your project needs securing')).toBeInTheDocument()
expect(screen.getByText('Review and fix')).toBeInTheDocument()
expect(screen.getByRole('link', { name: 'Open Data API settings' })).toHaveAttribute(
'href',
'/project/project-ref/integrations/data_api/settings'
)
expect(screen.queryByRole('columnheader', { name: 'Action' })).not.toBeInTheDocument()
expect(screen.queryByRole('link', { name: 'View policies' })).not.toBeInTheDocument()
expect(screen.queryByText('profiles')).not.toBeInTheDocument()
expect(screen.queryByText('customers')).not.toBeInTheDocument()
expect(screen.getByText('Skip to home')).toBeInTheDocument()
expect(screen.queryByTestId('project-children')).not.toBeInTheDocument()
})
it('navigates to the table policies page when a table row is clicked', () => {
render(
<ProjectNeedsSecuring>
<div data-testid="project-children">Project content</div>
</ProjectNeedsSecuring>
)
fireEvent.click(screen.getByText('invoices'))
expect(mockRouterPush).toHaveBeenCalledWith(
'/project/project-ref/database/policies?schema=public&search=invoices'
)
})
it('renders the project content when the security gate has been dismissed', () => {
mockUseLocalStorageQuery.mockReturnValue([
'2026-04-21T00:00:00.000Z',
vi.fn(),
{ isLoading: false },
])
render(
<ProjectNeedsSecuring>
<div data-testid="project-children">Project content</div>
</ProjectNeedsSecuring>
)
expect(screen.queryByText('Your project needs securing')).not.toBeInTheDocument()
expect(screen.getByTestId('project-children')).toBeInTheDocument()
})
it('renders the project content when there are no RLS issues', () => {
mockUseProjectLintsQuery.mockReturnValue({
data: [],
isPending: false,
isError: false,
})
render(
<ProjectNeedsSecuring>
<div data-testid="project-children">Project content</div>
</ProjectNeedsSecuring>
)
expect(screen.queryByText('Your project needs securing')).not.toBeInTheDocument()
expect(screen.getByTestId('project-children')).toBeInTheDocument()
})
it('renders the project content on non-home project routes', () => {
mockUseRouter.mockReturnValue({ pathname: '/project/[ref]/database/tables' })
render(
<ProjectNeedsSecuring>
<div data-testid="project-children">Project content</div>
</ProjectNeedsSecuring>
)
expect(screen.queryByText('Your project needs securing')).not.toBeInTheDocument()
expect(screen.getByTestId('project-children')).toBeInTheDocument()
})
it('renders the project content when the feature flag is disabled', () => {
mockUseFlag.mockReturnValue(false)
render(
<ProjectNeedsSecuring>
<div data-testid="project-children">Project content</div>
</ProjectNeedsSecuring>
)
expect(screen.queryByText('Your project needs securing')).not.toBeInTheDocument()
expect(screen.getByTestId('project-children')).toBeInTheDocument()
})
})