End to End test framework for MSAL 1.0 and 2.0

build/npm-build-steps.yml

@@ -7,24 +7,36 @@ steps:
   displayName: 'Install Node.js'
 
 - task: Npm@1
+  displayName: 'npm ci'
   inputs:
     command: 'custom'
     customCommand: 'ci'
     verbose: true
 
 - task: Npm@1
+  displayName: 'Build Packages'
   inputs:
     command: 'custom'
     customCommand: 'run build'
 
 - task: Npm@1
+  displayName: 'Unit Tests'
   inputs:
     command: 'custom'
     customCommand: 'run test:coverage'
 
 - task: Npm@1
+  displayName: 'Code Coverage Reporting'
   env:
     COVERALLS_REPO_TOKEN: $(COVERALLS_REPO_TOKEN)
   inputs:
     command: 'custom'
     customCommand: 'run test:report'
+
+- task: Npm@1
+  displayName: 'End-to-End Tests'
+  env:
+    AZURE_CLIENT_SECRET: $(AZURE_CLIENT_SECRET)
+  inputs:
+    command: 'custom'
+    customCommand: 'run test:e2e'

lerna.json

@@ -2,7 +2,14 @@
   "lerna": "3.16.4",
   "command": {
     "run": {
-      "scope": ["msal", "@azure/msal-common", "@azure/msal-browser", "@azure/msal-angular"]
+      "scope": [
+        "msal", 
+        "@azure/msal-common", 
+        "@azure/msal-browser", 
+        "@azure/msal-angular",
+        "vanilla-js-test-app",
+        "vanilla-js-test-app-2.0"
+      ]
     }
   },
   "packages": [

lib/msal-browser/README.md

@@ -89,13 +89,15 @@ If you have MSAL v1.x currently running in your application, you can follow the
 
 ## Samples
 
-The [`samples`](../samples) folder contains samples applications for our libraries. Here is a complete list of samples for the MSAL.js 2.x library:
+The [`VanillaJSTestApp2.0` folder](../samples/VanillaJSTestApp2.0) contains sample applications for our libraries. You can run any sample by changing the `authConfig.js` file in the respective folder to match your app registration and running the `npm` command `npm start -- -s <sample-name> -p <port>`. 
 
-| Sample | Description |
-| ------ | ----------- |
-| [Vanilla JS Sample](../../samples/VanillaJSTestApp2.0) | A vanilla Javascript sample showing basic usage of the MSAL 2.0 library (`msal-browser` package) with the Microsoft Graph API. |
+Here is a complete list of samples for the MSAL.js 2.x library:
 
-Instructions to run the samples can be found in the respective READMEs.
+| Sample | Description | How to Run |
+| ------ | ----------- | ---------- |
+| [Basic Auth Sample](../../samples/VanillaJSTestApp2.0/default) | A vanilla Javascript sample showing basic usage of the MSAL 2.0 library (`msal-browser` package) with the Microsoft Graph API. | `npm start -- -s default` |
+
+More instructions to run the sample can be found in the [`README.md` file](../samples/VanillaJSTestApp2.0/README.md) of the VanillaJSTestApp2.0 folder.
 
 ## Build and Test
 

lib/msal-core/README.md

@@ -102,7 +102,7 @@ If you would like to skip a cached token and go to the server, please pass in th
 ## Usage
 The example below walks you through how to login a user and acquire a token to be used for Microsoft's Graph Api.
 
-#### Prerequisite
+#### Prerequisites
 
 Before using MSAL.js you will need to [register an application in Azure AD](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) to get a valid `clientId` for configuration, and to register the routes that your app will accept redirect traffic on.
 

package.json

@@ -20,6 +20,7 @@
     "test": "lerna run test",
     "test:coverage": "npm run clean:coverage && lerna run test:coverage",
     "test:report": "nyc report | coveralls",
+    "test:e2e": "lerna run --concurrency 1 test:e2e",
     "clean": "lerna run clean --no-private && lerna clean",
     "clean:coverage": "rimraf ./.nyc_output/*"
   },

