e2e test with sso

README.md

@@ -21,20 +21,29 @@ npm run serve
 npm run build
 ```
 
-### Run your unit tests
+## Testing
+
+### Unit Tests
 
 ```
 npm run test:unit
 ```
 
-### Run your end-to-end tests
+### End-to-End Tests
 
-```
-npm run test:e2e
-```
+The e2e tests require the use of SSO to work properly. Until Platform One figures out a way to run cypress with a SSO Non-person Entity (NPE), this process will include a manual step. Before running the tests we first have to obtain a cookie value from the Launchboard FE instance we want to test.
 
-### Lints and fixes files
+1. In a browser, open dev tools and go to the Launchboard FE instance you want to test (https://localhost:3333 for dev, https://launchboard.staging.apps.il2.dsop.io for staging, etc). Log in to Platform One SSO if prompted.
+2. On the `Network` tab of dev tools, click on one of the Launchboard requests, then find the `Cookie` value under `Response Headers`.
+3. The piece of the cookie that handles your SSO session depends on the environment and how Keycloak is configured. Copy the authentication cookie (omit the trailing `;` if present). The following cookie formats have been observed:
+    - In dev: `connect.sid=s%3A9w7jaTiFm...`
+    - In staging: `__Host-launchboard-staging-authservice-session-id-cookie=lzs...`
+4. Use the copied authentication cookie as the `SSO_COOKIE_VALUE` environment variable and run the tests. Example:
 
-```
-npm run lint
+```bash
+# example in dev (using launchboard-local-dev) which runs against https://localhost:3333 by default
+SSO_COOKIE_VALUE=connect.sid=s%3A9w7jaTiFm... npm run test:e2e
+
+# pipeline ci example which runs against https://launchboard.staging.apps.il2.dsop.io by default
+SSO_COOKIE_VALUE=__Host-launchboard-staging-authservice-session-id-cookie=lzs... npm run test:e2e-ci
 ```

jsconfig.json

+{
+  "include": [
+    "./node_modules/cypress",
+    "tests/e2e/**/*.js"
+  ]
+}

package.json

@@ -6,12 +6,11 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e --mode=test",
+    "test:e2e": "vue-cli-service test:e2e --mode=development --url=http://localhost:3333/",
     "lint": "vue-cli-service lint",
     "build-staging": "NODE_ENV=production vue-cli-service build --mode=test",
     "preinstall": "npx npm-force-resolutions",
-    "test": "npm run test:unit && npx vue-cli-service test:e2e --headless",
-    "test:e2e-ci": "npx vue-cli-service test:e2e --headless"
+    "test:e2e-ci": "NODE_ENV=test vue-cli-service test:e2e --headless --url=https://launchboard.staging.apps.il2.dsop.io/"
   },
   "dependencies": {
     "axios": "^0.19.2",
@@ -38,6 +37,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
+    "cypress": "^5.4.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",

tests/e2e/plugins/index.js

@@ -10,10 +10,11 @@
 // const webpack = require('@cypress/webpack-preprocessor')
 
 module.exports = (on, config) => {
-  // on('file:preprocessor', webpack({
-  //  webpackOptions: require('@vue/cli-service/webpack.config'),
-  //  watchOptions: {}
-  // }))
+  // pass important env vars to cypress
+  // these vars can then be used like `Cypress.env("NODE_ENV")`
+  ["SSO_COOKIE_VALUE", "NODE_ENV"].forEach(key => {
+    config.env[key] = process.env[key];
+  });
 
   return Object.assign({}, config, {
     fixturesFolder: "tests/e2e/fixtures",

tests/e2e/specs/login.spec.js

+describe("login", () => {
+  it("should redirect to login.dsop.io", () => {
+    cy.visit("/");
+    cy.location().should(location => {
+      expect(location.host).to.eq("login.dsop.io");
+      expect(location.pathname).to.eq(
+        "/auth/realms/baby-yoda/protocol/openid-connect/auth"
+      );
+    });
+  });
+
+  it("should not redirect with valid cookie", () => {
+    cy.visitWithSSO("/");
+    cy.location().should(location => {
+      expect(location.host).not.to.eq("login.dsop.io");
+      expect(location.pathname).to.eq("/");
+    });
+  });
+});

tests/e2e/specs/test.js

-// https://docs.cypress.io/api/introduction/api.html
-
-describe("My First Test", () => {
-  it("Visits the app root url", () => {
-    cy.visit("/");
-  });
-});

tests/e2e/support/commands.js

@@ -23,3 +23,24 @@
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add("visitWithSSO", (url, options) => {
+  // ensure options initialization
+  options = options || {};
+  options.headers = options.headers || {};
+
+  const cookieValue = Cypress.env("SSO_COOKIE_VALUE");
+  if (!cookieValue) {
+    throw new Error(
+      "`SSO_COOKIE_VALUE` is a required variable when using cy.visitWithSSO"
+    );
+  }
+
+  if (options.headers.cookie) {
+    options.headers.cookie += `;${cookieValue}`;
+  } else {
+    options.headers.cookie = cookieValue;
+  }
+
+  return cy.visit(url, options);
+});