mirror of
https://github.com/supabase/supabase.git
synced 2026-07-04 23:14:28 +08:00
98 lines
3.1 KiB
JavaScript
98 lines
3.1 KiB
JavaScript
import { render, waitFor, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
jest.mock('lib/common/fetch')
|
|
import { get } from 'lib/common/fetch'
|
|
|
|
// mock the router
|
|
jest.mock('next/router')
|
|
import { useRouter } from 'next/router'
|
|
import { clickDropdown } from 'tests/helpers'
|
|
const mockPush = jest.fn()
|
|
useRouter.mockReturnValue({ query: { ref: '123' }, push: mockPush })
|
|
|
|
// need to wrap component with SWRConfig in order to clear cache between tests
|
|
// TODO: abstract out to global setup
|
|
import { SWRConfig } from 'swr'
|
|
const ProjectUsage = jest.fn()
|
|
ProjectUsage.mockImplementation((props) => {
|
|
const Original = jest.requireActual('components/interfaces/Home/ProjectUsage').default
|
|
// wrap with SWR to reset the cache each time
|
|
return (
|
|
<SWRConfig value={{ provider: () => new Map() }}>
|
|
<Original {...props} />
|
|
</SWRConfig>
|
|
)
|
|
})
|
|
|
|
jest.mock('components/ui/Flag/Flag')
|
|
import Flag from 'components/ui/Flag/Flag'
|
|
Flag.mockImplementation(({ children }) => <>{children}</>)
|
|
jest.mock('hooks')
|
|
import { useFlag, useProjectSubscription } from 'hooks'
|
|
useFlag.mockReturnValue(true)
|
|
useProjectSubscription.mockReturnValue({
|
|
subscription: undefined,
|
|
})
|
|
|
|
beforeEach(() => {
|
|
get.mockReset()
|
|
mockPush.mockReset()
|
|
})
|
|
|
|
const MOCK_CHART_DATA = {
|
|
data: [
|
|
{
|
|
total_auth_requests: 123,
|
|
total_realtime_requests: 223,
|
|
total_storage_requests: 323,
|
|
total_rest_requests: 333,
|
|
timestamp: new Date().getTime() / 1000,
|
|
},
|
|
],
|
|
total: 123 + 223 + 323,
|
|
totalAverage: 123 + 223 + 323,
|
|
totalGrouped: {
|
|
total_auth_requests: 123,
|
|
total_realtime_requests: 223,
|
|
total_storage_requests: 323,
|
|
total_rest_requests: 333,
|
|
},
|
|
}
|
|
|
|
test('mounts correctly', async () => {
|
|
get.mockImplementation((url) => {
|
|
if (url.includes('usage')) return {}
|
|
if (url.includes('subscription')) return {}
|
|
return { data: MOCK_CHART_DATA }
|
|
})
|
|
render(<ProjectUsage project="12345" />)
|
|
await waitFor(() => screen.getByText(/Statistics for past 24 hours/))
|
|
await waitFor(() => screen.getByText(/123/))
|
|
await waitFor(() => screen.getByText(/223/))
|
|
await waitFor(() => screen.getByText(/323/))
|
|
await waitFor(() => screen.getByText(/333/))
|
|
})
|
|
|
|
test('dropdown options changes chart query', async () => {
|
|
get.mockImplementation((url) => {
|
|
if (url.includes('usage')) return {}
|
|
return { data: MOCK_CHART_DATA }
|
|
})
|
|
render(<ProjectUsage project="12345" />)
|
|
await waitFor(() => screen.getByText(/Statistics for past 24 hours/))
|
|
await waitFor(() => screen.getAllByRole('button', { name: '24 hours' }))
|
|
await waitFor(() => {
|
|
expect(get).toHaveBeenCalledWith(expect.stringContaining('interval=hourly'))
|
|
})
|
|
// find button that has radix id
|
|
const [btn] = screen.getAllByRole('button', { name: '24 hours' }).filter((e) => e.id)
|
|
clickDropdown(btn)
|
|
await waitFor(() => screen.getByText(/7 days/))
|
|
await waitFor(() => screen.getByText(/60 minutes/))
|
|
|
|
// simulate changing of dropdown
|
|
userEvent.click(screen.getByText(/60 minutes/))
|
|
await waitFor(() => screen.getByText(/Statistics for past 60 minutes/))
|
|
expect(get).toHaveBeenCalledWith(expect.stringContaining('interval=minutely'))
|
|
})
|