First unit tests

lib/msal-react/jest.config.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+module.exports = {
+    globals: {
+        crypto: require("crypto")
+    }
+};

lib/msal-react/package.json

@@ -48,10 +48,15 @@
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.0",
+    "@types/jest": "^26.0.15",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
+    "@types/testing-library__jest-dom": "^5.9.5",
     "babel-loader": "^8.1.0",
     "husky": "^4.2.5",
+    "jest": "^26.6.1",
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",

lib/msal-react/test/TestConstants.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { AccountInfo } from "@azure/msal-browser";
+
+export const TEST_CONFIG = {
+    MSAL_CLIENT_ID: "0813e1d1-ad72-46a9-8665-399bba48c201"
+};
+
+export const TEST_DATA_CLIENT_INFO = {
+    TEST_UID: "123-test-uid",
+    TEST_UID_ENCODED: "MTIzLXRlc3QtdWlk",
+    TEST_UTID: "456-test-utid",
+    TEST_UTID_ENCODED: "NDU2LXRlc3QtdXRpZA==",
+    TEST_UTID_URLENCODED: "NDU2LXRlc3QtdXRpZA",
+    TEST_DECODED_CLIENT_INFO: "{\"uid\":\"123-test-uid\",\"utid\":\"456-test-utid\"}",
+    TEST_INVALID_JSON_CLIENT_INFO: "{\"uid\":\"123-test-uid\"\"utid\":\"456-test-utid\"}",
+    TEST_RAW_CLIENT_INFO: "eyJ1aWQiOiIxMjMtdGVzdC11aWQiLCJ1dGlkIjoiNDU2LXRlc3QtdXRpZCJ9",
+    TEST_CLIENT_INFO_B64ENCODED: "eyJ1aWQiOiIxMjM0NSIsInV0aWQiOiI2Nzg5MCJ9",
+    TEST_HOME_ACCOUNT_ID: "MTIzLXRlc3QtdWlk.NDU2LXRlc3QtdXRpZA=="
+};
+
+export const testAccount: AccountInfo = {
+    homeAccountId: TEST_DATA_CLIENT_INFO.TEST_HOME_ACCOUNT_ID,
+    environment: "login.windows.net",
+    tenantId: TEST_DATA_CLIENT_INFO.TEST_UTID,
+    username: "[email protected]",
+    name: "Abe Lincoln"
+};

lib/msal-react/test/components/AuthenticatedComponent.spec.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { testAccount, TEST_CONFIG } from "../TestConstants";
+import { MsalProvider } from "../../src/MsalProvider";
+import { AuthenticatedTemplate } from "../../src/components/AuthenticatedTemplate";
+import { PublicClientApplication, IPublicClientApplication, Configuration } from "@azure/msal-browser";
+
+describe("MsalProvider tests", () => {
+    let pca: IPublicClientApplication;
+    const msalConfig: Configuration = {
+        auth: {
+            clientId: TEST_CONFIG.MSAL_CLIENT_ID
+        }
+    };
+
+    beforeEach(() => {
+        pca = new PublicClientApplication(msalConfig);
+    });
+
+    afterEach(() => {
+    // cleanup on exiting
+        jest.clearAllMocks();
+    });
+
+    test("AuthenticatedComponent does not show child component if no account is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <AuthenticatedTemplate>
+                    <span> A user is authenticated!</span>
+                </AuthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("A user is authenticated!")).not.toBeInTheDocument();
+    });
+
+    test("AuthenticatedComponent shows child component if any account is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <AuthenticatedTemplate>
+                    <span> A user is authenticated!</span>
+                </AuthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("A user is authenticated!")).toBeInTheDocument();
+    });
+
+    test("AuthenticatedComponent shows child component if specific username is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <AuthenticatedTemplate username={testAccount.username}>
+                    <span> A user is authenticated!</span>
+                </AuthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("A user is authenticated!")).toBeInTheDocument();
+    });
+
+    test("AuthenticatedComponent shows child component if specific homeAccountId is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <AuthenticatedTemplate homeAccountId={testAccount.homeAccountId}>
+                    <span> A user is authenticated!</span>
+                </AuthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("A user is authenticated!")).toBeInTheDocument();
+    });
+
+    test("AuthenticatedComponent shows child component if specific username is not signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <AuthenticatedTemplate username={"[email protected]"}>
+                    <span> A user is authenticated!</span>
+                </AuthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("A user is authenticated!")).not.toBeInTheDocument();
+    });
+
+    test("AuthenticatedComponent shows child component if specific homeAccountId is not signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <AuthenticatedTemplate homeAccountId={"homeAccountId_does_not_exist"}>
+                    <span> A user is authenticated!</span>
+                </AuthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("A user is authenticated!")).not.toBeInTheDocument();
+    });
+});

