[Lens] Add functional tests on chart transitions and pie chart (elast…

…ic#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

@@ -190,8 +190,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'));
  });