diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap deleted file mode 100644 index c3ce3c24f9..0000000000 --- a/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,369 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Upload | SettingsPage renders and matches the snapshot 1`] = ` -.c18 { - 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: 600; - color: #32324d; - font-size: 0.875rem; - line-height: 1.43; -} - -.c8 { - padding-right: 8px; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - cursor: pointer; - padding: 8px; - border-radius: 4px; - background: #ffffff; - border: 1px solid #dcdce4; - position: relative; - outline: none; -} - -.c5 svg { - height: 12px; - width: 12px; -} - -.c5 svg > g, -.c5 svg path { - fill: #ffffff; -} - -.c5[aria-disabled='true'] { - pointer-events: none; -} - -.c5:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; -} - -.c5:focus-visible { - outline: none; -} - -.c5:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; -} - -.c9 { - height: 100%; -} - -.c6 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 10px 16px; - background: #4945ff; - border: none; - border: 1px solid #4945ff; - background: #4945ff; -} - -.c6 .c7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c6 .c10 { - color: #ffffff; -} - -.c6[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c6[aria-disabled='true'] .c10 { - color: #666687; -} - -.c6[aria-disabled='true'] svg > g, -.c6[aria-disabled='true'] svg path { - fill: #666687; -} - -.c6[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c6[aria-disabled='true']:active .c10 { - color: #666687; -} - -.c6[aria-disabled='true']:active svg > g, -.c6[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c6:hover { - border: 1px solid #7b79ff; - background: #7b79ff; -} - -.c6:active { - border: 1px solid #4945ff; - background: #4945ff; -} - -.c14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: space-around; - -webkit-justify-content: space-around; - -ms-flex-pack: space-around; - justify-content: space-around; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c16 { - 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; -} - -.c17 { - -webkit-animation: gzYjWD 1s infinite linear; - animation: gzYjWD 1s infinite linear; -} - -.c15 { - height: 100vh; -} - -.c0 { - outline: none; -} - -.c1 { - background: #f6f6f9; - padding-top: 56px; - padding-right: 56px; - padding-bottom: 56px; - padding-left: 56px; -} - -.c13 { - padding-right: 56px; - padding-left: 56px; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.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 { - color: #32324d; - font-weight: 600; - font-size: 2rem; - line-height: 1.25; -} - -.c12 { - color: #666687; - font-size: 1rem; - line-height: 1.5; -} - -
-
-
-
-
-
-
-

- Media Library - Settings -

-
- -
-

- Configure the settings for the media library -

-
-
-
-
-
-
- Loading content. -
- -
-
-
-
-
-
-

-

-

-
-`; diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js index ccc434b46b..30d2cf0a8e 100644 --- a/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js +++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js @@ -37,10 +37,812 @@ describe('Upload | SettingsPage', () => { afterAll(() => server.close()); - it('renders and matches the snapshot', () => { - const { container } = render(App); + it('renders and matches the snapshot', async () => { + const { container, getByText } = render(App); - expect(container).toMatchSnapshot(); + await waitFor(() => + expect( + getByText('Automatically rotate image according to EXIF orientation tag') + ).toBeInTheDocument() + ); + + expect(container).toMatchInlineSnapshot(` + .c41 { + 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; + } + + .c18 { + background: #ffffff; + padding: 24px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c11 { + font-weight: 600; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; + } + + .c8 { + padding-right: 8px; + } + + .c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; + } + + .c5 svg { + height: 12px; + width: 12px; + } + + .c5 svg > g, + .c5 svg path { + fill: #ffffff; + } + + .c5[aria-disabled='true'] { + pointer-events: none; + } + + .c5:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; + } + + .c5:focus-visible { + outline: none; + } + + .c5:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; + } + + .c9 { + height: 100%; + } + + .c6 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 10px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; + } + + .c6 .c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c6 .c10 { + color: #ffffff; + } + + .c6[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c6[aria-disabled='true'] .c10 { + color: #666687; + } + + .c6[aria-disabled='true'] svg > g, + .c6[aria-disabled='true'] svg path { + fill: #666687; + } + + .c6[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c6[aria-disabled='true']:active .c10 { + color: #666687; + } + + .c6[aria-disabled='true']:active svg > g, + .c6[aria-disabled='true']:active svg path { + fill: #666687; + } + + .c6:hover { + border: 1px solid #7b79ff; + background: #7b79ff; + } + + .c6:active { + border: 1px solid #4945ff; + background: #4945ff; + } + + .c20 { + 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; + } + + .c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c17 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c19 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c19 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c19 > * + * { + margin-top: 16px; + } + + .c27 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; + } + + .c36 { + font-weight: 600; + color: #271fe0; + font-size: 0.75rem; + line-height: 1.33; + } + + .c38 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; + } + + .c40 { + font-weight: 600; + color: #b72b1a; + font-size: 0.75rem; + line-height: 1.33; + } + + .c30 { + background: #ffffff; + border-radius: 4px; + } + + .c32 { + background: #ffffff; + padding-right: 32px; + padding-left: 32px; + } + + .c34 { + background: #f0f0ff; + padding-right: 32px; + padding-left: 32px; + } + + .c39 { + background: #fcecea; + padding-right: 32px; + padding-left: 32px; + } + + .c26 { + 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; + } + + .c25 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c25 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c25 > * + * { + margin-top: 4px; + } + + .c29 { + 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; + } + + .c28 { + position: relative; + display: inline-block; + } + + .c31 { + height: 2.5rem; + border: 1px solid #dcdce4; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: hidden; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + } + + .c31:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; + } + + .c35 { + text-transform: uppercase; + position: relative; + z-index: 2; + } + + .c33 { + text-transform: uppercase; + border-right: 1px solid #dcdce4; + position: relative; + z-index: 2; + } + + .c37 { + position: absolute; + z-index: 1; + left: 4px; + top: 4px; + } + + .c24 { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + } + + .c21 { + color: #32324d; + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + } + + .c0 { + outline: none; + } + + .c22 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 24px; + } + + .c23 { + grid-column: span 6; + } + + .c1 { + background: #f6f6f9; + padding-top: 56px; + padding-right: 56px; + padding-bottom: 56px; + padding-left: 56px; + } + + .c13 { + padding-right: 56px; + padding-left: 56px; + } + + .c15 { + padding-bottom: 56px; + } + + .c14 { + display: grid; + grid-template-columns: 1fr; + } + + .c16 { + overflow-x: hidden; + } + + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .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 { + color: #32324d; + font-weight: 600; + font-size: 2rem; + line-height: 1.25; + } + + .c12 { + color: #666687; + font-size: 1rem; + line-height: 1.5; + } + + @media (max-width:68.75rem) { + .c23 { + grid-column: span 12; + } + } + + @media (max-width:34.375rem) { + .c23 { + grid-column: span; + } + } + +
+
+
+
+
+
+
+

+ Media Library - Settings +

+
+ +
+

+ Configure the settings for the media library +

+
+
+
+
+
+
+
+
+
+

+ Image +

+
+
+
+
+
+
+
+ +
+ +

+ It automatically generates multiple formats (large, medium, small) of the uploaded asset +

+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+ +
+ +

+ Automatically rotate image according to EXIF orientation tag +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+

+

+
+ `); }); it('should display the form correctly with the initial values', async () => {