add render app to tests

Author: salman90

2-Authorization-I/1-call-graph/SPA/package-lock.json

@@ -1,42 +1,44 @@
 {
-  "name": "ms-identity-react-c2s1",
-  "version": "0.1.0",
-  "description": "A React single-page application using MSAL React to call the Microsoft Graph API",
-  "dependencies": {
-    "@azure/msal-browser": "^2.31.0",
-    "@azure/msal-react": "^1.4.10",
-    "@microsoft/microsoft-graph-client": "^3.0.2",
-    "bootstrap": "^5.1.3",
-    "jquery": "^3.5.1",
-    "popper.js": "^1.16.1",
-    "react": "^18.1.0",
-    "react-bootstrap": "^2.4.0",
-    "react-dom": "^18.1.0",
-    "react-icons": "^4.4.0",
-    "react-router-dom": "^6.3.0"
-  },
-  "devDependencies": {
-    "react-scripts": "^5.0.1"
-  },
-  "overrides": {
-    "autoprefixer": "10.4.5"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+    "name": "ms-identity-react-c2s1",
+    "version": "0.1.0",
+    "description": "A React single-page application using MSAL React to call the Microsoft Graph API",
+    "dependencies": {
+        "@azure/msal-browser": "^2.31.0",
+        "@azure/msal-react": "^1.4.10",
+        "@microsoft/microsoft-graph-client": "^3.0.2",
+        "bootstrap": "^5.1.3",
+        "jquery": "^3.5.1",
+        "popper.js": "^1.16.1",
+        "react": "^18.1.0",
+        "react-bootstrap": "^2.4.0",
+        "react-dom": "^18.1.0",
+        "react-icons": "^4.4.0",
+        "react-router-dom": "^6.3.0"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "react-scripts": "^5.0.1"
+    },
+    "overrides": {
+        "autoprefixer": "10.4.5"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }

2-Authorization-I/1-call-graph/SPA/package.json

@@ -25,7 +25,7 @@ const Pages = () => {
  * PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
  */
-export const App = ({ instance }) => {
+const App = ({ instance }) => {
     return (
         <MsalProvider instance={instance}>
             <PageLayout>
@@ -34,3 +34,5 @@ export const App = ({ instance }) => {
         </MsalProvider>
     );
 };
+
+export default App;

2-Authorization-I/1-call-graph/SPA/src/App.jsx

@@ -4,7 +4,7 @@
  */
 
 import { LogLevel } from "@azure/msal-browser";
-
+import { PublicClientApplication } from "@azure/msal-browser"; 
 /**
  * Configuration object to be passed to MSAL instance on creation.
  * For a full list of MSAL.js configuration parameters, visit:
@@ -75,3 +75,10 @@ export const protectedResources = {
         scopes: ['Contacts.Read'],
     },
 };
+
+/**
+ * MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
+ * For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
+ */
+global.crypto = require('crypto');
+export const msalInstance = new PublicClientApplication(msalConfig);

2-Authorization-I/1-call-graph/SPA/src/authConfig.js

@@ -3,7 +3,7 @@
  * Licensed under the MIT License.
  */
 
-import { msalInstance } from './index';
+import { msalInstance } from './authConfig';
 import { msalConfig } from '../src/authConfig';
 import { addClaimsToStorage } from './utils/storageUtils';
 import { parseChallenges } from './utils/claimUtils';

2-Authorization-I/1-call-graph/SPA/src/fetch.js

@@ -1,23 +1,17 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { PublicClientApplication, EventType } from '@azure/msal-browser';
+import { EventType } from '@azure/msal-browser';
 import { BrowserRouter } from 'react-router-dom';
 
-import { App } from './App.jsx';
-import { msalConfig } from './authConfig';
+import App from './App.jsx';
+import { msalInstance } from './authConfig';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/index.css';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
 
-/**
- * MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
- * For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
- */
-export const msalInstance = new PublicClientApplication(msalConfig);
-
 // Account selection logic is app dependent. Adjust as needed for different use cases.
 if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
     msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);

2-Authorization-I/1-call-graph/SPA/src/index.js

@@ -1,4 +1,8 @@
-import { PublicClientApplication } from "@azure/msal-browser";
+import '@testing-library/jest-dom';
+import { PublicClientApplication } from '@azure/msal-browser';
+import { render, screen, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import  App   from './App';
 
 describe('Sanitize configuration object', () => {
     beforeAll(() => {
@@ -21,7 +25,7 @@ describe('Sanitize configuration object', () => {
 
     it('should not contain tenant id', () => {
         const regexGuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-        expect(regexGuid.test(msalConfig.auth.authority.split(".com/")[1])).toBe(false);
+        expect(regexGuid.test(msalConfig.auth.authority.split('.com/')[1])).toBe(false);
     });
 
     it('should define a redirect uri', () => {
@@ -30,15 +34,29 @@ describe('Sanitize configuration object', () => {
 });
 
 describe('Ensure that the msal instantiates', () => {
-    beforeAll(() => {
-        global.crypto = require('crypto');
+    let handleRedirectSpy;
+    let pca;
+    beforeEach(() => {
         global.msalConfig = require('./authConfig.js').msalConfig;
-        global.msalInstance = new PublicClientApplication(msalConfig);
+        pca = new PublicClientApplication(msalConfig);
+         handleRedirectSpy = jest.spyOn(pca, 'handleRedirectPromise');
+
     });
 
     it('should instantiate msal', () => {
-        expect(msalInstance).toBeDefined();
-        expect(msalInstance).toBeInstanceOf(PublicClientApplication);
-        
+        expect(pca).toBeDefined();
+        expect(pca).toBeInstanceOf(PublicClientApplication);
     });
-});
+
+    it('should render the app without crashing', async () => {
+        render(
+            <BrowserRouter>
+                <App instance={pca} />
+            </BrowserRouter>
+        );
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(
+            await screen.findByText('Welcome to the Microsoft Authentication Library For React Tutorial')
+        ).toBeInTheDocument();
+    });
+});