[Vis Builder] Updates tests to visBuilder key

.github/workflows/cypress-workflow-bundle-snapshot-based.yml

@@ -29,4 +29,4 @@ jobs:
     with:
       test-name: Core Dashboards using Bundle Snapshot
       test-command: env CYPRESS_VISBUILDER_ENABLED=true CYPRESS_DATASOURCE_MANAGEMENT_ENABLED=true yarn cypress:run-with-security --browser chromium --spec 'cypress/integration/core-opensearch-dashboards/opensearch-dashboards/**/*.js'
-      osd-serve-args: --wizard.enabled=true --data_source.enabled=true
+      osd-serve-args: --data_source.enabled=true --vis_builder.enabled=true

CONTRIBUTING.md

@@ -5,6 +5,8 @@
   - [Run Tests](#run-tests)
   - [Formatting](#formatting)
   - [Onboarding](#onboarding)
+  - [Test Development](#test-development)
+    - [Experimental Features](#experimental-features)
 - [Release](#release)
 - [First Things First](#first-things-first)
 - [Ways to Contribute](#ways-to-contribute)
@@ -172,7 +174,7 @@ Add an environment variable (e.g boolean) to only run tests for the experiementa
 
 3. Set up Github action to run the tests inside the current repo
 
-Create a new workflow by referring to [this template](https://github.com/opensearch-project/opensearch-dashboards-functional-test/blob/main/.github/workflows/release-e2e-workflow-template.yml) for OSD plugin or [this workflow](https://github.com/opensearch-project/opensearch-dashboards-functional-test/blob/main/.github/workflows/cypress-workflow-vanilla-snapshot-based.yml) for OSD Core. This workflow is to run the OSD from artifact. You could enable your experimental feature through either `./bin/opensearch-dashboards --wizard.enabled` or through modifying the content of the yml file. (In order to run the tests from the source code repo of the feature, you can set up workflows to check out the source code and use `yarn` to start OSD.)
+Create a new workflow by referring to [this template](https://github.com/opensearch-project/opensearch-dashboards-functional-test/blob/main/.github/workflows/release-e2e-workflow-template.yml) for OSD plugin or [this workflow](https://github.com/opensearch-project/opensearch-dashboards-functional-test/blob/main/.github/workflows/cypress-workflow-vanilla-snapshot-based.yml) for OSD Core. This workflow is to run the OSD from artifact. You could enable your experimental feature through either `./bin/opensearch-dashboards --vis_builder.enabled` or through modifying the content of the yml file. (In order to run the tests from the source code repo of the feature, you can set up workflows to check out the source code and use `yarn` to start OSD.)
 
 4. Run tests from `opensearch-build`
 

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_builder/basic.spec.js

@@ -15,36 +15,41 @@ import {
   VB_METRIC_VIS_TITLE,
   VB_PATH_INDEX_DATA,
   VB_PATH_SO_DATA,
+  VB_SO_TYPE,
 } from '../../../../../utils/constants';
 
 if (Cypress.env('VISBUILDER_ENABLED')) {
   describe('Visualization Builder Base Tests', () => {
     before(() => {
       cy.deleteIndex(VB_INDEX_ID);
-      cy.bulkUploadDocs(VB_PATH_INDEX_DATA, VB_INDEX_ID);
+      cy.bulkUploadDocs(VB_PATH_INDEX_DATA);
       cy.importSavedObjects(VB_PATH_SO_DATA);
     });
 
-    it('Show existing visualizations in Visualize', () => {
+    it('Show existing visualizations in Visualize and navigate to it', () => {
       cy.visit(`${BASE_PATH}/app/visualize`);
       cy.get('input[type="search"]').type(`${VB_METRIC_VIS_TITLE}{enter}`);
+      cy.get('.euiBasicTable-loading').should('not.exist'); // wait for the loading to stop
       cy.getElementByTestId(
         `visListingTitleLink-${toTestId(VB_METRIC_VIS_TITLE)}`
-      ).should('exist');
+      )
+        .should('exist')
+        .click();
+      cy.location('pathname').should('contain', VB_APP_PATH);
     });
 
-    it('Navigate to Visualization Builder from Visualize', () => {
+    it('Navigate to Visualization Builder from Create Visualization', () => {
       cy.visit(`${BASE_PATH}/app/visualize`);
       cy.getElementByTestId('newItemButton').click();
-      cy.getElementByTestId('visType-wizard').click();
+      cy.getElementByTestId('visType-vis-builder').click();
       cy.location('pathname').should('eq', VB_APP_PATH);
     });
 
     it('Create new basic metric visualization', () => {
       cy.visit(VB_APP_URL);
 
       // Wait for page to load
-      cy.getElementByTestId('homeIcon');
+      cy.waitForLoader();
       cy.vbSelectDataSource(VB_INDEX_PATTERN);
 
       // Set Top nav
@@ -59,19 +64,19 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
         .should('contain.text', VB_INDEX_DOC_COUNT);
 
       // Update Topnav
-      cy.setTopNavQuery('age < 50');
+      cy.setTopNavQuery('salary < 15000');
 
       // See if the value updated
       cy.getElementByTestId('visualizationLoader')
         .find('.mtrVis__value')
-        .should('contain.text', `4,390`);
+        .should('contain.text', `5,000`);
     });
 
     it('Be able to add/ edit and remove a field', () => {
       cy.visit(VB_APP_URL);
 
       // Wait for page to load
-      cy.getElementByTestId('homeIcon');
+      cy.waitForLoader();
       cy.vbSelectDataSource(VB_INDEX_PATTERN);
       cy.vbSelectVisType('Metric');
 
@@ -85,14 +90,19 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
         {
           testSubj: 'defaultEditorAggSelect',
           type: 'select',
-          value: 'Average',
+          value: 'Min',
+        },
+        {
+          testSubj: 'visDefaultEditorField',
+          type: 'select',
+          value: 'age',
         },
       ]);
 
       // Check if add worked
       cy.getElementByTestId('visualizationLoader')
         .find('.mtrVis__value')
-        .should('contain.text', '54.912');
+        .should('contain.text', '10');
 
       cy.getElementByTestId('dropBoxField-metric-0').click();
       cy.vbEditAgg([
@@ -116,6 +126,33 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
       cy.getElementByTestId('emptyWorkspace').should('exist');
     });
 
+    it('Be able to save a visualization', () => {
+      cy.visit(VB_APP_URL);
+
+      // Wait for page to load
+      cy.waitForLoader();
+      cy.vbSelectDataSource(VB_INDEX_PATTERN);
+
+      // Create basic vis
+      cy.getElementByTestId('field-undefined-showDetails').drag(
+        '[data-test-subj=dropBoxAddField-metric]'
+      );
+
+      // Save
+      const cleanupKey = Date.now();
+      const title = `VB: vb${cleanupKey}`;
+      cy.getElementByTestId('visBuilderSaveButton')
+        .should('not.be.disabled')
+        .click();
+      cy.getElementByTestId('savedObjectTitle').type(title + '{enter}');
+
+      // Verify save
+      cy.location('pathname').should('contain', VB_APP_PATH + '/edit');
+
+      // Cleanup
+      cy.deleteSavedObjectByType(VB_SO_TYPE, `vb${cleanupKey}`);
+    });
+
     after(() => {
       cy.deleteIndex(VB_INDEX_ID);
     });

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_builder/dashboard.spec.js

@@ -7,40 +7,49 @@ import {
   VB_INDEX_PATTERN,
   VB_INDEX_ID,
   VB_DASHBOARD_ID,
-  VB_METRIC_EMBEDDABLE_ID,
-  VB_BAR_EMBEDDABLE_ID,
   toTestId,
   VB_INDEX_DOC_COUNT,
   VB_INDEX_START_TIME,
   VB_INDEX_END_TIME,
   VB_PATH_INDEX_DATA,
   VB_PATH_SO_DATA,
   VB_LINE_VIS_TITLE,
+  VB_SO_TYPE,
+  VB_METRIC_VIS_TITLE,
+  VB_BAR_VIS_TITLE,
 } from '../../../../../utils/constants';
 
 if (Cypress.env('VISBUILDER_ENABLED')) {
   describe('Visualization Builder Dashboard Tests', () => {
     before(() => {
       cy.deleteIndex(VB_INDEX_ID);
-      cy.bulkUploadDocs(VB_PATH_INDEX_DATA, VB_INDEX_ID);
+      cy.bulkUploadDocs(VB_PATH_INDEX_DATA);
 
       cy.importSavedObjects(VB_PATH_SO_DATA);
 
       cy.visit(`${BASE_PATH}/app/dashboards#/view/${VB_DASHBOARD_ID}`);
 
       // Wait for page to load
-      cy.getElementByTestId('homeIcon');
+      cy.waitForLoader();
 
       cy.setTopNavDate(VB_INDEX_START_TIME, VB_INDEX_END_TIME);
     });
 
     it('Should have valid visualizations', () => {
-      cy.get(`[data-test-embeddable-id="${VB_METRIC_EMBEDDABLE_ID}"]`)
+      cy.getElementByTestId(
+        `embeddablePanelHeading-${toTestId(VB_METRIC_VIS_TITLE, '')}`
+      )
+        .should('contain.text', VB_METRIC_VIS_TITLE)
+        .siblings('.embPanel__content')
         .find('.mtrVis__value')
         .should('contain.text', VB_INDEX_DOC_COUNT); // Total no of record in the sample daa
-      cy.get(`[data-test-embeddable-id="${VB_BAR_EMBEDDABLE_ID}"]`)
+      cy.getElementByTestId(
+        `embeddablePanelHeading-${toTestId(VB_BAR_VIS_TITLE, '')}`
+      )
+        .should('contain.text', VB_BAR_VIS_TITLE)
+        .siblings('.embPanel__content')
         .find('.visLegend__valueTitle')
-        .should('contain.text', `Count`);
+        .should('contain.text', `Median`);
     });
 
     it('Should be able to add a visualization', () => {
@@ -67,7 +76,7 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
       // Create new Vis Builder Visualisation
       cy.getElementByTestId('dashboardEditMode').click();
       cy.getElementByTestId('dashboardAddNewPanelButton').click();
-      cy.getElementByTestId('visType-wizard').click();
+      cy.getElementByTestId('visType-vis-builder').click();
 
       // Create a metric visualisation
       cy.vbSelectDataSource(VB_INDEX_PATTERN);
@@ -79,7 +88,7 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
       // Save and return
       const cleanupKey = Date.now();
       const visTitle = `VB: New Dashboard Visualization - vb${cleanupKey}`;
-      cy.getElementByTestId('wizardSaveButton')
+      cy.getElementByTestId('visBuilderSaveButton')
         .should('not.be.disabled')
         .click();
       cy.getElementByTestId('savedObjectTitle').type(visTitle);
@@ -93,13 +102,15 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
       // Cleanup
       cy.getElementByTestId('dashboardViewOnlyMode').click();
       cy.getElementByTestId('confirmModalConfirmButton').click();
-      cy.deleteSavedObjectByType('wizard', `vb${cleanupKey}`);
+      cy.deleteSavedObjectByType(VB_SO_TYPE, `vb${cleanupKey}`);
     });
 
     it('Should be able to edit a visualization', () => {
       // Navigate to vis builder
       cy.getElementByTestId('dashboardEditMode').click();
-      cy.get(`[data-test-embeddable-id="${VB_METRIC_EMBEDDABLE_ID}"]`)
+      cy.getElementByTestId(
+        `embeddablePanelHeading-${toTestId(VB_METRIC_VIS_TITLE, '')}`
+      )
         .find('[data-test-subj="embeddablePanelToggleMenuIcon"]')
         .click();
       cy.getElementByTestId('embeddablePanelAction-editPanel').click();
@@ -119,7 +130,7 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
       ]);
 
       // Save and return
-      cy.getElementByTestId('wizardsaveAndReturnButton').click();
+      cy.getElementByTestId('visBuilderSaveAndReturnButton').click();
 
       cy.getElementByTestId('visualizationLoader').should(
         'contain.text',

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_builder/experimental.spec.js

@@ -38,7 +38,7 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
 
       // Check Create visualization modal
       cy.getElementByTestId('newItemButton').click();
-      cy.getElementByTestId(['visType-wizard'])
+      cy.getElementByTestId(['visType-vis-builder'])
         .find('.euiKeyPadMenuItem__betaBadge')
         .should('exist');
     });
@@ -55,11 +55,11 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
 
       // Check Create visualization modal
       cy.getElementByTestId('newItemButton').click();
-      cy.getElementByTestId(['visType-wizard']).should('exist');
+      cy.getElementByTestId(['visType-vis-builder']).should('exist');
 
       // Check Dashboard
       cy.visit(`${BASE_PATH}/app/dashboards#/view/${VB_DASHBOARD_ID}`);
-      cy.getElementByTestId('wizardLoader').should('exist');
+      cy.getElementByTestId('visBuilderLoader').should('exist');
     });
 
     it('Sould handle experimental setting turned off', () => {
@@ -74,7 +74,7 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
 
       // Check Create visualization modal
       cy.getElementByTestId('newItemButton').click();
-      cy.getElementByTestId(['visType-wizard']).should('not.exist');
+      cy.getElementByTestId(['visType-vis-builder']).should('not.exist');
 
       // Check Dashboard
       cy.visit(`${BASE_PATH}/app/dashboards#/view/${VB_DASHBOARD_ID}`);

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_builder/vis_types/area.spec.js

@@ -17,13 +17,13 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
   describe('Vis Builder: Line Chart', () => {
     before(() => {
       cy.deleteIndex(VB_INDEX_ID);
-      cy.bulkUploadDocs(VB_PATH_INDEX_DATA, VB_INDEX_ID);
+      cy.bulkUploadDocs(VB_PATH_INDEX_DATA);
       cy.importSavedObjects(VB_PATH_SO_DATA);
 
       cy.visit(VB_APP_URL);
 
       // Wait for page to load
-      cy.getElementByTestId('homeIcon');
+      cy.waitForLoader();
       cy.vbSelectDataSource(VB_INDEX_PATTERN);
 
       // Set Top nav
@@ -33,13 +33,13 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
     });
 
     it('Basic test', () => {
-      cy.getElementByTestId('field-age-showDetails').drag(
+      cy.getElementByTestId('field-salary-showDetails').drag(
         '[data-test-subj="dropBoxAddField-metric"]'
       );
-      cy.getElementByTestId('field-genre.keyword-showDetails').drag(
+      cy.getElementByTestId('field-categories.keyword-showDetails').drag(
         '[data-test-subj="dropBoxAddField-segment"]'
       );
-      testAreaValues([53, 57, 53, 54, 55]);
+      testAreaValues([11250, 13750, 18750, 16250]);
     });
 
     after(() => {

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_builder/vis_types/bar.spec.js

@@ -17,13 +17,13 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
   describe('Vis Builder: Bar Chart', () => {
     before(() => {
       cy.deleteIndex(VB_INDEX_ID);
-      cy.bulkUploadDocs(VB_PATH_INDEX_DATA, VB_INDEX_ID);
+      cy.bulkUploadDocs(VB_PATH_INDEX_DATA);
       cy.importSavedObjects(VB_PATH_SO_DATA);
 
       cy.visit(VB_APP_URL);
 
       // Wait for page to load
-      cy.getElementByTestId('homeIcon');
+      cy.waitForLoader();
       cy.vbSelectDataSource(VB_INDEX_PATTERN);
 
       // Set Top nav
@@ -33,13 +33,13 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
     });
 
     it('Basic test', () => {
-      cy.getElementByTestId('field-age-showDetails').drag(
+      cy.getElementByTestId('field-salary-showDetails').drag(
         '[data-test-subj="dropBoxAddField-metric"]'
       );
-      cy.getElementByTestId('field-genre.keyword-showDetails').drag(
+      cy.getElementByTestId('field-categories.keyword-showDetails').drag(
         '[data-test-subj="dropBoxAddField-segment"]'
       );
-      testBarValues([53, 57, 53, 54, 55]);
+      testBarValues([11250, 13750, 18750, 16250]);
     });
 
     after(() => {

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_builder/vis_types/line.spec.js

@@ -17,13 +17,13 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
   describe('Vis Builder: Line Chart', () => {
     before(() => {
       cy.deleteIndex(VB_INDEX_ID);
-      cy.bulkUploadDocs(VB_PATH_INDEX_DATA, VB_INDEX_ID);
+      cy.bulkUploadDocs(VB_PATH_INDEX_DATA);
       cy.importSavedObjects(VB_PATH_SO_DATA);
 
       cy.visit(VB_APP_URL);
 
       // Wait for page to load
-      cy.getElementByTestId('homeIcon');
+      cy.waitForLoader();
       cy.vbSelectDataSource(VB_INDEX_PATTERN);
 
       // Set Top nav
@@ -33,13 +33,13 @@ if (Cypress.env('VISBUILDER_ENABLED')) {
     });
 
     it('Basic test', () => {
-      cy.getElementByTestId('field-age-showDetails').drag(
+      cy.getElementByTestId('field-salary-showDetails').drag(
         '[data-test-subj="dropBoxAddField-metric"]'
       );
-      cy.getElementByTestId('field-genre.keyword-showDetails').drag(
+      cy.getElementByTestId('field-categories.keyword-showDetails').drag(
         '[data-test-subj="dropBoxAddField-segment"]'
       );
-      testLineValues([53, 57, 53, 54, 55]);
+      testLineValues([11250, 13750, 18750, 16250]);
     });
 
     after(() => {