[Lens] Add functional tests on chart transitions and pie chart (#74083)

x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx

@@ -57,7 +57,7 @@ export function ChangeIndexPattern({
         panelPaddingSize="s"
         ownFocus
       >
-        <div style={{ width: 320 }}>
+        <div style={{ width: 320 }} data-test-subj="lnsChangeIndexPatternPopup">
           <EuiPopoverTitle>
             {i18n.translate('xpack.lens.indexPattern.changeIndexPatternTitle', {
               defaultMessage: 'Change index pattern',

x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx

@@ -122,6 +122,7 @@ export const pieVisualization: Visualization<PieVisualizationState, PieVisualiza
             supportsMoreColumns: sortedColumns.length < MAX_TREEMAP_BUCKETS,
             filterOperations: bucketedOperations,
             required: true,
+            dataTestSubj: 'lnsPie_groupByDimensionPanel',
           },
           {
             groupId: 'metric',
@@ -133,6 +134,7 @@ export const pieVisualization: Visualization<PieVisualizationState, PieVisualiza
             supportsMoreColumns: !layer.metric,
             filterOperations: numberMetricOperations,
             required: true,
+            dataTestSubj: 'lnsPie_sizeByDimensionPanel',
           },
         ],
       };
@@ -150,6 +152,7 @@ export const pieVisualization: Visualization<PieVisualizationState, PieVisualiza
           supportsMoreColumns: sortedColumns.length < MAX_PIE_BUCKETS,
           filterOperations: bucketedOperations,
           required: true,
+          dataTestSubj: 'lnsPie_sliceByDimensionPanel',
         },
         {
           groupId: 'metric',
@@ -161,6 +164,7 @@ export const pieVisualization: Visualization<PieVisualizationState, PieVisualiza
           supportsMoreColumns: !layer.metric,
           filterOperations: numberMetricOperations,
           required: true,
+          dataTestSubj: 'lnsPie_sizeByDimensionPanel',
         },
       ],
     };

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
-import { EuiButtonGroupProps, EuiSuperSelect } from '@elastic/eui';
+import { EuiButtonGroupProps, EuiSuperSelect, EuiButtonGroup } from '@elastic/eui';
 import { LayerContextMenu, XyToolbar } from './xy_config_panel';
 import { FramePublicAPI } from '../types';
 import { State } from './types';
@@ -52,7 +52,7 @@ describe('XY Config panels', () => {
       );
 
       const options = component
-        .find('[data-test-subj="lnsXY_seriesType"]')
+        .find(EuiButtonGroup)
         .first()
         .prop('options') as EuiButtonGroupProps['options'];
 
@@ -79,7 +79,7 @@ describe('XY Config panels', () => {
       );
 
       const options = component
-        .find('[data-test-subj="lnsXY_seriesType"]')
+        .find(EuiButtonGroup)
         .first()
         .prop('options') as EuiButtonGroupProps['options'];
 

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx

@@ -95,13 +95,13 @@ export function LayerContextMenu(props: VisualizationLayerWidgetProps<State>) {
         })}
         name="chartType"
         className="eui-displayInlineBlock"
-        data-test-subj="lnsXY_seriesType"
         options={visualizationTypes
           .filter((t) => isHorizontalSeries(t.id as SeriesType) === horizontalOnly)
           .map((t) => ({
             id: t.id,
             label: t.label,
             iconType: t.icon || 'empty',
+            'data-test-subj': `lnsXY_seriesType-${t.id}`,
           }))}
         idSelected={layer.seriesType}
         onChange={(seriesType) => {

x-pack/test/api_integration/apis/lens/telemetry.ts

@@ -191,8 +191,9 @@ export default ({ getService }: FtrProviderContext) => {
       expect(results.saved_overall).to.eql({
         lnsMetric: 1,
         bar_stacked: 1,
+        lnsPie: 1,
       });
-      expect(results.saved_overall_total).to.eql(2);
+      expect(results.saved_overall_total).to.eql(3);
 
       await esArchiver.unload('lens/basic');
     });

x-pack/test/functional/apps/lens/dashboard.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['header', 'common', 'dashboard', 'timePicker', 'lens']);
+
+  const find = getService('find');
+  const dashboardAddPanel = getService('dashboardAddPanel');
+  const elasticChart = getService('elasticChart');
+  const browser = getService('browser');
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const filterBar = getService('filterBar');
+
+  async function clickInChart(x: number, y: number) {
+    const el = await elasticChart.getCanvas();
+    await browser.getActions().move({ x, y, origin: el._webElement }).click().perform();
+  }
+
+  describe('lens dashboard tests', () => {
+    it('metric should be embeddable', async () => {
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.clickNewDashboard();
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('Artistpreviouslyknownaslens');
+      await find.clickByButtonText('Artistpreviouslyknownaslens');
+      await dashboardAddPanel.closeAddPanel();
+      await PageObjects.lens.goToTimeRange();
+      await PageObjects.lens.assertMetric('Maximum of bytes', '19,986');
+    });
+
+    it('should be able to add filters/timerange by clicking in XYChart', async () => {
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.clickNewDashboard();
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('lnsXYvis');
+      await find.clickByButtonText('lnsXYvis');
+      await dashboardAddPanel.closeAddPanel();
+      await PageObjects.lens.goToTimeRange();
+      await clickInChart(5, 5); // hardcoded position of bar
+
+      await retry.try(async () => {
+        await testSubjects.click('applyFiltersPopoverButton');
+        await testSubjects.missingOrFail('applyFiltersPopoverButton');
+      });
+
+      await PageObjects.lens.assertExactText(
+        '[data-test-subj="embeddablePanelHeading-lnsXYvis"]',
+        'lnsXYvis'
+      );
+      const time = await PageObjects.timePicker.getTimeConfig();
+      expect(time.start).to.equal('Sep 21, 2015 @ 09:00:00.000');
+      expect(time.end).to.equal('Sep 21, 2015 @ 12:00:00.000');
+      const hasIpFilter = await filterBar.hasFilter('ip', '97.220.3.248');
+      expect(hasIpFilter).to.be(true);
+    });
+  });
+}

x-pack/test/functional/apps/lens/index.ts

@@ -28,6 +28,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       this.tags(['ciGroup4', 'skipFirefox']);
 
       loadTestFile(require.resolve('./smokescreen'));
+      loadTestFile(require.resolve('./dashboard'));
       loadTestFile(require.resolve('./persistent_context'));
       loadTestFile(require.resolve('./lens_reporting'));
     });