frontend: quickstart-vdk operability tests using cypress (#2359)

DeltaMichael · Dilyan Marinov · web-flow · commit b608cbd59a50 · 2023-07-10T12:17:23.000+03:00
## Why? We test that the docker image is starting correctly, but we don't actually test that the frontend is operational. This has resulted in docker images where the docker image starts, but the frontend is not operational with no way of detecting the problem. ## What? - Move regular e2e tests into their own directory - Introduce quickstart-smoke script - Create basic cypress smoke test for the frontend - Run smoke test after deployment to test environment ## How was this tested? Ran quickstart-vdk locally and ran cypress against frontend CI on localhost:8092 Ran smoke tests and e2e tests in CI https://gitlab.com/vmware-analytics/versatile-data-kit/-/pipelines/921430730 ## What kind of change is this? Feature/non-breaking Signed-off-by: Dilyan Marinov <mdilyan@vmware.com> Co-authored-by: Dilyan Marinov <mdilyan@vmware.com>
diff --git a/projects/frontend/cicd/.gitlab-ci.yml b/projects/frontend/cicd/.gitlab-ci.yml
@@ -148,6 +148,10 @@ frontend_publish_ui_image:
 
 frontend_deploy_testing_data_pipelines:
   stage: pre_release_test
+  needs:
+    - job: frontend-data-pipelines-e2e-tests
+      optional: false
+      artifacts: false
   image: docker:23.0.1
   script:
     - apk --no-cache add bash openssl curl git gettext zip py-pip
@@ -191,6 +195,30 @@ frontend_heartbeat_test:
     - if: '$CI_COMMIT_BRANCH == "main"'
       changes: *frontend_data_pipelines_locations
 
+frontend_quickstart_operability_test:
+  stage: pre_release_test
+  needs:
+    - job: frontend_heartbeat_test
+      optional: false
+      artifacts: false
+    - job: frontend-data-pipelines-build
+      optional: false
+      artifacts: true
+  image: "versatiledatakit/vdk-cicd-base-gui:2.0.0"
+  before_script:
+    - cd projects/frontend/data-pipelines/gui
+  script:
+    - export CYPRESS_BASE_URL=http://cicd-control-service-ui:80
+    - npm run quickstart-smoke
+  retry: !reference [.frontend_retry, retry_options]
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "schedule"'
+      when: never
+    - if: '$CI_COMMIT_BRANCH == "main"'
+      changes: *frontend_shared_components_locations
+    - if: '$CI_COMMIT_BRANCH == "main"'
+      changes: *frontend_data_pipelines_locations
+
 frontend_publish_test_image:
   stage: release_image
   script:
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/data-jobs.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/data-jobs.spec.js
@@ -5,8 +5,8 @@
 
 /// <reference types="cypress" />
 
-import { DataJobsExplorePage } from '../../../support/pages/explore/data-jobs/data-jobs.po';
-import { DataJobExploreDetailsPage } from '../../../support/pages/explore/data-jobs/details/data-job-details.po';
+import { DataJobsExplorePage } from '../../../../support/pages/explore/data-jobs/data-jobs.po';
+import { DataJobExploreDetailsPage } from '../../../../support/pages/explore/data-jobs/details/data-job-details.po';
 
 describe(
     'Data Jobs Explore Page',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/details/data-job-details.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/details/data-job-details.spec.js
@@ -5,8 +5,8 @@
 
 /// <reference types="cypress" />
 
-import { DataJobsExplorePage } from '../../../../support/pages/explore/data-jobs/data-jobs.po';
-import { DataJobExploreDetailsPage } from '../../../../support/pages/explore/data-jobs/details/data-job-details.po';
+import { DataJobsExplorePage } from '../../../../../support/pages/explore/data-jobs/data-jobs.po';
+import { DataJobExploreDetailsPage } from '../../../../../support/pages/explore/data-jobs/details/data-job-details.po';
 
 describe(
     'Data Job Explore Details Page',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/executions/data-job-executions.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/executions/data-job-executions.spec.js
@@ -5,10 +5,10 @@
 
 /// <reference types="cypress" />
 
-import { DataJobDetailsBasePO } from '../../../../support/pages/base/data-pipelines/data-job-details-base.po';
+import { DataJobDetailsBasePO } from '../../../../../support/pages/base/data-pipelines/data-job-details-base.po';
 
-import { DataJobsExplorePage } from '../../../../support/pages/explore/data-jobs/data-jobs.po';
-import { DataJobExploreExecutionsPage } from '../../../../support/pages/explore/data-jobs/executions/data-job-executions.po';
+import { DataJobsExplorePage } from '../../../../../support/pages/explore/data-jobs/data-jobs.po';
+import { DataJobExploreExecutionsPage } from '../../../../../support/pages/explore/data-jobs/executions/data-job-executions.po';
 
 describe(
     'Data Job Explore Executions Page',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page-data-jobs-health-overview.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page-data-jobs-health-overview.spec.js
@@ -5,11 +5,11 @@
 
 /// <reference types="cypress" />
 
-import { TEAM_VDK_DATA_JOB_FAILING } from '../../support/helpers/constants.support';
+import { TEAM_VDK_DATA_JOB_FAILING } from '../../../support/helpers/constants.support';
 
-import { GetStartedDataJobsHealthOverviewWidgetPO } from '../../support/pages/get-started/get-started-page-data-jobs-health-overview.po';
-import { DataJobManageDetailsPage } from '../../support/pages/manage/data-jobs/details/data-job-details.po';
-import { DataJobManageExecutionsPage } from '../../support/pages/manage/data-jobs/executions/data-job-executions.po';
+import { GetStartedDataJobsHealthOverviewWidgetPO } from '../../../support/pages/get-started/get-started-page-data-jobs-health-overview.po';
+import { DataJobManageDetailsPage } from '../../../support/pages/manage/data-jobs/details/data-job-details.po';
+import { DataJobManageExecutionsPage } from '../../../support/pages/manage/data-jobs/executions/data-job-executions.po';
 
 describe(
     'Get Started Page: Data Jobs Health Overview Widget',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page.spec.js
@@ -5,7 +5,7 @@
 
 /// <reference types="cypress" />
 
-import { GetStartedPagePO } from '../../support/pages/get-started/get-started-page.po';
+import { GetStartedPagePO } from '../../../support/pages/get-started/get-started-page.po';
 
 describe(
     'Get Started Page',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/data-jobs.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/data-jobs.spec.js
@@ -5,8 +5,8 @@
 
 /// <reference types="cypress" />
 
-import { DataJobsManagePage } from '../../../support/pages/manage/data-jobs/data-jobs.po';
-import { DataJobManageDetailsPage } from '../../../support/pages/manage/data-jobs/details/data-job-details.po';
+import { DataJobsManagePage } from '../../../../support/pages/manage/data-jobs/data-jobs.po';
+import { DataJobManageDetailsPage } from '../../../../support/pages/manage/data-jobs/details/data-job-details.po';
 
 describe(
     'Data Jobs Manage Page',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/details/data-job-details.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/details/data-job-details.spec.js
@@ -5,10 +5,10 @@
 
 /// <reference types="cypress" />
 
-import { compareDatesASC } from '../../../../plugins/helpers/job-helpers.plugins';
+import { compareDatesASC } from '../../../../../plugins/helpers/job-helpers.plugins';
 
-import { DataJobsManagePage } from '../../../../support/pages/manage/data-jobs/data-jobs.po';
-import { DataJobManageDetailsPage } from '../../../../support/pages/manage/data-jobs/details/data-job-details.po';
+import { DataJobsManagePage } from '../../../../../support/pages/manage/data-jobs/data-jobs.po';
+import { DataJobManageDetailsPage } from '../../../../../support/pages/manage/data-jobs/details/data-job-details.po';
 
 describe(
     'Data Job Manage Details Page',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/executions/data-job-executions.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/executions/data-job-executions.spec.js
@@ -5,8 +5,8 @@
 
 /// <reference types="cypress" />
 
-import { DataJobsManagePage } from '../../../../support/pages/manage/data-jobs/data-jobs.po';
-import { DataJobManageExecutionsPage } from '../../../../support/pages/manage/data-jobs/executions/data-job-executions.po';
+import { DataJobsManagePage } from '../../../../../support/pages/manage/data-jobs/data-jobs.po';
+import { DataJobManageExecutionsPage } from '../../../../../support/pages/manage/data-jobs/executions/data-job-executions.po';
 
 describe(
     'Data Job Manage Executions Page',
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/router/router.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/router/router.spec.js
@@ -5,8 +5,7 @@
 
 /// <reference types="cypress" />
 
-import { BasePagePO } from '../../support/pages/base/base-page.po';
-import { GetStartedPagePO } from '../../support/pages/get-started/get-started-page.po';
+import { BasePagePO } from '../../../support/pages/base/base-page.po';
 
 describe('Routing for pages', () => {
     describe('smoke', { tags: ['@smoke'] }, () => {
diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/quickstart-operability/quickstart.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/quickstart-operability/quickstart.spec.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2021-2023 VMware, Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import { GetStartedPagePO } from '../../support/pages/get-started/get-started-page.po';
+import { DataJobsManagePage } from '../../support/pages/manage/data-jobs/data-jobs.po';
+import { BasePagePO } from '../../support/pages/base/base-page.po';
+
+describe('Check if quickstart-vdk frontend is operational', () => {
+    describe('smoke', { tags: ['@smoke'] }, () => {
+        it('navigates to root page and the page loads correctly', () => {
+            const getStartedPage = BasePagePO.navigateToNoBootstrap();
+            getStartedPage
+                .getPageTitle()
+                .invoke('text')
+                .invoke('trim')
+                .should('eq', 'Get Started with Data Pipelines');
+        });
+
+        it('navigates to get-started page and the page loads correctly', () => {
+            const getStartedPage = GetStartedPagePO.navigateToNoBootstrap();
+            getStartedPage
+                .getPageTitle()
+                .invoke('text')
+                .invoke('trim')
+                .should('eq', 'Get Started with Data Pipelines');
+        });
+
+        it('navigates to manage page and the page loads correctly', () => {
+            const dataJobsManagePage =
+                DataJobsManagePage.navigateToNoBootstrap();
+
+            dataJobsManagePage
+                .getPageTitle()
+                .scrollIntoView()
+                .should('be.visible')
+                .invoke('text')
+                .invoke('trim')
+                .should('eq', 'Manage Data Jobs');
+
+            dataJobsManagePage
+                .getDataGrid()
+                .scrollIntoView()
+                .should('be.visible');
+        });
+    });
+});
diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/base-page.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/base-page.po.js
@@ -95,6 +95,12 @@ export class BasePagePO {
         return this.getPage();
     }
 
+    static navigateToNoBootstrap() {
+        this.navigateToUrl('/');
+        this.waitForViewToRenderShort();
+        return this.getPage();
+    }
+
     /**
      * ** Navigate to page with provided nav link id through side menu navigation and return instance of page object.
      *
diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-jobs-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-jobs-base.po.js
@@ -26,6 +26,14 @@ export class DataJobsBasePO extends DataPipelinesBasePO {
         return this.navigateToDataJobUrl(`/${context}/data-jobs`);
     }
 
+    /**
+     * ** Navigate to Data Job Url.
+     * ** Do not wait for bootstrap and interceptors
+     * @param {'explore'|'manage'} context
+     */
+    static navigateToNoBootstrap(context) {
+        return this.navigateToDataJobUrlNoBootstrap(`/${context}/data-jobs`);
+    }
     // Selectors
 
     getDataGridRefreshButton() {
diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-pipelines-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-pipelines-base.po.js
@@ -62,6 +62,16 @@ export class DataPipelinesBasePO extends BasePagePO {
         return this.getPage();
     }
 
+    /**
+     * ** Navigate to some url without bootstrap.
+     *
+     * @param {string} url
+     */
+    static navigateToDataJobUrlNoBootstrap(url) {
+        this.navigateToUrl(url);
+        return this.getPage();
+    }
+
     /**
      * ** Wait for Data Job post execution req.
      *
diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page.po.js
@@ -32,4 +32,15 @@ export class GetStartedPagePO extends BasePagePO {
 
         return this.getPage();
     }
+
+    /**
+     * ** Navigate to home page through URL and return instance of page object.
+     * ** Do not wait for bootstrap and interceptors
+     * @type {GetStartedPagePO}
+     */
+    static navigateToNoBootstrap() {
+        cy.visit('/get-started');
+        this.waitForViewToRenderShort();
+        return this.getPage();
+    }
 }
diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/data-jobs.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/data-jobs.po.js
@@ -58,6 +58,20 @@ export class DataJobsManagePage extends DataJobsBasePO {
         return page;
     }
 
+    /**
+     * ** Navigate to home page through URL and return instance of page object.
+     * ** Do not wait for bootstrap and interceptors
+     * @type {GetStartedPagePO}
+     */
+    static navigateToNoBootstrap() {
+        /**
+         * @type {DataJobsManagePage}
+         */
+        const page = super.navigateToNoBootstrap('manage');
+        page.waitForGridToLoad(null);
+        return page;
+    }
+
     /**
      * ** Wait until Data grid is loaded.
      *
diff --git a/projects/frontend/data-pipelines/gui/package.json b/projects/frontend/data-pipelines/gui/package.json
@@ -17,7 +17,8 @@
     "test:headless": "npm run test -- --browsers=ChromeHeadless_No_Sandbox",
     "lint": "npm run ng -- lint",
     "cypress:sc": "node --max_old_space_size=2048 ./node_modules/cypress/bin/cypress",
-    "e2e": "([ ! -z ${OAUTH2_API_TOKEN} ] || echo 'WARN: No OAUTH2_API_TOKEN set.') && npm run cypress:sc -- run --browser chrome --env grepTags=${CYPRESS_grepTags},OAUTH2_API_TOKEN=${OAUTH2_API_TOKEN},test_environment=${CYPRESS_test_environment},CYPRESS_TERMINAL_LOGS='./e2e/logs'",
+    "e2e": "([ ! -z ${OAUTH2_API_TOKEN} ] || echo 'WARN: No OAUTH2_API_TOKEN set.') && npm run cypress:sc -- run --browser chrome --env grepTags=${CYPRESS_grepTags},OAUTH2_API_TOKEN=${OAUTH2_API_TOKEN},test_environment=${CYPRESS_test_environment},CYPRESS_TERMINAL_LOGS='./e2e/logs' --spec './e2e/integration/frontend-tests/**/*.spec.js'",
+    "quickstart-smoke": "npm run cypress:sc -- run --browser chrome --env grepTags=${CYPRESS_grepTags},OAUTH2_API_TOKEN=${OAUTH2_API_TOKEN},test_environment=${CYPRESS_test_environment},CYPRESS_TERMINAL_LOGS='./e2e/logs' --spec ./e2e/integration/quickstart-operability/quickstart.spec.js",
     "start-server-and-test-e2e": "start-server-and-test start http://localhost.vmware.com:4200 e2e",
     "dev-start": "npm run build && npm run start",
     "clean:dist": "rimraf dist",
