fix(tests): use mocked msal instance per component and not globally

SimonGolms · Nov 11, 2022 · 5deeb8a · 5deeb8a
1 parent bf87c22
commit 5deeb8a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 29 deletions.
diff --git a/playwright/index.ts b/playwright/index.ts
@@ -1,5 +1,4 @@
 import { setupIonicReact } from '@ionic/react';
-import { setupMsalMock } from '../src/utils/test/setupMsalMock';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -21,5 +20,3 @@ import '@ionic/react/css/display.css';
 import '../src/theme/index.css';
 
 setupIonicReact();
-
-setupMsalMock();
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -3,16 +3,13 @@ import { App } from './App';
 import { AppProviders } from './AppProviders';
 
 test.describe('App', () => {
-  test('renders', async ({ mount }, testInfo) => {
-    // Extend timeout for this test by 30 seconds.
-    test.setTimeout(testInfo.timeout + 30000);
-
+  test('renders', async ({ mount }) => {
     const component = await mount(
       <AppProviders>
         <App />
       </AppProviders>
     );
 
-    await expect(component).toContainText('Ready to create an app?');
+    await expect(component).toContainText('Welcome');
   });
 });
diff --git a/src/components/Greeter/Greeter.test.tsx b/src/components/Greeter/Greeter.test.tsx
@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/experimental-ct-react';
 import { BrowserRouter } from 'react-router-dom';
 import { AppProviders } from '../../AppProviders';
 import { MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME } from '../../utils/test/api.me.mock';
+import { MsalMock } from '../../utils/test/MsalMock';
 import { Greeter } from './Greeter';
 
 test.beforeEach(({ page }) => {
@@ -18,11 +19,13 @@ test.describe('Greeter', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(
       <BrowserRouter>
-        <AppProviders>
-          <div>
-            <Greeter />
-          </div>
-        </AppProviders>
+        <MsalMock>
+          <AppProviders>
+            <div>
+              <Greeter />
+            </div>
+          </AppProviders>
+        </MsalMock>
       </BrowserRouter>
     );
 
@@ -36,11 +39,13 @@ test.describe('Greeter', () => {
 
     const component = await mount(
       <BrowserRouter>
-        <AppProviders>
-          <div>
-            <Greeter />
-          </div>
-        </AppProviders>
+        <MsalMock>
+          <AppProviders>
+            <div>
+              <Greeter />
+            </div>
+          </AppProviders>
+        </MsalMock>
       </BrowserRouter>
     );
 
@@ -50,11 +55,13 @@ test.describe('Greeter', () => {
   test('renders with defined hour', async ({ mount }) => {
     const component = await mount(
       <BrowserRouter>
-        <AppProviders>
-          <div>
-            <Greeter hour={18} />
-          </div>
-        </AppProviders>
+        <MsalMock>
+          <AppProviders>
+            <div>
+              <Greeter hour={18} />
+            </div>
+          </AppProviders>
+        </MsalMock>
       </BrowserRouter>
     );
 

diff --git a/src/pages/ProtectedPages.test.tsx b/src/pages/ProtectedPages.test.tsx
@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/experimental-ct-react';
 import { BrowserRouter } from 'react-router-dom';
 import { AppProviders } from '../AppProviders';
 import { MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME } from '../utils/test/api.me.mock';
+import { MsalMock } from '../utils/test/MsalMock';
 import { ProtectedPages } from './ProtectedPages';
 
 test.beforeEach(async ({ page }) => {
@@ -18,9 +19,11 @@ test.describe('ProtectedPages', () => {
   test('renders', async ({ mount }) => {
     const component = await mount(
       <BrowserRouter>
-        <AppProviders>
-          <ProtectedPages />
-        </AppProviders>
+        <MsalMock>
+          <AppProviders>
+            <ProtectedPages />
+          </AppProviders>
+        </MsalMock>
       </BrowserRouter>
     );
 

diff --git a/src/utils/test/setupMsalMock.ts → src/utils/test/MsalMock.tsx b/src/utils/test/setupMsalMock.ts → src/utils/test/MsalMock.tsx
@@ -27,10 +27,13 @@ const loadTokenOptions: LoadTokenOptions = {
   extendedExpiresOn: 6599,
 };
 
-export const setupMsalMock = () => {
+export const MsalMock = ({ children }: TProps) => {
   msalInstance.getTokenCache().loadExternalTokens(silentRequest, serverResponse, loadTokenOptions);
-
   const accounts = msalInstance.getAllAccounts();
-
   msalInstance.setActiveAccount(accounts[0]);
+  return <>{children}</>;
+};
+
+type TProps = {
+  children: React.ReactNode;
 };