Popup coop e2e tests

samples/msal-browser-samples/COOP/app/auth.js

@@ -39,7 +39,7 @@ function handleResponse(resp) {
             const successDiv = document.getElementById("successAuthCode");
             if (successDiv) {
                 successDiv.innerHTML = `
-                    <div style="padding: 15px; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 5px; margin-top: 10px;">
+                    <div id="successMsg" style="padding: 15px; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 5px; margin-top: 10px;">
                         <h5 style="color: #155724;">✅ Authentication Successful!</h5>
                         <p><strong>User:</strong> ${resp.account.name || resp.account.username}</p>
                         <p><strong>ID Token:</strong> ${resp.idToken.substring(0, 30)}...</p>
@@ -64,14 +64,18 @@ function handleResponse(resp) {
     }
 }
 
-function logoutPopup(interactionType) {
+function signOut(interactionType) {
     const logoutRequest = {
-        account: myMSALObj.getAccountByHomeId(accountId)
+        account: myMSALObj.getAccount({accountId})
     };
 
-    myMSALObj.logoutPopup(logoutRequest).then(() => {
-        window.location.reload();
-    });
+    if (interactionType === "popup") {
+        myMSALObj.logoutPopup(logoutRequest).then(() => {
+            window.location.reload();
+        });
+    } else {
+        myMSALObj.logoutRedirect(logoutRequest);
+    }
 }
 
 async function loginPopup(request, account) {

samples/msal-browser-samples/COOP/app/index.html

@@ -59,8 +59,8 @@ <h5 class="card-header text-center">MSAL.js COOP sample</h5>
     <br><br>
     <div class="row container">
       <div class="col-md-12 text-center">
-        <button id="loginPopup" class="btn btn-info" onclick="loginPopup({})">Login popup</button>
-        <button id="sso" class="btn btn-info ml-3" onclick="sso({})">SSO</button>
+        <button id="loginPopup" class="btn btn-info" onclick="loginPopup({})">Login Popup with COOP</button>
+        <button id="sso" class="btn btn-info ml-3" onclick="sso({})">SsoSilent</button>
         <br><br>
         <div id="successAuthCode"></div>
       </div>

samples/msal-browser-samples/COOP/app/ui.js

@@ -1,13 +1,11 @@
 // Select DOM elements to work with
-const welcomeDiv = document.getElementById("WelcomeMessage");
 const signInButton = document.getElementById("SignIn");
 const popupButton = document.getElementById("popup");
 const redirectButton = document.getElementById("redirect");
 const cardDiv = document.getElementById("card-div");
 
 function showWelcomeMessage(account) {
     // Reconfiguring DOM elements
-    //welcomeDiv.innerHTML = `Welcome ${account.username}`;
     signInButton.setAttribute('class', "btn btn-success dropdown-toggle");
     signInButton.innerHTML = "Sign Out";
     popupButton.setAttribute('onClick', "signOut(this.id)");

samples/msal-browser-samples/COOP/package.json

@@ -18,6 +18,31 @@
     "path": "^0.11.14"
   },
   "devDependencies": {
-    "@playwright/test": "^1.30.0"
+    "e2e-test-utils": "file:../../e2eTestUtils",
+    "@playwright/test": "^1.31.1",
+    "@types/node": "^24.10.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "@vercel/webpack-asset-relocator-loader": "1.7.3",
+    "autoprefixer": "^10.4.13",
+    "css-loader": "^6.0.0",
+    "electron": "22.3.25",
+    "eslint": "^8.0.1",
+    "eslint-plugin-import": "^2.25.0",
+    "fork-ts-checker-webpack-plugin": "^7.2.1",
+    "jest": "^29.5.0",
+    "node-loader": "^2.0.0",
+    "postcss": "^8.4.31",
+    "postcss-loader": "^4.2.0",
+    "sass": "^1.55.0",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^3.0.0",
+    "ts-jest": "^29.1.0",
+    "ts-loader": "^9.2.2",
+    "ts-node": "^10.0.0",
+    "typescript": "~4.5.4"
   }
 }

samples/msal-browser-samples/COOP/playwright.config.ts

@@ -0,0 +1,96 @@
+import { PlaywrightTestConfig, devices } from "@playwright/test";
+import { RETRY_TIMES } from "e2e-test-utils";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+    testDir: "./test",
+    maxFailures: 2,
+    /* Run tests in files in parallel */
+    //fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    //forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: RETRY_TIMES,
+    /* Opt out of parallel tests on CI. */
+    //workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('')`. */
+        baseURL: "https://localhost:30662",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+        headless: false,
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+
+        // {
+        //     name: "firefox",
+        //     use: { ...devices["Desktop Firefox"] },
+        // },
+
+        // {
+        //     name: "webkit",
+        //     use: { ...devices["Desktop Safari"] },
+        // },
+
+        /* Test against mobile viewports. */
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: { ...devices['Pixel 5'] },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: { ...devices['iPhone 12'] },
+        // },
+
+        /* Test against branded browsers. */
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        // },
+    ],
+
+    timeout: 50000,
+    globalTimeout: 5400000,
+
+    /* Run your local dev servers before starting the tests */
+    webServer: [
+        {
+            command: "npm run start:https",
+            url: "https://localhost:30662",
+            reuseExistingServer: !process.env.CI,
+            ignoreHTTPSErrors: true,
+        },
+        {
+            command: "npm run start:server:https",
+            url: "https://localhost:30663",
+            reuseExistingServer: !process.env.CI,
+            ignoreHTTPSErrors: true,
+        },
+    ],
+};
+
+export default config;