Upgrade/Rollback E2E Tests (#8017)

This pull request introduces a new end-to-end (E2E) test setup for the
`ExpressSample` in the MSAL browser samples, along with several
improvements to the sample app's authentication flow, version switching,
and UI. The most significant changes are the addition of E2E test
infrastructure, enhancements to how authentication and profile data are
handled and displayed, and improvements to the version switching logic
and UI.

**E2E Test Infrastructure and Configuration:**

* Added E2E test configuration and helpers for `ExpressSample`,
including a new `.env.e2e` file, a `jest.config.cjs` configuration, and
a `test-helpers.ts` utility for Puppeteer-based tests. This enables
automated browser testing of authentication scenarios.
[[1]](diffhunk://#diff-d257013e504cdeb26f2bfad2e809b36492f6fdbfc45ffcbf4bc55b2da4887c74R1-R5)
[[2]](diffhunk://#diff-b70997a8822f049844c4b3afbe1ab62688a13f909a880256d0c8364fff169c3eR1-R8)
[[3]](diffhunk://#diff-a45554c7aba0df12b0d4ff639ce1fe74f9e12a2904ecb1d0d2edbe002bc4eefeR1-R112)
* Updated the pipeline configuration to include `ExpressSample` in E2E
test runs.
* Added necessary devDependencies and scripts for E2E testing in
`package.json`.

**Authentication and Profile Data Handling:**

* Modified the authentication flow to return the full MSAL
authentication response, not just the access token, and updated the MS
Graph call logic to pass and display this data.
[[1]](diffhunk://#diff-aedaa17dbc1e25e5997a95b1bea0c9c3b5a9caa6fbbc943c700972966e16b530L115-R115)
[[2]](diffhunk://#diff-57185e771678ea1756556bb0a2d9f5cba1e5441609c75dc66cebf0106e92ce3bL11-R15)
[[3]](diffhunk://#diff-57185e771678ea1756556bb0a2d9f5cba1e5441609c75dc66cebf0106e92ce3bL31-R30)
[[4]](diffhunk://#diff-57185e771678ea1756556bb0a2d9f5cba1e5441609c75dc66cebf0106e92ce3bL49-R50)
[[5]](diffhunk://#diff-57185e771678ea1756556bb0a2d9f5cba1e5441609c75dc66cebf0106e92ce3bR94-R117)
* Added UI logic to display both profile data and raw authentication
data, with sensitive fields (like the access token) redacted for
display.

**Version Switching and UI Improvements:**

* Refactored version switching logic to use consistent keys (e.g.,
`latest-v3` instead of `3.x`) and improved the UI for version selection,
including unique IDs for dropdown items and better feedback when
switching versions.
[[1]](diffhunk://#diff-7bf33d829c4c8178361e7badec48a371762d82042e849f0d2c94a2bb41001c8cL60-R57)
[[2]](diffhunk://#diff-7bf33d829c4c8178361e7badec48a371762d82042e849f0d2c94a2bb41001c8cL70-R74)
[[3]](diffhunk://#diff-7bf33d829c4c8178361e7badec48a371762d82042e849f0d2c94a2bb41001c8cL107-R104)
[[4]](diffhunk://#diff-7bf33d829c4c8178361e7badec48a371762d82042e849f0d2c94a2bb41001c8cL129-R147)
[[5]](diffhunk://#diff-2d7f351e21c92ea9ff545acdd7d5094e73a972fe350dea4df139f4e760a77d2eR92)
[[6]](diffhunk://#diff-2d7f351e21c92ea9ff545acdd7d5094e73a972fe350dea4df139f4e760a77d2eR111)
* Ensured UI elements (such as sign-in and version switcher buttons) are
only displayed after event handlers are registered, preventing flicker
or premature interaction.
[[1]](diffhunk://#diff-83705d1d56435a3dea7f60a3b8bfeb237387c901e34b0a7990233797b9ad2fbaR47-R48)
[[2]](diffhunk://#diff-2d7f351e21c92ea9ff545acdd7d5094e73a972fe350dea4df139f4e760a77d2eR64-R66)

**UI and Styling Enhancements:**

* Updated CSS classes and selectors to use `.json-content` for
displaying JSON data, improving clarity and maintainability.
[[1]](diffhunk://#diff-0587667bae35b440adac264532b10d1e1c50fd1ad1cf003c42cbceb8365bac54L251-R252)
[[2]](diffhunk://#diff-0587667bae35b440adac264532b10d1e1c50fd1ad1cf003c42cbceb8365bac54L260-R261)
* Minor CSS and code style cleanups for readability and consistency.
[[1]](diffhunk://#diff-0587667bae35b440adac264532b10d1e1c50fd1ad1cf003c42cbceb8365bac54L175-R176)
[[2]](diffhunk://#diff-0587667bae35b440adac264532b10d1e1c50fd1ad1cf003c42cbceb8365bac54L523-R530)

**Other Improvements:**

* Removed unnecessary dependencies (like `morgan`) from the server and
cleaned up middleware usage.
[[1]](diffhunk://#diff-7bf33d829c4c8178361e7badec48a371762d82042e849f0d2c94a2bb41001c8cL8)
[[2]](diffhunk://#diff-7bf33d829c4c8178361e7badec48a371762d82042e849f0d2c94a2bb41001c8cL39-L40)
* Improved screenshot utility to always capture full-page screenshots
during E2E tests.

These changes collectively improve the testability, usability, and
maintainability of the `ExpressSample` app and its E2E testing setup.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: tnorling

.pipelines/3p-e2e.yml

@@ -77,6 +77,7 @@ extends:
                             - "onPageLoad"
                             - "pop"
                             - "customizable-e2e-test"
+                            - "ExpressSample"
                         debug: ${{ parameters.debug }}
                         npmInstallTimeout: ${{ parameters.npmInstallTimeout }}
                 - ${{ if eq(parameters.runNodeTests, true) }}:

package-lock.json

@@ -26,6 +26,7 @@ export class Screenshot {
         await page.screenshot({
             path: `${this.folderName}/${++this
                 .screenshotNum}_${screenshotName}.png`,
+            fullPage: true
         });
     }
 }

samples/e2eTestUtils/src/TestUtils.ts

@@ -0,0 +1,5 @@
+CLIENT_ID=b5c2e510-4a17-4feb-b219-e55aa5b74144
+AUTHORITY=https://login.microsoftonline.com/common
+REDIRECT_URI=http://localhost:3000
+POST_LOGOUT_REDIRECT_URI=http://localhost:3000
+CACHE_LOCATION=localStorage

samples/msal-browser-samples/ExpressSample/.env.e2e

@@ -0,0 +1,8 @@
+module.exports = {
+    displayName: "ExpressSample",
+    globals: {
+        __PORT__: 3000,
+        __STARTCMD__: "env-cmd -f .env.e2e npm start",
+    },
+    preset: "../../e2eTestUtils/jest-puppeteer-utils/jest-preset.js",
+};

samples/msal-browser-samples/ExpressSample/jest.config.cjs

@@ -6,17 +6,28 @@
   "scripts": {
     "start": "node server.js",
     "dev": "nodemon server.js",
+    "test:e2e": "jest",
     "build:package": "npm run build:all --workspace=lib/msal-browser"
   },
   "dependencies": {
     "@azure/msal-browser": "^4.0.0",
+    "dotenv": "^16.0.3",
     "express": "^4.18.2",
-    "express-handlebars": "^7.0.7",
-    "morgan": "^1.10.0",
-    "dotenv": "^16.0.3"
+    "express-handlebars": "^7.0.7"
   },
   "devDependencies": {
-    "nodemon": "^2.0.22"
+    "@types/jest": "^30.0.0",
+    "e2e-test-utils": "file:../../e2eTestUtils",
+    "env-cmd": "^10.1.0",
+    "jest": "^30.0.5",
+    "jest-junit": "^16.0.0",
+    "nodemon": "^2.0.22",
+    "ts-jest": "^29.4.1"
+  },
+  "jest-junit": {
+    "suiteNameTemplate": "Express Sample Tests",
+    "outputDirectory": ".",
+    "outputName": "test-results.xml"
   },
   "keywords": [
     "msal",

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

@@ -23,7 +23,7 @@ header {
     background-color: #0078d4;
     color: white;
     padding: 1rem 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .header-content {
@@ -99,7 +99,7 @@ main {
     border-radius: 8px;
     padding: 2rem;
     margin-bottom: 2rem;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .card-header {
@@ -172,7 +172,8 @@ main {
     border: 1px solid #f5c6cb;
     color: #721c24;
     position: relative;
-    padding-right: 2.5rem; /* Make room for dismiss button */
+    padding-right: 2.5rem;
+    /* Make room for dismiss button */
 }
 
 .error-message a {
@@ -248,7 +249,7 @@ main {
     word-break: break-word;
 }
 
-.profile-json {
+.json-content {
     background-color: #f8f9fa;
     border: 1px solid #dee2e6;
     border-radius: 4px;
@@ -257,7 +258,7 @@ main {
     overflow-x: auto;
 }
 
-.profile-json pre {
+.json-content pre {
     margin: 0;
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
     font-size: 0.9rem;
@@ -322,7 +323,7 @@ main {
     background-color: white;
     border: 1px solid #dee2e6;
     border-radius: 4px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     min-width: 200px;
     z-index: 1000;
     display: none;
@@ -411,7 +412,7 @@ main {
     background-color: white;
     border: 1px solid #dee2e6;
     border-radius: 6px;
-    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     min-width: 280px;
     z-index: 1000;
     display: none;
@@ -520,8 +521,13 @@ main {
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 /* Custom Version Modal Styles */
@@ -797,20 +803,20 @@ main {
     .custom-version-form {
         padding: 1rem;
     }
-    
+
     .version-tags {
         gap: 0.25rem;
     }
-    
+
     .version-tag {
         font-size: 0.8rem;
         padding: 0.25rem 0.5rem;
     }
-    
+
     .form-actions {
         flex-direction: column-reverse;
     }
-    
+
     .form-actions .btn {
         width: 100%;
     }
@@ -822,16 +828,16 @@ main {
         width: 95%;
         max-height: 90%;
     }
-    
+
     .modal-header,
     .modal-body {
         padding: 1rem;
     }
-    
+
     .account-item {
         padding: 0.75rem;
     }
-    
+
     .account-avatar {
         width: 35px;
         height: 35px;

samples/msal-browser-samples/ExpressSample/public/css/styles.css

@@ -44,6 +44,8 @@ function setupEventListeners() {
             e.stopPropagation();
             toggleDropdown(signInButton.parentElement);
         });
+
+        signInButton.style.display = '';
     }
 
     // Toggle account dropdown

samples/msal-browser-samples/ExpressSample/public/js/app.js

@@ -34,7 +34,7 @@ export async function initializeMsal() {
 // Handle authentication for protected routes
 export async function handleProtectedRouteAuth(path) {
     console.log(`Attempting authentication for protected route: ${path}`);
-    
+
     // First attempt SSO silent
     return msalInstance.ssoSilent({
         scopes: loginRequest.scopes
@@ -83,7 +83,7 @@ export async function signOutPopup() {
         const logoutRequest = {
             account: msalInstance.getActiveAccount()
         };
-        
+
         await msalInstance.logoutPopup(logoutRequest);
         updateUI(null);
         showSuccess('Successfully signed out!');
@@ -99,7 +99,7 @@ export async function signOutRedirect() {
         const logoutRequest = {
             account: msalInstance.getActiveAccount()
         };
-        
+
         await msalInstance.logoutRedirect(logoutRequest);
     } catch (error) {
         console.error('Redirect sign out failed:', error);
@@ -112,10 +112,10 @@ export async function getAccessToken() {
     return msalInstance.acquireTokenSilent({
         ...loginRequest
     }).then((response) => {
-        return response.accessToken;
+        return response;
     }).catch(async (error) => {
         console.error('Silent token acquisition failed:', error);
-        
+
         if (error instanceof msal.InteractionRequiredAuthError) {
             // Fallback to redirect
             await msalInstance.acquireTokenRedirect({

samples/msal-browser-samples/ExpressSample/public/js/auth.js

@@ -8,13 +8,11 @@ import { getAccessToken } from './auth.js';
 import { graphConfig } from "./authConfig.js";
 
 // MS Graph API call functionality
-export async function callMsGraph(accessToken) {
-    if (!accessToken) {
-        accessToken = await getAccessToken();
-    }
+export async function callMsGraph() {
+    const authResponse = await getAccessToken();
 
     const headers = new Headers();
-    const bearer = `Bearer ${accessToken}`;
+    const bearer = `Bearer ${authResponse.accessToken}`;
 
     headers.append("Authorization", bearer);
 
@@ -28,7 +26,8 @@ export async function callMsGraph(accessToken) {
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
         }
-        return await response.json();
+        const profileData = await response.json();
+        return { profileData, authResponse };
     } catch (error) {
         console.error('Error calling MS Graph:', error);
         throw error;
@@ -46,14 +45,15 @@ export async function loadProfileData() {
         if (contentElement) contentElement.style.display = 'none';
         if (errorElement) errorElement.style.display = 'none';
 
-        const profileData = await callMsGraph();
+        const { profileData, authResponse } = await callMsGraph();
         displayProfileData(profileData);
+        displayAuthData(authResponse);
 
         if (loadingElement) loadingElement.style.display = 'none';
         if (contentElement) contentElement.style.display = 'block';
     } catch (error) {
         console.error('Failed to load profile data:', error);
-        
+
         if (loadingElement) loadingElement.style.display = 'none';
         if (errorElement) {
             errorElement.textContent = 'Failed to load profile data: ' + error.message;
@@ -91,3 +91,27 @@ export function displayProfileData(profileData) {
         jsonElement.textContent = JSON.stringify(profileData, null, 2);
     }
 }
+
+// Display authentication data in the UI
+export function displayAuthData(authResponse) {
+    const authJsonElement = document.getElementById('auth-json');
+    if (authJsonElement && authResponse) {
+        // Create a sanitized version of the auth response for display
+        const displayData = {
+            accessToken: authResponse.accessToken ? '[REDACTED - Present]' : 'Not available',
+            tokenType: authResponse.tokenType,
+            expiresOn: authResponse.expiresOn,
+            account: authResponse.account,
+            scopes: authResponse.scopes,
+            correlationId: authResponse.correlationId,
+            fromCache: authResponse.fromCache,
+            idToken: authResponse.idToken,
+            idTokenClaims: authResponse.idTokenClaims,
+            uniqueId: authResponse.uniqueId,
+            tenantId: authResponse.tenantId
+        };
+
+        authJsonElement.textContent = JSON.stringify(displayData, null, 2);
+        authJsonElement.style.display = '';
+    }
+}