Added functional tests for agg based table (#143290)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_types/table/public/components/table_vis_options.tsx

@@ -133,6 +133,7 @@ function TableOptions({
         paramName="showTotal"
         value={stateParams.showTotal}
         setValue={setValue}
+        data-test-subj="showTotal"
       />
 
       <SelectOption
@@ -144,6 +145,7 @@ function TableOptions({
         paramName="totalFunc"
         value={stateParams.totalFunc}
         setValue={setValue}
+        data-test-subj="totalFunction"
       />
 
       <SelectOption

test/functional/page_objects/visualize_editor_page.ts

@@ -147,7 +147,12 @@ export class VisualizeEditorPageObject extends FtrService {
     await this.testSubjects.click('visEditorAddFilterButton');
   }
 
-  public async selectField(fieldValue: string, groupName = 'buckets', isChildAggregation = false) {
+  public async selectField(
+    fieldValue: string,
+    groupName = 'buckets',
+    isChildAggregation = false,
+    aggregationIndex = 0
+  ) {
     this.log.debug(`selectField ${fieldValue}`);
     const selector = `
         [data-test-subj="${groupName}AggGroup"]
@@ -156,8 +161,8 @@ export class VisualizeEditorPageObject extends FtrService {
         ${isChildAggregation ? '.visEditorAgg__subAgg' : ''}
         [data-test-subj="visDefaultEditorField"]
       `;
-    const fieldEl = await this.find.byCssSelector(selector);
-    await this.comboBox.setElement(fieldEl, fieldValue);
+    const fieldEls = await this.find.allByCssSelector(selector);
+    await this.comboBox.setElement(fieldEls[aggregationIndex], fieldValue);
   }
 
   public async selectOrderByMetric(aggNth: number, metric: string) {
@@ -175,16 +180,17 @@ export class VisualizeEditorPageObject extends FtrService {
   public async selectAggregation(
     aggValue: string,
     groupName = 'buckets',
-    isChildAggregation = false
+    isChildAggregation = false,
+    aggregationIndex = 0
   ) {
-    const comboBoxElement = await this.find.byCssSelector(`
+    const comboBoxElements = await this.find.allByCssSelector(`
         [data-test-subj="${groupName}AggGroup"]
         [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen
         ${isChildAggregation ? '.visEditorAgg__subAgg' : ''}
         [data-test-subj="defaultEditorAggSelect"]
       `);
 
-    await this.comboBox.setElement(comboBoxElement, aggValue);
+    await this.comboBox.setElement(comboBoxElements[aggregationIndex], aggValue);
     await this.common.sleep(500);
   }
 

x-pack/test/functional/apps/lens/group3/open_in_lens/agg_based/index.ts

@@ -14,5 +14,6 @@ export default function ({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./xy'));
     loadTestFile(require.resolve('./gauge'));
     loadTestFile(require.resolve('./goal'));
+    loadTestFile(require.resolve('./table'));
   });
 }

x-pack/test/functional/apps/lens/group3/open_in_lens/agg_based/table.ts

@@ -0,0 +1,190 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../../../../ftr_provider_context';
+
+export default function ({ getPageObjects, getService }: FtrProviderContext) {
+  const { visualize, visEditor, lens, timePicker, header } = getPageObjects([
+    'visualize',
+    'lens',
+    'visEditor',
+    'timePicker',
+    'header',
+  ]);
+
+  const testSubjects = getService('testSubjects');
+
+  describe('Table', function describeIndexTests() {
+    const isNewChartsLibraryEnabled = true;
+
+    before(async () => {
+      await visualize.initTests(isNewChartsLibraryEnabled);
+    });
+
+    beforeEach(async () => {
+      await visualize.navigateToNewAggBasedVisualization();
+      await visualize.clickDataTable();
+      await visualize.clickNewSearch();
+      await timePicker.setDefaultAbsoluteRange();
+    });
+
+    it('should not allow converting of unsupported aggregations', async () => {
+      await visEditor.clickMetricEditor();
+      await visEditor.selectAggregation('Serial diff', 'metrics');
+      await visEditor.clickBucket('Split rows');
+      await visEditor.selectAggregation('Date histogram');
+      await visEditor.clickGo();
+      await header.waitUntilLoadingHasFinished();
+      const button = await testSubjects.exists('visualizeEditInLensButton');
+      expect(button).to.eql(false);
+    });
+
+    it('should show the "Edit Visualization in Lens" menu item', async () => {
+      const button = await testSubjects.exists('visualizeEditInLensButton');
+      expect(button).to.eql(true);
+    });
+
+    it('should convert aggregation with params', async () => {
+      await visEditor.clickMetricEditor();
+      await visEditor.selectAggregation('Average', 'metrics');
+      await visEditor.selectField('machine.ram', 'metrics');
+      await visEditor.clickGo();
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('lnsDataTable');
+
+      expect(await lens.getLayerCount()).to.be(1);
+
+      const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+      expect(dimensions).to.have.length(1);
+      expect(await dimensions[0].getVisibleText()).to.be('Average machine.ram');
+    });
+
+    it('should convert total function to summary row', async () => {
+      await visEditor.clickMetricEditor();
+      await visEditor.selectAggregation('Average', 'metrics');
+      await visEditor.selectField('machine.ram', 'metrics');
+      await visEditor.clickOptionsTab();
+      const showTotalSwitch = await testSubjects.find('showTotal');
+      await showTotalSwitch.click();
+      await visEditor.clickGo();
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('lnsDataTable');
+
+      expect(await lens.getLayerCount()).to.be(1);
+
+      const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+      expect(dimensions).to.have.length(1);
+      expect(await dimensions[0].getVisibleText()).to.be('Average machine.ram');
+
+      await lens.openDimensionEditor('lnsDatatable_metrics > lns-dimensionTrigger');
+      const summaryRowFunction = await testSubjects.find('lnsDatatable_summaryrow_function');
+      expect(await summaryRowFunction.getVisibleText()).to.be('Sum');
+    });
+
+    it('should convert sibling pipeline aggregation', async () => {
+      await visEditor.clickMetricEditor();
+      await visEditor.selectAggregation('Max Bucket', 'metrics');
+      await visEditor.clickGo();
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('lnsDataTable');
+
+      expect(await lens.getLayerCount()).to.be(1);
+
+      const metricText = await lens.getDimensionTriggerText('lnsDatatable_metrics', 0);
+      const splitRowText = await lens.getDimensionTriggerText('lnsDatatable_rows', 0);
+
+      const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+      expect(dimensions).to.have.length(2);
+      expect(metricText).to.be('Overall Max of Count');
+      expect(splitRowText).to.be('@timestamp');
+    });
+
+    it('should convert parent pipeline aggregation', async () => {
+      await visEditor.clickMetricEditor();
+      await visEditor.selectAggregation('Cumulative sum', 'metrics');
+      await visEditor.clickBucket('Split rows');
+      await visEditor.selectAggregation('Date histogram');
+      await visEditor.clickGo();
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('lnsDataTable');
+
+      expect(await lens.getLayerCount()).to.be(1);
+
+      const metricText = await lens.getDimensionTriggerText('lnsDatatable_metrics', 0);
+      const splitRowText = await lens.getDimensionTriggerText('lnsDatatable_rows', 0);
+
+      const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+      expect(dimensions).to.have.length(2);
+      expect(metricText).to.be('Cumulative Sum of Count');
+      expect(splitRowText).to.be('@timestamp');
+    });
+
+    it('should convert split rows and split table to split table rows', async () => {
+      await visEditor.clickBucket('Split rows');
+      await visEditor.selectAggregation('Date histogram');
+      await visEditor.clickBucket('Split table');
+      await visEditor.selectAggregation('Terms', 'buckets', false, 1);
+      await visEditor.selectField('bytes', 'buckets', false, 1);
+      await visEditor.clickGo();
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('lnsDataTable');
+
+      expect(await lens.getLayerCount()).to.be(1);
+
+      const metricText = await lens.getDimensionTriggerText('lnsDatatable_metrics', 0);
+      const splitRowText1 = await lens.getDimensionTriggerText('lnsDatatable_rows', 0);
+      const splitRowText2 = await lens.getDimensionTriggerText('lnsDatatable_rows', 1);
+
+      const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+      expect(dimensions).to.have.length(3);
+      expect(metricText).to.be('Count');
+      expect(splitRowText1).to.be('@timestamp');
+      expect(splitRowText2).to.be('bytes: Descending');
+    });
+
+    it('should convert percentage column', async () => {
+      await visEditor.clickOptionsTab();
+      await visEditor.setSelectByOptionText('datatableVisualizationPercentageCol', 'Count');
+      await visEditor.clickGo();
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('lnsDataTable');
+
+      expect(await lens.getLayerCount()).to.be(1);
+
+      const metricText = await lens.getDimensionTriggerText('lnsDatatable_metrics', 0);
+      const percentageColumnText = await lens.getDimensionTriggerText('lnsDatatable_metrics', 1);
+
+      await lens.openDimensionEditor('lnsDatatable_metrics > lns-dimensionTrigger', 0, 1);
+      const format = await testSubjects.find('indexPattern-dimension-format');
+      expect(await format.getVisibleText()).to.be('Percent');
+
+      const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+      expect(dimensions).to.have.length(2);
+      expect(metricText).to.be('Count');
+      expect(percentageColumnText).to.be('Count percentages');
+    });
+  });
+}

x-pack/test/functional/page_objects/lens_page.ts

@@ -543,9 +543,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
      * @param dimension - the selector of the dimension panel to open
      * @param layerIndex - the index of the layer
      */
-    async openDimensionEditor(dimension: string, layerIndex = 0) {
+    async openDimensionEditor(dimension: string, layerIndex = 0, dimensionIndex = 0) {
       await retry.try(async () => {
-        await testSubjects.click(`lns-layerPanel-${layerIndex} > ${dimension}`);
+        const dimensionEditor = (
+          await testSubjects.findAll(`lns-layerPanel-${layerIndex} > ${dimension}`)
+        )[dimensionIndex];
+        await dimensionEditor.click();
       });
     },