konnosDashboard
CreateBucketModal.test.tsx97 lines · main
1import { fireEvent, screen, waitFor } from '@testing-library/dom'
2import userEvent from '@testing-library/user-event'
3import { beforeEach, describe, expect, it, vi } from 'vitest'
4
5import { CreateBucketModal } from '../CreateBucketModal'
6import { ProjectContextProvider } from '@/components/layouts/ProjectLayout/ProjectContext'
7import { customRender } from '@/tests/lib/custom-render'
8import { addAPIMock } from '@/tests/lib/msw'
9import { routerMock } from '@/tests/lib/route-mock'
10
11describe(`CreateBucketModal`, () => {
12 beforeEach(() => {
13 vi.mock(`hooks/misc/useCheckPermissions`, () => ({
14 useCheckPermissions: vi.fn(),
15 useAsyncCheckPermissions: vi.fn().mockImplementation(() => ({ can: true })),
16 }))
17 // useParams
18 routerMock.setCurrentUrl(`/project/default/storage/buckets`)
19 // useSelectedProject -> Project
20 addAPIMock({
21 method: `get`,
22 path: `/platform/projects/:ref`,
23 // @ts-expect-error
24 response: {
25 cloud_provider: 'localhost',
26 id: 1,
27 inserted_at: '2021-08-02T06:40:40.646Z',
28 name: 'Default Project',
29 organization_id: 1,
30 ref: 'default',
31 region: 'local',
32 status: 'ACTIVE_HEALTHY',
33 },
34 })
35 // useBucketCreateMutation
36 addAPIMock({
37 method: `post`,
38 path: `/platform/storage/:ref/buckets`,
39 })
40 })
41
42 it(`renders a dialog with a form`, async () => {
43 customRender(
44 <ProjectContextProvider projectRef="default">
45 <CreateBucketModal open={true} onOpenChange={() => {}} />
46 </ProjectContextProvider>,
47 {
48 nuqs: {
49 searchParams: {
50 new: 'true',
51 },
52 },
53 }
54 )
55
56 await waitFor(() => {
57 expect(screen.getByRole(`dialog`)).toBeInTheDocument()
58 })
59
60 const nameInput = screen.getByLabelText(`Bucket name`)
61 await userEvent.type(nameInput, `test`)
62
63 const publicToggle = screen.getByLabelText(`Public bucket`)
64 expect(publicToggle).not.toBeChecked()
65 await userEvent.click(publicToggle)
66 expect(publicToggle).toBeChecked()
67
68 const sizeLimitToggle = screen.getByLabelText(`Restrict file size`)
69 expect(sizeLimitToggle).not.toBeChecked()
70 await userEvent.click(sizeLimitToggle)
71 expect(sizeLimitToggle).toBeChecked()
72
73 const sizeLimitInput = screen.getByLabelText(`File size limit`)
74 expect(sizeLimitInput).toHaveValue(null)
75 await userEvent.type(sizeLimitInput, `25`)
76
77 const sizeLimitUnitSelect = screen.getByLabelText(`File size limit unit`)
78 expect(sizeLimitUnitSelect).toHaveTextContent(`MB`)
79 await userEvent.click(sizeLimitUnitSelect)
80 const bytesOption = screen.getByRole(`option`, { name: `bytes` })
81 await userEvent.click(bytesOption)
82 expect(sizeLimitUnitSelect).toHaveTextContent(`bytes`)
83
84 const mimeTypeToggle = screen.getByLabelText(`Restrict MIME types`)
85 expect(mimeTypeToggle).not.toBeChecked()
86 await userEvent.click(mimeTypeToggle)
87 expect(mimeTypeToggle).toBeChecked()
88
89 const mimeTypeInput = screen.getByLabelText(`Allowed MIME types`)
90 expect(mimeTypeInput).toHaveValue(``)
91 await userEvent.type(mimeTypeInput, `image/jpeg, image/png`)
92
93 const submitButton = screen.getByRole(`button`, { name: `Create` })
94
95 fireEvent.click(submitButton)
96 })
97})