samples/VanillaJSTestApp/.mocharc.json

@@ -1,4 +1,4 @@
 {
-    "require": ["test/setup.js", "@babel/polyfill"],
+    "require": ["e2eTests/testSetup.js", "@babel/polyfill"],
     "spec":  ["./test/*.spec.ts", "./test/**/*.spec.ts"]
 }

samples/VanillaJSTestApp/Readme.md

@@ -1,25 +1,43 @@
-What are the dev apps?
-----------------------
-index.html shows how to get profile data and read email with the Microsoft Graph, using msal.js loginRedirect()/loginPopup()/acquireTokenSilent-acquireTokenPopup() APIs. 
+# MSAL.js 1.x Sample - Authorization Code Flow in Single-Page Applications
 
-If loginRedirect() is used, the web page redirects to the Azure AD or Azure AD B2C login screen for authentication. Once authentication is completed, the page redirects back to the redirect uri given with the requested tokens.
+## About this sample
+This developer sample is used to run basic use cases for the MSAL library. You can also alter the configuration in `./app/<sample-name>/authConfig.js` to execute other behaviors.
 
-If loginPopup() is used, the authentication occurs inside a popup window created by the browser. The main window will handle token retrieval once authentication has been completed in the popup.
+## How to run the sample:
 
-How to run the dev apps:
---------------------
-Pre-requisite
-- Install node.js if needed (https://nodejs.org/en/)
-- Build the `msal-core` project.
+### Pre-requisites
+- Ensure [all pre-requisites](../../lib/msal-core/README.md#pre-requisites) have been completed to run msal-core.
+- Install node.js if needed (https://nodejs.org/en/).
+- Build the `msal-core` project with instructions provided in the [`README.md`](../../lib/msal-core/README.md) or using the command `npm run build:package`.
 
-Resolving the server.js references
-- In a command prompt, run `npm install`
+### Configure the application
+- Open `./app/<sample-name>/authConfig.js` in an editor.
+- Replace client id with the Application (client) ID from the portal registration, or use the currently configured lab registration.
+    - Optionally, you may replace any of the other parameters, or you can remove them and use the default values.
 
-Running the sample
-- In a command prompt, run `npm start`
+#### Install npm dependencies for sample
+- In a command prompt, run `npm install`.
 
-You may also run `npm run start:build` to build the `msal-core` project and start the server in one command.
+#### Running the sample
+1. In a command prompt, run `npm start`.
+    - If you wish to specify a different sample than the default, you may provide the sample name in the command prompt:
+    ```javascript
+    npm start -- -sample <sample-name> // defaults to vanilla sample in `default` folder
+    ```
 
-- Navigate to http://localhost:30662 with the browser of your choice
+    ```javascript
+    npm start -- -s <sample-name> // defaults to vanilla sample in 'default' folder
+    ```
 
-- In the web page, click on the "Sign In" button and select either `Sign in using Popup` or `Sign in using Redirect`
+    - If you wish to specify the port, you can provide the `-p` or `-port` flag:
+    ```javascript
+    npm start -- -port <port-#> // defaults to 30662
+    ```
+
+    ```javascript
+    npm start -- -p <port-#> // defaults to 30662
+    ```
+
+- Navigate to http://localhost:30662 (or whatever port number specified) with the browser of your choice.
+
+- In the web page, click on the "Sign In" button and select either `Sign in using Popup` or `Sign in using Redirect` to begin the auth flow.

samples/VanillaJSTestApp/JavascriptSPA/authConfig.js → samples/VanillaJSTestApp/app/default/authConfig.js

@@ -1,7 +1,7 @@
 // Config object to be passed to Msal on creation
 const msalConfig = {
     auth: {
-        clientId: "6226576d-37e9-49eb-b201-ec1eeb0029b6",
+        clientId: "4b0db8c2-9f26-4417-8bde-3f0e3656f8e0",
         redirectUri: "http://localhost:30662/"
     },
     cache: {