Added login command for cypress and SSO protected pages

cypress/e2e/tenders.cy.ts

@@ -0,0 +1,13 @@
+describe("Tenders page", () => {
+  beforeEach(() => {
+    cy.oidcLogin();
+    // you can check that the user is logged in on this page:
+    cy.visit("http://localhost:3000");
+  });
+
+  it("Should navigate to tenders when clicking on Tenders", () => {
+    cy.get('[data-testid="nav.tenders"]').click();
+    cy.contains("tenders");
+    cy.contains("page_count");
+  });
+});

cypress/support/auth/commands.ts

@@ -0,0 +1,41 @@
+/// <reference types="cypress" />
+/* eslint-disable camelcase */
+import jwt_decode from "jwt-decode";
+import "./../index";
+
+Cypress.Commands.add("oidcLogin", () => {
+  const options = {
+    method: "POST",
+    url: Cypress.env("oidcUrl"),
+    form: true,
+    body: {
+      grant_type: Cypress.env("oidcGrantType"),
+      client_id: Cypress.env("oidcClientId"),
+      client_secret: Cypress.env("oidcClientSecret"),
+      scope: Cypress.env("oidcScope"),
+    },
+  };
+
+  return cy.request(options).then((response) => {
+    const { access_token, expires_in, id_token, token_type, scope } = response.body;
+    const accessTokenPayload = jwt_decode(access_token);
+    // stub email on the result, as service accounts don't generally have them but we use it in the UI
+    (accessTokenPayload as any).email = "cypress@e2e.email";
+
+    window.sessionStorage.setItem(
+      `oidc.default:${Cypress.env("oidcCallbackUrl")}`,
+      JSON.stringify({
+        tokens: {
+          accessToken: access_token,
+          expiresIn: expires_in,
+          idToken: id_token,
+          tokenType: token_type,
+          idTokenPayload: jwt_decode(id_token),
+          accessTokenPayload,
+          scope,
+        },
+      }),
+    );
+    return response;
+  });
+});

cypress/support/commands.ts

@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }

cypress/support/e2e.ts

@@ -14,7 +14,5 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+import "./index";
+import "./auth/commands";

cypress/support/index.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+// load type definitions that come with Cypress module
+/// <reference types="cypress" />
+export {};
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Login to the oidc provider
+       */
+      oidcLogin(): Chainable<Response<any>>;
+    }
+  }
+}