merge: #3184

3184: chore(web) - Upgrade cypress to latest, refactor structure/tests, support auth0 r=britmyerss a=britmyerss

This change upgrades Cypress to latest - we were on quite an old version so I had to restructure the config to adopt Cypress' new ways. I added a command to login to auth0 and a very simple (and probably not very reliable) test to create an AWS Credential on the diagram. We'll need to add the right data to the components we want to drive but that can come later. 



Co-authored-by: Brit Myers <[email protected]>

app/web/.env

@@ -7,6 +7,11 @@ VITE_API_PROXY_PATH=/api
 
 VITE_AUTH_API_URL=https://auth-api.systeminit.com
 VITE_AUTH_PORTAL_URL=https://auth.systeminit.com
+VITE_AUTH0_DOMAIN=systeminit.auth0.com
+
+# Add to env.local for Cypress E2E Testing
+#VITE_AUTH0_USERNAME
+#VITE_AUTH0_PASSWORD
 
 # TODO: point this at public/deployed module index api
 VITE_MODULE_INDEX_API_URL=https://module-index.systeminit.com

app/web/cypress.config.ts

@@ -0,0 +1,19 @@
+import path from 'path'
+import { defineConfig } from 'cypress'
+import vitePreprocessor from 'cypress-vite'
+
+
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      on('file:preprocessor', vitePreprocessor(path.resolve('./vite.config.ts'),
+      ))
+    },
+    baseUrl: 'http://localhost:8080',
+    chromeWebSecurity: false,
+    viewportHeight: 1000,
+    viewportWidth: 1500,
+  }
+})
+

app/web/cypress.d.ts

@@ -0,0 +1,12 @@
+import { mount } from 'cypress/vue';
+
+type MountParams = Parameters<typeof mount>;
+type OptionsParam = MountParams[1];
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof mount;
+        }
+    }
+}

app/web/cypress/e2e/1-signup/signup.cy.ts

@@ -0,0 +1,17 @@
+//TODO: Bring this back to life
+
+// describe("Signup", () => {
+//   beforeEach(() => {
+//     cy.visit("authenticate/signup");
+//   });
+
+//   it("lets the user create a new account", () => {
+//     cy.getBySel("workspaceName").type("bobo");
+//     cy.getBySel("userName").type("bobo clown");
+//     cy.getBySel("userEmail").type("[email protected]");
+//     cy.getBySel("userPassword").type("Bobo42!ggz");
+//     cy.getBySel("signupSecret").type("cool-steam");
+//     cy.getBySel("signUp").click();
+//     cy.url().should("be.match", /\/authenticate\/login$/);
+//   });
+// });

app/web/cypress/e2e/2-login/login.cy.ts

@@ -0,0 +1,13 @@
+describe("Login", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("lets the user log in", () => {
+    cy.loginToAuth0(import.meta.env.VITE_AUTH0_USERNAME, import.meta.env.VITE_AUTH0_PASSWORD);
+    cy.visit("/");
+    // check that you're on head
+    cy.url().should("contain", "head");
+  });
+
+});

app/web/cypress/e2e/2-login/logout.cy.ts

@@ -0,0 +1,15 @@
+describe("Logout", () => {
+  beforeEach(() => {
+    cy.visit("/");
+    cy.loginToAuth0(import.meta.env.VITE_AUTH0_USERNAME, import.meta.env.VITE_AUTH0_PASSWORD);
+  });
+
+  it("lets the user log out", () => {
+    cy.visit("/");
+    cy.contains('Create change set', { timeout: 10000 }).should('be.visible').click();
+    cy.get('[aria-label="Profile"]').should('exist').click();
+    cy.get('#dropdown-menu-item-1').should('exist').should('be.visible').click({ force: true });
+    cy.url().should("contain", import.meta.env.VITE_AUTH_PORTAL_URL + '/logout');
+
+  });
+});

app/web/cypress/e2e/3-create-components/create-component.cy.ts

