konnosDashboard
EditBucketModal.test.tsx116 lines · main
1import { faker } from '@faker-js/faker'
2import { fireEvent, screen, waitFor } from '@testing-library/dom'
3import userEvent from '@testing-library/user-event'
4import { useState } from 'react'
5import { beforeEach, describe, expect, it, vi } from 'vitest'
6
7import { EditBucketModal } from '../EditBucketModal'
8import { ProjectContextProvider } from '@/components/layouts/ProjectLayout/ProjectContext'
9import { Bucket } from '@/data/storage/buckets-query'
10import { render } from '@/tests/helpers'
11import { addAPIMock } from '@/tests/lib/msw'
12
13const bucket: Bucket = {
14 id: faker.string.uuid(),
15 name: `test`,
16 owner: faker.string.uuid(),
17 public: false,
18 allowed_mime_types: [],
19 file_size_limit: undefined,
20 type: 'STANDARD',
21 created_at: faker.date.recent().toISOString(),
22 updated_at: faker.date.recent().toISOString(),
23}
24
25const Page = ({ onClose }: { onClose: () => void }) => {
26 const [open, setOpen] = useState(false)
27 return (
28 <ProjectContextProvider projectRef="default">
29 <button onClick={() => setOpen(true)}>Open</button>
30
31 <EditBucketModal
32 visible={open}
33 bucket={bucket}
34 onClose={() => {
35 setOpen(false)
36 onClose()
37 }}
38 />
39 </ProjectContextProvider>
40 )
41}
42
43describe(`EditBucketModal`, () => {
44 beforeEach(() => {
45 // useSelectedProject -> Project
46 addAPIMock({
47 method: `get`,
48 path: `/platform/projects/:ref`,
49 // @ts-expect-error
50 response: {
51 cloud_provider: 'localhost',
52 id: 1,
53 inserted_at: '2021-08-02T06:40:40.646Z',
54 name: 'Default Project',
55 organization_id: 1,
56 ref: 'default',
57 region: 'local',
58 status: 'ACTIVE_HEALTHY',
59 },
60 })
61 // useBucketUpdateMutation
62 addAPIMock({
63 method: `patch`,
64 path: `/platform/storage/:ref/buckets/:id`,
65 })
66 })
67
68 it(`renders a dialog with a form`, async () => {
69 const onClose = vi.fn()
70 render(<Page onClose={onClose} />)
71
72 const openButton = screen.getByRole(`button`, { name: `Open` })
73 await userEvent.click(openButton)
74 await screen.findByRole(`dialog`)
75
76 const nameInput = screen.getByLabelText(`Bucket name`)
77 expect(nameInput).toHaveValue(`test`)
78 expect(nameInput).toBeDisabled()
79
80 const publicToggle = screen.getByLabelText(`Public bucket`)
81 expect(publicToggle).not.toBeChecked()
82 await userEvent.click(publicToggle)
83 expect(publicToggle).toBeChecked()
84
85 const sizeLimitToggle = screen.getByLabelText(`Restrict file size`)
86 expect(sizeLimitToggle).not.toBeChecked()
87 await userEvent.click(sizeLimitToggle)
88 expect(sizeLimitToggle).toBeChecked()
89
90 const sizeLimitInput = screen.getByLabelText(`File size limit`)
91 expect(sizeLimitInput).toHaveValue(null)
92 await userEvent.type(sizeLimitInput, `25`)
93
94 const sizeLimitUnitSelect = screen.getByLabelText(`File size limit unit`)
95 expect(sizeLimitUnitSelect).toHaveTextContent(`MB`)
96 await userEvent.click(sizeLimitUnitSelect)
97 const mbOption = screen.getByRole(`option`, { name: `GB` })
98 await userEvent.click(mbOption)
99 expect(sizeLimitUnitSelect).toHaveTextContent(`GB`)
100
101 const mimeTypeToggle = screen.getByLabelText(`Restrict MIME types`)
102 expect(mimeTypeToggle).not.toBeChecked()
103 await userEvent.click(mimeTypeToggle)
104 expect(mimeTypeToggle).toBeChecked()
105
106 const mimeTypeInput = screen.getByLabelText(`Allowed MIME types`)
107 expect(mimeTypeInput).toHaveValue(``)
108 await userEvent.type(mimeTypeInput, `image/jpeg, image/png`)
109
110 const confirmButton = screen.getByRole(`button`, { name: `Save` })
111
112 fireEvent.click(confirmButton)
113
114 await waitFor(() => expect(onClose).toHaveBeenCalledOnce())
115 })
116})