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 }