[Table visualization] Add functional tests for new table vis (#423) (#…

…672)

* [Table visualization] Add functional tests for new table vis

There are four test cases:
* basic.spec.js contains tests related to vis page, like
inspector, save an object.
* data.spec.js tests diff metrics and buckets aggregations.
* options.spec.js contains tests on options panel.
* split.spec.js tests table functions, like sort, adjust col
width, split tables and etc.

Most tests are the same as the removed funtional tests.
split.spec.js is the only one with all new tests.

Partially Resolved:
#401

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

* fix PR comments

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

* fix test error and add embed test suite

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

* Fix multiple submit bug
Currently there are two submit type button in data source
which cause cypress fail to find and click. In this PR, I
switch to use data-test-subj to uniquely identify the btn.

Issue Resolved:
#439

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

* missed conflict resolution

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

---------

Signed-off-by: Anan Zhuang <ananzh@amazon.com>
Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Co-authored-by: Kawika Avilla <kavilla414@gmail.com>
(cherry picked from commit 3dffb5f)

Co-authored-by: Anan Zhuang <ananzh@amazon.com>

cypress/fixtures/dashboard/opensearch_dashboards/vis_type_table/table_saved_objects.ndjson

@@ -0,0 +1,3 @@
+{"id":"index-pattern-vis-table","type":"index-pattern","namespaces":["default"],"updated_at":"2022-12-05T21:14:35.148Z","version":"WzUwLDFd","attributes":{"title":"vis-table","timeFieldName":"timestamp"},"references":[],"migrationVersion":{"index-pattern":"7.6.0"}}
+{"id":"f3f0a6f0-74de-11ed-9a2e-2509e8c9c014","type":"visualization","namespaces":["default"],"updated_at":"2022-12-05T20:54:04.254Z","version":"WzQ0LDFd","attributes":{"title":"TABLE: Basic","visState":"{\"title\":\"TABLE: Basic\",\"type\":\"table\",\"aggs\":[{\"id\":\"1\",\"enabled\":true,\"type\":\"count\",\"params\":{},\"schema\":\"metric\"}],\"params\":{\"perPage\":10,\"showPartialRows\":false,\"showMetricsAtAllLevels\":false,\"showTotal\":false,\"totalFunc\":\"sum\",\"percentageCol\":\"\"}}","uiStateJSON":"{}","description":"A basic table visualization","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"query\":{\"query\":\"\",\"language\":\"kuery\"},\"filter\":[],\"indexRefName\":\"kibanaSavedObjectMeta.searchSourceJSON.index\"}"}},"references":[{"name":"kibanaSavedObjectMeta.searchSourceJSON.index","type":"index-pattern","id":"index-pattern-vis-table"}],"migrationVersion":{"visualization":"7.10.0"}}
+{"exportedCount":1,"missingRefCount":0,"missingReferences":[]}

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

@@ -0,0 +1,112 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  TABLE_INDEX_ID,
+  TABLE_INDEX_PATTERN,
+  TABLE_PATH_INDEX_DATA,
+  TABLE_INDEX_START_TIME,
+  TABLE_INDEX_END_TIME,
+  TABLE_CREATE_URL,
+  TABLE_VIS_APP_PATH,
+  TABLE_VIS_TYPE,
+} from '../../../../../utils/constants';
+
+/**
+ * Basic test suite description:
+ * Create a new table visualization from index pattern.
+ * Set the time range and Histogram Aggregation.
+ * Test that global header and side bar function correctly.
+ * Test that table visualization can be saved.
+ * Test inspector is enabled and contains correct data.
+ */
+
+describe('table visualization basic functions', () => {
+  before(() => {
+    cy.deleteIndex(TABLE_INDEX_ID);
+    cy.deleteIndexPattern(TABLE_INDEX_PATTERN);
+    cy.bulkUploadDocs(TABLE_PATH_INDEX_DATA);
+    cy.createIndexPattern(TABLE_INDEX_PATTERN, {
+      title: TABLE_INDEX_ID,
+      timeFieldName: 'timestamp',
+    });
+
+    cy.log('create a new table visualization: ', TABLE_CREATE_URL);
+    cy.visit(TABLE_CREATE_URL);
+    cy.url().should('contain', TABLE_VIS_APP_PATH);
+    // Select index pattern and load table visualization
+    cy.setTopNavDate(TABLE_INDEX_START_TIME, TABLE_INDEX_END_TIME);
+    // Wait for page to load
+    cy.waitForLoader();
+  });
+
+  it('Should apply changed params and allow to reset', () => {
+    // Set a Histogram Aggregation
+    cy.tbAddBucketsAggregation();
+    cy.tbSplitRows();
+    cy.tbSetupHistogramAggregation('age', '20', 2);
+    // Update Historgram interval
+    cy.tbSetHistogramInterval('201', 2);
+    cy.tbIsUpdateAggregationSettingsEnabled();
+    // Discard the updated interval
+    cy.tbDiscardAggregationSettings();
+    cy.tbIsHistogramIntervalSet('20', 2);
+  });
+
+  it('Should be able to save and load', () => {
+    const cleanupKey = Date.now();
+    const title = `table${cleanupKey}`;
+    // Save
+    cy.log('Save this table visualization with title ', title);
+    cy.getElementByTestId('visualizeSaveButton')
+      .should('not.be.disabled')
+      .click();
+    cy.getElementByTestId('savedObjectTitle').type(title);
+    cy.getElementByTestId('confirmSaveSavedObjectButton').click();
+    // Verify save
+    cy.getElementByTestId('breadcrumb last')
+      .invoke('attr', 'title')
+      .should('equal', title);
+    // Cleanup
+    cy.log('Remove saved table visualization with title ', title);
+    cy.deleteSavedObjectByType(TABLE_VIS_TYPE, title);
+  });
+
+  it('Should have inspector enabled', () => {
+    cy.getElementByTestId('openInspectorButton')
+      .invoke('attr', 'class')
+      .should(
+        'equal',
+        'euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiHeaderLink'
+      );
+  });
+
+  it('Should show correct data in inspector', () => {
+    const expectedData = [
+      '0',
+      '1,059',
+      '20',
+      '2,236',
+      '40',
+      '2,200',
+      '60',
+      '2,211',
+      '80',
+      '2,179',
+      '100',
+      '115',
+    ];
+    cy.tbOpenInspector();
+    cy.tbGetTableDataFromInspectPanel().then((data) => {
+      expect(data).to.deep.eq(expectedData);
+    });
+    cy.tbCloseInspector();
+  });
+
+  after(() => {
+    cy.deleteIndex(TABLE_INDEX_ID);
+    cy.deleteIndexPattern(TABLE_INDEX_PATTERN);
+  });
+});

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis_type_table/data.spec.js

