From 784a6a2f9b837bd6aae90993692a34736f34bfac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Poizat?= Date: Thu, 7 Nov 2024 11:45:26 +0100 Subject: [PATCH] test: Migrate last enzyme tests --- .../drive/Toolbar/delete/DeleteItem.spec.jsx | 14 +- .../drive/Toolbar/delete/delete.spec.jsx | 17 +- src/modules/filelist/AddFolder.spec.jsx | 42 +- src/modules/upload/Dropzone.spec.jsx | 30 +- .../__snapshots__/Dropzone.spec.jsx.snap | 2098 ----------------- .../viewer/FileOpenerExternal.spec.jsx | 120 +- test/setup.jsx | 8 +- 7 files changed, 109 insertions(+), 2220 deletions(-) delete mode 100644 src/modules/upload/__snapshots__/Dropzone.spec.jsx.snap diff --git a/src/modules/drive/Toolbar/delete/DeleteItem.spec.jsx b/src/modules/drive/Toolbar/delete/DeleteItem.spec.jsx index 93405f34f3..922bafee1a 100644 --- a/src/modules/drive/Toolbar/delete/DeleteItem.spec.jsx +++ b/src/modules/drive/Toolbar/delete/DeleteItem.spec.jsx @@ -1,4 +1,4 @@ -import { mount } from 'enzyme' +import { render, fireEvent } from '@testing-library/react' import React from 'react' import DeleteItem from './DeleteItem' @@ -20,7 +20,7 @@ describe('DeleteItem', () => { jest.spyOn(store, 'dispatch') const onLeave = jest.fn() - const root = mount( + const container = render( { /> ) - return { root, store, displayedFolder } + return { container, store, displayedFolder } } - it('should show a modal', () => { - const { root, store, displayedFolder } = setup() - const menuItem = root.find('ActionMenuItem') - menuItem.simulate('click') + it('should show a modal', async () => { + const { container, store, displayedFolder } = setup() + const confirmButton = container.getByText('Remove') + fireEvent.click(confirmButton) expect(store.dispatch).toHaveBeenCalledWith( expect.objectContaining({ type: 'SHOW_MODAL', diff --git a/src/modules/drive/Toolbar/delete/delete.spec.jsx b/src/modules/drive/Toolbar/delete/delete.spec.jsx index 30ce7ba427..85f56c08c5 100644 --- a/src/modules/drive/Toolbar/delete/delete.spec.jsx +++ b/src/modules/drive/Toolbar/delete/delete.spec.jsx @@ -1,8 +1,7 @@ -import { mount } from 'enzyme' +import { render, fireEvent, waitFor } from '@testing-library/react' import React from 'react' import { EnhancedDeleteConfirm } from './delete' -import DeleteConfirm from '../../DeleteConfirm' import AppLike from 'test/components/AppLike' import { setupStoreAndClient } from 'test/setup' @@ -26,7 +25,7 @@ describe('EnhancedDeleteConfirm', () => { getRecipients: () => [], getSharingLink: () => null } - const root = mount( + const container = render( { null} /> ) - return { root, folder, client } + return { container, folder, client } } it('should trashFiles on confirmation', async () => { - const { root } = setup() - const confirmProps = root.find(DeleteConfirm).props() - await confirmProps.afterConfirmation() - expect(mockNavigate).toHaveBeenCalledWith('/folder/parent-folder-id') + const { container } = setup() + const confirmButton = container.getByText('Remove') + fireEvent.click(confirmButton) + await waitFor(() => + expect(mockNavigate).toHaveBeenCalledWith('/folder/parent-folder-id') + ) }) }) diff --git a/src/modules/filelist/AddFolder.spec.jsx b/src/modules/filelist/AddFolder.spec.jsx index 0ab479eff4..be674b89f5 100644 --- a/src/modules/filelist/AddFolder.spec.jsx +++ b/src/modules/filelist/AddFolder.spec.jsx @@ -1,10 +1,7 @@ -import { mount } from 'enzyme' +import { render, fireEvent } from '@testing-library/react' import React from 'react' -import { WebVaultClient } from 'cozy-keys-lib' - -import AddFolder, { AddFolder as DumbAddFolder } from './AddFolder' -import { createFolder } from 'modules/navigation/duck/actions' +import { AddFolder } from './AddFolder' import AppLike from 'test/components/AppLike' import { setupStoreAndClient } from 'test/setup' @@ -19,34 +16,31 @@ jest.mock('cozy-keys-lib', () => ({ WebVaultClient: jest.fn().mockReturnValue({}) })) -const CURRENT_FOLDER_ID = 'id' - describe('AddFolder', () => { const setup = () => { const { client, store } = setupStoreAndClient({}) - const vaultClient = new WebVaultClient('http://alice.cozy.cloud') - jest.spyOn(client, 'create').mockResolvedValue({}) - const root = mount( + + const onSubmit = jest.fn() + + const container = render( - + ) - const component = root.find(DumbAddFolder) - return { root, client, component, vaultClient } + return { container, onSubmit } } - it('should dispatch a createFolder action on submit', () => { - const { component, client, vaultClient } = setup() - expect(component.props().onSubmit('Mes photos de chat')) - expect(createFolder).toHaveBeenCalledWith( - client, - vaultClient, + it('should call onSubmit with folder name', async () => { + const { container, onSubmit } = setup() + + const input = await container.findByRole('textbox') + fireEvent.change(input, { target: { value: 'Mes photos de chat' } }) + input.blur() + + expect(onSubmit).toHaveBeenCalledWith( 'Mes photos de chat', - CURRENT_FOLDER_ID, - { isEncryptedFolder: false } + expect.anything(), + expect.anything() ) }) }) diff --git a/src/modules/upload/Dropzone.spec.jsx b/src/modules/upload/Dropzone.spec.jsx index 3737834618..a29fa02f07 100644 --- a/src/modules/upload/Dropzone.spec.jsx +++ b/src/modules/upload/Dropzone.spec.jsx @@ -1,10 +1,8 @@ import { render } from '@testing-library/react' -import { mount } from 'enzyme' import React from 'react' -import Dropzone, { Dropzone as DumbDropzone } from './Dropzone' -import AppLike from 'test/components/AppLike' -import { setupFolderContent, mockCozyClientRequestQuery } from 'test/setup' +import { Dropzone as DumbDropzone } from './Dropzone' +import { mockCozyClientRequestQuery } from 'test/setup' jest.mock('react-dropzone', () => { const Component = ({ @@ -45,30 +43,6 @@ jest.mock('cozy-keys-lib', () => ({ mockCozyClientRequestQuery() describe('Dropzone', () => { - it('should match snapshot', async () => { - // Given - jest.spyOn(console, 'error').mockImplementation() - - const displayedFolder = { - id: 'directory-foobar0' - } - const { store, client } = await setupFolderContent({ - folderId: 'directory-foobar0' - }) - - store.dispatch = jest.fn() - - // When - const root = mount( - - - - ) - - // Then - expect(root).toMatchSnapshot() - }) - it('should dispatch the uploadFiles action', () => { // Given const uploadFilesMock = jest.fn() diff --git a/src/modules/upload/__snapshots__/Dropzone.spec.jsx.snap b/src/modules/upload/__snapshots__/Dropzone.spec.jsx.snap deleted file mode 100644 index 73528787ce..0000000000 --- a/src/modules/upload/__snapshots__/Dropzone.spec.jsx.snap +++ /dev/null @@ -1,2098 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Dropzone should match snapshot 1`] = ` - - - - - :last-child": { - "paddingRight": 0, - }, - "&$expanded": { - "margin": "0.75rem 0", - }, - "margin": "0.75rem 0", - "order": 1, - "paddingLeft": "0.5rem", - "paddingRight": "0.25rem", - }, - "expandIcon": { - "&$expanded": { - "marginLeft": "0.3125rem", - "transform": "rotate(0)", - }, - "&&": { - "marginLeft": "0.3125rem", - }, - "order": 0, - "transform": "rotate(-90deg)", - }, - "expanded": {}, - "root": { - "&$expanded": { - "minHeight": "3.5rem", - }, - "backgroundColor": "#fff", - "color": "#fff", - "fontSize": "0.875rem", - "fontWeight": "bold", - "minHeight": "3.5rem", - "padding": 0, - "textTransform": "uppercase", - }, - }, - "MuiAlert": { - "action": { - "marginRight": "-8px", - }, - "message": { - "alignItems": "center", - "display": "flex", - "flex": "auto", - "flexWrap": "wrap", - }, - "root": { - "& $icon": { - "paddingTop": "9px", - }, - "&.block": { - "& $action": { - "justifyContent": "end", - "paddingLeft": 0, - "width": "100%", - }, - "flexWrap": "wrap", - }, - "&.cozyStyles": { - "&-error": { - "&-filled": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-outlined": { - "& $icon": { - "color": "#fff", - }, - "border": "1px solid #fff", - "color": "#fff", - }, - "&-standard": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "& $icon": { - "color": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.12)", - "color": "#fff", - }, - }, - "&-info": { - "&-filled": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-outlined": { - "& $icon": { - "color": "#fff", - }, - "border": "1px solid #fff", - "color": "#fff", - }, - "&-standard": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "& $icon": { - "color": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.12)", - "color": "#fff", - }, - }, - "&-primary": { - "&-filled": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-outlined": { - "& $icon": { - "color": "#fff", - }, - "border": "1px solid #fff", - "color": "#fff", - }, - "&-standard": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "& $icon": { - "color": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.12)", - "color": "#fff", - }, - }, - "&-secondary": { - "&-filled": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-outlined": { - "& $icon": { - "color": "#fff", - }, - "border": "1px solid #fff", - "color": "#fff", - }, - "&-standard": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "& $icon": { - "color": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.12)", - "color": "#fff", - }, - }, - "&-success": { - "&-filled": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-outlined": { - "& $icon": { - "color": "#fff", - }, - "border": "1px solid #fff", - "color": "#fff", - }, - "&-standard": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "& $icon": { - "color": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.12)", - "color": "#fff", - }, - }, - "&-warning": { - "&-filled": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-outlined": { - "& $icon": { - "color": "#fff", - }, - "border": "1px solid #fff", - "color": "#fff", - }, - "&-standard": { - "& $action": { - "& button[title="Close"]": { - "color": "#fff", - }, - }, - "& $icon": { - "color": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.12)", - "color": "#fff", - }, - }, - }, - "padding": "8px 16px", - }, - }, - "MuiAlertTitle": { - "root": { - "fontWeight": "bold", - "width": "100%", - }, - }, - "MuiBadge": { - "anchorOriginBottomLeftRectangular": { - "transform": "scale(1) translate(-37%, 37%)", - }, - "anchorOriginBottomRightRectangular": { - "transform": "scale(1) translate(37%, 37%)", - }, - "anchorOriginTopLeftRectangular": { - "transform": "scale(1) translate(-37%, -37%)", - }, - "anchorOriginTopRightRectangular": { - "transform": "scale(1) translate(37%, -37%)", - }, - "badge": { - "&.badgeBorder": { - "border": "2px solid #fff", - }, - "&.badgeSizeLarge": { - "fontSize": ".6875rem", - "height": "1rem", - "minWidth": "1rem", - }, - "&.badgeSizeMedium": { - "fontSize": ".625rem", - "height": ".875rem", - "minWidth": ".875rem", - }, - "&.badgeSizeSmall": { - "fontSize": ".5rem", - "height": ".75rem", - "minWidth": ".75rem", - }, - "boxSizing": "content-box", - "padding": 0, - }, - "colorPrimary": { - "&.colorInfo": { - "backgroundColor": "#fff", - "color": "#fff", - }, - "&.colorSuccess": { - "backgroundColor": "#fff", - "color": "#fff", - }, - "&.colorWarning": { - "backgroundColor": "#fff", - "color": "#fff", - }, - }, - "dot": { - "&.badgeSizeLarge": { - "height": ".625rem", - "minWidth": ".625rem", - }, - "&.badgeSizeMedium": { - "height": ".5rem", - "minWidth": ".5rem", - }, - "&.badgeSizeSmall": { - "height": ".375rem", - "minWidth": ".375rem", - }, - "borderRadius": "100%", - "padding": 0, - }, - }, - "MuiButton": { - "contained": { - "&:not($disabled)": { - "&.customColor": { - "&-error": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-info": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-success": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - "&-warning": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - }, - }, - "boxShadow": 0, - }, - "outlined": { - "&:not($disabled)": { - "&.customColor": { - "&-error": { - "&.ghost": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.16)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "borderColor": "#fff", - "color": "#fff", - }, - "&-info": { - "&.ghost": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.16)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "borderColor": "#fff", - "color": "#fff", - }, - "&-primary": { - "&.ghost": { - "borderColor": "rgba(255, 255, 255, 0.48)", - "color": "#fff", - }, - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "#fff", - }, - "borderColor": "#fff", - "color": "#fff", - }, - "&-success": { - "&.ghost": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.16)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "borderColor": "#fff", - "color": "#fff", - }, - "&-warning": { - "&.ghost": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.16)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "borderColor": "#fff", - "color": "#fff", - }, - }, - "&.ghost": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.16)", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - }, - }, - }, - "root": { - "&.ghost": { - "&:hover": { - "borderStyle": "dashed !important", - }, - "borderStyle": "dashed !important", - }, - "borderRadius": 2, - "height": "2.5rem", - "lineHeight": "normal", - "padding": "0 1rem", - }, - "sizeLarge": { - "&$text": { - "padding": "14px 10px", - }, - "height": "3rem", - "padding": "0 1.25rem", - }, - "sizeSmall": { - "&$text": { - "padding": "8px 6px", - }, - "height": "2rem", - "padding": "0 0.75rem", - }, - "startIcon": { - "marginLeft": "0 !important", - }, - "text": { - "&:not($disabled)": { - "&.customColor": { - "&-error": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "color": "#fff", - }, - "&-info": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "color": "#fff", - }, - "&-success": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "color": "#fff", - }, - "&-warning": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "color": "#fff", - }, - }, - }, - "minWidth": "auto", - "padding": "11px 8px", - }, - }, - "MuiCheckbox": { - "colorSecondary": { - "&$checked": { - "color": "#fff", - }, - }, - }, - "MuiChip": { - "root": { - "&.customColor": { - "&-error": { - "& $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "& $icon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.04)", - "borderColor": "rgba(255, 255, 255, 0.32)", - }, - }, - "&$colorPrimary": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "#fff", - }, - }, - "&$disabled": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - "opacity": 1, - }, - "backgroundColor": "#fff", - "color": "#fff", - "padding": "0 1px", - }, - "&.ghost": { - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.16)", - "borderColor": "rgba(255, 255, 255, 0.48)", - }, - }, - "&:not($disabled)": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - "borderColor": "rgba(255, 255, 255, 0.48)", - "color": "#fff", - }, - "borderStyle": "dashed", - "borderWidth": "1px", - }, - "borderColor": "rgba(255, 255, 255, 0.32)", - "color": "#fff", - }, - "&-info": { - "& $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "& $icon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.04)", - "borderColor": "rgba(255, 255, 255, 0.32)", - }, - }, - "&$colorPrimary": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "#fff", - }, - }, - "&$disabled": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - "opacity": 1, - }, - "backgroundColor": "#fff", - "color": "#fff", - "padding": "0 1px", - }, - "&.ghost": { - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.16)", - "borderColor": "rgba(255, 255, 255, 0.48)", - }, - }, - "&:not($disabled)": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - "borderColor": "rgba(255, 255, 255, 0.48)", - "color": "#fff", - }, - "borderStyle": "dashed", - "borderWidth": "1px", - }, - "borderColor": "rgba(255, 255, 255, 0.32)", - "color": "#fff", - }, - "&-primary": { - "& $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "& $icon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "#fff", - "borderColor": "#fff", - }, - }, - "&$colorPrimary": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "#fff", - }, - }, - "&$disabled": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - "opacity": 1, - }, - "backgroundColor": "#fff", - "color": "#fff", - "padding": "0 1px", - }, - "&.ghost": { - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.16)", - "borderColor": "rgba(255, 255, 255, 0.48)", - }, - }, - "&:not($disabled)": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - "borderColor": "rgba(255, 255, 255, 0.48)", - "color": "#fff", - }, - "borderStyle": "dashed", - "borderWidth": "1px", - }, - "borderColor": "#fff", - "color": "#fff", - }, - "&-success": { - "& $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "& $icon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.04)", - "borderColor": "rgba(255, 255, 255, 0.32)", - }, - }, - "&$colorPrimary": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "#fff", - }, - }, - "&$disabled": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - "opacity": 1, - }, - "backgroundColor": "#fff", - "color": "#fff", - "padding": "0 1px", - }, - "&.ghost": { - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.16)", - "borderColor": "rgba(255, 255, 255, 0.48)", - }, - }, - "&:not($disabled)": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - "borderColor": "rgba(255, 255, 255, 0.48)", - "color": "#fff", - }, - "borderStyle": "dashed", - "borderWidth": "1px", - }, - "borderColor": "rgba(255, 255, 255, 0.32)", - "color": "#fff", - }, - "&-warning": { - "& $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "& $icon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.04)", - "borderColor": "rgba(255, 255, 255, 0.32)", - }, - }, - "&$colorPrimary": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "#fff", - }, - }, - "&$disabled": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - "opacity": 1, - }, - "backgroundColor": "#fff", - "color": "#fff", - "padding": "0 1px", - }, - "&.ghost": { - "&$clickable, &$deletable": { - "&:hover, &:focus": { - "backgroundColor": "rgba(255, 255, 255, 0.16)", - "borderColor": "rgba(255, 255, 255, 0.48)", - }, - }, - "&:not($disabled)": { - "& $icon, & $deleteIcon": { - "color": "#fff", - "fill": "#fff", - }, - "backgroundColor": "rgba(255, 255, 255, 0.08)", - "borderColor": "rgba(255, 255, 255, 0.48)", - "color": "#fff", - }, - "borderStyle": "dashed", - "borderWidth": "1px", - }, - "borderColor": "rgba(255, 255, 255, 0.32)", - "color": "#fff", - }, - }, - "&.noLabel": { - "& $icon": { - "margin": 0, - }, - "& $label": { - "display": "none", - }, - "width": "32px", - }, - }, - }, - "MuiDialog": { - "paper": { - "&.full": { - "maxWidth": "100%", - "width": "100%", - }, - "&.large": { - "@media (min-width:768px)": { - "maxWidth": "800px", - "width": "800px", - }, - }, - "&.medium": { - "@media (min-width:768px)": { - "maxWidth": "544px", - "width": "544px", - }, - }, - "&.overflow": { - "& .cozyDialogContent": { - "overflowY": "visible !important", - }, - "overflowY": "visible !important", - }, - "&.small": { - "@media (max-width:1022.95px)": { - "& .divider--dialog": { - "marginLeft": "-8px", - "marginRight": "-8px", - }, - "borderRadius": "6px", - "height": "auto", - "margin": "16px", - "maxHeight": "calc(100% - 32px)", - "padding": "0 8px 8px", - }, - "maxWidth": "480px", - "width": "480px", - }, - }, - "paperFullScreen": { - "& .cozyDialogActions": { - "paddingBottom": "calc(env(safe-area-inset-bottom) + var(--flagship-bottom-height, 0px))", - }, - "& [class*="DialogBackButton"]": { - "transform": "translateY(var(--flagship-top-height, 0px))", - }, - "& [class*="DialogCloseButton"]": { - "transform": "translateY(var(--flagship-top-height, 0px))", - }, - ".flagship-app & .cozyDialogContent": { - "marginBottom": "var(--flagship-bottom-height, 0px) !important", - }, - ".flagship-app & .cozyDialogTitle": { - "paddingTop": "calc(var(--flagship-top-height, 0px) + 0.75rem) !important", - }, - }, - "scrollPaper": { - "&.alignTop": { - "alignItems": "start", - }, - }, - }, - "MuiDialogActions": { - "root": { - "&.columnLayout": { - "& button": { - "&:not(:first-child)": { - "marginBottom": "8px", - }, - "margin": 0, - "width": "100%", - }, - "display": "flex", - "flexDirection": "column-reverse", - }, - "&.dialogActionsFluid": { - "margin": "24px 0 0", - }, - "&:not(.columnLayout) > :not(:first-child):not(:first-child)": { - "marginLeft": 4, - }, - "@media (max-width:767.95px)": { - "& button": { - "flexGrow": 1, - }, - "margin": "8px 16px", - }, - "margin": "16px 32px", - "padding": 0, - }, - }, - "MuiDialogContent": { - "root": { - "& .dialogContentInner": { - "& .dialogTitleFluidContainer": { - "@media (max-width:767.95px)": { - "marginLeft": "-1rem", - "marginRight": "-1rem", - "marginTop": "-0.75rem", - }, - "marginLeft": "-2rem", - "marginRight": "-2rem", - }, - "&.withFluidActions": { - "@media (max-width:767.95px)": { - "& .cozyDialogActions": { - "paddingBottom": "calc(env(safe-area-inset-bottom) + var(--flagship-bottom-height, 0px) + 16px)", - }, - "& .dialogContentWrapper": { - "&:not(.withActions)": { - "paddingBottom": "calc(env(safe-area-inset-bottom) + var(--flagship-bottom-height, 0px) + 16px)", - }, - "flexGrow": 1, - }, - "display": "flex", - "flexDirection": "column", - "height": "100%", - "marginBottom": 0, - }, - }, - "marginBottom": "24px", - }, - "&.disableGutters": { - "& .dialogContentInner": { - "marginBottom": 0, - }, - "& .dialogTitleFluidContainer": { - "marginLeft": 0, - "marginRight": 0, - "marginTop": 0, - }, - "padding": 0, - }, - "@media (max-width:767.95px)": { - "padding": "24px 16px 0", - }, - "padding": "24px 32px 0", - }, - }, - "MuiDialogTitle": { - "root": { - "&.dialogTitleFluid": { - "paddingTop": 0, - }, - "&.dialogTitleWithBack": { - "@media (max-width:767.95px)": { - "paddingLeft": "3rem", - }, - "paddingLeft": "4rem", - }, - "&.dialogTitleWithClose": { - "@media (max-width:767.95px)": { - "paddingRight": "3rem", - }, - "paddingRight": "4rem", - }, - "@media (max-width:767.95px)": { - "fontFamily": "var(--primaryFont)", - "fontSize": 20, - "fontWeight": "bold", - "lineHeight": 1.167, - "padding": "0.75rem 1rem", - }, - "boxSizing": "border-box", - "fontFamily": "var(--primaryFont)", - "fontSize": 24, - "fontWeight": "bold", - "lineHeight": 1.167, - "padding": "1.5rem 2rem", - "width": "100%", - }, - }, - "MuiDivider": { - "inset": { - "&.divider--dialog": { - "marginLeft": 80, - }, - "marginLeft": 64, - }, - }, - "MuiFab": { - "extended": { - "&$sizeMedium": { - "borderRadius": 24, - "height": 48, - "minWidth": 48, - "padding": "0 16px", - }, - "&$sizeSmall": { - "borderRadius": 20, - "height": 40, - "minWidth": 40, - "padding": "0 12px", - }, - "borderRadius": 28, - "height": 56, - "minWidth": 56, - "padding": "0 20px", - }, - "root": { - "&:hover": { - "backgroundColor": "rgb(242, 242, 242)", - }, - "@media (hover: none)": { - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - "color": "#fff", - }, - }, - "MuiFormHelperText": { - "root": { - "&$disabled&$error": { - "color": "#fff", - }, - "fontSize": "0.875rem", - "fontStyle": "italic", - "marginTop": 4, - }, - }, - "MuiFormLabel": { - "root": { - "&$disabled&$error": { - "color": "#fff", - }, - "color": "#fff", - }, - }, - "MuiIconButton": { - "root": { - "&.cozyStyles": { - "&-error": { - "&:hover": { - "@media (hover: none)": { - "backgroundColor": "transparent", - }, - "backgroundColor": "rgba(255, 255, 255, 0.04)", - }, - "color": "#fff", - }, - }, - "&.dialogIconButton": { - "&:hover": { - "backgroundColor": "#fff", - }, - "backgroundColor": "#fff", - }, - "&.large": { - "padding": 16, - }, - "&.medium": { - "padding": 12, - }, - "&.small": { - "padding": 3, - }, - "color": "#fff", - }, - }, - "MuiInputLabel": { - "outlined": { - "&$marginDense": { - "transform": "translate(14px, 14px) scale(1)", - }, - "&:not($shrink)": { - "&$error": { - "color": "#fff", - }, - }, - }, - }, - "MuiListItem": { - "dense": { - "&.large": { - "minHeight": 56, - "paddingBottom": 12, - "paddingTop": 12, - }, - "&.small": { - "minHeight": 40, - "paddingBottom": 4, - "paddingTop": 4, - }, - "minHeight": 48, - "paddingBottom": 8, - "paddingTop": 8, - }, - "root": { - "&.cozyActionsItem": { - "wordBreak": "break-word", - }, - "&.large": { - "minHeight": 64, - "paddingBottom": 16, - "paddingTop": 16, - }, - "&.small": { - "minHeight": 48, - "paddingBottom": 8, - "paddingTop": 8, - }, - "gap": 16, - "minHeight": 56, - "paddingBottom": 12, - "paddingTop": 12, - }, - }, - "MuiListItemIcon": { - "root": { - "alignItems": "center", - "color": "#fff", - "height": 32, - "justifyContent": "center", - "minWidth": "auto", - "width": 32, - }, - }, - "MuiListItemSecondaryAction": { - "root": { - "right": 0, - }, - }, - "MuiListItemText": { - "multiline": { - "marginBottom": 1, - "marginTop": 1, - }, - "root": { - "marginBottom": 1, - "marginTop": 1, - }, - "secondary": { - "marginTop": 1, - }, - }, - "MuiListSubheader": { - "root": { - "backgroundColor": "#fff", - "fontFamily": "var(--primaryFont)", - "fontSize": 12, - "fontWeight": "bold", - "lineHeight": 1.334, - "marginBottom": "0.5rem", - "paddingBottom": 8, - "paddingTop": 8, - "textTransform": "uppercase", - }, - "sticky": { - "backgroundColor": "#fff", - }, - }, - "MuiMenu": { - "paper": { - "maxWidth": 320, - }, - }, - "MuiMenuItem": { - "gutters": { - "paddingLeft": 16, - "paddingRight": 16, - }, - "root": { - "& .cozyListItemIcon": { - "height": 16, - "width": 16, - }, - "&.cozyActionsItem": { - "minWidth": 256, - }, - "@media (min-width:480px)": { - "minHeight": 40, - }, - "overflow": "auto", - "paddingBottom": 4, - "paddingTop": 4, - "whiteSpace": "normal", - "wordBreak": "break-word", - }, - }, - "MuiMobileStepper": { - "dot": { - "backgroundColor": "transparent", - "border": "1px solid #fff", - "boxSizing": "border-box", - "height": "10px", - "margin": "0 3px", - "width": "10px", - }, - "dotActive": { - "border": "none", - }, - "root": { - "background": "transparent", - "height": 40, - "padding": 0, - }, - }, - "MuiOutlinedInput": { - "input": { - "padding": "18.5px 16px", - "textAlign": "left", - }, - "inputMarginDense": { - "paddingBottom": 15, - "paddingTop": 14, - }, - "notchedOutline": { - "borderColor": "#fff", - "transition": "border-color 200ms", - }, - "root": { - "&$disabled": { - "background": "#fff", - }, - "&$error $notchedOutline": { - "borderColor": "rgba(255, 255, 255, 0.32)", - }, - "&$focused $notchedOutline": { - "borderWidth": "0.0625rem", - }, - "&$focused&$error $notchedOutline": { - "borderColor": "#fff", - }, - "&:hover $notchedOutline": { - "borderColor": "#fff", - }, - "&:hover&$error $notchedOutline": { - "borderColor": "#fff", - }, - "borderRadius": 4, - }, - }, - "MuiRadio": { - "colorPrimary": { - "&$checked svg": { - "fill": "#fff", - }, - "&$disabled&$checked svg": { - "fill": "#fff", - }, - }, - "colorSecondary": { - "&$checked svg": { - "fill": "#fff", - }, - "&$disabled&$checked svg": { - "fill": "#fff", - }, - }, - "root": { - "&$disabled svg": { - "backgroundColor": "#fff", - "borderRadius": "50%", - "fill": "#fff", - }, - "&:not($checked) svg": { - "fill": "#fff", - }, - "padding": "12px", - }, - }, - "MuiSelect": { - "iconOutlined": { - "right": 14, - "top": "auto", - }, - "outlined": { - "&&": { - "paddingRight": 39, - }, - }, - }, - "MuiSnackbarContent": { - "root": { - "backgroundColor": "#fff", - "padding": "4px 12px", - }, - }, - "MuiStepConnector": { - "line": { - "borderColor": "#fff", - }, - }, - "MuiStepContent": { - "root": { - "borderColor": "#fff", - }, - }, - "MuiStepLabel": { - "label": { - "&$active": { - "fontFamily": "var(--primaryFont)", - "fontSize": 16, - "fontWeight": "bold", - "lineHeight": 1.313, - }, - "&$completed": { - "fontFamily": "var(--primaryFont)", - "fontSize": 16, - "fontWeight": "bold", - "lineHeight": 1.313, - }, - "fontFamily": "var(--primaryFont)", - "fontSize": 16, - "fontWeight": 400, - "lineHeight": 1.313, - }, - }, - "MuiSwitch": { - "checked": { - "& + $track$track": { - "opacity": 1, - }, - }, - "colorSecondary": { - "&$checked": { - "& + $track": { - "backgroundColor": "#fff", - }, - }, - }, - "disabled": { - "& $thumb": { - "backgroundColor": "#fff", - }, - "&$checked + $track": { - "backgroundColor": "#fff !important", - }, - }, - "switchBase": { - "&$checked": { - "transform": "translateX(15px)", - }, - "top": 1, - }, - "thumb": { - "backgroundColor": "#fff", - "height": 16, - "width": 16, - }, - "track": { - "backgroundColor": "#fff", - "height": 12, - "opacity": 1, - "width": 25, - }, - }, - "MuiTab": { - "root": { - "&.narrowed": { - "@media (min-width:480px)": { - "minWidth": "auto", - }, - "minWidth": "auto", - }, - "&.segmented": { - "&$selected": { - "color": "#fff", - }, - "borderRadius": "99px", - "fontFamily": "var(--primaryFont)", - "fontSize": 14, - "fontWeight": 400, - "lineHeight": 1.313, - "minHeight": "2.5rem", - "textTransform": "initial", - "zIndex": 1, - }, - "&:focus": { - "color": "#fff", - }, - "&:hover": { - "color": "#fff", - "opacity": 1, - }, - "fontFamily": "var(--primaryFont)", - "fontSize": 12, - "fontWeight": "bold", - "lineHeight": 1.334, - "textTransform": "uppercase", - }, - }, - "MuiTabs": { - "root": { - "&.segmented": { - "& $fixed": { - "overflow": "visible !important", - }, - "& $indicator": { - "backgroundColor": "#fff", - "borderRadius": "99px", - "boxShadow": "#fff", - "height": "calc(100% - 2px)", - "top": "1px", - "transform": "scale(0.99)", - "zIndex": 0, - }, - "& $scrollButtons": { - "borderRadius": "99px", - }, - "backgroundColor": "#fff", - "borderRadius": "99px", - "minHeight": "2.5rem", - "overflow": "visible", - }, - }, - }, - "MuiTooltip": { - "tooltip": { - "borderRadius": "8px", - "fontSize": "1rem", - "lineHeight": "1.3", - "padding": "16px", - }, - }, - }, - "palette": { - "action": { - "activatedOpacity": 0.12, - "active": "#fff", - "disabled": "#fff", - "disabledBackground": "#fff", - "disabledOpacity": 0.32, - "focus": "#fff", - "focusOpacity": 0.12, - "ghost": "#fff", - "ghostOpacity": 0.08, - "hover": "#fff", - "hoverGhost": "#fff", - "hoverGhostOpacity": 0.16, - "hoverOpacity": 0.04, - "selected": "#fff", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": { - "contrast": "#fff", - "contrastOpacity": 0.12, - "default": "#fff", - "paper": "#fff", - "selected": "#F5FAFF", - }, - "border": { - "disabled": "#fff", - "ghost": "#fff", - "ghostDisabled": "#fff", - "ghostOpacity": 0.48, - "main": "#fff", - "opacity": 0.32, - }, - "common": { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "#fff", - "error": { - "contrastText": "#fff", - "dark": "#fff", - "light": "#fff", - "main": "#fff", - }, - "getContrastText": [Function], - "grey": { - "100": "#fff", - "200": "#fff", - "300": "#fff", - "400": "#fff", - "50": "#fff", - "500": "#fff", - "600": "#fff", - "700": "#fff", - "800": "#fff", - "900": "#fff", - "A100": "#fff", - "A200": "#fff", - "A400": "#fff", - "A700": "#fff", - }, - "info": { - "contrastText": "#fff", - "dark": "#fff", - "light": "#fff", - "main": "#fff", - }, - "primary": { - "contrastText": "#fff", - "dark": "#fff", - "light": "#fff", - "main": "#fff", - }, - "secondary": { - "contrastText": "#fff", - "dark": "#fff", - "light": "#fff", - "main": "#fff", - }, - "success": { - "contrastText": "#fff", - "dark": "#fff", - "light": "#fff", - "main": "#fff", - }, - "text": { - "disabled": "#fff", - "hint": "#fff", - "icon": "#fff", - "primary": "#fff", - "secondary": "#fff", - }, - "tonalOffset": 0.2, - "type": "light", - "variant": "normal", - "warning": { - "contrastText": "#fff", - "dark": "#fff", - "light": "#fff", - "main": "#fff", - }, - }, - "props": {}, - "shadows": [ - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - "#fff", - ], - "shape": { - "borderRadius": 6, - }, - "spacing": [Function], - "textShadows": [ - "none", - "0px 2px 8px rgba(29, 33, 42, 0.16), 0px 0px 1px rgba(29, 33, 42, 0.48)", - ], - "transitions": { - "create": [Function], - "duration": { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": { - "body1": { - "fontFamily": "var(--primaryFont)", - "fontSize": 16, - "fontWeight": 400, - "lineHeight": 1.313, - }, - "body2": { - "fontFamily": "var(--primaryFont)", - "fontSize": 14, - "fontWeight": 400, - "lineHeight": 1.313, - }, - "button": { - "fontFamily": "var(--primaryFont)", - "fontSize": 14, - "fontWeight": "bold", - "lineHeight": 1.313, - "textTransform": "uppercase", - }, - "caption": { - "color": "#fff", - "display": "block", - "fontFamily": "var(--primaryFont)", - "fontSize": 12, - "fontWeight": 400, - "lineHeight": 1.313, - }, - "fontFamily": "var(--primaryFont)", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": { - "fontFamily": "var(--primaryFont)", - "fontSize": 48, - "fontWeight": "bold", - "letterSpacing": -0.8, - "lineHeight": 1.087, - }, - "h2": { - "fontFamily": "var(--primaryFont)", - "fontSize": 32, - "fontWeight": "bold", - "letterSpacing": -0.4, - "lineHeight": 1.313, - }, - "h3": { - "fontFamily": "var(--primaryFont)", - "fontSize": 24, - "fontWeight": "bold", - "lineHeight": 1.167, - }, - "h4": { - "fontFamily": "var(--primaryFont)", - "fontSize": 20, - "fontWeight": "bold", - "lineHeight": 1.167, - }, - "h5": { - "fontFamily": "var(--primaryFont)", - "fontSize": 18, - "fontWeight": "bold", - "lineHeight": 1.313, - }, - "h6": { - "fontFamily": "var(--primaryFont)", - "fontSize": 16, - "fontWeight": "bold", - "lineHeight": 1.313, - }, - "htmlFontSize": 16, - "overline": { - "fontFamily": "var(--primaryFont)", - "fontSize": "0.75rem", - "fontWeight": 400, - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": { - "fontFamily": "var(--primaryFont)", - "fontSize": 14, - "fontWeight": "bold", - "lineHeight": 1.358, - "textTransform": "uppercase", - }, - "subtitle2": { - "fontFamily": "var(--primaryFont)", - "fontSize": 12, - "fontWeight": "bold", - "lineHeight": 1.334, - "textTransform": "uppercase", - }, - }, - "zIndex": { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": "var(--zIndex-modal)", - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - Symbol(mui.nested): false, - } - } - > -
- - - - - - - - - - - - - - - - - - - - -
- - - - - -`; diff --git a/src/modules/viewer/FileOpenerExternal.spec.jsx b/src/modules/viewer/FileOpenerExternal.spec.jsx index 04c45583e3..735c94d9f3 100644 --- a/src/modules/viewer/FileOpenerExternal.spec.jsx +++ b/src/modules/viewer/FileOpenerExternal.spec.jsx @@ -1,7 +1,10 @@ -import { shallow } from 'enzyme' +import { render } from '@testing-library/react' import React from 'react' import { FileOpener } from './FileOpenerExternal' +import AppLike from 'test/components/AppLike' +import { setupStoreAndClient } from 'test/setup' + global.cozy = { client: { files: { @@ -19,73 +22,92 @@ const routerMock = { const showAlert = jest.fn() const t = x => x +jest.mock('cozy-keys-lib', () => ({ + withVaultClient: jest.fn().mockImplementation(arg => arg), + useVaultClient: jest.fn() +})) + describe('FileOpenerExternal', () => { it('should set the id in state', async () => { - const wrapper = shallow( - , - { - disableLifecycleMethods: true - } - ) + const { client, store } = setupStoreAndClient({}) global.cozy.client.files.statById.mockResolvedValue({ - _id: '123' + _id: '123', + name: 'file.txt', + attributes: {} }) - await wrapper.instance().loadFileInfo('123') + const container = render( + + + + ) - expect(wrapper.state().file.id).toBe('123') + await container.findByText('file.txt') }) it('should set the id in state even after a props update', async () => { - const wrapper = shallow( - , - { - disableLifecycleMethods: true - } - ) + const { client, store } = setupStoreAndClient({}) global.cozy.client.files.statById.mockResolvedValue({ - _id: '123' + _id: '123', + name: 'file123.txt', + attributes: {} }) - await wrapper.instance().loadFileInfo('123') + const container = render( + + + + ) - expect(wrapper.state().file.id).toBe('123') + await container.findByText('file123.txt') - wrapper.setProps({ - routeParams: { - fileId: '456' - } - }) global.cozy.client.files.statById.mockResolvedValue({ - _id: '456' + _id: '456', + name: 'file456.txt', + attributes: {} }) - await wrapper.instance().loadFileInfo('456') + container.rerender( + + + + ) - expect(wrapper.state().file.id).toBe('456') + await container.findByText('file456.txt') }) }) diff --git a/test/setup.jsx b/test/setup.jsx index ee38e3a651..c8756a93f7 100644 --- a/test/setup.jsx +++ b/test/setup.jsx @@ -2,10 +2,8 @@ * Setup utilities to be used in tests */ -import { configure } from '@testing-library/react' -import { mount } from 'enzyme' +import { configure, render, act } from '@testing-library/react' import React from 'react' -import { act } from 'react-dom/test-utils' import CozyClient from 'cozy-client' @@ -97,13 +95,11 @@ const setupFolderContent = async ({ folderId, initialStoreState }) => { let root await act(async () => { - root = mount( + root = render( ) - - await root.update() }) return { root, store, client }