From ddcbafe9d95cdf6c68a607bc6dc3da2ca44a65f2 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Wed, 4 Oct 2023 16:03:02 +0100 Subject: [PATCH] tests(upload): fix error logs in upload tests (#18261) * chore: add test utils * test(upload): fix useModalQueryParams * test(upload): fix TableRows * test(upload): fix useConfig test * test(upload): fix useFolder tests * test(upload): fix useFolders test * test(upload): fix SettingsPage tests * test(upload): fix UploadAssetDialog tests * test(upload): fix CarouselAssets tests --- .../Carousel/tests/CarouselAssets.test.js | 77 +- .../src/components/TableList/TableRows.js | 2 +- .../TableList/tests/TableRows.test.js | 93 +- .../UploadAssetDialog/UploadAssetDialog.js | 3 +- .../tests/UploadAssetDialog.test.js | 169 +- .../UploadAssetDialog.test.js.snap | 1402 ----------------- .../UploadAssetDialog/tests/server.js | 18 - .../admin/src/hooks/tests/useConfig.test.js | 204 +-- .../admin/src/hooks/tests/useFolder.test.js | 121 +- .../admin/src/hooks/tests/useFolders.test.js | 269 ++-- .../hooks/tests/useModalQueryParams.test.js | 134 +- .../core/upload/admin/src/hooks/useConfig.js | 30 +- .../core/upload/admin/src/hooks/useFolder.js | 60 +- .../core/upload/admin/src/hooks/useFolders.js | 47 +- .../admin/src/pages/SettingsPage/index.js | 97 +- .../admin/src/pages/SettingsPage/reducer.js | 20 - .../pages/SettingsPage/tests/index.test.js | 876 +--------- .../pages/SettingsPage/tests/reducer.test.js | 50 +- .../pages/SettingsPage/tests/utils/server.js | 17 - .../src/utils/tests/downloadFile.test.js | 24 +- packages/core/upload/admin/tests/server.js | 192 +++ packages/core/upload/admin/tests/setup.js | 13 + packages/core/upload/admin/tests/utils.jsx | 97 ++ packages/core/upload/jest.config.front.js | 4 + packages/core/upload/jsconfig.json | 8 + 25 files changed, 790 insertions(+), 3237 deletions(-) delete mode 100644 packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap delete mode 100644 packages/core/upload/admin/src/components/UploadAssetDialog/tests/server.js delete mode 100644 packages/core/upload/admin/src/pages/SettingsPage/tests/utils/server.js create mode 100644 packages/core/upload/admin/tests/server.js create mode 100644 packages/core/upload/admin/tests/setup.js create mode 100644 packages/core/upload/admin/tests/utils.jsx create mode 100644 packages/core/upload/jsconfig.json diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/tests/CarouselAssets.test.js b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/tests/CarouselAssets.test.js index 2d5cda7fcd..0e912dd081 100644 --- a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/tests/CarouselAssets.test.js +++ b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/tests/CarouselAssets.test.js @@ -1,19 +1,9 @@ import React from 'react'; -import { lightTheme, ThemeProvider } from '@strapi/design-system'; -import { fireEvent, render } from '@testing-library/react'; -import { IntlProvider } from 'react-intl'; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { render, waitFor } from '@tests/utils'; import { CarouselAssets } from '../CarouselAssets'; -jest.mock('@strapi/helper-plugin', () => ({ - ...jest.requireActual('@strapi/helper-plugin'), - useNotification: jest.fn(() => ({ - toggleNotification: jest.fn(), - })), -})); - const ASSET_FIXTURES = [ { alternativeText: 'alternative text', @@ -33,38 +23,21 @@ const ASSET_FIXTURES = [ }, ]; -const client = new QueryClient({ - defaultOptions: { - queries: { - retry: false, - }, - }, -}); - -const ComponentFixture = (props) => { - return ( - - - - - - - +const setup = (props) => + render( + ); -}; - -const setup = (props) => render(); describe('MediaLibraryInput | Carousel | CarouselAssets', () => { it('should render empty carousel', () => { @@ -90,30 +63,32 @@ describe('MediaLibraryInput | Carousel | CarouselAssets', () => { expect(getByRole('button', { name: 'edit' })).toBeInTheDocument(); }); - it('should call onAddAsset', () => { + it('should call onAddAsset', async () => { const onAddAssetSpy = jest.fn(); - const { getByRole } = setup({ onAddAsset: onAddAssetSpy }); + const { getByRole, user } = setup({ onAddAsset: onAddAssetSpy }); - fireEvent.click(getByRole('button', { name: 'Add' })); + await user.click(getByRole('button', { name: 'Add' })); expect(onAddAssetSpy).toHaveBeenCalledTimes(1); }); - it('should call onDeleteAsset', () => { + it('should call onDeleteAsset', async () => { const onDeleteAssetSpy = jest.fn(); - const { getByRole } = setup({ onDeleteAsset: onDeleteAssetSpy }); + const { getByRole, user } = setup({ onDeleteAsset: onDeleteAssetSpy }); - fireEvent.click(getByRole('button', { name: 'Delete' })); + await user.click(getByRole('button', { name: 'Delete' })); expect(onDeleteAssetSpy).toHaveBeenCalledTimes(1); }); - it('should open edit view', () => { - const { getByRole, getByText } = setup(); + it('should open edit view', async () => { + const { getByRole, getByText, user, queryByText } = setup(); - fireEvent.click(getByRole('button', { name: 'edit' })); + await user.click(getByRole('button', { name: 'edit' })); expect(getByText('Details')).toBeInTheDocument(); + + await waitFor(() => expect(queryByText('Content is loading.')).not.toBeInTheDocument()); }); it('should render the localized label', () => { diff --git a/packages/core/upload/admin/src/components/TableList/TableRows.js b/packages/core/upload/admin/src/components/TableList/TableRows.js index 9503da454b..29db193c57 100644 --- a/packages/core/upload/admin/src/components/TableList/TableRows.js +++ b/packages/core/upload/admin/src/components/TableList/TableRows.js @@ -46,7 +46,7 @@ export const TableRows = ({ fn: () => handleRowClickFn(element, contentType, id, path), })} > - + e.stopPropagation()}> ({ - ...jest.requireActual('@strapi/helper-plugin'), - useQueryParams: jest.fn(() => [{ query: {} }]), -})); - const ASSET_FIXTURE = { alternativeText: 'alternative text', createdAt: '2021-10-01T08:04:56.326Z', @@ -32,7 +25,7 @@ const ASSET_FIXTURE = { const FOLDER_FIXTURE = { createdAt: '2022-11-17T10:40:06.022Z', - id: 1, + id: 2, name: 'folder 1', type: 'folder', updatedAt: '2022-11-17T10:40:06.022Z', @@ -47,26 +40,12 @@ const PROPS_FIXTURE = { selected: [], }; -const ComponentFixture = (props) => { - const customProps = { - ...PROPS_FIXTURE, - ...props, - }; - - return ( - - - - - -
- - - - ); -}; - -const setup = (props) => render(); +const setup = (props) => + render(, { + renderOptions: { + wrapper: ({ children }) => {children}, + }, + }); describe('TableList | TableRows', () => { describe('rendering assets', () => { @@ -85,7 +64,10 @@ describe('TableList | TableRows', () => { const onSelectOneSpy = jest.fn(); const { getByRole } = setup({ onSelectOne: onSelectOneSpy }); - fireEvent.click(getByRole('checkbox', { name: 'Select michka asset', hidden: true })); + /** + * using UserEvent never triggers the onChange event. + */ + fireEvent.click(getByRole('checkbox', { name: 'Select michka asset' })); expect(onSelectOneSpy).toHaveBeenCalledTimes(1); }); @@ -93,34 +75,32 @@ describe('TableList | TableRows', () => { it('should reflect non selected assets state', () => { const { getByRole } = setup(); - expect( - getByRole('checkbox', { name: 'Select michka asset', hidden: true }) - ).not.toBeChecked(); + expect(getByRole('checkbox', { name: 'Select michka asset' })).not.toBeChecked(); }); it('should reflect selected assets state', () => { const { getByRole } = setup({ selected: [{ id: 1, type: 'asset' }] }); - expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeChecked(); + expect(getByRole('checkbox', { name: 'Select michka asset' })).toBeChecked(); }); it('should disable select asset checkbox when users do not have the permission to update', () => { const { getByRole } = setup({ canUpdate: false }); - expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeDisabled(); + expect(getByRole('checkbox', { name: 'Select michka asset' })).toBeDisabled(); }); it('should disable select asset checkbox when users if the file type is not allowed', () => { const { getByRole } = setup({ allowedTypes: [] }); - expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeDisabled(); + expect(getByRole('checkbox', { name: 'Select michka asset' })).toBeDisabled(); }); - it('should call onEditAsset callback', () => { + it('should call onEditAsset callback', async () => { const onEditAssetSpy = jest.fn(); - const { getByRole } = setup({ onEditAsset: onEditAssetSpy }); + const { getByRole, user } = setup({ onEditAsset: onEditAssetSpy }); - fireEvent.click(getByRole('button', { name: 'Edit', hidden: true })); + await user.click(getByRole('button', { name: 'Edit', hidden: true })); expect(onEditAssetSpy).toHaveBeenCalledTimes(1); }); @@ -135,14 +115,14 @@ describe('TableList | TableRows', () => { expect(getByText('folder 1')).toBeInTheDocument(); }); - it('should call onEditFolder callback', () => { + it('should call onEditFolder callback', async () => { const onEditFolderSpy = jest.fn(); - const { getByRole } = setup({ + const { getByRole, user } = setup({ rows: [FOLDER_FIXTURE], onEditFolder: onEditFolderSpy, }); - fireEvent.click(getByRole('button', { name: 'Edit', hidden: true })); + await user.click(getByRole('button', { name: 'Edit', hidden: true })); expect(onEditFolderSpy).toHaveBeenCalledTimes(1); }); @@ -159,13 +139,16 @@ describe('TableList | TableRows', () => { expect(getByRole('button', { name: 'Access folder', hidden: true })).toBeInTheDocument(); }); - it('should call onChangeFolder when clicking on folder navigation button', () => { + it('should call onChangeFolder when clicking on folder navigation button', async () => { const onChangeFolderSpy = jest.fn(); - const { getByRole } = setup({ rows: [FOLDER_FIXTURE], onChangeFolder: onChangeFolderSpy }); + const { getByRole, user } = setup({ + rows: [FOLDER_FIXTURE], + onChangeFolder: onChangeFolderSpy, + }); - fireEvent.click(getByRole('button', { name: 'Access folder', hidden: true })); + await user.click(getByRole('button', { name: 'Access folder', hidden: true })); - expect(onChangeFolderSpy).toHaveBeenCalledWith(1); + expect(onChangeFolderSpy).toHaveBeenCalledWith(2); }); it('should reflect non selected folder state', () => { @@ -179,7 +162,7 @@ describe('TableList | TableRows', () => { it('should reflect selected folder state', () => { const { getByRole } = setup({ rows: [FOLDER_FIXTURE], - selected: [{ id: 1, type: 'folder' }], + selected: [{ id: 2, type: 'folder' }], }); expect(getByRole('checkbox', { name: 'Select folder 1 folder', hidden: true })).toBeChecked(); @@ -208,17 +191,15 @@ describe('TableList | TableRows', () => { }); }); - describe.only('rendering folder & asset with the same id', () => { + describe('rendering folder & asset with the same id', () => { it('should reflect selected only folder state', () => { const { getByRole } = setup({ rows: [FOLDER_FIXTURE, ASSET_FIXTURE], - selected: [{ id: 1, type: 'folder' }], + selected: [{ id: 2, type: 'folder' }], }); expect(getByRole('checkbox', { name: 'Select folder 1 folder', hidden: true })).toBeChecked(); - expect( - getByRole('checkbox', { name: 'Select michka asset', hidden: true }) - ).not.toBeChecked(); + expect(getByRole('checkbox', { name: 'Select michka asset' })).not.toBeChecked(); }); it('should reflect selected only asset state', () => { @@ -230,7 +211,7 @@ describe('TableList | TableRows', () => { expect( getByRole('checkbox', { name: 'Select folder 1 folder', hidden: true }) ).not.toBeChecked(); - expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeChecked(); + expect(getByRole('checkbox', { name: 'Select michka asset' })).toBeChecked(); }); it('should reflect selected both asset & folder state', () => { @@ -238,12 +219,12 @@ describe('TableList | TableRows', () => { rows: [FOLDER_FIXTURE, ASSET_FIXTURE], selected: [ { id: 1, type: 'asset' }, - { id: 1, type: 'folder' }, + { id: 2, type: 'folder' }, ], }); expect(getByRole('checkbox', { name: 'Select folder 1 folder', hidden: true })).toBeChecked(); - expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeChecked(); + expect(getByRole('checkbox', { name: 'Select michka asset' })).toBeChecked(); }); }); }); diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js b/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js index 030369e122..f91f11d499 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js @@ -134,6 +134,7 @@ UploadAssetDialog.defaultProps = { addUploadedFiles: undefined, folderId: null, initialAssetsToAdd: undefined, + onClose() {}, trackedLocation: undefined, validateAssetsTypes: undefined, }; @@ -142,7 +143,7 @@ UploadAssetDialog.propTypes = { addUploadedFiles: PropTypes.func, folderId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), initialAssetsToAdd: PropTypes.arrayOf(AssetDefinition), - onClose: PropTypes.func.isRequired, + onClose: PropTypes.func, trackedLocation: PropTypes.string, validateAssetsTypes: PropTypes.func, }; diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/UploadAssetDialog.test.js b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/UploadAssetDialog.test.js index 1890466229..c4c59ef332 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/UploadAssetDialog.test.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/UploadAssetDialog.test.js @@ -1,81 +1,41 @@ +/* eslint-disable no-await-in-loop */ import React from 'react'; -import { lightTheme, ThemeProvider } from '@strapi/design-system'; -import { TrackingProvider } from '@strapi/helper-plugin'; -import { fireEvent, render as renderTL, screen, waitFor, within } from '@testing-library/react'; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { within } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@tests/utils'; -import en from '../../../translations/en.json'; import { UploadAssetDialog } from '../UploadAssetDialog'; -import { server } from './server'; - -jest.mock('../../../utils/getTrad', () => (x) => x); - -jest.mock('react-intl', () => ({ - useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id] || id) }), -})); - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - }, - }, -}); - -const render = (props = { onClose() {} }) => - renderTL( - - - - - - - , - { container: document.getElementById('app') } - ); - describe('UploadAssetDialog', () => { let confirmSpy; + beforeAll(() => { confirmSpy = jest.spyOn(window, 'confirm'); confirmSpy.mockImplementation(jest.fn(() => true)); - server.listen(); }); - afterEach(() => server.resetHandlers()); + afterAll(() => { confirmSpy.mockRestore(); - server.close(); }); describe('from computer', () => { - it('snapshots the component', () => { - render(); - - expect(document.body).toMatchSnapshot(); - }); - - it('closes the dialog when clicking on cancel on the add asset step', () => { + it('closes the dialog when clicking on cancel on the add asset step', async () => { const onCloseSpy = jest.fn(); - render({ onClose: onCloseSpy, onSuccess() {} }); + const { user, getByRole } = render(); - fireEvent.click(screen.getByText('app.components.Button.cancel')); + await user.click(getByRole('button', { name: 'cancel' })); expect(onCloseSpy).toBeCalled(); }); - it('open confirm box when clicking on cancel on the pending asset step', () => { + it('open confirm box when clicking on cancel on the pending asset step', async () => { const file = new File(['Some stuff'], 'test.png', { type: 'image/png' }); - const onCloseSpy = jest.fn(); - render({ onClose: onCloseSpy, onSuccess() {} }); + const { user, getByRole } = render(); - const fileList = [file]; - fileList.item = (i) => fileList[i]; + await user.upload(document.querySelector('[type="file"]'), file); - fireEvent.change(document.querySelector('[type="file"]'), { target: { files: fileList } }); - fireEvent.click(screen.getByText('app.components.Button.cancel')); + await user.click(getByRole('button', { name: 'cancel' })); expect(window.confirm).toBeCalled(); }); @@ -86,53 +46,30 @@ describe('UploadAssetDialog', () => { ['pdf', 'application/pdf', 'Doc', 1], ['unknown', 'unknown', 'Doc', 1], ].forEach(([ext, mime, assetType, number]) => { - it(`shows ${number} valid ${mime} file`, () => { - const onCloseSpy = jest.fn(); - - // see https://github.com/testing-library/react-testing-library/issues/470 - Object.defineProperty(HTMLMediaElement.prototype, 'muted', { - set() {}, - }); - + it(`shows ${number} valid ${mime} file`, async () => { const file = new File(['Some stuff'], `test.${ext}`, { type: mime }); - const fileList = [file]; - fileList.item = (i) => fileList[i]; + const { user, getByText, getAllByText } = render(); - render({ onClose: onCloseSpy, onSuccess() {} }); + await user.upload(document.querySelector('[type="file"]'), file); - fireEvent.change(document.querySelector('[type="file"]'), { - target: { files: fileList }, - }); - - expect(screen.getAllByText(`Add new assets`).length).toBe(2); + expect(getByText('1 asset ready to upload')).toBeInTheDocument(); expect( - screen.getByText( - '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload' - ) + getByText('Manage the assets before adding them to the Media Library') ).toBeInTheDocument(); - expect( - screen.getByText('Manage the assets before adding them to the Media Library') - ).toBeInTheDocument(); - expect(screen.getAllByText(`test.${ext}`).length).toBe(number); - expect(screen.getByText(ext)).toBeInTheDocument(); - expect(screen.getByText(assetType)).toBeInTheDocument(); + + expect(getAllByText(`test.${ext}`).length).toBe(number); + expect(getByText(ext)).toBeInTheDocument(); + expect(getByText(assetType)).toBeInTheDocument(); }); }); }); describe('from url', () => { - it('snapshots the component', () => { - render(); - - fireEvent.click(screen.getByText('From url')); - - expect(document.body).toMatchSnapshot(); - }); - it('shows an error message when the asset does not exist', async () => { - render(); - fireEvent.click(screen.getByText('From url')); + const { user, getByRole } = render(); + + await user.click(getByRole('tab', { name: 'From URL' })); const urls = [ 'http://localhost:5000/an-image.png', @@ -140,27 +77,48 @@ describe('UploadAssetDialog', () => { 'http://localhost:5000/a-video.mp4', 'http://localhost:5000/not-working-like-cors.lutin', 'http://localhost:1234/some-where-not-existing.jpg', - ].join('\n'); + ]; - fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } }); - fireEvent.click(screen.getByText('Next')); + // eslint-disable-next-line no-restricted-syntax + for (const url of urls) { + await user.type(getByRole('textbox', 'URL'), url); - await waitFor(() => expect(screen.getByText('Failed to fetch')).toBeInTheDocument()); + await user.type(getByRole('textbox', 'URL'), '[Enter]'); + } + + /** + * userEvent does not submit forms. + */ + fireEvent.click(getByRole('button', { name: 'Next' })); + + await waitFor(() => expect(screen.getByText('An error occured')).toBeInTheDocument()); }); it('snapshots the component with 4 URLs: 3 valid and one in failure', async () => { - render(); - fireEvent.click(screen.getByText('From url')); + const { user, getByText, getByRole } = render(); + + await user.click(getByRole('tab', { name: 'From URL' })); const urls = [ 'http://localhost:5000/an-image.png', 'http://localhost:5000/a-pdf.pdf', 'http://localhost:5000/a-video.mp4', 'http://localhost:5000/not-working-like-cors.lutin', - ].join('\n'); + ]; - fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } }); - fireEvent.click(screen.getByText('Next')); + // eslint-disable-next-line no-restricted-syntax + for (const url of urls) { + await user.type(getByRole('textbox', 'URL'), url); + + if (urls.indexOf(url) < urls.length - 1) { + await user.type(getByRole('textbox', 'URL'), '[Enter]'); + } + } + + /** + * userEvent does not submit forms. + */ + fireEvent.click(getByRole('button', { name: 'Next' })); const assets = [ { @@ -201,25 +159,14 @@ describe('UploadAssetDialog', () => { }, ]; - await waitFor(() => - expect( - screen.getByText( - '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload' - ) - ).toBeInTheDocument() - ); - expect(screen.getAllByText(`Add new assets`).length).toBe(2); - expect( - screen.getByText('Manage the assets before adding them to the Media Library') - ).toBeInTheDocument(); + await waitFor(() => expect(getByText('4 assets ready to upload')).toBeInTheDocument()); assets.forEach((asset) => { - const dialog = within(screen.getByRole('dialog')); - const card = within(dialog.getAllByLabelText(asset.name)[0]); + const card = within(screen.getByRole('dialog')).getAllByLabelText(asset.name)[0]; - expect(card.getByText(asset.ext)).toBeInTheDocument(); + expect(within(card).getByText(asset.ext)).toBeInTheDocument(); expect( - card.getByText(asset.type.charAt(0).toUpperCase() + asset.type.slice(1)) + within(card).getByText(`${asset.type.charAt(0).toUpperCase()}${asset.type.slice(1)}`) ).toBeInTheDocument(); }); }); diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap deleted file mode 100644 index 67e4c9a4b9..0000000000 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap +++ /dev/null @@ -1,1402 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`UploadAssetDialog from computer snapshots the component 1`] = ` -.c0 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.c9 { - font-size: 0.875rem; - line-height: 1.43; - font-weight: 600; - color: #32324d; -} - -.c17 { - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; - color: #4945ff; -} - -.c19 { - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; - color: #666687; -} - -.c29 { - font-weight: 500; - font-size: 1rem; - line-height: 1.25; - color: #666687; -} - -.c36 { - font-size: 0.75rem; - line-height: 1.33; - font-weight: 600; - color: #ffffff; -} - -.c1 { - padding-right: 40px; - padding-left: 40px; - position: fixed; - z-index: 4; -} - -.c4 { - background: #ffffff; - border-radius: 4px; - box-shadow: 0px 2px 15px rgba(33,33,52,0.1); - width: 51.875rem; -} - -.c5 { - background: #f6f6f9; - padding-top: 16px; - padding-right: 20px; - padding-bottom: 16px; - padding-left: 20px; -} - -.c10 { - background: #ffffff; - padding: 8px; - border-radius: 4px; - border-color: #dcdce4; - border: 1px solid #dcdce4; - cursor: pointer; -} - -.c13 { - padding-top: 24px; - padding-right: 40px; - padding-left: 40px; -} - -.c15 { - padding: 16px; -} - -.c20 { - background: #eaeaef; -} - -.c22 { - padding-top: 24px; - padding-right: 40px; - padding-bottom: 24px; - padding-left: 40px; -} - -.c23 { - background: #f6f6f9; - padding-top: 64px; - padding-bottom: 64px; - border-radius: 4px; - border-color: #c0c0cf; - border: 1px solid #c0c0cf; - position: relative; -} - -.c28 { - padding-top: 12px; - padding-bottom: 20px; -} - -.c30 { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 1; - width: 100%; -} - -.c32 { - position: relative; -} - -.c33 { - background: #4945ff; - padding: 8px; - padding-right: 16px; - padding-left: 16px; - border-radius: 4px; - border-color: #4945ff; - border: 1px solid #4945ff; - cursor: pointer; -} - -.c2 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c25 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.c34 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 8px; -} - -.c11 { - position: relative; - outline: none; -} - -.c11 > svg { - height: 12px; - width: 12px; -} - -.c11 > svg > g, -.c11 > svg path { - fill: #ffffff; -} - -.c11[aria-disabled='true'] { - pointer-events: none; -} - -.c11:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; -} - -.c11:focus-visible { - outline: none; -} - -.c11:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; -} - -.c35 { - height: 2rem; -} - -.c35 svg { - height: 0.75rem; - width: auto; -} - -.c35[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c35[aria-disabled='true'] .c8 { - color: #666687; -} - -.c35[aria-disabled='true'] svg > g, -.c35[aria-disabled='true'] svg path { - fill: #666687; -} - -.c35[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c35[aria-disabled='true']:active .c8 { - color: #666687; -} - -.c35[aria-disabled='true']:active svg > g, -.c35[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c35:hover { - border: 1px solid #7b79ff; - background: #7b79ff; -} - -.c35:active { - border: 1px solid #4945ff; - background: #4945ff; -} - -.c35 svg > g, -.c35 svg path { - fill: #ffffff; -} - -.c38 { - height: 2rem; - border: 1px solid #dcdce4; - background: #ffffff; -} - -.c38 svg { - height: 0.75rem; - width: auto; -} - -.c38[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c38[aria-disabled='true'] .c8 { - color: #666687; -} - -.c38[aria-disabled='true'] svg > g, -.c38[aria-disabled='true'] svg path { - fill: #666687; -} - -.c38[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c38[aria-disabled='true']:active .c8 { - color: #666687; -} - -.c38[aria-disabled='true']:active svg > g, -.c38[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c38:hover { - background-color: #f6f6f9; -} - -.c38:active { - background-color: #eaeaef; -} - -.c38 .c8 { - color: #32324d; -} - -.c38 svg > g, -.c38 svg path { - fill: #32324d; -} - -.c21 { - height: 1px; - border: none; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin: 0; -} - -.c12 { - border-color: #dcdce4; - height: 2rem; - width: 2rem; -} - -.c12 svg g, -.c12 svg path { - fill: #8e8ea9; -} - -.c12:hover svg g, -.c12:focus svg g, -.c12:hover svg path, -.c12:focus svg path { - fill: #666687; -} - -.c12[aria-disabled='true'] svg path { - fill: #666687; -} - -.c3 { - background: #32324d1F; - inset: 0; -} - -.c6 { - border-radius: 4px 4px 0 0; - border-bottom: 1px solid #eaeaef; -} - -.c37 { - border-radius: 0 0 4px 4px; - border-top: 1px solid #eaeaef; -} - -.c16 { - border-bottom: 2px solid #4945ff; -} - -.c18 { - border-bottom: 2px solid transparent; -} - -.c14[aria-disabled='true'] { - cursor: not-allowed; -} - -.c26 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c27 { - font-size: 3.75rem; -} - -.c27 svg path { - fill: #4945ff; -} - -.c24 { - border-style: dashed; -} - -.c31 { - opacity: 0; - cursor: pointer; -} - - -
-
-

-

-

-
-
-
-
-
- -
-
-
- -`; - -exports[`UploadAssetDialog from url snapshots the component 1`] = ` -.c0 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.c9 { - font-size: 0.875rem; - line-height: 1.43; - font-weight: 600; - color: #32324d; -} - -.c19 { - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; - color: #4945ff; -} - -.c17 { - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; - color: #666687; -} - -.c35 { - font-size: 0.75rem; - line-height: 1.33; - font-weight: 600; - color: #ffffff; -} - -.c24 { - font-size: 0.75rem; - line-height: 1.33; - font-weight: 600; - color: #32324d; -} - -.c30 { - font-size: 0.75rem; - line-height: 1.33; - color: #666687; -} - -.c1 { - padding-right: 40px; - padding-left: 40px; - position: fixed; - z-index: 4; -} - -.c4 { - background: #ffffff; - border-radius: 4px; - box-shadow: 0px 2px 15px rgba(33,33,52,0.1); - width: 51.875rem; -} - -.c5 { - background: #f6f6f9; - padding-top: 16px; - padding-right: 20px; - padding-bottom: 16px; - padding-left: 20px; -} - -.c10 { - background: #ffffff; - padding: 8px; - border-radius: 4px; - border-color: #dcdce4; - border: 1px solid #dcdce4; - cursor: pointer; -} - -.c13 { - padding-top: 24px; - padding-right: 40px; - padding-left: 40px; -} - -.c15 { - padding: 16px; -} - -.c20 { - background: #eaeaef; -} - -.c22 { - padding-top: 24px; - padding-right: 40px; - padding-bottom: 24px; - padding-left: 40px; -} - -.c33 { - background: #4945ff; - padding: 8px; - padding-right: 16px; - padding-left: 16px; - border-radius: 4px; - border-color: #4945ff; - border: 1px solid #4945ff; - cursor: pointer; -} - -.c26 { - border-radius: 4px; - border-color: #dcdce4; - border: 1px solid #dcdce4; -} - -.c28 { - font-size: 0.875rem; - background: #ffffff; - color: #32324d; - padding: 16px; - border-radius: 4px; - width: 100%; - height: 6.5625rem; - line-height: 1.43; -} - -.c2 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c32 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 8px; -} - -.c23 { - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - gap: 4px; -} - -.c11 { - position: relative; - outline: none; -} - -.c11 > svg { - height: 12px; - width: 12px; -} - -.c11 > svg > g, -.c11 > svg path { - fill: #ffffff; -} - -.c11[aria-disabled='true'] { - pointer-events: none; -} - -.c11:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; -} - -.c11:focus-visible { - outline: none; -} - -.c11:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; -} - -.c36 { - height: 2rem; -} - -.c36 svg { - height: 0.75rem; - width: auto; -} - -.c36[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c36[aria-disabled='true'] .c8 { - color: #666687; -} - -.c36[aria-disabled='true'] svg > g, -.c36[aria-disabled='true'] svg path { - fill: #666687; -} - -.c36[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c36[aria-disabled='true']:active .c8 { - color: #666687; -} - -.c36[aria-disabled='true']:active svg > g, -.c36[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c36:hover { - border: 1px solid #7b79ff; - background: #7b79ff; -} - -.c36:active { - border: 1px solid #4945ff; - background: #4945ff; -} - -.c36 svg > g, -.c36 svg path { - fill: #ffffff; -} - -.c34 { - height: 2rem; - border: 1px solid #dcdce4; - background: #ffffff; -} - -.c34 svg { - height: 0.75rem; - width: auto; -} - -.c34[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c34[aria-disabled='true'] .c8 { - color: #666687; -} - -.c34[aria-disabled='true'] svg > g, -.c34[aria-disabled='true'] svg path { - fill: #666687; -} - -.c34[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c34[aria-disabled='true']:active .c8 { - color: #666687; -} - -.c34[aria-disabled='true']:active svg > g, -.c34[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c34:hover { - background-color: #f6f6f9; -} - -.c34:active { - background-color: #eaeaef; -} - -.c34 .c8 { - color: #32324d; -} - -.c34 svg > g, -.c34 svg path { - fill: #32324d; -} - -.c25 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c21 { - height: 1px; - border: none; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin: 0; -} - -.c12 { - border-color: #dcdce4; - height: 2rem; - width: 2rem; -} - -.c12 svg g, -.c12 svg path { - fill: #8e8ea9; -} - -.c12:hover svg g, -.c12:focus svg g, -.c12:hover svg path, -.c12:focus svg path { - fill: #666687; -} - -.c12[aria-disabled='true'] svg path { - fill: #666687; -} - -.c3 { - background: #32324d1F; - inset: 0; -} - -.c6 { - border-radius: 4px 4px 0 0; - border-bottom: 1px solid #eaeaef; -} - -.c31 { - border-radius: 0 0 4px 4px; - border-top: 1px solid #eaeaef; -} - -.c18 { - border-bottom: 2px solid #4945ff; -} - -.c16 { - border-bottom: 2px solid transparent; -} - -.c14[aria-disabled='true'] { - cursor: not-allowed; -} - -.c27 { - outline: none; - box-shadow: 0; - -webkit-transition-property: border-color,box-shadow,fill; - transition-property: border-color,box-shadow,fill; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; -} - -.c27:focus-within { - border: 1px solid #4945ff; - box-shadow: #4945ff 0px 0px 0px 2px; -} - -.c29 { - border: none; - resize: none; -} - -.c29::-webkit-input-placeholder { - color: #8e8ea9; - font-size: 0.875rem; - color: #8e8ea9; - opacity: 1; -} - -.c29::-moz-placeholder { - color: #8e8ea9; - font-size: 0.875rem; - color: #8e8ea9; - opacity: 1; -} - -.c29:-ms-input-placeholder { - color: #8e8ea9; - font-size: 0.875rem; - color: #8e8ea9; - opacity: 1; -} - -.c29::placeholder { - color: #8e8ea9; - font-size: 0.875rem; - color: #8e8ea9; - opacity: 1; -} - -.c29:focus-within { - outline: none; -} - - -
-
-

-

-

-
-
-
-
-
-