From a6e64e3c608bf399c78ee78989a3d9f2821964d9 Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Mon, 30 Aug 2021 11:32:36 +0200
Subject: [PATCH] Add tests

Signed-off-by: soupette <cyril@strapi.io>
---
 .../admin/src/core/utils/axiosInstance.js     |   1 -
 .../pages/SettingsPage/SingleSignOn/index.js  |   4 +-
 .../SingleSignOn/tests/index.test.js          |   1 +
 .../admin/src/pages/SettingsPage/index.js     |  67 ++--
 .../tests/__snapshots__/index.test.js.snap    | 329 ++++++++++++++++++
 .../pages/SettingsPage/tests/index.test.js    |  64 ++++
 .../pages/SettingsPage/tests/reducer.test.js  |   2 +
 .../pages/SettingsPage/tests/utils/server.js  |  17 +
 .../upload/admin/src/utils/axiosInstance.js   |  23 ++
 packages/core/upload/admin/src/utils/index.js |   1 +
 .../components/FormModal/tests/index.test.js  |   3 +-
 .../admin/src/utils/axiosInstance.js          |   1 -
 12 files changed, 474 insertions(+), 39 deletions(-)
 create mode 100644 packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap
 create mode 100644 packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
 create mode 100644 packages/core/upload/admin/src/pages/SettingsPage/tests/utils/server.js
 create mode 100644 packages/core/upload/admin/src/utils/axiosInstance.js

diff --git a/packages/core/admin/admin/src/core/utils/axiosInstance.js b/packages/core/admin/admin/src/core/utils/axiosInstance.js
index a40732bd81..8229cfe9e7 100644
--- a/packages/core/admin/admin/src/core/utils/axiosInstance.js
+++ b/packages/core/admin/admin/src/core/utils/axiosInstance.js
@@ -3,7 +3,6 @@ import { auth } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
-  timeout: 1000,
 });
 
 instance.interceptors.request.use(
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js
index 048ae02591..63b2e31b04 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js
@@ -109,7 +109,7 @@ export const SingleSignOn = () => {
               <Stack size={12}>
                 <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
                   <Grid gap={4}>
-                    <GridItem col="6" xs="12">
+                    <GridItem col="6" m="6" s="12">
                       <ToggleCheckbox
                         aria-label="autoRegister"
                         data-testid="autoRegister"
@@ -140,7 +140,7 @@ export const SingleSignOn = () => {
                         })}
                       </ToggleCheckbox>
                     </GridItem>