@@ -0,0 +1,272 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonUI } from '@opensearch-dashboards-test/opensearch-dashboards-test-library';
+import {
+  BASE_PATH,
+  TABLE_INDEX_ID,
+  TABLE_PATH_INDEX_DATA,
+  TABLE_INDEX_PATTERN,
+  TABLE_PATH_SO_DATA,
+  TABLE_BASIC_VIS_TITLE,
+  TABLE_VIS_APP_PATH,
+  TABLE_INDEX_START_TIME,
+  TABLE_INDEX_END_TIME,
+  toTestId,
+} from '../../../../../utils/constants';
+
+const commonUI = new CommonUI(cy);
+
+describe('table visualization data', () => {
+  before(() => {
+    cy.deleteIndex(TABLE_INDEX_ID);
+    cy.deleteIndexPattern(TABLE_INDEX_PATTERN);
+    cy.bulkUploadDocs(TABLE_PATH_INDEX_DATA);
+    cy.importSavedObjects(TABLE_PATH_SO_DATA);
+    // Load table visualization
+    cy.visit(`${BASE_PATH}/app/visualize`);
+    cy.get('input[type="search"]').type(`${TABLE_BASIC_VIS_TITLE}{enter}`);
+    cy.get('.euiBasicTable-loading').should('not.exist'); // wait for the loading to stop
+    cy.getElementByTestId(
+      `visListingTitleLink-${toTestId(TABLE_BASIC_VIS_TITLE)}`
+    )
+      .should('exist')
+      .click();
+    cy.url().should('contain', TABLE_VIS_APP_PATH);
+    cy.setTopNavDate(TABLE_INDEX_START_TIME, TABLE_INDEX_END_TIME);
+    cy.waitForLoader();
+  });
+
+  after(() => {
+    cy.deleteIndex(TABLE_INDEX_ID);
+    cy.deleteIndexPattern(TABLE_INDEX_PATTERN);
+  });
+
+  describe('Check Range aggregation and Percentage Col functions', () => {
+    const expectedData = ['≥ 0 and < 20', '1,059', '≥ 20 and < 40', '2,236'];
+    const expectedAverageData = [
+      '≥ 0 and < 20',
+      '1,059',
+      '14.469',
+      '≥ 20 and < 40',
+      '2,236',
+      '29.53',
+    ];
+
+    it('Should show correct range', () => {
+      cy.tbAddBucketsAggregation();
+      cy.tbSplitRows();
+      cy.tbSetupRangeAggregation(
+        'age',
+        [
+          ['0', '20'],
+          ['20', '40'],
+        ],
+        2
+      );
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectedData);
+      });
+    });
+
+    it('Should show correct average metrics', () => {
+      cy.tbOpenDataPanel();
+      cy.tbAddMetricsAggregation();
+      cy.tbSelectAggregationType('Average', 3);
+      cy.tbSelectAggregationField('age', 3);
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectedAverageData);
+      });
+    });
+
+    after(() => {
+      cy.log('clean out all metrics and buckets aggregations');
+      cy.tbRemoveAllAggregations(3);
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+    });
+  });
+
+  describe('Check Average Pipeline aggregation', () => {
+    it('Should show correct data when using average pipeline aggregation', () => {
+      const expectedData = ['10,000', '128.2'];
+      cy.tbAddMetricsAggregation();
+      cy.tbSelectAggregationType('Average Bucket', 2);
+      cy.tbSelectSubAggregationType('Terms', 2, 'buckets');
+      cy.tbSelectSubAggregationField('age', 2, 'buckets');
+      cy.tbSelectSubAggregationType('Count', 2, 'metrics');
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectedData);
+      });
+    });
+
+    after(() => {
+      cy.log('clean out all metrics and buckets aggregations');
+      cy.tbRemoveAllAggregations(2);
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+    });
+  });
+
+  describe('Check Date Histogram aggregation and filter functons', () => {
+    it('Should show correct data for a data table with date histogram', () => {
+      const expectedData = ['2021', '13', '2022', '9,987'];
+      cy.tbAddBucketsAggregation();
+      cy.tbSplitRows();
+      cy.tbSetupDateHistogramAggregation('timestamp', 'Year', 2);
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectedData);
+      });
+    });
+
+    it('Should correctly filter for applied time filter on the main timefield', () => {
+      commonUI.addFilterRetrySelection('timestamp', 'is', '2022-05-30');
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(['2022', '37']);
+      });
+      commonUI.removeFilter('timestamp');
+      cy.waitForLoader();
+      commonUI.addFilterRetrySelection('timestamp', 'is between', [
+        '2022-05-30',
+        '2022-08-30',
+      ]);
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(['2022', '3,370']);
+      });
+    });
+
+    it('Should correctly filter for pinned filters', () => {
+      commonUI.pinFilter('timestamp');
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(['2022', '3,370']);
+      });
+      commonUI.removeFilter('timestamp');
+      cy.waitForLoader();
+    });
+
+    after(() => {
+      cy.log('clean out all metrics and buckets aggregations');
+      cy.tbRemoveAllAggregations(2);
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+    });
+  });
+
+  describe('Check Terms aggregation and missing values', () => {
+    it('Should show correct data before and after adding doc', () => {
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(['10,000']);
+      });
+      // add a doc with missing values
+      cy.insertDocumentToIndex('vis-table', 10000, {
+        timestamp: '2022-08-30T23:20:41.280Z',
+        username: 'missing',
+      });
+      cy.reload();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(['10,001']);
+      });
+    });
+
+    it('Should group data in other', () => {
+      const expectDataBeforeGroupInOther = [
+        '79',
+        '132',
+        '54',
+        '129',
+        '33',
+        '128',
+        '31',
+        '126',
+        '57',
+        '126',
+      ];
+      const expectDataAfterGroupInOther = [
+        '79',
+        '132',
+        '54',
+        '129',
+        '33',
+        '128',
+        '31',
+        '126',
+        '57',
+        '126',
+        '9,359',
+      ];
+      cy.tbAddBucketsAggregation();
+      cy.tbSplitRows();
+      cy.tbSetupTermsAggregation('age', 'Descending', '5', 2);
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectDataBeforeGroupInOther);
+      });
+      cy.tbToggleOtherBucket('true');
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectDataAfterGroupInOther);
+      });
+    });
+
+    it('Should include missing data', () => {
+      const expectDataBeforeMissing = [
+        'Bryce88@gmail.com',
+        '2',
+        'Isaiah22@yahoo.com',
+        '2',
+        'Jake54@gmail.com',
+        '2',
+        'Linnea4@yahoo.com',
+        '2',
+        'Sherwood92@gmail.com',
+        '2',
+        '9,990',
+      ];
+      const expectDataAfterMissing = [
+        'Bryce88@gmail.com',
+        '2',
+        'Isaiah22@yahoo.com',
+        '2',
+        'Jake54@gmail.com',
+        '2',
+        'Linnea4@yahoo.com',
+        '2',
+        'Sherwood92@gmail.com',
+        '2',
+        '9,991',
+      ];
+      cy.tbSelectAggregationField('email.keyword', 2);
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectDataBeforeMissing);
+      });
+      cy.tbToggleMissingBucket('true');
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+      cy.tbGetTableDataFromVisualization().then((data) => {
+        expect(data).to.deep.eq(expectDataAfterMissing);
+      });
+    });
+
+    after(() => {
+      cy.log('clean out all metrics and buckets aggregations');
+      cy.tbRemoveAllAggregations(2);
+      cy.tbUpdateAggregationSettings();
+      cy.waitForLoader();
+    });
+  });
+});