@@ -0,0 +1,27 @@
+// @ts-check
+///<reference path="../global.d.ts"/>
+
+describe('Create Components', () => {
+  beforeEach(function () {
+    cy.loginToAuth0(import.meta.env.VITE_AUTH0_USERNAME, import.meta.env.VITE_AUTH0_PASSWORD);
+  });
+
+  it('should pick up an AWS Credential and move it onto the diagram', () => {
+    cy.visit('/')
+    cy.contains('Create change set', { timeout: 10000 }).should('be.visible').click();
+
+    // Find the AWS Credential
+    cy.get('[data-cy="asset_card', { timeout: 10000 }).contains('AWS Credential').should('be.visible').as('awsCred')
+
+    // Find the canvas to get a location to drag to
+    cy.get('canvas').first().as('konvaStage');
+
+    // drag to the canvas
+    cy.dragTo('@awsCred', '@konvaStage');
+
+    //check to make sure a component has been added to the outliner
+    cy.get('[class="component-outline-node"]', { timeout: 10000 }).contains('AWS Credential').should('be.visible');
+
+  })
+})
+

app/web/cypress/global.d.ts

@@ -2,7 +2,7 @@
 
 declare namespace Cypress {
 
-  interface CustomWindow extends Window {}
+  interface CustomWindow extends Window { }
 
   interface Chainable {
     /**
@@ -11,15 +11,14 @@ declare namespace Cypress {
      */
     window(options?: Partial<Loggable & Timeoutable>): Chainable<CustomWindow>;
 
+    getBySel(dataTestAttribute: string, args?: any): Chainable<JQuery<HTMLElement>>;
+    getBySelLike(dataTestPrefixAttribute: string, args?: any): Chainable<JQuery<HTMLElement>>;
+
     /**
-     * Custom command to select DOM element by data-cy attribute.
-     * @example cy.dataCy('greeting')
+     * Logs in via Auth0 login page
      */
-    getBySel(value: string): Chainable<Element>;
-
-    getBySelLike(value: string): Chainable<Element>;
+    loginToAuth0(username: string, password: string): Chainable<any>;
 
-    signup(): Chainable<Response<any>>;
-    signupAndLogin(): Chainable<Response<any>>;
+    dragTo(sourceElement: string, targetElement: string): void;
   }
 }

app/web/cypress/support/auth-provider-commands/auth0.ts

@@ -0,0 +1,55 @@
+// @ts-check
+///<reference path="../../global.d.ts" />
+
+// Note: this function leaves you on a blank page, so you must call cy.visit()
+// afterwards, before continuing with your test.
+Cypress.Commands.add("loginToAuth0", (username: string, password: string) => {
+  const log = Cypress.log({
+    displayName: "AUTH0 LOGIN",
+    message: [`🔐 Authenticating | ${username}`],
+    // @ts-ignore
+    autoEnd: false,
+  });
+  log.snapshot("before");
+
+  const args = { username, password };
+  cy.session(
+    `auth0-${username}`,
+    () => {
+      // App landing page redirects to Auth0.
+      cy.visit("/");
+      cy.url().should("contain", import.meta.env.VITE_AUTH0_DOMAIN);
+      // Login on Auth0.
+      cy.origin(import.meta.env.VITE_AUTH0_DOMAIN, { args }, ({ username, password }) => {
+        cy.get("input#username").type(username);
+        cy.contains('Continue').click();
+        cy.get("input#password").type(password).type('{enter}');
+
+      });
+
+      // Ensure Auth0 has redirected us back to the auth portal.
+      cy.url().should("contain", import.meta.env.VITE_AUTH_PORTAL_URL);
+
+      // click the link to go back to the local app
+      cy.origin(import.meta.env.VITE_AUTH_PORTAL_URL, () => {
+
+        //todo: use a more reliable way to get the link to navigate back to
+        cy.contains('div', 'Role: Owner')
+          .parent('div').parent('a')
+          .should('exist').invoke('attr', 'href')
+          .then(($href) => {
+            cy.visit($href);
+          });
+      });
+    },
+    {
+      validate: () => {
+        // Validate presence of access token in localStorage.
+        cy.window().its("localStorage").invoke("getItem", "si-auth").should("exist");
+      },
+    }
+  );
+
+  log.snapshot("after");
+  log.end();
+});