-                    <GridItem col="6" xs="12">
+                    <GridItem col="6" m="6" s="12">
                       <Select
                         disabled={!canUpdate}
                         hint={formatMessage({
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
index 2ce1636411..82798e1513 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
@@ -250,6 +250,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
       }
 
       <main
+        aria-labelledby="title"
         class="c0"
         id="main-content"
         tabindex="-1"
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/index.js b/packages/core/upload/admin/src/pages/SettingsPage/index.js
index 5bd7d627f3..30829a86e3 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/index.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/index.js
@@ -1,13 +1,11 @@
 import React, { useEffect, useReducer, useRef } from 'react';
 import { Helmet } from 'react-helmet';
-import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl';
 import {
   CheckPagePermissions,
   LoadingIndicatorPage,
-  useNotification,
-  request,
   useFocusWhenNavigate,
+  useNotification,
   useOverlayBlocker,
 } from '@strapi/helper-plugin';
 import { CheckIcon } from '@strapi/icons';
@@ -25,49 +23,54 @@ import {
   ToggleCheckbox,
   H3,
 } from '@strapi/parts';
-import { getRequestUrl, getTrad } from '../../utils';
+import axios from 'axios';
+import isEqual from 'lodash/isEqual';
+import { axiosInstance, getRequestUrl, getTrad } from '../../utils';
 import init from './init';
 import reducer, { initialState } from './reducer';
 import pluginPermissions from '../../permissions';
 
 export const SettingsPage = () => {
   const { formatMessage } = useIntl();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const toggleNotification = useNotification();
+  useFocusWhenNavigate();
+
   const [{ initialData, isLoading, isSubmiting, modifiedData }, dispatch] = useReducer(
     reducer,
     initialState,
     init
   );
 
-  const { lockApp, unlockApp } = useOverlayBlocker();
-
   const isMounted = useRef(true);
-  const getDataRef = useRef();
-  useFocusWhenNavigate();
-  const toggleNotification = useNotification();
 
-  const abortController = new AbortController();
+  useEffect(() => {
+    const CancelToken = axios.CancelToken;
+    const source = CancelToken.source();
 
-  getDataRef.current = async () => {
-    try {
-      const { signal } = abortController;
-      const { data } = await request(getRequestUrl('settings', { method: 'GET', signal }));
+    const getData = async () => {
+      try {
+        const {
+          data: { data },
+        } = await axiosInstance.get(getRequestUrl('settings'), {
+          cancelToken: source.token,
+        });
 
-      if (isMounted.current) {
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
           data,
         });
+      } catch (err) {
+        console.error(err);
       }
-    } catch (err) {
-      console.error(err);
-    }
-  };
+    };
 
-  useEffect(() => {
-    getDataRef.current();
+    if (isMounted.current) {
+      getData();
+    }
 
     return () => {
-      abortController.abort();
+      source.cancel('Operation canceled by the user.');
       isMounted.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -87,16 +90,11 @@ export const SettingsPage = () => {
     dispatch({ type: 'ON_SUBMIT' });
 
     try {
-      await request(getRequestUrl('settings'), {
-        method: 'PUT',
-        body: modifiedData,
-      });
+      await axiosInstance.put(getRequestUrl('settings'), modifiedData);
 
-      if (isMounted.current) {
-        dispatch({
-          type: 'SUBMIT_SUCCEEDED',
-        });
-      }
+      dispatch({
+        type: 'SUBMIT_SUCCEEDED',
+      });
 
       toggleNotification({
         type: 'success',
@@ -137,6 +135,7 @@ export const SettingsPage = () => {
           primaryAction={
             <Button
               disabled={isSaveButtonDisabled}
+              data-testid="save-button"
               loading={isSubmiting}
               type="submit"
               startIcon={<CheckIcon />}
@@ -171,7 +170,7 @@ export const SettingsPage = () => {
                       </Box>
                     </Row>
                     <Grid gap={6}>
-                      <GridItem col="6" xs="12">
+                      <GridItem col="6" s="12">
                         <ToggleCheckbox
                           aria-label="responsiveDimensions"
                           data-testid="responsiveDimensions"
@@ -202,7 +201,7 @@ export const SettingsPage = () => {
                           })}
                         </ToggleCheckbox>
                       </GridItem>
-                      <GridItem col="6" xs="12">
+                      <GridItem col="6" s="12">
                         <ToggleCheckbox
                           aria-label="sizeOptimization"
                           data-testid="sizeOptimization"
@@ -228,7 +227,7 @@ export const SettingsPage = () => {
                           })}
                         </ToggleCheckbox>
                       </GridItem>
-                      <GridItem col="6" xs="12">
+                      <GridItem col="6" s="12">
                         <ToggleCheckbox
                           aria-label="autoOrientation"
                           data-testid="autoOrientation"
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
new file mode 100644
index 0000000000..35094bcf67
--- /dev/null
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap
@@ -0,0 +1,329 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Upload | SettingsPage renders and matches the snapshot 1`] = `
+.c5 {
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #32324d;
+}
+
+.c10 {
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #32324d;
+}
+
+.c11 {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #666687;
+}
+
+.c12 {
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.c2 {
+  background: #f6f6f9;
+  padding-top: 56px;
+  padding-right: 56px;
+  padding-bottom: 56px;
+  padding-left: 56px;
+}
+
+.c8 {
+  padding-right: 8px;
+}
+
+.c13 {
+  padding-right: 56px;
+  padding-left: 56px;
+}
+
+.c3 {
+  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;
+}
+
+.c4 {
+  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;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #dcdce4;
+}
+
+.c6 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c6 svg > g,
+.c6 svg path {
+  fill: #ffffff;
+}
+
+.c6[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c17 {
+  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;
+}
+
+.c7 {
+  padding: 8px 16px;
+  background: #4945ff;
+  border: none;
+  border: 1px solid #4945ff;
+  background: #4945ff;
+}
+
+.c7 .c1 {
+  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;
+}
+
+.c7 .c9 {
+  color: #ffffff;
+}
+
+.c7[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c7[aria-disabled='true'] .c9 {
+  color: #666687;
+}
+
+.c7[aria-disabled='true'] svg > g,
+.c7[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c7[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c7[aria-disabled='true']:active .c9 {
+  color: #666687;
+}
+
+.c7[aria-disabled='true']:active svg > g,
+.c7[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c7:hover {
+  border: 1px solid #7b79ff;
+  background: #7b79ff;
+}
+
+.c7:active {
+  border: 1px solid #4945ff;
+  background: #4945ff;
+}
+
+.c0 {
+  outline: none;
+}
+
+.c15 {
+  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;
+}
+
+.c16 {
+  -webkit-animation: gzYjWD 1s infinite linear;
+  animation: gzYjWD 1s infinite linear;
+}
+
+.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;
+}
+
+<div>
+  <main
+    aria-labelledby="title"
+    class="c0"
+    id="main-content"
+    tabindex="-1"
+  >
+    <form>
+      <div
+        class="c1 "
+        style="height: 0px;"
+      >
+        <div
+          class="c1 c2"
+          data-strapi-header="true"
+        >
+          <div
+            class="c1 c3"
+          >
+            <div
+              class="c1 c4"
+            >
+              <h1
+                class="c5"
+                id="title"
+              >
+                Media Library - Settings
+              </h1>
+            </div>
+            <button
+              aria-disabled="true"
+              class="c6 c7"
+              data-testid="save-button"
+              type="submit"
+            >
+              <div
+                aria-hidden="true"
+                class="c1 c8"
+              >
+                <svg
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20.727 2.97a.2.2 0 01.286 0l2.85 2.89a.2.2 0 010 .28L9.554 20.854a.2.2 0 01-.285 0l-9.13-9.243a.2.2 0 010-.281l2.85-2.892a.2.2 0 01.284 0l6.14 6.209L20.726 2.97z"
+                    fill="#212134"
+                  />
+                </svg>
+              </div>
+              <span
+                class="c9 c10"
+              >
+                Save
+              </span>
+            </button>
+          </div>
+          <p
+            class="c9 c11 c12"
+          >
+            Configure the settings for the media library
+          </p>
+        </div>
+      </div>
+      <div
+        class="c1 c13"
+      >
+        <div
+          class="c14"
+          data-testid="loader"
+        >
+          <div
+            aria-live="assertive"
+            role="alert"
+          >
+            <div
+              class="c15"
+            >
+              Loading content.
+            </div>
+            <img
+              aria-hidden="true"
+              class="c16"
+              src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+  </main>
+  <div
+    class="c17"
+  >
+    <p
+      aria-live="polite"
+      id="live-region-log"
+      role="log"
+    />
+    <p
+      aria-live="polite"
+      id="live-region-status"
+      role="status"
+    />
+    <p
+      aria-live="assertive"
+      id="live-region-alert"
+      role="alert"
+    />
+  </div>
+</div>
+`;
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
new file mode 100644
index 0000000000..517a0ec6dc
--- /dev/null
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/index.test.js
@@ -0,0 +1,64 @@
+/**
+ *
+ * Tests for SettingsPage
+ *
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { ThemeProvider, lightTheme } from '@strapi/parts';
+import { SettingsPage } from '../index';
+import server from './utils/server';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useNotification: jest.fn(),
+  useOverlayBlocker: () => ({ lockApp: jest.fn(), unlockApp: jest.fn() }),
+  useFocusWhenNavigate: jest.fn(),
+}));
+
+const App = (
+  <ThemeProvider theme={lightTheme}>
+    <IntlProvider locale="en" messages={{ en: {} }} textComponent="span">
+      <SettingsPage />
+    </IntlProvider>
+  </ThemeProvider>
+);
+
+describe('Upload | SettingsPage', () => {
+  beforeAll(() => server.listen());
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => server.resetHandlers());
+
+  afterAll(() => server.close());
+
+  it('renders and matches the snapshot', () => {
+    const { container } = render(App);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should display the form correctly with the initial values', async () => {
+    const { getAllByTestId } = render(App);
+
+    render(App);
+
+    await waitFor(() => {
+      const responsiveDimensions = getAllByTestId('responsiveDimensions');
+      const sizeOptimizations = getAllByTestId('sizeOptimization');
+      const autoOrientations = getAllByTestId('autoOrientation');
+      // const saveButtons = getAllByTestId('save-button');
+
+      expect(responsiveDimensions[0].checked).toBe(true);
+      expect(autoOrientations[0].checked).toBe(true);
+      expect(sizeOptimizations[0].checked).toBe(false);
+      // FIXME
+      // expect(saveButtons[0]).toBeDisabled();
+    });
+  });
+});
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/reducer.test.js b/packages/core/upload/admin/src/pages/SettingsPage/tests/reducer.test.js
index a372604359..981c39838f 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/tests/reducer.test.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/reducer.test.js
@@ -76,6 +76,7 @@ describe('MEDIA LIBRARY | pages | SettingsPage | reducer', () => {
           responsiveDimensions: true,
         },
         isLoading: false,
+        isSubmiting: true,
         modifiedData: {
           responsiveDimensions: false,
         },
@@ -83,6 +84,7 @@ describe('MEDIA LIBRARY | pages | SettingsPage | reducer', () => {
       const expected = {
         initialData: { responsiveDimensions: false },
         isLoading: false,
+        isSubmiting: false,
         modifiedData: { responsiveDimensions: false },
       };
 
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/utils/server.js b/packages/core/upload/admin/src/pages/SettingsPage/tests/utils/server.js
new file mode 100644
index 0000000000..9e231a74f3
--- /dev/null
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/utils/server.js
@@ -0,0 +1,17 @@
+import { setupServer } from 'msw/node';
+import { rest } from 'msw';
+
+const handlers = [
+  rest.get('*/settings', (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        data: { autoOrientation: true, responsiveDimensions: true, sizeOptimization: false },
+      })
+    );
+  }),
+];
+
+const server = setupServer(...handlers);
+
+export default server;
diff --git a/packages/core/upload/admin/src/utils/axiosInstance.js b/packages/core/upload/admin/src/utils/axiosInstance.js
new file mode 100644
index 0000000000..8229cfe9e7
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/axiosInstance.js
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { auth } from '@strapi/helper-plugin';
+
+const instance = axios.create({
+  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+});
+
+instance.interceptors.request.use(
+  async config => {
+    config.headers = {
+      Authorization: `Bearer ${auth.getToken()}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return config;
+  },
+  error => {
+    Promise.reject(error);
+  }
+);
+
+export default instance;
diff --git a/packages/core/upload/admin/src/utils/index.js b/packages/core/upload/admin/src/utils/index.js
index 0aaa1993bc..f1f63f28bd 100644
--- a/packages/core/upload/admin/src/utils/index.js
+++ b/packages/core/upload/admin/src/utils/index.js
@@ -1,3 +1,4 @@
+export { default as axiosInstance } from './axiosInstance';
 export { default as canDownloadFile } from './canDownloadFile';
 export { default as compactParams } from './compactParams';
 export { default as createFileToDownloadName } from './createFileToDownloadName';
diff --git a/packages/plugins/users-permissions/admin/src/components/FormModal/tests/index.test.js b/packages/plugins/users-permissions/admin/src/components/FormModal/tests/index.test.js
index d995955f44..90569d6392 100644
--- a/packages/plugins/users-permissions/admin/src/components/FormModal/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/components/FormModal/tests/index.test.js
@@ -26,6 +26,7 @@ const makeApp = (layout = { forms: [], schema: {} }, isOpen = false) => {
           onSubmit={jest.fn()}
           isSubmiting={false}
           initialData={{}}
+          providerToEditName="test"
         />
       </ThemeProvider>
     </IntlProvider>
@@ -83,7 +84,7 @@ describe('<FormModal />', () => {
                 intlLabel: { id: 'enabled', defaultMessage: 'Enabled' },
                 name: 'enabled',
                 type: 'text',
-                description: { id: 'test', description: 'test' },
+                description: { id: 'test', defaultMessage: 'test' },
                 size: 6,
               },
             ],
diff --git a/packages/plugins/users-permissions/admin/src/utils/axiosInstance.js b/packages/plugins/users-permissions/admin/src/utils/axiosInstance.js
index a40732bd81..8229cfe9e7 100644
--- a/packages/plugins/users-permissions/admin/src/utils/axiosInstance.js
+++ b/packages/plugins/users-permissions/admin/src/utils/axiosInstance.js
@@ -3,7 +3,6 @@ import { auth } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
-  timeout: 1000,
 });
 
 instance.interceptors.request.use(