diff --git a/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.js b/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.js index e91e4408d5..a46955a338 100644 --- a/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.js +++ b/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.js @@ -3,7 +3,7 @@ import { BaseLink } from '@strapi/design-system/BaseLink'; import { Flex } from '@strapi/design-system/Flex'; import { ThemeProvider, lightTheme } from '@strapi/design-system'; import { Typography } from '@strapi/design-system/Typography'; -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, act } from '@testing-library/react'; import { FolderCard } from '../FolderCard'; import { FolderCardBody } from '../FolderCardBody'; @@ -12,7 +12,7 @@ import { FolderCardCheckbox } from '../FolderCardCheckbox'; const ID_FIXTURE = 'folder-1'; // eslint-disable-next-line react/prop-types -const ComponentFixture = ({ children, ...props }) => { +const ComponentFixture = props => { return ( { onDoubleClick={() => {}} {...props} > - {children || ''} - - - ); -}; - -describe('FolderCard', () => { - it('renders and matches the snapshot', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - - it('properly calls the onDoubleClick callback', () => { - const callback = jest.fn(); - const { container } = render(); - - fireEvent(container.querySelector('a'), new MouseEvent('dblclick', { bubbles: true })); - - expect(callback).toHaveBeenCalledTimes(1); - }); - - it('has all required ids set when rendering a start action', () => { - const { container } = render( - }> @@ -56,10 +32,39 @@ describe('FolderCard', () => { - - ); + + + ); +}; - expect(container.querySelector(`[id="${ID_FIXTURE}-title"]`)).toBeInTheDocument(); - expect(container.querySelector(`[aria-labelledby="${ID_FIXTURE}-title"]`)).toBeInTheDocument(); +const setup = props => render(); + +describe('FolderCard', () => { + test('renders and matches the snapshot', () => { + const { container } = setup(); + expect(container).toMatchSnapshot(); + }); + + test('properly calls the onDoubleClick callback', () => { + const callback = jest.fn(); + const { container } = setup({ onDoubleClick: callback }); + + act(() => { + fireEvent(container.querySelector('button'), new MouseEvent('dblclick', { bubbles: true })); + }); + + expect(callback).toHaveBeenCalledTimes(1); + }); + + test('has all required ids set when rendering a start action', () => { + const { container } = setup({ + startAction: , + }); + + expect(container).toMatchSnapshot(); + expect(container.querySelector(`[id="${ID_FIXTURE}-3-title"]`)).toBeInTheDocument(); + expect( + container.querySelector(`[aria-labelledby="${ID_FIXTURE}-3-title"]`) + ).toBeInTheDocument(); }); }); diff --git a/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap b/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap index 2851e7ab2a..33208d3da0 100644 --- a/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap +++ b/packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap @@ -1,11 +1,30 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FolderCard renders and matches the snapshot 1`] = ` -.c1 { +exports[`FolderCard has all required ids set when rendering a start action 1`] = ` +.c12 { cursor: pointer; } -.c8 { +.c9 { + position: relative; + z-index: 3; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +.c14 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -17,11 +36,91 @@ exports[`FolderCard renders and matches the snapshot 1`] = ` width: 1px; } +.c13 { + font-weight: 500; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; +} + +.c6 { + margin: 0; + height: 18px; + min-width: 18px; + border-radius: 4px; + border: 1px solid #c0c0cf; + -webkit-appearance: none; + background-color: #ffffff; + cursor: pointer; +} + +.c6:checked { + background-color: #4945ff; + border: 1px solid #4945ff; +} + +.c6:checked:after { + content: ''; + display: block; + position: relative; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center; + width: 10px; + height: 10px; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.c6:checked:disabled:after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; +} + +.c6:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; +} + +.c6:indeterminate { + background-color: #4945ff; + border: 1px solid #4945ff; +} + +.c6:indeterminate:after { + content: ''; + display: block; + position: relative; + color: white; + height: 2px; + width: 10px; + background-color: #ffffff; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.c6:indeterminate:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; +} + +.c6:indeterminate:disabled:after { + background-color: #8e8ea9; +} + .c0 { position: relative; } -.c6 { +.c5 { + position: relative; + z-index: 2; +} + +.c7 { background: #eaf5ff; color: #66b7f1; padding-top: 8px; @@ -31,7 +130,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = ` border-radius: 4px; } -.c3 { +.c2 { background: #ffffff; padding-top: 12px; padding-right: 16px; @@ -43,7 +142,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = ` cursor: pointer; } -.c4 { +.c3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -57,16 +156,16 @@ exports[`FolderCard renders and matches the snapshot 1`] = ` align-items: center; } -.c5 > * { +.c4 > * { margin-left: 0; margin-right: 0; } -.c5 > * + * { +.c4 > * + * { margin-left: 12px; } -.c2 { +.c1 { height: 100%; left: 0; position: absolute; @@ -75,43 +174,58 @@ exports[`FolderCard renders and matches the snapshot 1`] = ` width: 100%; } -.c2:hover, -.c2:focus { +.c1:hover, +.c1:focus { -webkit-text-decoration: none; text-decoration: none; } -.c7 path { +.c8 path { fill: currentColor; } +.c11 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +
-

+
+ + Pictures + +
+ +

+

+

+

+
+`; + +exports[`FolderCard renders and matches the snapshot 1`] = ` +.c10 { + cursor: pointer; +} + +.c7 { + position: relative; + z-index: 3; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +.c12 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c11 { + font-weight: 500; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; +} + +.c0 { + position: relative; +} + +.c5 { + background: #eaf5ff; + color: #66b7f1; + padding-top: 8px; + padding-right: 12px; + padding-bottom: 8px; + padding-left: 12px; + border-radius: 4px; +} + +.c2 { + background: #ffffff; + padding-top: 12px; + padding-right: 16px; + padding-bottom: 12px; + padding-left: 16px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + cursor: pointer; + cursor: pointer; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c4 > * { + margin-left: 0; + margin-right: 0; +} + +.c4 > * + * { + margin-left: 12px; +} + +.c1 { + height: 100%; + left: 0; + position: absolute; + opacity: 0; + top: 0; + width: 100%; +} + +.c1:hover, +.c1:focus { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c6 path { + fill: currentColor; +} + +.c9 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +
+
+
+