feat: bring in staging (#513)

Author: Cahllagerfeld

.github/workflows/cy.yml

@@ -0,0 +1,48 @@
+name: Cypress Tests
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+
+jobs:
+  cypress:
+    runs-on: ubuntu-latest
+
+    env:
+      USERNAME: ${{ secrets.USERNAME }}
+      PASSWORD: ${{ secrets.PASSWORD }}
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+      - name: Get PR number
+        id: pr_number
+        run: echo "PR_NUMBER=$(echo $GITHUB_REF | sed -n 's/refs\/pull\/\([0-9]*\)\/merge/\1/p')" >> $GITHUB_ENV
+
+      - name: Replace URL and running cypress test
+        run: |
+          sed -i 's/baseUrl: .*/baseUrl: "https:\/\/deploy-preview-${{ env.PR_NUMBER }}--zenml-ui-staging.netlify.app",/' cypress.config.ts
+
+      - name: Run e2e tests
+        run: |
+          export USERNAME=$USERNAME
+          export PASSWORD=$PASSWORD 
+          npx cypress run
+
+      # - name: Run Cypress tests
+      #   run: npx cypress run
+      #   continue-on-error: true
+
+      - name: Check Cypress exit code
+        run: |
+          echo "Cypress Exit Code: $?"

cypress.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig } from 'cypress';
-
+require('dotenv').config();
 export default defineConfig({
+  viewportWidth: 1380,
+  viewportHeight: 1024,
+  env: { ...process.env },
   e2e: {
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:3000',

cypress/e2e/connecterTable/connectorTable.spec.cy.ts renamed to cypress/e2e/connectorTable/connectorTable.spec.cy.ts

@@ -10,7 +10,7 @@ describe('FilterComponent E2E Tests', () => {
   beforeEach(() => {
     login();
     cy.waitUntilDashboardIsLoaded();
-    cy.wait(500);
+    cy.wait(1000);
     cy.get('[id="connector"]').click(); // Replace with your custom wait command
   });
 
@@ -67,7 +67,7 @@ describe('FilterComponent E2E Tests', () => {
     columnList.forEach((col) => {
       filterByString(col, emptyText);
     });
-    filterByBoolean();
+    filterByBoolean(emptyText);
   });
   it('should navigate through pagination', () => {
     // Assuming you have a button or link for next and previous pagination
@@ -77,20 +77,22 @@ describe('FilterComponent E2E Tests', () => {
   });
   it("should display connector's component", () => {
     // cy.wait(5000);
+    cy.waitForLoaderToDisappear();
     cy.get('table').should('exist');
 
     // Select the first row within the table (modify the selector as needed)
     cy.get('table tbody tr:eq(4)').click({ force: true });
 
     cy.get('[data-testid="component_tab"]').click();
     // cy.get('table').should('exist');
+    cy.waitForLoaderToDisappear();
 
     // cy.get('table').should('exist');
     const columnList = ['ID', 'Name', 'Flavor'];
     const emptyText = 'No components';
     columnList.forEach((col) => {
       filterByString(col, emptyText);
     });
-    filterByBoolean();
+    filterByBoolean(emptyText);
   });
 });

cypress/e2e/pipelineTable/pipelineTable.spec.cy.ts

@@ -1,4 +1,4 @@
-import { apiCall } from '../utils/apiCallUtils';
+// import { apiCall } from '../utils/apiCallUtils';
 import { dag } from '../utils/dagUtils';
 import { filterByStatus } from '../utils/filterByStatusUtils';
 import { filterByString } from '../utils/filterByStringUtils';
@@ -12,7 +12,7 @@ describe('FilterComponent E2E Tests', () => {
   beforeEach(() => {
     login();
     cy.waitUntilDashboardIsLoaded();
-    apiCall();
+    cy.wait(1000);
     cy.get('[id="pipelines"]').click();
 
     // Replace with your custom wait command
@@ -47,7 +47,8 @@ describe('FilterComponent E2E Tests', () => {
   });
 
   it('should work with valid value', () => {
-    search('pipeline');
+    const emptyText = 'We are sorry';
+    search('pipeline', emptyText);
   });
 
   it('should apply filters where string', () => {
@@ -59,22 +60,23 @@ describe('FilterComponent E2E Tests', () => {
   });
 
   it('should navigate through pagination', () => {
+    cy.waitForLoaderToDisappear();
     // Assuming you have a button or link for next and previous pagination
     // You can click these buttons to navigate through pages
     pagination(); // Click the "Previous" button
     // Add more assertions as needed
   });
 
   it('should display pipelineDetails', () => {
-    // cy.wait(5000);
+    cy.waitForLoaderToDisappear();
     cy.get('table').should('exist');
 
     // Select the first row within the table (modify the selector as needed)
     cy.get('table tbody tr:first').should('exist');
 
     // Click on the first row
     cy.get('table tbody tr:first').click({ force: true });
-    cy.wait(5000);
+    cy.waitForLoaderToDisappear();
     cy.get('table').should('exist');
 
     // Select the first row within the table (modify the selector as needed)
@@ -87,12 +89,12 @@ describe('FilterComponent E2E Tests', () => {
   it("should display pipeline's runs", () => {
     // cy.wait(5000);
     cy.waitForLoaderToDisappear();
-    cy.get('table').should('exist');
+    cy.checkTableAndH4Visibility('Nothing to see here');
 
     // Select the first row within the table (modify the selector as needed)
-    cy.get('table tbody tr:first').click({ force: true });
+    cy.checkTableAndClickRow();
 
-    cy.get('table').should('exist');
+    cy.checkTableAndH4Visibility('No runs');
     cy.waitForLoaderToDisappear();
     const columnList = ['Run ID', 'Run Name'];
     const emptyText = 'No runs';

cypress/e2e/repository/repository.spec.cy.ts

@@ -1,5 +1,3 @@
-import { apiCall } from '../utils/apiCallUtils';
-
 import { filterByStatus } from '../utils/filterByStatusUtils';
 import { filterByString } from '../utils/filterByStringUtils';
 import { login } from '../utils/loginUtils';
@@ -9,7 +7,7 @@ describe('FilterComponent E2E Tests', () => {
   beforeEach(() => {
     login();
     cy.waitUntilDashboardIsLoaded();
-    apiCall();
+    cy.wait(1000);
     cy.get('[id="repositories"]').click();
 
     // Replace with your custom wait command
@@ -62,17 +60,15 @@ describe('FilterComponent E2E Tests', () => {
   });
 
   it('should navigate through pagination', () => {
+    cy.waitForLoaderToDisappear();
     // Assuming you have a button or link for next and previous pagination
     // You can click these buttons to navigate through pages
     pagination(); // Click the "Previous" button
     // Add more assertions as needed
   });
 
   it("should display respository's runs", () => {
-    // cy.wait(5000);
     cy.waitForLoaderToDisappear();
-    //   cy.get('table').should('exist');
-
     // Select the first row within the table (modify the selector as needed)
     cy.get('[data-testid="repository_card"]')
       .first() // Select the first element with the data-testid

cypress/e2e/runsTable/runsTable.spec.cy.ts

@@ -12,7 +12,7 @@ describe('FilterComponent E2E Tests', () => {
   beforeEach(() => {
     login();
     cy.waitUntilDashboardIsLoaded();
-    cy.wait(700);
+    cy.wait(1000);
     // apiCall();
     cy.get('[id="runs"]').click();
   });
@@ -50,10 +50,12 @@ describe('FilterComponent E2E Tests', () => {
   });
 
   it('should work with valid value', () => {
-    search('pipeline');
+    const emptyText = 'We are sorry';
+    search('pipeline', emptyText);
   });
 
   it('should apply filters where string', () => {
+    cy.waitForLoaderToDisappear();
     const columnList = ['Run ID', 'Run Name'];
     const emptyText = 'We are sorry';
     columnList.forEach((col) => {
@@ -62,6 +64,7 @@ describe('FilterComponent E2E Tests', () => {
     filterByStatus();
   });
   it('should navigate through pagination', () => {
+    cy.waitForLoaderToDisappear();
     // Assuming you have a button or link for next and previous pagination
     // You can click these buttons to navigate through pages
     pagination(); // Click the "Previous" button
@@ -77,6 +80,7 @@ describe('FilterComponent E2E Tests', () => {
 
     // Click on the first row
     cy.get('table tbody tr:first').click({ force: true });
+    cy.waitForLoaderToDisappear();
     dag();
   });
 });

cypress/e2e/secretTable/secretTable.spec.cy.ts

@@ -28,13 +28,15 @@ describe('FilterComponent E2E Tests', () => {
   });
 
   it('should work with valid value', () => {
-    search('asd2');
+    const emptyText = 'We are sorry';
+    search('asd2', emptyText);
   });
 
   it('should apply filters where string', () => {
+    const emptyText = 'We are sorry';
     const columnList = ['ID', 'Name', 'Scope'];
     columnList.forEach((col) => {
-      filterByString(col);
+      filterByString(col, emptyText);
     });
   });
   it('should navigate through pagination', () => {

cypress/e2e/stackComponentTable/stackComponentTable.spec.cy.ts

@@ -45,17 +45,20 @@ describe('FilterComponent E2E Tests', () => {
   });
 
   it('should work with valid value', () => {
-    search('asd2');
+    const emptyText = 'We are sorry';
+    search('asd2', emptyText);
   });
 
   it('should apply filters where string', () => {
     const columnList = ['ID', 'Name', 'Flavor'];
+    const emptyText = 'We are sorry';
     columnList.forEach((col) => {
-      filterByString(col);
+      filterByString(col, emptyText);
     });
-    filterByBoolean();
+    filterByBoolean(emptyText);
   });
   it('should navigate through pagination', () => {
+    cy.waitForLoaderToDisappear();
     // Assuming you have a button or link for next and previous pagination
     // You can click these buttons to navigate through pages
     pagination(); // Click the "Previous" button
@@ -64,12 +67,13 @@ describe('FilterComponent E2E Tests', () => {
   it("should display component's stack", () => {
     // cy.wait(5000);
     cy.waitForLoaderToDisappear();
-    cy.get('table').should('exist');
+    cy.checkTableAndH4Visibility('Nothing to see here');
 
     // Select the first row within the table (modify the selector as needed)
     cy.get('table tbody tr:eq(4)').click({ force: true });
 
     cy.get('[data-testid="stack_tab"]').click();
+    cy.waitForLoaderToDisappear();
     cy.get('table').should('exist');
 
     cy.get('table').should('exist');
@@ -78,6 +82,6 @@ describe('FilterComponent E2E Tests', () => {
     columnList.forEach((col) => {
       filterByString(col, emptyText);
     });
-    filterByBoolean();
+    filterByBoolean(emptyText);
   });
 });

cypress/e2e/stackTable/stackTable.spec.cy.ts

@@ -12,7 +12,7 @@ describe('FilterComponent E2E Tests', () => {
   beforeEach(() => {
     login();
     cy.waitUntilDashboardIsLoaded();
-    cy.wait(500);
+    cy.wait(1000);
     cy.get('[id="stack"]').click(); // Replace with your custom wait command
   });
 
@@ -33,17 +33,20 @@ describe('FilterComponent E2E Tests', () => {
   });
 
   it('should work with valid value', () => {
-    search('asd2');
+    const emptyText = 'We are sorry';
+    search('asd2', emptyText);
   });
 
   it('should apply filters where string', () => {
     const columnList = ['ID', 'Name'];
+    const emptyText = 'We are sorry';
     columnList.forEach((col) => {
-      filterByString(col);
+      filterByString(col, emptyText);
     });
-    filterByBoolean();
+    filterByBoolean(emptyText);
   });
   it('should navigate through pagination', () => {
+    cy.waitForLoaderToDisappear();
     // Assuming you have a button or link for next and previous pagination
     // You can click these buttons to navigate through pages
     pagination(); // Click the "Previous" button
@@ -52,6 +55,7 @@ describe('FilterComponent E2E Tests', () => {
 
   it('should display stackDetails', () => {
     // cy.wait(5000);
+    cy.waitForLoaderToDisappear();
     cy.get('table').should('exist');
 
     // Select the first row within the table (modify the selector as needed)
@@ -61,6 +65,7 @@ describe('FilterComponent E2E Tests', () => {
     cy.get('table tbody tr:eq(4)').click({ force: true });
 
     cy.get('[data-testid="run_tab"]').click();
+    cy.waitForLoaderToDisappear();
     cy.get('table').should('exist');
     cy.wait(5000);
     // Select the first row within the table (modify the selector as needed)
@@ -74,13 +79,14 @@ describe('FilterComponent E2E Tests', () => {
   it("should display Stacks's runs", () => {
     // cy.wait(5000);
     cy.waitForLoaderToDisappear();
-    cy.get('table').should('exist');
+    cy.checkTableAndH4Visibility('Nothing to see here');
 
     // Select the first row within the table (modify the selector as needed)
     cy.get('table tbody tr:eq(4)').click({ force: true });
-
     cy.get('[data-testid="run_tab"]').click();
-    cy.get('table').should('exist');
+    cy.waitForLoaderToDisappear();
+    cy.checkTableAndH4Visibility('No runs');
+
     cy.waitForLoaderToDisappear();
     const columnList = ['Run ID', 'Run Name'];
     const emptyText = 'No runs';

cypress/e2e/utils/filterByBooleanUtils.js

@@ -1,6 +1,7 @@
-export const filterByBoolean = () => {
+export const filterByBoolean = (emptyText) => {
   cy.get('[data-testid="filter-icon"]').click();
   cy.get('[data-testid="column-name-dropdown"]').select('Shared');
   cy.get('[data-testid="shared-option"]').select('False');
-  cy.get('table').should('be.visible');
+  cy.waitForLoaderToDisappear();
+  cy.checkTableAndH4Visibility(emptyText);
 };