Add tests

Signed-off-by: soupette <cyril@strapi.io>

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(

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({

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"

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 () => {
+    const getData = async () => {
       try {
-      const { signal } = abortController;
+        const {
-      const { data } = await request(getRequestUrl('settings', { method: 'GET', signal }));
+          data: { data },
+        } = await axiosInstance.get(getRequestUrl('settings'), {
+          cancelToken: source.token,
+        });
 
-      if (isMounted.current) {
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
           data,
         });
-      }
       } catch (err) {
         console.error(err);
       }
     };
 
-  useEffect(() => {
+    if (isMounted.current) {
-    getDataRef.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'), {
+      await axiosInstance.put(getRequestUrl('settings'), modifiedData);
-        method: 'PUT',
-        body: modifiedData,
-      });
 
-      if (isMounted.current) {
       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"

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();
+    });
+  });
+});

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 },
       };
 

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;

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;

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';

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,
               },
             ],

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(