#1205 - fix unit tests for react 18 & OG compatibility changes

ral-facilities · Apr 26, 2023 · d139560 · d139560
1 parent b1c03f9
commit d139560
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 36 deletions.
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -27,8 +27,12 @@ describe('App', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     const root = createRoot(div);
-    root.render(<App useSuspense={false} />);
-    root.unmount();
+    act(() => {
+      root.render(<App useSuspense={false} />);
+    });
+    act(() => {
+      root.unmount();
+    });
   });
 
   it('should show preloader when react-i18next is not ready', () => {
@@ -59,11 +63,14 @@ describe('App', () => {
         order: 0,
       },
     };
-    document.dispatchEvent(
-      new CustomEvent('scigateway', {
-        detail: registerRouteAction,
-      })
-    );
+
+    act(() => {
+      document.dispatchEvent(
+        new CustomEvent('scigateway', {
+          detail: registerRouteAction,
+        })
+      );
+    });
 
     // go to plugin page
     await fireEvent.click(screen.getByRole('link', { name: 'Test plugin' }));
@@ -81,7 +88,9 @@ describe('App', () => {
       })
     );
 
-    jest.runOnlyPendingTimers();
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
 
     await act(async () => {
       await flushPromises();

diff --git a/src/__snapshots__/example.component.test.tsx.snap b/src/__snapshots__/example.component.test.tsx.snap
@@ -3,7 +3,9 @@
 exports[`Example component renders correctly 1`] = `
 <DocumentFragment>
   <div>
-    test notification
+    <div>
+      warning test notification
+    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/src/__snapshots__/pageContainer.test.tsx.snap b/src/__snapshots__/pageContainer.test.tsx.snap
@@ -170,7 +170,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
       class="MuiDrawer-root MuiDrawer-docked css-ak80xd-MuiDrawer-docked"
     >
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-8bwi45-MuiPaper-root-MuiDrawer-paper"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-1b4jzf5-MuiPaper-root-MuiDrawer-paper"
         style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
       >
         <div
@@ -192,7 +192,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
       class="react-joyride"
     />
     <div
-      class="css-9peh1a"
+      class="css-1sr0u83"
     >
       <div
         id="dg-homepage"
@@ -446,7 +446,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="css-1co1cbj"
+      class="css-1j8dxwd"
     >
       <div
         style="text-align: left; font-weight: bold; font-size: 14px; text-indent: 16px; display: inline-block;"

diff --git a/src/authentication/jwtAuthProvider.test.tsx b/src/authentication/jwtAuthProvider.test.tsx
@@ -56,9 +56,7 @@ describe('jwt auth provider', () => {
   it('should call the api to authenticate', async () => {
     (mockAxios.post as jest.Mock).mockImplementation(() =>
       Promise.resolve({
-        data: {
-          token: testToken,
-        },
+        data: testToken,
       })
     );
 
@@ -99,12 +97,9 @@ describe('jwt auth provider', () => {
 
     await jwtAuthProvider.verifyLogIn();
 
-    expect(mockAxios.post).toBeCalledWith(
-      'http://localhost:8000/api/jwt/checkToken',
-      {
-        token: testToken,
-      }
-    );
+    expect(mockAxios.post).toBeCalledWith('http://localhost:8000/verify', {
+      token: testToken,
+    });
   });
 
   it('should call refresh if the access token has expired', async () => {
@@ -137,7 +132,7 @@ describe('jwt auth provider', () => {
     await jwtAuthProvider.refresh();
 
     expect(mockAxios.post).toHaveBeenCalledWith(
-      'http://localhost:8000/api/jwt/refresh',
+      'http://localhost:8000/refresh',
       {
         token: testToken,
       }

diff --git a/src/example.component.test.tsx b/src/example.component.test.tsx
@@ -18,7 +18,9 @@ describe('Example component', () => {
 
   it('renders correctly', () => {
     // update the notification
-    state.scigateway.notifications = ['test notification'];
+    state.scigateway.notifications = [
+      { severity: 'warning', message: 'test notification' },
+    ];
 
     const { asFragment } = render(
       <ExampleComponent store={mockStore(state)} />

diff --git a/src/footer/__snapshots__/footer.component.test.tsx.snap b/src/footer/__snapshots__/footer.component.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Footer component footer renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-1co1cbj"
+    class="css-1j8dxwd"
   >
     <div
       style="text-align: left; font-weight: bold; font-size: 14px; text-indent: 16px; display: inline-block;"

diff --git a/src/navigationDrawer/__snapshots__/navigationDrawer.component.test.tsx.snap b/src/navigationDrawer/__snapshots__/navigationDrawer.component.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Navigation drawer component Navigation drawer renders correctly when cl
     class="MuiDrawer-root MuiDrawer-docked css-ak80xd-MuiDrawer-docked"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-8bwi45-MuiPaper-root-MuiDrawer-paper"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-1b4jzf5-MuiPaper-root-MuiDrawer-paper"
       style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
     >
       <div
@@ -33,7 +33,7 @@ exports[`Navigation drawer component Navigation drawer renders correctly when op
     class="MuiDrawer-root MuiDrawer-docked css-ak80xd-MuiDrawer-docked"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-8bwi45-MuiPaper-root-MuiDrawer-paper"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-1b4jzf5-MuiPaper-root-MuiDrawer-paper"
     >
       <div
         class="MuiBox-root css-1pvs5pb"

diff --git a/src/routing/__snapshots__/routing.component.test.tsx.snap b/src/routing/__snapshots__/routing.component.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Routing component redirects to the homepage if navigating to login page while logged in 1`] = `
 <DocumentFragment>
   <div
-    class="css-9peh1a"
+    class="css-1sr0u83"
   >
     <div
       id="dg-homepage"
@@ -262,7 +262,7 @@ exports[`Routing component redirects to the homepage if navigating to login page
 exports[`Routing component renders a route for a plugin when site is under maintenance and user is admin 1`] = `
 <DocumentFragment>
   <div
-    class="css-9peh1a"
+    class="css-1sr0u83"
   >
     <div>
       <div
@@ -278,7 +278,7 @@ exports[`Routing component renders a route for a plugin when site is under maint
 exports[`Routing component renders a route for admin page 1`] = `
 <DocumentFragment>
   <div
-    class="css-9peh1a"
+    class="css-1sr0u83"
   >
     <div>
       Mocked AdminPage
@@ -290,7 +290,7 @@ exports[`Routing component renders a route for admin page 1`] = `
 exports[`Routing component renders a route for maintenance page when site is under maintenance and user is not admin 1`] = `
 <DocumentFragment>
   <div
-    class="css-9peh1a"
+    class="css-1sr0u83"
   >
     Mocked MaintenancePage
   </div>
@@ -300,7 +300,7 @@ exports[`Routing component renders a route for maintenance page when site is und
 exports[`Routing component renders component with no plugin routes 1`] = `
 <DocumentFragment>
   <div
-    class="css-9peh1a"
+    class="css-1sr0u83"
   >
     <div
       id="dg-homepage"
@@ -559,7 +559,7 @@ exports[`Routing component renders component with no plugin routes 1`] = `
 exports[`Routing component renders component with plugins 1`] = `
 <DocumentFragment>
   <div
-    class="css-9peh1a"
+    class="css-1sr0u83"
   >
     <div
       id="dg-homepage"

diff --git a/src/routing/authorisedRoute.component.test.tsx b/src/routing/authorisedRoute.component.test.tsx
@@ -17,7 +17,13 @@ import {
 } from '../state/actions/scigateway.actions';
 import { flushPromises } from '../setupTests';
 import { Provider } from 'react-redux';
-import { render, waitFor, screen, RenderResult } from '@testing-library/react';
+import {
+  act,
+  render,
+  waitFor,
+  screen,
+  RenderResult,
+} from '@testing-library/react';
 import {
   createStore,
   combineReducers,
@@ -273,15 +279,21 @@ describe('AuthorisedRoute component', () => {
         componentToProtect: ComponentToProtect,
       });
 
-    dispatch(siteLoadingUpdate(false));
+    act(() => {
+      dispatch(siteLoadingUpdate(false));
+    });
 
     await waitFor(() =>
       expect(getDispatchedActions()).toContainEqual(requestPluginRerender())
     );
     clearDispatchedActions();
 
-    dispatch({ type: SignOutType });
-    dispatch(verifyUsernameAndPassword('username', 'password'));
+    act(() => {
+      dispatch({ type: SignOutType });
+    });
+    act(() => {
+      dispatch(verifyUsernameAndPassword('username', 'password'));
+    });
 
     await waitFor(() =>
       expect(getDispatchedActions()).toContainEqual(requestPluginRerender())