mirror of
https://github.com/supabase/supabase.git
synced 2026-06-28 19:39:19 -04:00
Andrey A.
94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import { fireEvent, screen, waitFor } from '@testing-library/react'
|
|
import { components } from 'api-types'
|
|
import { HttpResponse } from 'msw'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import { ApiKeyPill } from './ApiKeyPill'
|
|
import type { APIKeysData } from '@/data/api-keys/api-keys-query'
|
|
import { customRender } from '@/tests/lib/custom-render'
|
|
import { addAPIMock } from '@/tests/lib/msw'
|
|
|
|
type ApiKeyResponse = components['schemas']['ApiKeyResponse']
|
|
|
|
// Permissions are non-network global state — mock the hook (the skill's allowed
|
|
// exception), matching the neighboring PublishableAPIKeys.test.tsx.
|
|
const { mockUseAsyncCheckPermissions } = vi.hoisted(() => ({
|
|
mockUseAsyncCheckPermissions: vi.fn(),
|
|
}))
|
|
vi.mock('@/hooks/misc/useCheckPermissions', () => ({
|
|
useAsyncCheckPermissions: mockUseAsyncCheckPermissions,
|
|
}))
|
|
|
|
// CopyButton writes via copyToClipboard from 'ui'. Stub just that export so we can
|
|
// assert the value handed to the clipboard without depending on jsdom's
|
|
// document.hasFocus() / navigator.clipboard. Everything else in 'ui' stays real.
|
|
const { mockCopyToClipboard } = vi.hoisted(() => ({ mockCopyToClipboard: vi.fn() }))
|
|
vi.mock('ui', async (importOriginal) => ({
|
|
...(await importOriginal<typeof import('ui')>()),
|
|
copyToClipboard: mockCopyToClipboard,
|
|
}))
|
|
|
|
// The masked value the list endpoint returns for a secret key (first 15 chars),
|
|
// and the full key the reveal-by-id endpoint returns.
|
|
const MASKED = 'sb_secret_abcde'
|
|
const FULL = 'sb_secret_abcdefghijklmnop'
|
|
|
|
// ApiKeyPill is strongly typed against the query's secret-key shape; the fields it
|
|
// reads are id/type/api_key, so cast a minimal object through unknown.
|
|
const secretKey = {
|
|
id: 'secret',
|
|
name: 'secret',
|
|
type: 'secret',
|
|
api_key: MASKED,
|
|
prefix: MASKED,
|
|
} as unknown as Extract<APIKeysData[number], { type: 'secret' }>
|
|
|
|
function mockRevealById() {
|
|
addAPIMock({
|
|
method: 'get',
|
|
path: '/v1/projects/:ref/api-keys/:id',
|
|
response: () =>
|
|
HttpResponse.json<ApiKeyResponse>({
|
|
id: 'secret',
|
|
name: 'secret',
|
|
type: 'secret',
|
|
api_key: FULL,
|
|
prefix: MASKED,
|
|
}),
|
|
})
|
|
}
|
|
|
|
describe('ApiKeyPill', () => {
|
|
beforeEach(() => {
|
|
mockUseAsyncCheckPermissions.mockReturnValue({ can: true, isLoading: false })
|
|
mockCopyToClipboard.mockClear()
|
|
})
|
|
|
|
it('masks the secret key by default and does not expose the full key', () => {
|
|
customRender(<ApiKeyPill apiKey={secretKey} />)
|
|
|
|
expect(screen.getByText(MASKED)).toBeInTheDocument()
|
|
expect(screen.queryByText(FULL.slice(15))).not.toBeInTheDocument()
|
|
expect(screen.getByRole('button', { name: 'Reveal API key' })).toBeInTheDocument()
|
|
})
|
|
|
|
it('reveals the full secret key when the reveal button is clicked', async () => {
|
|
mockRevealById()
|
|
customRender(<ApiKeyPill apiKey={secretKey} />)
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: 'Reveal API key' }))
|
|
|
|
expect(await screen.findByText(FULL.slice(15))).toBeInTheDocument()
|
|
})
|
|
|
|
it('copies the full secret key to the clipboard', async () => {
|
|
mockRevealById()
|
|
customRender(<ApiKeyPill apiKey={secretKey} />)
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: 'Copy API key' }))
|
|
|
|
await waitFor(() => expect(mockCopyToClipboard).toHaveBeenCalledTimes(1))
|
|
await expect(Promise.resolve(mockCopyToClipboard.mock.calls[0][0])).resolves.toBe(FULL)
|
|
})
|
|
})
|