lib/msal-react/test/components/UnauthenticatedComponent.spec.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { testAccount, TEST_CONFIG } from "../TestConstants";
+import { MsalProvider } from "../../src/MsalProvider";
+import { UnauthenticatedTemplate } from "../../src/components/UnauthenticatedTemplate";
+import { PublicClientApplication, IPublicClientApplication, Configuration } from "@azure/msal-browser";
+
+describe("MsalProvider tests", () => {
+    let pca: IPublicClientApplication;
+    const msalConfig: Configuration = {
+        auth: {
+            clientId: TEST_CONFIG.MSAL_CLIENT_ID
+        }
+    };
+
+    beforeEach(() => {
+        pca = new PublicClientApplication(msalConfig);
+    });
+
+    afterEach(() => {
+    // cleanup on exiting
+        jest.clearAllMocks();
+    });
+
+    test("UnauthenticatedComponent does not show child component if an account is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <UnauthenticatedTemplate>
+                    <span>No user is authenticated!</span>
+                </UnauthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("No user is authenticated!")).not.toBeInTheDocument();
+    });
+
+    test("UnauthenticatedComponent shows child component if no account is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <UnauthenticatedTemplate>
+                    <span>No user is authenticated!</span>
+                </UnauthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("No user is authenticated!")).toBeInTheDocument();
+    });
+
+    test("UnauthenticatedComponent does not show child component if specific username is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <UnauthenticatedTemplate username={testAccount.username}>
+                    <span>This user is not authenticated!</span>
+                </UnauthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("This user is not authenticated!")).not.toBeInTheDocument();
+    });
+
+    test("UnauthenticatedComponent does not show child component if specific homeAccountId is signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <UnauthenticatedTemplate homeAccountId={testAccount.homeAccountId}>
+                    <span>This user is authenticated!</span>
+                </UnauthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("This user is not authenticated!")).not.toBeInTheDocument();
+    });
+
+    test("UnauthenticatedComponent shows child component if specific username is not signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <UnauthenticatedTemplate username={"[email protected]"}>
+                    <span>This user is not authenticated!</span>
+                </UnauthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("This user is not authenticated!")).toBeInTheDocument();
+    });
+
+    test("UnauthenticatedComponent shows child component if specific homeAccountId is not signed in", async () => {        
+        const handleRedirectSpy = jest.spyOn(pca, "handleRedirectPromise");
+        const getAllAccountsSpy = jest.spyOn(pca, "getAllAccounts");
+        getAllAccountsSpy.mockImplementation(() => [testAccount]);
+        render(
+            <MsalProvider instance={pca}>
+                <p>This text will always display.</p>
+                <UnauthenticatedTemplate homeAccountId={"homeAccountId_does_not_exist"}>
+                    <span>This user is not authenticated!</span>
+                </UnauthenticatedTemplate>
+            </MsalProvider>
+        );
+
+        await waitFor(() => expect(handleRedirectSpy).toHaveBeenCalledTimes(1));
+        expect(screen.queryByText("This text will always display.")).toBeInTheDocument();
+        expect(screen.queryByText("This user is not authenticated!")).toBeInTheDocument();
+    });
+});