add test to make sure updateProjectSettings is called

packages/core/admin/admin/src/components/ConfigurationsProvider/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useCallback, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { ConfigurationsContext } from '../../contexts';
 import reducer, { initialState } from './reducer';
@@ -12,17 +12,18 @@ const ConfigurationsProvider = ({
 }) => {
   const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState);
 
-  const updateProjectSettings = ({ menuLogo, authLogo }) => {
-    return dispatch({
-      type: 'UPDATE_PROJECT_SETTINGS',
-      values: {
-        menuLogo: menuLogo || defaultMenuLogo,
-        authLogo: authLogo || defaultAuthLogo,
-      },
-    });
-  };
-
-  const updateProjectSettingsRef = useRef(updateProjectSettings);
+  const updateProjectSettings = useCallback(
+    ({ menuLogo, authLogo }) => {
+      return dispatch({
+        type: 'UPDATE_PROJECT_SETTINGS',
+        values: {
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        },
+      });
+    },
+    [defaultAuthLogo, defaultMenuLogo]
+  );
 
   const configurationValue = useMemo(() => {
     return {
@@ -30,7 +31,7 @@ const ConfigurationsProvider = ({
         menu: { custom: menuLogo, default: defaultMenuLogo },
         auth: { custom: authLogo, default: defaultAuthLogo },
       },
-      updateProjectSettings: updateProjectSettingsRef.current,
+      updateProjectSettings,
       showReleaseNotification,
       showTutorials,
     };
@@ -39,6 +40,7 @@ const ConfigurationsProvider = ({
     defaultMenuLogo,
     authLogo,
     defaultAuthLogo,
+    updateProjectSettings,
     showReleaseNotification,
     showTutorials,
   ]);

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { QueryClientProvider, QueryClient } from 'react-query';
 import { IntlProvider } from 'react-intl';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
@@ -8,12 +8,14 @@ import ApplicationInfosPage from '../index';
 import { axiosInstance } from '../../../../../core/utils';
 import server from './server';
 
+const updateProjectSettingsSpy = jest.fn();
+
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   // eslint-disable-next-line
   CheckPermissions: ({ children }) => <div>{children}</div>,
   useAppInfos: jest.fn(() => ({ shouldUpdateStrapi: false, latestStrapiReleaseTag: 'v3.6.8' })),
-  useNotification: jest.fn(),
+  useNotification: jest.fn(() => jest.fn()),
   useRBAC: jest.fn(() => ({ allowedActions: { canRead: true, canUpdate: true } })),
 }));
 jest.mock('../../../../../hooks', () => ({
@@ -22,6 +24,7 @@ jest.mock('../../../../../hooks', () => ({
       menu: { custom: 'customMenuLogo.png', default: 'defaultMenuLogo.png' },
       auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
     },
+    updateProjectSettings: updateProjectSettingsSpy,
   })),
 }));
 
@@ -57,6 +60,7 @@ describe('Application page', () => {
 
   afterEach(() => {
     server.resetHandlers();
+    jest.restoreAllMocks();
   });
 
   afterAll(() => server.close());
@@ -125,4 +129,11 @@ describe('Application page', () => {
       expect(queryByText('Save')).not.toBeInTheDocument();
     });
   });
+
+  it('should update project settings on save', async () => {
+    const { getByRole } = render(App);
+
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+    await waitFor(() => expect(updateProjectSettingsSpy).toHaveBeenCalledTimes(1));
+  });
 });

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/server.js

@@ -18,6 +18,22 @@ const handlers = [
       })
     );
   }),
+  rest.post('*/project-settings', (req, res, ctx) => {
+    return res(
+      ctx.delay(100),
+      ctx.status(200),
+      ctx.json({
+        menuLogo: {
+          ext: '.svg',
+          height: 256,
+          name: 'michka.svg',
+          size: 1.3,
+          url: '/uploads/michka.svg',
+          width: 256,
+        },
+      })
+    );
+  }),
 ];
 
 const server = setupServer(...handlers);