From 3f78e246a4ef3b8dbd013700ecda940e4680e8d0 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 13 Apr 2022 11:28:50 +0200 Subject: [PATCH 1/4] tests added for from url flow --- .../tests/__snapshots__/index.test.js.snap | 2859 +++++++++++++++++ .../components/LogoInput/tests/index.test.js | 553 +--- .../LogoModalStepper/PendingLogoDialog.js | 6 +- 3 files changed, 2960 insertions(+), 458 deletions(-) create mode 100644 packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..1e023a6ad6 --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap @@ -0,0 +1,2859 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ApplicationsInfosPage || LogoInput from computer should render upload modal with from computer tab 1`] = ` + + .c19 { + 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; +} + +.c3 { + background: #f6f6f9; + padding: 8px; + border-radius: 4px; + border-color: #dcdce4; + border: 1px solid #dcdce4; +} + +.c4 { + position: relative; +} + +.c6 { + padding-right: 8px; + padding-left: 8px; + width: 100%; +} + +.c8 { + height: 124px; +} + +.c12 { + position: absolute; + bottom: 4px; + width: 100%; +} + +.c16 { + padding-top: 8px; + padding-right: 16px; + padding-left: 16px; +} + +.c1 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c17 { + color: #666687; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + line-height: 1.33; +} + +.c18 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; +} + +.c2 { + 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; +} + +.c9 { + 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: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-areas: 'startAction slides endAction'; +} + +.c7 { + grid-area: slides; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c0 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c0 > * + * { + margin-top: 4px; +} + +.c13 > * { + margin-left: 0; + margin-right: 0; +} + +.c13 > * + * { + margin-left: 4px; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c14 { + 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; +} + +.c14 svg { + height: 12px; + width: 12px; +} + +.c14 svg > g, +.c14 svg path { + fill: #ffffff; +} + +.c14[aria-disabled='true'] { + pointer-events: none; +} + +.c14: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; +} + +.c14:focus-visible { + outline: none; +} + +.c14:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c15 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + +.c15 svg > g, +.c15 svg path { + fill: #8e8ea9; +} + +.c15:hover svg > g, +.c15:hover svg path { + fill: #666687; +} + +.c15:active svg > g, +.c15:active svg path { + fill: #a5a5ba; +} + +.c15[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c15[aria-disabled='true'] svg path { + fill: #666687; +} + +.c11 { + max-width: 40%; + max-height: 40%; +} + +
+
+
+ +
+
+
+
+
+ Logo +
+
+
+ + + +
+
+
+ +
+ + logo.png + +
+ +
+
+
+

+ Change the admin panel logo (Max dimension: 750*750, Max file size: 100KB) +

+
+
+
+

+

+

+
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 600; + color: #ffffff; + font-size: 0.75rem; + line-height: 1.33; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +
+ +
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 600; + color: #ffffff; + font-size: 0.75rem; + line-height: 1.33; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +
+ +
+ .c9 { + padding-right: 40px; + padding-left: 40px; +} + +.c18 { + padding-top: 24px; + padding-right: 40px; + padding-bottom: 24px; + padding-left: 40px; +} + +.c24 { + padding-top: 12px; + padding-bottom: 20px; +} + +.c31 { + padding-top: 24px; +} + +.c1 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 2px 15px rgba(33,33,52,0.1); +} + +.c3 { + background: #f6f6f9; + padding-top: 16px; + padding-right: 20px; + padding-bottom: 16px; + padding-left: 20px; +} + +.c0 { + position: fixed; + z-index: 4; + inset: 0; + background: #32324d1F; + padding: 0 40px; + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c2 { + width: 51.875rem; +} + +.c5 { + 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; +} + +.c34 { + 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; +} + +.c7 { + 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; +} + +.c7 svg { + height: 12px; + width: 12px; +} + +.c7 svg > g, +.c7 svg path { + fill: #ffffff; +} + +.c7[aria-disabled='true'] { + pointer-events: none; +} + +.c7: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; +} + +.c7:focus-visible { + outline: none; +} + +.c7:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c8 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + +.c8 svg > g, +.c8 svg path { + fill: #8e8ea9; +} + +.c8:hover svg > g, +.c8:hover svg path { + fill: #666687; +} + +.c8:active svg > g, +.c8:active svg path { + fill: #a5a5ba; +} + +.c8[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c8[aria-disabled='true'] svg path { + fill: #666687; +} + +.c4 { + border-radius: 4px 4px 0 0; + border-bottom: 1px solid #eaeaef; +} + +.c33 { + border-radius: 0 0 4px 4px; + border-top: 1px solid #eaeaef; +} + +.c35 > * + * { + margin-left: 8px; +} + +.c6 { + font-weight: 600; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; +} + +.c25 { + color: #32324d; + font-weight: 500; + font-size: 1rem; + line-height: 1.25; +} + +.c32 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; +} + +.c13 { + color: #4945ff; + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c15 { + color: #666687; + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c11 { + padding: 16px; +} + +.c12 { + border-bottom: 2px solid #4945ff; +} + +.c14 { + border-bottom: 2px solid transparent; +} + +.c10[aria-disabled='true'] { + cursor: not-allowed; +} + +.c16 { + background: #eaeaef; +} + +.c17 { + height: 1px; + border: none; + margin: 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: 8px; +} + +.c20 { + background: #f6f6f9; + padding-top: 48px; + padding-bottom: 32px; + border-radius: 4px; + border-style: dashed; + border-width: 1px; + border-color: #c0c0cf; + position: relative; +} + +.c21 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c22 { + color: #4945ff; + width: 3.75rem; + height: 3.75rem; +} + +.c23 path { + fill: #4945ff; +} + +.c30 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c27 { + 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; +} + +.c27 svg { + height: 12px; + width: 12px; +} + +.c27 svg > g, +.c27 svg path { + fill: #ffffff; +} + +.c27[aria-disabled='true'] { + pointer-events: none; +} + +.c27: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; +} + +.c27:focus-visible { + outline: none; +} + +.c27:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c28 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c28 .sc-emDsmM { + 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; +} + +.c28 .c29 { + color: #ffffff; +} + +.c28[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c28[aria-disabled='true'] .c29 { + color: #666687; +} + +.c28[aria-disabled='true'] svg > g, +.c28[aria-disabled='true'] svg path { + fill: #666687; +} + +.c28[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c28[aria-disabled='true']:active .c29 { + color: #666687; +} + +.c28[aria-disabled='true']:active svg > g, +.c28[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c28:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c28:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c28 svg > g, +.c28 svg path { + fill: #ffffff; +} + +.c36 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #dcdce4; + background: #ffffff; +} + +.c36 .sc-emDsmM { + 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; +} + +.c36 .c29 { + color: #ffffff; +} + +.c36[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c36[aria-disabled='true'] .c29 { + color: #666687; +} + +.c36[aria-disabled='true'] svg > g, +.c36[aria-disabled='true'] svg path { + fill: #666687; +} + +.c36[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c36[aria-disabled='true']:active .c29 { + color: #666687; +} + +.c36[aria-disabled='true']:active svg > g, +.c36[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c36:hover { + background-color: #f6f6f9; +} + +.c36:active { + background-color: #eaeaef; +} + +.c36 .c29 { + color: #32324d; +} + +.c36 svg > g, +.c36 svg path { + fill: #32324d; +} + +.c26 { + opacity: 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; +} + +
+
+
+ +
+
+ +`; + +exports[`ApplicationsInfosPage || LogoInput from url should render upload modal with from url tab 1`] = ` + + .c19 { + 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; +} + +.c3 { + background: #f6f6f9; + padding: 8px; + border-radius: 4px; + border-color: #dcdce4; + border: 1px solid #dcdce4; +} + +.c4 { + position: relative; +} + +.c6 { + padding-right: 8px; + padding-left: 8px; + width: 100%; +} + +.c8 { + height: 124px; +} + +.c12 { + position: absolute; + bottom: 4px; + width: 100%; +} + +.c16 { + padding-top: 8px; + padding-right: 16px; + padding-left: 16px; +} + +.c1 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c17 { + color: #666687; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + line-height: 1.33; +} + +.c18 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; +} + +.c2 { + 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; +} + +.c9 { + 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: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-areas: 'startAction slides endAction'; +} + +.c7 { + grid-area: slides; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c0 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c0 > * + * { + margin-top: 4px; +} + +.c13 > * { + margin-left: 0; + margin-right: 0; +} + +.c13 > * + * { + margin-left: 4px; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c14 { + 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; +} + +.c14 svg { + height: 12px; + width: 12px; +} + +.c14 svg > g, +.c14 svg path { + fill: #ffffff; +} + +.c14[aria-disabled='true'] { + pointer-events: none; +} + +.c14: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; +} + +.c14:focus-visible { + outline: none; +} + +.c14:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c15 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + +.c15 svg > g, +.c15 svg path { + fill: #8e8ea9; +} + +.c15:hover svg > g, +.c15:hover svg path { + fill: #666687; +} + +.c15:active svg > g, +.c15:active svg path { + fill: #a5a5ba; +} + +.c15[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c15[aria-disabled='true'] svg path { + fill: #666687; +} + +.c11 { + max-width: 40%; + max-height: 40%; +} + +
+
+
+ +
+
+
+
+
+ Logo +
+
+
+ + + +
+
+
+ +
+ + logo.png + +
+ +
+
+
+

+ Change the admin panel logo (Max dimension: 750*750, Max file size: 100KB) +

+
+
+
+

+

+

+
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 600; + color: #ffffff; + font-size: 0.75rem; + line-height: 1.33; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +
+ +
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 600; + color: #ffffff; + font-size: 0.75rem; + line-height: 1.33; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +
+ +
+ .c9 { + padding-right: 40px; + padding-left: 40px; +} + +.c18 { + padding-top: 24px; + padding-right: 40px; + padding-bottom: 24px; + padding-left: 40px; +} + +.c1 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 2px 15px rgba(33,33,52,0.1); +} + +.c3 { + background: #f6f6f9; + padding-top: 16px; + padding-right: 20px; + padding-bottom: 16px; + padding-left: 20px; +} + +.c0 { + position: fixed; + z-index: 4; + inset: 0; + background: #32324d1F; + padding: 0 40px; + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c2 { + width: 51.875rem; +} + +.c5 { + 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; +} + +.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; +} + +.c7 { + 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; +} + +.c7 svg { + height: 12px; + width: 12px; +} + +.c7 svg > g, +.c7 svg path { + fill: #ffffff; +} + +.c7[aria-disabled='true'] { + pointer-events: none; +} + +.c7: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; +} + +.c7:focus-visible { + outline: none; +} + +.c7:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c8 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + +.c8 svg > g, +.c8 svg path { + fill: #8e8ea9; +} + +.c8:hover svg > g, +.c8:hover svg path { + fill: #666687; +} + +.c8:active svg > g, +.c8:active svg path { + fill: #a5a5ba; +} + +.c8[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c8[aria-disabled='true'] svg path { + fill: #666687; +} + +.c4 { + border-radius: 4px 4px 0 0; + border-bottom: 1px solid #eaeaef; +} + +.c25 { + border-radius: 0 0 4px 4px; + border-top: 1px solid #eaeaef; +} + +.c27 > * + * { + margin-left: 8px; +} + +.c6 { + font-weight: 600; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; +} + +.c15 { + color: #4945ff; + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c13 { + color: #666687; + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c11 { + padding: 16px; +} + +.c14 { + border-bottom: 2px solid #4945ff; +} + +.c12 { + border-bottom: 2px solid transparent; +} + +.c10[aria-disabled='true'] { + cursor: not-allowed; +} + +.c16 { + background: #eaeaef; +} + +.c17 { + height: 1px; + border: none; + margin: 0; +} + +.c31 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c28 { + 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; +} + +.c28 svg { + height: 12px; + width: 12px; +} + +.c28 svg > g, +.c28 svg path { + fill: #ffffff; +} + +.c28[aria-disabled='true'] { + pointer-events: none; +} + +.c28: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; +} + +.c28:focus-visible { + outline: none; +} + +.c28:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c32 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c32 .sc-emDsmM { + 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; +} + +.c32 .c30 { + color: #ffffff; +} + +.c32[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c32[aria-disabled='true'] .c30 { + color: #666687; +} + +.c32[aria-disabled='true'] svg > g, +.c32[aria-disabled='true'] svg path { + fill: #666687; +} + +.c32[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c32[aria-disabled='true']:active .c30 { + color: #666687; +} + +.c32[aria-disabled='true']:active svg > g, +.c32[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c32:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c32:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c32 svg > g, +.c32 svg path { + fill: #ffffff; +} + +.c29 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #dcdce4; + background: #ffffff; +} + +.c29 .sc-emDsmM { + 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; +} + +.c29 .c30 { + color: #ffffff; +} + +.c29[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c29[aria-disabled='true'] .c30 { + color: #666687; +} + +.c29[aria-disabled='true'] svg > g, +.c29[aria-disabled='true'] svg path { + fill: #666687; +} + +.c29[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c29[aria-disabled='true']:active .c30 { + color: #666687; +} + +.c29[aria-disabled='true']:active svg > g, +.c29[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c29:hover { + background-color: #f6f6f9; +} + +.c29:active { + background-color: #eaeaef; +} + +.c29 .c30 { + color: #32324d; +} + +.c29 svg > g, +.c29 svg path { + fill: #32324d; +} + +.c21 { + 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; +} + +.c22 { + 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; +} + +.c20 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c24 { + border: none; + border-radius: 4px; + padding-left: 16px; + padding-right: 16px; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + background: inherit; +} + +.c24::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c24::-moz-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c24:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c24::placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c24[aria-disabled='true'] { + color: inherit; +} + +.c24:focus { + outline: none; + box-shadow: none; +} + +.c23 { + border: 1px solid #dcdce4; + border-radius: 4px; + background: #ffffff; + height: 2.5rem; + 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; +} + +.c23:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.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: 4px; +} + +
+
+
+ +
+
+
+ +`; + +exports[`ApplicationsInfosPage || LogoInput logo input should match snapshot 1`] = ` +.c19 { + 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; +} + +.c3 { + background: #f6f6f9; + padding: 8px; + border-radius: 4px; + border-color: #dcdce4; + border: 1px solid #dcdce4; +} + +.c4 { + position: relative; +} + +.c6 { + padding-right: 8px; + padding-left: 8px; + width: 100%; +} + +.c8 { + height: 124px; +} + +.c12 { + position: absolute; + bottom: 4px; + width: 100%; +} + +.c16 { + padding-top: 8px; + padding-right: 16px; + padding-left: 16px; +} + +.c23 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c1 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c17 { + color: #666687; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + line-height: 1.33; +} + +.c18 { + color: #666687; + font-size: 0.75rem; + line-height: 1.33; +} + +.c25 { + font-weight: 600; + color: #ffffff; + font-size: 0.75rem; + line-height: 1.33; +} + +.c2 { + 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; +} + +.c9 { + 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: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c24 { + position: absolute; + z-index: 4; + display: none; +} + +.c5 { + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-areas: 'startAction slides endAction'; +} + +.c7 { + grid-area: slides; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c0 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c0 > * + * { + margin-top: 4px; +} + +.c13 > * { + margin-left: 0; + margin-right: 0; +} + +.c13 > * + * { + margin-left: 4px; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c20 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c22 { + font-weight: 600; + color: #ffffff; + font-size: 0.75rem; + line-height: 1.33; +} + +.c21 { + position: absolute; + z-index: 4; + display: none; +} + +.c14 { + 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; +} + +.c14 svg { + height: 12px; + width: 12px; +} + +.c14 svg > g, +.c14 svg path { + fill: #ffffff; +} + +.c14[aria-disabled='true'] { + pointer-events: none; +} + +.c14: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; +} + +.c14:focus-visible { + outline: none; +} + +.c14:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c15 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + +.c15 svg > g, +.c15 svg path { + fill: #8e8ea9; +} + +.c15:hover svg > g, +.c15:hover svg path { + fill: #666687; +} + +.c15:active svg > g, +.c15:active svg path { + fill: #a5a5ba; +} + +.c15[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c15[aria-disabled='true'] svg path { + fill: #666687; +} + +.c11 { + max-width: 40%; + max-height: 40%; +} + + +
+
+
+ +
+
+
+
+
+ Logo +
+
+
+ + + +
+
+
+ +
+ + logo.png + +
+ +
+
+
+

+ Change the admin panel logo (Max dimension: 750*750, Max file size: 100KB) +

+
+
+
+

+

+

+
+
+ +
+
+ +
+ +`; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js index ed58ba21c6..bdb00bf6f1 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js @@ -31,457 +31,21 @@ const render = props => ); describe('ApplicationsInfosPage || LogoInput', () => { + describe('logo input', () => { + it('should match snapshot', () => { + render(); + + expect(document.body).toMatchSnapshot(); + }); + }); + describe('from computer', () => { it('should render upload modal with from computer tab', () => { render(); + const changeLogoButton = document.querySelector('button'); + fireEvent.click(changeLogoButton); - expect(document.body).toMatchInlineSnapshot(` - .c19 { - 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; - } - - .c3 { - background: #f6f6f9; - padding: 8px; - border-radius: 4px; - border-color: #dcdce4; - border: 1px solid #dcdce4; - } - - .c4 { - position: relative; - } - - .c6 { - padding-right: 8px; - padding-left: 8px; - width: 100%; - } - - .c8 { - height: 124px; - } - - .c12 { - position: absolute; - bottom: 4px; - width: 100%; - } - - .c16 { - padding-top: 8px; - padding-right: 16px; - padding-left: 16px; - } - - .c23 { - background: #212134; - padding: 8px; - border-radius: 4px; - } - - .c1 { - font-weight: 600; - color: #32324d; - font-size: 0.75rem; - line-height: 1.33; - } - - .c17 { - color: #666687; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.75rem; - line-height: 1.33; - } - - .c18 { - color: #666687; - font-size: 0.75rem; - line-height: 1.33; - } - - .c25 { - font-weight: 600; - color: #ffffff; - font-size: 0.75rem; - line-height: 1.33; - } - - .c2 { - 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; - } - - .c9 { - 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: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c24 { - position: absolute; - z-index: 4; - display: none; - } - - .c5 { - display: grid; - grid-template-columns: auto 1fr auto; - grid-template-areas: 'startAction slides endAction'; - } - - .c7 { - grid-area: slides; - } - - .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - - .c0 > * { - margin-top: 0; - margin-bottom: 0; - } - - .c0 > * + * { - margin-top: 4px; - } - - .c13 > * { - margin-left: 0; - margin-right: 0; - } - - .c13 > * + * { - margin-left: 4px; - } - - .c10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } - - .c20 { - background: #212134; - padding: 8px; - border-radius: 4px; - } - - .c22 { - font-weight: 600; - color: #ffffff; - font-size: 0.75rem; - line-height: 1.33; - } - - .c21 { - position: absolute; - z-index: 4; - display: none; - } - - .c14 { - 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; - } - - .c14 svg { - height: 12px; - width: 12px; - } - - .c14 svg > g, - .c14 svg path { - fill: #ffffff; - } - - .c14[aria-disabled='true'] { - pointer-events: none; - } - - .c14: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; - } - - .c14:focus-visible { - outline: none; - } - - .c14:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; - } - - .c15 { - 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; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - height: 2rem; - width: 2rem; - } - - .c15 svg > g, - .c15 svg path { - fill: #8e8ea9; - } - - .c15:hover svg > g, - .c15:hover svg path { - fill: #666687; - } - - .c15:active svg > g, - .c15:active svg path { - fill: #a5a5ba; - } - - .c15[aria-disabled='true'] { - background-color: #eaeaef; - } - - .c15[aria-disabled='true'] svg path { - fill: #666687; - } - - .c11 { - max-width: 40%; - max-height: 40%; - } - - -
-
-
- -
-
-
-
-
- Logo -
-
-
- - - -
-
-
- -
- - logo.png - -
- -
-
-
-

- Change the admin panel logo (Max dimension: 750*750, Max file size: 100KB) -

-
-
-
-

-

-

-
-
- -
-
- -
- - `); + expect(document.body).toMatchSnapshot(); }); it('should show error message when uploading wrong file format', async () => { @@ -489,8 +53,6 @@ describe('ApplicationsInfosPage || LogoInput', () => { const changeLogoButton = document.querySelector('button'); fireEvent.click(changeLogoButton); - await waitFor(() => expect(screen.getByText('Upload logo')).toBeInTheDocument()); - const file = new File(['(⌐□_□)'], 'michka.gif', { type: 'image/gif' }); const fileInput = document.querySelector('[type="file"]'); @@ -515,8 +77,6 @@ describe('ApplicationsInfosPage || LogoInput', () => { const changeLogoButton = document.querySelector('button'); fireEvent.click(changeLogoButton); - await waitFor(() => expect(screen.getByText('Upload logo')).toBeInTheDocument()); - const file = new File(['(⌐□_□)'], 'michka.png', { type: 'image/png' }); const fileInput = document.querySelector('[type="file"]'); @@ -538,8 +98,6 @@ describe('ApplicationsInfosPage || LogoInput', () => { const changeLogoButton = document.querySelector('button'); fireEvent.click(changeLogoButton); - await waitFor(() => expect(screen.getByText('Upload logo')).toBeInTheDocument()); - const file = new File([new Blob(['1'.repeat(1024 * 1024 + 1)])], 'michka.png', { type: 'image/png', }); @@ -564,8 +122,6 @@ describe('ApplicationsInfosPage || LogoInput', () => { const changeLogoButton = document.querySelector('button'); fireEvent.click(changeLogoButton); - await waitFor(() => expect(screen.getByText('Upload logo')).toBeInTheDocument()); - const file = new File(['(⌐□_□)'], 'michka.png', { type: 'image/png' }); const fileInput = document.querySelector('[type="file"]'); @@ -582,8 +138,6 @@ describe('ApplicationsInfosPage || LogoInput', () => { const changeLogoButton = document.querySelector('button'); fireEvent.click(changeLogoButton); - await waitFor(() => expect(screen.getByText('Upload logo')).toBeInTheDocument()); - const file = new File(['(⌐□_□)'], 'michka.png', { type: 'image/png' }); const fileInput = document.querySelector('[type="file"]'); @@ -599,4 +153,89 @@ describe('ApplicationsInfosPage || LogoInput', () => { await waitFor(() => expect(screen.getByText('Upload logo')).toBeInTheDocument()); }); }); + + describe('from url', () => { + it('should render upload modal with from url tab', async () => { + render(); + const changeLogoButton = document.querySelector('button'); + fireEvent.click(changeLogoButton); + + fireEvent.click(screen.getByText('From url')); + + expect(document.body).toMatchSnapshot(); + }); + + it('should show error message when uploading wrong file format', async () => { + render(); + const changeLogoButton = document.querySelector('button'); + fireEvent.click(changeLogoButton); + fireEvent.click(screen.getByText('From url')); + + const textInput = document.querySelector('input[name="logo-url"]'); + + fireEvent.change(textInput, { + target: { value: 'https://thumbs.gfycat.com/AlertWarlikeBuzzard-size_restricted.gif' }, + }); + + fireEvent.click(screen.getByText('Next')); + + await waitFor(() => + expect( + screen.getByText('Wrong format uploaded (accepted formats only: jpeg, jpg, png, svg).') + ).toBeInTheDocument() + ); + }); + + it('should show error message when uploading unauthorized width/height', async () => { + render(); + const changeLogoButton = document.querySelector('button'); + fireEvent.click(changeLogoButton); + fireEvent.click(screen.getByText('From url')); + + const textInput = document.querySelector('input[name="logo-url"]'); + + fireEvent.change(textInput, { + target: { + value: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg', + }, + }); + + fireEvent.click(screen.getByText('Next')); + + await waitFor(() => + expect( + screen.getByText( + 'The file uploaded is too large (max dimension: 750*750, max file size: 100KB)' + ) + ).toBeInTheDocument() + ); + }); + + it('should show error message when uploading unauthorized size', async () => { + render(); + const changeLogoButton = document.querySelector('button'); + fireEvent.click(changeLogoButton); + fireEvent.click(screen.getByText('From url')); + + const textInput = document.querySelector('input[name="logo-url"]'); + + fireEvent.change(textInput, { + target: { + value: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg', + }, + }); + + fireEvent.click(screen.getByText('Next')); + + await waitFor(() => + expect( + screen.getByText( + 'The file uploaded is too large (max dimension: 750*750, max file size: 100KB)' + ) + ).toBeInTheDocument() + ); + }); + }); }); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js index 2e9f49fc47..1d312d8b2d 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js @@ -73,6 +73,10 @@ const PendingLogoDialog = ({ onClose, asset, prev, next, goTo, setLocalImage, on ); }; +PendingLogoDialog.defaultProps = { + next: null, +}; + PendingLogoDialog.propTypes = { goTo: PropTypes.func.isRequired, asset: PropTypes.shape({ @@ -82,7 +86,7 @@ PendingLogoDialog.propTypes = { height: PropTypes.number, ext: PropTypes.string, }).isRequired, - next: PropTypes.string.isRequired, + next: PropTypes.string, onClose: PropTypes.func.isRequired, onChangeLogo: PropTypes.func.isRequired, prev: PropTypes.string.isRequired, From a72a9f624bff7471205e2b53d81ee2e0e47e45fa Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 13 Apr 2022 12:11:58 +0200 Subject: [PATCH 2/4] added 2 tests + feedback fixes --- .../components/LogoInput/tests/index.test.js | 42 +++++++++++++++++++ .../LogoModalStepper/FromUrlForm.js | 2 +- .../ApplicationInfosPage/utils/urlToFile.js | 2 +- 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js index bdb00bf6f1..b461696518 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/index.test.js @@ -237,5 +237,47 @@ describe('ApplicationsInfosPage || LogoInput', () => { ).toBeInTheDocument() ); }); + + it('should accept upload and lead user to next modal', async () => { + render(); + const changeLogoButton = document.querySelector('button'); + fireEvent.click(changeLogoButton); + fireEvent.click(screen.getByText('From url')); + + const textInput = document.querySelector('input[name="logo-url"]'); + + fireEvent.change(textInput, { + target: { + value: 'https://cdn.pixabay.com/photo/2022/01/18/07/38/cat-6946505__340.jpg', + }, + }); + + fireEvent.click(screen.getByText('Next')); + + await waitFor(() => expect(screen.getByText('Pending logo')).toBeInTheDocument()); + }); + + it('should let user choose another logo', async () => { + render(); + const changeLogoButton = document.querySelector('button'); + fireEvent.click(changeLogoButton); + fireEvent.click(screen.getByText('From url')); + + const textInput = document.querySelector('input[name="logo-url"]'); + + fireEvent.change(textInput, { + target: { + value: 'https://cdn.pixabay.com/photo/2022/01/18/07/38/cat-6946505__340.jpg', + }, + }); + + fireEvent.click(screen.getByText('Next')); + + await waitFor(() => expect(screen.getByText('Pending logo')).toBeInTheDocument()); + + fireEvent.click(screen.getByText('Choose another logo')); + + await waitFor(() => expect(screen.getByText('Upload logo')).toBeInTheDocument()); + }); }); }); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js index 809630fd50..4ba683ee85 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js @@ -12,7 +12,7 @@ import { SIZE, DIMENSION } from '../../utils/constants'; const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => { const { formatMessage } = useIntl(); const [logoUrl, setLogoUrl] = useState(''); - const [error, setError] = useState(undefined); + const [error, setError] = useState(null); const handleChange = e => { setLogoUrl(e.target.value); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js index 21df1e7851..98dac19542 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js @@ -2,7 +2,7 @@ import axios from 'axios'; export const urlToFile = async url => { try { - const res = await axios.get(url, { responseType: 'blob', timeout: 60000 }); + const res = await axios.get(url, { responseType: 'blob', timeout: 30000 }); const loadedFile = new File([res.data], res.config.url, { type: res.headers['content-type'], }); From 78bc49c4af582f8e047b1d672bacdf4deb8ad6af Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 13 Apr 2022 14:49:53 +0200 Subject: [PATCH 3/4] updated urlToFile timeout --- .../SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js index 98dac19542..612dba1927 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js @@ -2,7 +2,7 @@ import axios from 'axios'; export const urlToFile = async url => { try { - const res = await axios.get(url, { responseType: 'blob', timeout: 30000 }); + const res = await axios.get(url, { responseType: 'blob', timeout: 8000 }); const loadedFile = new File([res.data], res.config.url, { type: res.headers['content-type'], }); From fa657d15730562be292ece0ae3796061f97661d1 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 14 Apr 2022 11:41:14 +0200 Subject: [PATCH 4/4] removed unnecessary fragment FromUrlForm --- .../LogoModalStepper/FromUrlForm.js | 58 +++++++++---------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js index 4ba683ee85..1642ab06f5 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js @@ -36,37 +36,35 @@ const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => { }; return ( - <> -
- - - - - {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} - - } - endActions={ - - } + + + - - + + + {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} + + } + endActions={ + + } + /> + ); };