Install cypress in central dashboard (#158)

* init implementation of cypress

* init test for cypress

* removed all_namespaces related issues

* cleaned-up test data

* override package to fix build issue

---------

Co-authored-by: Mathis Marcotte <mathis.marcotte@statcan.gc.ca>

components/centraldashboard/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  video: false,
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: 'http://localhost:8080',
+  },
+});

components/centraldashboard/cypress/e2e/main-page.cy.ts

@@ -0,0 +1,16 @@
+describe('Main Page spec', () => {
+  it('should access kubeflow', () => {
+    cy.mockWorkgroupRequest();
+    cy.mockDashboardLinksRequest();
+    cy.mockEnvInfoRequest();
+
+
+    cy.visit('/');
+
+    cy.wait('@mockWorkgroupRequest');
+    cy.wait('@mockDashboardLinksRequest');
+    cy.wait('@mockEnvInfoRequest');
+    cy.get('main-page').should('exist');
+    cy.get('main-page').shadow().find('dashboard-view').should('exist');
+  })
+})

components/centraldashboard/cypress/fixtures/dashboard-links.json

@@ -0,0 +1,43 @@
+{
+  "menuLinks": [
+    {
+      "type": "item",
+      "link": "/en/",
+      "text": "Notebooks",
+      "icon": "book"
+    }
+  ],
+  "externalLinks": [],
+  "quickLinks": [
+    {
+      "text": "Create a new Notebook server",
+      "desc": "Notebook Servers",
+      "link": "/en/new?ns={ns}"
+    }
+  ],
+  "documentationItems": [
+    {
+      "text": "Advanced Analytics Workspace Docs",
+      "desc": "Helpful guides about our data and analysis tools",
+      "link": "https://statcan.github.io/aaw/"
+    },
+    {
+      "text": "Video Tutorial Series",
+      "desc": "YouTube playlist of videos for getting started with Advanced Analytics Workspace tools",
+      "link": "https://www.youtube.com/playlist?list=PL1zlA2D7AHugkDdiyeUHWOKGKUd3MB_nD"
+    },
+    {
+      "text": "Community Chat",
+      "desc": "Slack workspace for discussion/support - requires sign-up for emails outside @canada.ca",
+      "link": "https://statcan-aaw.slack.com/"
+    },
+    {
+      "text": "Official Kubeflow Docs",
+      "desc": "Advanced documentation for installing, running, and using Kubeflow",
+      "link": "https://www.kubeflow.org/docs/"
+    }
+  ],
+  "securityMessages": [
+    "Statistics Canada networks are routinely monitored to ensure user compliance with the DAS Terms and Conditions. Inappropriate or unauthorized use of DAS will result in removal of all privileges and access to the DAS environments."
+  ]
+}

components/centraldashboard/cypress/fixtures/env-info.json

@@ -0,0 +1,22 @@
+{
+  "user": "user.name@cloud.statcan.ca",
+  "platform": {
+    "kubeflowVersion": "v1beta1",
+    "provider": "test_provider",
+    "providerName": "azure",
+    "logoutUrl": "/logout"
+  },
+  "namespaces": [
+    {
+      "user": "user.name@cloud.statcan.ca",
+      "namespace": "test-namespace-2",
+      "role": "contributor"
+    },
+    {
+      "user": "user.name@cloud.statcan.ca",
+      "namespace": "test-namespace",
+      "role": "owner"
+    }
+  ],
+  "isClusterAdmin": false
+}

components/centraldashboard/cypress/fixtures/workgroup.json

@@ -0,0 +1,6 @@
+{
+  "hasAuth":true,
+  "user":"user.name",
+  "hasWorkgroup":true,
+  "registrationFlowAllowed":true
+}

components/centraldashboard/cypress/support/commands.ts

@@ -0,0 +1,55 @@
+/// <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.Commands.add('mockWorkgroupRequest', () => {
+  cy.intercept('GET', `/api/workgroup/exists`, {
+    fixture: 'workgroup',
+  }).as('mockWorkgroupRequest');
+});
+
+Cypress.Commands.add('mockDashboardLinksRequest', () => {
+  cy.intercept('GET', `/api/dashboard-links`, {
+    fixture: 'dashboard-links',
+  }).as('mockDashboardLinksRequest');
+});
+
+Cypress.Commands.add('mockEnvInfoRequest', () => {
+  cy.intercept('GET', `/api/workgroup/env-info`, {
+    fixture: 'env-info',
+  }).as('mockEnvInfoRequest');
+});

components/centraldashboard/cypress/support/e2e.ts

@@ -0,0 +1,41 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to mock request at '/api/workgroup/exists'
+       * and returns object with mock workgroup
+       */
+      mockWorkgroupRequest(): Chainable<void>;
+
+      /**
+       * Custom command to mock request at '/api/workgroup/dashboard-links'
+       * and returns object with mock dashboard-links
+       */
+      mockDashboardLinksRequest(): Chainable<void>;
+
+      /**
+       * Custom command to mock request at '/api/workgroup/env-info'
+       * and returns object with mock env-info
+       */
+      mockEnvInfoRequest(): Chainable<void>;
+    }
+  }
+}

components/centraldashboard/cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}