diff --git a/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap
index a86def9ce25..41905957e48 100644
--- a/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/FilterList/tests/__snapshots__/index.test.js.snap
@@ -18,13 +18,6 @@ exports[`
renders and matches the snapshot 1`] = `
height: 3.2rem;
}
-.c4 {
- font-size: 1.2rem;
- line-height: 1.33;
- font-weight: 600;
- color: currentcolor;
-}
-
.c2 {
align-items: center;
display: flex;
@@ -32,6 +25,13 @@ exports[`
renders and matches the snapshot 1`] = `
gap: 8px;
}
+.c4 {
+ font-size: 1.2rem;
+ line-height: 1.33;
+ font-weight: 600;
+ color: currentcolor;
+}
+
.c6 {
border: 0;
clip: rect(0 0 0 0);
diff --git a/packages/core/upload/admin/src/components/FilterList/tests/index.test.js b/packages/core/upload/admin/src/components/FilterList/tests/index.test.js
index bd297da73ba..f91f7e8c665 100644
--- a/packages/core/upload/admin/src/components/FilterList/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/FilterList/tests/index.test.js
@@ -6,7 +6,7 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
@@ -55,7 +55,7 @@ describe('
', () => {
];
const { container } = render(
-
+
', () => {
onRemoveFilter={jest.fn()}
/>
-
+
);
expect(container).toMatchSnapshot();
diff --git a/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.jsx b/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.jsx
index a6465c46c3d..9d082e114df 100644
--- a/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.jsx
+++ b/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { Flex, lightTheme, ThemeProvider, Typography } from '@strapi/design-system';
+import { Flex, DesignSystemProvider, Typography } from '@strapi/design-system';
import { act, fireEvent, render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
@@ -14,7 +14,7 @@ const ID_FIXTURE = 'folder';
// eslint-disable-next-line react/prop-types
const ComponentFixture = ({ to, ...props }) => {
return (
-
+
{
-
+
);
};
diff --git a/packages/core/upload/admin/src/components/FolderGridList/tests/FolderGridList.test.jsx b/packages/core/upload/admin/src/components/FolderGridList/tests/FolderGridList.test.jsx
index 8b24c6513e5..556bb68930b 100644
--- a/packages/core/upload/admin/src/components/FolderGridList/tests/FolderGridList.test.jsx
+++ b/packages/core/upload/admin/src/components/FolderGridList/tests/FolderGridList.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { MemoryRouter } from 'react-router-dom';
@@ -11,9 +11,9 @@ const ComponentFixture = () => {
return (
-
+
Folder grid list children
-
+
);
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.jsx b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.jsx
index ed5c8be1d5c..a148912b2fc 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.jsx
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.jsx
@@ -21,9 +21,10 @@ export const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditA
id: getTrad('control-card.add'),
defaultMessage: 'Add',
})}
- icon={
}
onClick={() => onAddAsset(asset)}
- />
+ >
+
+
)}
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/MediaLibraryInput.test.jsx b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/MediaLibraryInput.test.jsx
index 10e05a9b7c0..b11bafc1f26 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/tests/MediaLibraryInput.test.jsx
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/tests/MediaLibraryInput.test.jsx
@@ -23,13 +23,6 @@ describe('
', () => {
height: 100%;
}
- .c2 {
- font-size: 1.2rem;
- line-height: 1.33;
- font-weight: 600;
- color: #666687;
- }
-
.c1 {
align-items: center;
display: flex;
@@ -38,6 +31,13 @@ describe('
', () => {
justify-content: center;
}
+ .c2 {
+ font-size: 1.2rem;
+ line-height: 1.33;
+ font-weight: 600;
+ color: #666687;
+ }
+
.c3 {
align-items: center;
}
diff --git a/packages/core/upload/admin/src/components/SelectTree/tests/SelectTree.test.jsx b/packages/core/upload/admin/src/components/SelectTree/tests/SelectTree.test.jsx
index 324b3d5d2f8..2923a5d0af4 100644
--- a/packages/core/upload/admin/src/components/SelectTree/tests/SelectTree.test.jsx
+++ b/packages/core/upload/admin/src/components/SelectTree/tests/SelectTree.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { act, render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
@@ -37,9 +37,9 @@ const FIXTURE_OPTIONS = [
const ComponentFixture = (props) => (
-
+
-
+
);
diff --git a/packages/core/upload/admin/src/components/TableList/tests/CellContent.test.jsx b/packages/core/upload/admin/src/components/TableList/tests/CellContent.test.jsx
index 2f11cb9bf70..d7191bd9940 100644
--- a/packages/core/upload/admin/src/components/TableList/tests/CellContent.test.jsx
+++ b/packages/core/upload/admin/src/components/TableList/tests/CellContent.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
@@ -31,9 +31,9 @@ const ComponentFixture = (props) => {
return (
-
+
-
+
);
};
diff --git a/packages/core/upload/admin/src/components/TableList/tests/PreviewCell.test.jsx b/packages/core/upload/admin/src/components/TableList/tests/PreviewCell.test.jsx
index 96b3f662cdd..7804db0e5b5 100644
--- a/packages/core/upload/admin/src/components/TableList/tests/PreviewCell.test.jsx
+++ b/packages/core/upload/admin/src/components/TableList/tests/PreviewCell.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { render } from '@testing-library/react';
import { PreviewCell } from '../PreviewCell';
@@ -27,9 +27,9 @@ const ComponentFixture = (props) => {
};
return (
-
+
-
+
);
};
diff --git a/packages/core/upload/admin/src/components/TableList/tests/TableList.test.jsx b/packages/core/upload/admin/src/components/TableList/tests/TableList.test.jsx
index ff4132a1ae4..6fd677a4ffd 100644
--- a/packages/core/upload/admin/src/components/TableList/tests/TableList.test.jsx
+++ b/packages/core/upload/admin/src/components/TableList/tests/TableList.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { fireEvent, render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { MemoryRouter } from 'react-router-dom';
@@ -45,9 +45,9 @@ const ComponentFixture = (props) => {
return (
-
+
-
+
);
@@ -73,11 +73,14 @@ describe('TableList', () => {
expect(getByRole('gridcell', { name: 'actions' })).toBeInTheDocument();
});
- it('should call onChangeSort callback when changing sort order', () => {
+ it('should call onChangeSort callback when changing sort order', async () => {
const onChangeSortSpy = jest.fn();
- const { getByRole } = setup({ sortQuery: 'updatedAt:ASC', onChangeSort: onChangeSortSpy });
+ const { findByRole } = setup({
+ sortQuery: 'updatedAt:ASC',
+ onChangeSort: onChangeSortSpy,
+ });
- const sortButton = getByRole('button', { name: 'Sort on last update' });
+ const sortButton = await findByRole('button', { name: 'Sort on last update' });
expect(sortButton).toBeInTheDocument();
fireEvent.click(sortButton);
@@ -85,14 +88,13 @@ describe('TableList', () => {
expect(onChangeSortSpy).toHaveBeenCalledWith('updatedAt:DESC');
});
- it('should call onChangeSort callback when changing sort by', () => {
+ it('should call onChangeSort callback when changing sort by', async () => {
const onChangeSortSpy = jest.fn();
- const { getByRole } = setup({ sortQuery: 'updatedAt:ASC', onChangeSort: onChangeSortSpy });
+ const { getByText } = setup({ sortQuery: 'updatedAt:ASC', onChangeSort: onChangeSortSpy });
- const sortButton = getByRole('button', { name: 'Sort on name' });
- expect(sortButton).toBeInTheDocument();
+ expect(getByText('name')).toBeInTheDocument();
- fireEvent.click(sortButton);
+ fireEvent.click(getByText('name'));
expect(onChangeSortSpy).toHaveBeenCalledWith('name:ASC');
});
diff --git a/packages/core/upload/admin/src/components/TableList/tests/__snapshots__/CellContent.test.jsx.snap b/packages/core/upload/admin/src/components/TableList/tests/__snapshots__/CellContent.test.jsx.snap
index 5310a39994b..bef48e613dd 100644
--- a/packages/core/upload/admin/src/components/TableList/tests/__snapshots__/CellContent.test.jsx.snap
+++ b/packages/core/upload/admin/src/components/TableList/tests/__snapshots__/CellContent.test.jsx.snap
@@ -206,6 +206,13 @@ exports[`TableList | CellContent should render image cell type when element type
height: 32px;
}
+.c1 {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
.c3 {
font-size: 1.4rem;
line-height: 1.43;
@@ -214,13 +221,6 @@ exports[`TableList | CellContent should render image cell type when element type
text-transform: uppercase;
}
-.c1 {
- align-items: center;
- display: flex;
- flex-direction: row;
- justify-content: center;
-}
-
.c4 {
border: 0;
clip: rect(0 0 0 0);
@@ -343,6 +343,13 @@ exports[`TableList | CellContent should render image cell type when element type
height: 32px;
}
+.c1 {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
.c3 {
font-size: 1.4rem;
line-height: 1.43;
@@ -351,13 +358,6 @@ exports[`TableList | CellContent should render image cell type when element type
text-transform: uppercase;
}
-.c1 {
- align-items: center;
- display: flex;
- flex-direction: row;
- justify-content: center;
-}
-
.c4 {
border: 0;
clip: rect(0 0 0 0);
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.jsx b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.jsx
index 7035ab8d847..e718ea603cf 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.jsx
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { render as renderTL } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
@@ -17,9 +17,9 @@ describe('FromComputerForm', () => {
it('snapshots the component', async () => {
const { container } = renderTL(
-
+
-
+
);
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/__snapshots__/FromComputerForm.test.jsx.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/__snapshots__/FromComputerForm.test.jsx.snap
index 0563e12982b..b47406fd2ef 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/__snapshots__/FromComputerForm.test.jsx.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/__snapshots__/FromComputerForm.test.jsx.snap
@@ -57,20 +57,6 @@ exports[`FromComputerForm snapshots the component 1`] = `
padding-inline-start: 20px;
}
-.c8 {
- font-weight: 500;
- font-size: 1.6rem;
- line-height: 1.25;
- color: #666687;
-}
-
-.c16 {
- font-size: 1.2rem;
- line-height: 1.33;
- font-weight: 600;
- color: currentcolor;
-}
-
.c3 {
align-items: center;
display: flex;
@@ -98,6 +84,20 @@ exports[`FromComputerForm snapshots the component 1`] = `
justify-content: space-between;
}
+.c8 {
+ font-weight: 500;
+ font-size: 1.6rem;
+ line-height: 1.25;
+ color: #666687;
+}
+
+.c16 {
+ font-size: 1.2rem;
+ line-height: 1.33;
+ font-weight: 600;
+ color: currentcolor;
+}
+
.c21 {
border: 0;
clip: rect(0 0 0 0);
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.jsx b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.jsx
index bacedb17ca6..349e38bdb6d 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.jsx
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { lightTheme, ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
import { render as renderTL } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from 'react-query';
@@ -57,7 +57,7 @@ describe('PendingAssetStep', () => {
const { container } = renderTL(
-
+
{
onUploadSucceed={jest.fn()}
/>
-
+
);
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.jsx.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.jsx.snap
index 988cb8ecb73..f20f3cd773a 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.jsx.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.jsx.snap
@@ -89,47 +89,6 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
bottom: 4px;
}
-.c3 {
- font-size: 1.4rem;
- line-height: 1.43;
- font-weight: 600;
- color: #32324d;
-}
-
-.c13 {
- font-size: 1.2rem;
- line-height: 1.33;
- font-weight: 600;
- color: #32324d;
-}
-
-.c14 {
- font-size: 1.2rem;
- line-height: 1.33;
- color: #666687;
-}
-
-.c18 {
- font-size: 1.2rem;
- line-height: 1.33;
- font-weight: 600;
- color: currentcolor;
-}
-
-.c44 {
- font-weight: 600;
- font-size: 1.1rem;
- line-height: 1.45;
- text-transform: uppercase;
- color: #666687;
-}
-
-.c50 {
- font-size: 1.2rem;
- line-height: 1.33;
- color: #ffffff;
-}
-
.c2 {
align-items: center;
display: flex;
@@ -183,6 +142,48 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
justify-content: center;
}
+.c3 {
+ font-size: 1.4rem;
+ line-height: 1.43;
+ font-weight: 600;
+ color: #32324d;
+}
+
+.c13 {
+ font-size: 1.2rem;
+ line-height: 1.33;
+ font-weight: 600;
+ color: #32324d;
+}
+
+.c14 {
+ font-size: 1.2rem;
+ line-height: 1.33;
+ color: #666687;
+}
+
+.c18 {
+ font-size: 1.2rem;
+ line-height: 1.33;
+ font-weight: 600;
+ color: currentcolor;
+}
+
+.c44 {
+ font-weight: 600;
+ font-size: 1.1rem;
+ line-height: 1.45;
+ text-transform: uppercase;
+ line-height: 1rem;
+ color: #666687;
+}
+
+.c50 {
+ font-size: 1.2rem;
+ line-height: 1.33;
+ color: #ffffff;
+}
+
.c8 {
border: 0;
clip: rect(0 0 0 0);
@@ -196,7 +197,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
.c42 {
border-radius: 4px;
- height: 2.4rem;
+ padding-block: 0.7rem;
}
.c6 {
@@ -237,12 +238,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
}
.c26 {
- height: 18px;
- min-width: 18px;
+ min-width: 1.8rem;
+ height: 1.8rem;
margin: 0;
+ appearance: none;
border-radius: 4px;
border: 1px solid #c0c0cf;
- -webkit-appearance: none;
background-color: #ffffff;
cursor: pointer;
}
@@ -257,8 +258,8 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
display: block;
position: relative;
background: url("data:image/svg+xml,%3csvg%20width='10'%20height='8'%20viewBox='0%200%2010%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.55323%200.396973C8.63135%200.316355%208.76051%200.315811%208.83931%200.395768L9.86256%201.43407C9.93893%201.51157%209.93935%201.6359%209.86349%201.7139L4.06401%207.67724C3.9859%207.75755%203.85707%207.75805%203.77834%207.67834L0.13866%203.99333C0.0617798%203.91549%200.0617102%203.79032%200.138504%203.7124L1.16213%202.67372C1.24038%202.59432%201.36843%202.59422%201.4468%202.67348L3.92174%205.17647L8.55323%200.396973Z'%20fill='white'%20/%3e%3c/svg%3e") no-repeat no-repeat center center;
- width: 10px;
- height: 10px;
+ width: 1rem;
+ height: 1rem;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
@@ -519,11 +520,6 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
class="c4 c5 c6 c7"
type="button"
>
-
- Close the modal
-
+
+ Close the modal
+