[Pie] Run all functional tests for the new implementation

src/plugins/charts/public/static/components/legend_toggle.tsx

@@ -8,7 +8,7 @@
 
 import React, { memo, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { htmlIdGenerator, EuiButtonIcon, useEuiTheme } from '@elastic/eui';
+import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
 import { Position } from '@elastic/charts';
 import { css } from '@emotion/react';
 
@@ -19,7 +19,6 @@ export interface LegendToggleProps {
 }
 
 const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendToggleProps) => {
-  const legendId = useMemo(() => htmlIdGenerator()('legend'), []);
   const { euiTheme } = useEuiTheme();
 
   const baseStyles = useMemo(
@@ -65,7 +64,6 @@ const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendTo
         defaultMessage: 'Toggle legend',
       })}
       aria-expanded={showLegend}
-      aria-controls={legendId}
       isSelected={showLegend}
       data-test-subj="vislibToggleLegend"
       title={i18n.translate('charts.legend.toggleLegendButtonTitle', {

test/examples/embeddables/dashboard.ts

@@ -116,9 +116,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
     });
 
     it('pie charts', async () => {
-      if (await PageObjects.visChart.isNewChartsLibraryEnabled()) {
-        await elasticChart.setNewChartUiDebugFlag();
-      }
+      await elasticChart.setNewChartUiDebugFlag();
       await pieChart.expectPieSliceCount(5);
     });
 

test/functional/apps/dashboard/group1/dashboard_query_bar.ts

@@ -38,12 +38,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('causes panels to reload when refresh is clicked', async () => {
       await esArchiver.unload('test/functional/fixtures/es_archiver/dashboard/current/data');
-
       await queryBar.clickQuerySubmitButton();
       await retry.tryForTime(5000, async () => {
         const headers = await PageObjects.discover.getColumnHeaders();
         expect(headers.length).to.be(0);
-        await pieChart.expectPieSliceCount(0);
+        await pieChart.expectEmptyPieChart();
       });
     });
   });

test/functional/apps/dashboard/group1/embeddable_rendering.ts

@@ -39,7 +39,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   let visNames: string[] = [];
 
   const expectAllDataRenders = async () => {
-    await pieChart.expectPieSliceCount(16);
+    await pieChart.expectSliceCountForAllPies(16);
     await dashboardExpect.metricValuesExist(['7,544']);
     await dashboardExpect.seriesElementCount(14);
     const tsvbGuageExists = await find.existsByCssSelector('.tvbVisHalfGauge');
@@ -73,7 +73,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   };
 
   const expectNoDataRenders = async () => {
-    await pieChart.expectPieSliceCount(0);
+    await pieChart.expectEmptyPieChart();
     await dashboardExpect.seriesElementCount(0);
     await dashboardExpect.dataTableNoResult();
     await dashboardExpect.savedSearchNoResult();
@@ -112,6 +112,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.common.navigateToApp('dashboard');
       await PageObjects.dashboard.preserveCrossAppState();
       await PageObjects.dashboard.clickNewDashboard();
+      await elasticChart.setNewChartUiDebugFlag(true);
 
       const fromTime = 'Jan 1, 2018 @ 00:00:00.000';
       const toTime = 'Apr 13, 2018 @ 00:00:00.000';
@@ -160,6 +161,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('initial render test', async () => {
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.dashboard.waitForRenderComplete();
+      await elasticChart.setNewChartUiDebugFlag();
       await expectAllDataRenders();
     });
 
@@ -178,9 +180,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const alert = await browser.getAlert();
       await alert?.accept();
 
-      await elasticChart.setNewChartUiDebugFlag(true);
-
       await PageObjects.header.waitUntilLoadingHasFinished();
+      await elasticChart.setNewChartUiDebugFlag();
       await PageObjects.dashboard.waitForRenderComplete();
       await expectAllDataRenders();
     });

test/functional/apps/dashboard/group1/legacy_urls.ts

@@ -25,6 +25,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const listingTable = getService('listingTable');
   const kibanaServer = getService('kibanaServer');
   const security = getService('security');
+  const elasticChart = getService('elasticChart');
 
   let kibanaLegacyBaseUrl: string;
   let kibanaVisualizeBaseUrl: string;
@@ -63,6 +64,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const url = `${kibanaLegacyBaseUrl}#/dashboard/${testDashboardId}`;
         await browser.get(url, true);
         await PageObjects.header.waitUntilLoadingHasFinished();
+        await elasticChart.setNewChartUiDebugFlag(true);
         await PageObjects.timePicker.setDefaultDataRange();
 
         await PageObjects.dashboard.waitForRenderComplete();
@@ -72,6 +74,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       it('redirects from legacy hash in wrong app', async () => {
         const url = `${kibanaVisualizeBaseUrl}#/dashboard/${testDashboardId}`;
         await browser.get(url, true);
+        await elasticChart.setNewChartUiDebugFlag(true);
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.timePicker.setDefaultDataRange();
 
@@ -111,6 +114,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await dashboardAddPanel.addVisualization('legacy url markdown');
         (await find.byLinkText('abc')).click();
         await PageObjects.header.waitUntilLoadingHasFinished();
+        await elasticChart.setNewChartUiDebugFlag(true);
         await PageObjects.timePicker.setDefaultDataRange();
 
         await PageObjects.dashboard.waitForRenderComplete();

test/functional/apps/dashboard/group2/dashboard_filter_bar.ts

@@ -17,8 +17,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const filterBar = getService('filterBar');
   const pieChart = getService('pieChart');
+  const elasticChart = getService('elasticChart');
   const kibanaServer = getService('kibanaServer');
   const browser = getService('browser');
+  const queryBar = getService('queryBar');
   const security = getService('security');
   const PageObjects = getPageObjects([
     'common',
@@ -109,6 +111,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.dashboard.gotoDashboardLandingPage();
         await PageObjects.dashboard.clickNewDashboard();
         await PageObjects.timePicker.setDefaultDataRange();
+        await elasticChart.setNewChartUiDebugFlag(true);
       });
 
       it('are not selected by default', async function () {
@@ -119,7 +122,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       it('are added when a pie chart slice is clicked', async function () {
         await dashboardAddPanel.addVisualization('Rendering Test: pie');
         await PageObjects.dashboard.waitForRenderComplete();
-        await pieChart.filterOnPieSlice('4,886');
+        await pieChart.filterOnPieSlice('4886');
         const filterCount = await filterBar.getFilterCount();
         expect(filterCount).to.equal(1);
 
@@ -129,6 +132,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       it('are preserved after saving a dashboard', async () => {
         await PageObjects.dashboard.saveDashboard('with filters');
         await PageObjects.header.waitUntilLoadingHasFinished();
+        await elasticChart.setNewChartUiDebugFlag(true);
 
         const filterCount = await filterBar.getFilterCount();
         expect(filterCount).to.equal(1);
@@ -140,6 +144,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.dashboard.gotoDashboardLandingPage();
         await PageObjects.dashboard.loadSavedDashboard('with filters');
         await PageObjects.header.waitUntilLoadingHasFinished();
+        await elasticChart.setNewChartUiDebugFlag(true);
+        await queryBar.submitQuery();
 
         const filterCount = await filterBar.getFilterCount();
         expect(filterCount).to.equal(1);
@@ -152,6 +158,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await browser.goForward();
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.dashboard.waitForRenderComplete();
+        await elasticChart.setNewChartUiDebugFlag(true);
+        await queryBar.submitQuery();
         await pieChart.expectPieSliceCount(1);
       });
 

test/functional/apps/dashboard/group2/dashboard_filtering.ts

@@ -18,6 +18,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
   const queryBar = getService('queryBar');
+  const elasticChart = getService('elasticChart');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const renderable = getService('renderable');
   const testSubjects = getService('testSubjects');
@@ -47,6 +48,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await queryBar.clickQuerySubmitButton();
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.dashboard.waitForRenderComplete();
+      await elasticChart.setNewChartUiDebugFlag(true);
     };
 
     before(async () => {
@@ -85,7 +87,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('filters on pie charts', async () => {
-        await pieChart.expectPieSliceCount(0);
+        await pieChart.expectEmptyPieChart();
       });
 
       it('area, bar and heatmap charts filtered', async () => {
@@ -150,7 +152,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('filters on pie charts', async () => {
-        await pieChart.expectPieSliceCount(0);
+        await pieChart.expectEmptyPieChart();
       });
 
       it('area, bar and heatmap charts filtered', async () => {
@@ -253,6 +255,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     describe('nested filtering', () => {
       before(async () => {
         await PageObjects.dashboard.gotoDashboardLandingPage();
+        await elasticChart.setNewChartUiDebugFlag(true);
       });
 
       it('visualization saved with a query filters data', async () => {
@@ -323,10 +326,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await dashboardAddPanel.addVisualization(
           'Filter Test: animals: linked to search with filter'
         );
-        await pieChart.expectPieSliceCount(7);
+        await elasticChart.setNewChartUiDebugFlag(true);
+        await pieChart.expectSliceCountForAllPies(7);
       });
 
       it('Pie chart linked to saved search filters shows no data with conflicting dashboard query', async () => {
+        await elasticChart.setNewChartUiDebugFlag(true);
         await queryBar.setQuery('weightLbs<40');
         await queryBar.submitQuery();
         await PageObjects.dashboard.waitForRenderComplete();

test/functional/apps/dashboard/group3/bwc_shared_urls.ts

@@ -14,6 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header']);
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
+  const elasticChart = getService('elasticChart');
   const browser = getService('browser');
   const log = getService('log');
   const queryBar = getService('queryBar');
@@ -41,6 +42,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     `legendOpen:!t))),` +
     `viewMode:edit)`;
 
+  const enableNewChartLibraryDebug = async () => {
+    await elasticChart.setNewChartUiDebugFlag();
+    await queryBar.submitQuery();
+  };
+
   describe('bwc shared urls', function describeIndexTests() {
     before(async function () {
       await PageObjects.dashboard.initTests();
@@ -75,11 +81,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         log.debug(`Navigating to ${url}`);
         await browser.get(url, true);
         await PageObjects.header.waitUntilLoadingHasFinished();
+        await elasticChart.setNewChartUiDebugFlag(true);
 
         const query = await queryBar.getQueryString();
         expect(query).to.equal('memory:>220000');
 
-        await pieChart.expectPieSliceCount(0);
+        await pieChart.expectEmptyPieChart();
         await dashboardExpect.panelCount(2);
         await PageObjects.dashboard.waitForRenderComplete();
       });
@@ -92,8 +99,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const url = `${kibanaLegacyBaseUrl}#/dashboard?${urlQuery}`;
         log.debug(`Navigating to ${url}`);
         await browser.get(url, true);
+        enableNewChartLibraryDebug();
         await PageObjects.header.waitUntilLoadingHasFinished();
-
         const query = await queryBar.getQueryString();
         expect(query).to.equal('memory:>220000');
 
@@ -113,6 +120,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         log.debug(`Navigating to ${url}`);
         await browser.get(url, true);
         await PageObjects.header.waitUntilLoadingHasFinished();
+        enableNewChartLibraryDebug();
 
         const query = await queryBar.getQueryString();
         expect(query).to.equal('memory:>220000');
@@ -146,8 +154,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         log.debug(`Navigating to ${url}`);
 
         await browser.get(url, true);
+        await elasticChart.setNewChartUiDebugFlag(true);
         await PageObjects.header.waitUntilLoadingHasFinished();
-
         await dashboardExpect.selectedLegendColorCount('#000000', 5);
       });
 
@@ -160,6 +168,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const url = `${kibanaLegacyBaseUrl}#/dashboard?${urlQuery}`;
         log.debug(`Navigating to ${url}`);
         await browser.get(url);
+        await elasticChart.setNewChartUiDebugFlag(true);
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.dashboard.waitForRenderComplete();
         await dashboardExpect.selectedLegendColorCount('#F9D9F9', 5);
@@ -169,6 +178,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const newId = await PageObjects.dashboard.getDashboardIdFromCurrentUrl();
         expect(newId).to.be.equal(oldId);
         await PageObjects.dashboard.waitForRenderComplete();
+        await elasticChart.setNewChartUiDebugFlag(true);
+        await queryBar.submitQuery();
         await dashboardExpect.selectedLegendColorCount('#000000', 5);
       });
     });

test/functional/apps/dashboard/group3/dashboard_state.ts

@@ -42,17 +42,17 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
   describe('dashboard state', function describeIndexTests() {
     // Used to track flag before and after reset
-    let isNewChartsLibraryEnabled = false;
+    let isNewChartsLibraryEnabled = true;
 
     before(async function () {
       isNewChartsLibraryEnabled = await PageObjects.visChart.isNewChartsLibraryEnabled();
       await PageObjects.dashboard.initTests();
       await PageObjects.dashboard.preserveCrossAppState();
       await browser.setLocalStorageItem('data.newDataViewMenu', 'true');
 
-      if (isNewChartsLibraryEnabled) {
+      if (!isNewChartsLibraryEnabled) {
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:legacyPieChartsLibrary': false,
+          'visualization:visualize:legacyPieChartsLibrary': true,
         });
       }
       await browser.refresh();

test/functional/apps/dashboard/group3/dashboard_time_picker.ts

@@ -14,6 +14,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const pieChart = getService('pieChart');
+  const elasticChart = getService('elasticChart');
   const dashboardVisualizations = getService('dashboardVisualizations');
   const PageObjects = getPageObjects([
     'dashboard',
@@ -31,6 +32,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     before(async function () {
       await PageObjects.dashboard.initTests();
       await PageObjects.dashboard.preserveCrossAppState();
+      await elasticChart.setNewChartUiDebugFlag(true);
     });
 
     after(async () => {
@@ -43,7 +45,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('Visualization updated when time picker changes', async () => {
       await PageObjects.dashboard.clickNewDashboard();
       await PageObjects.dashboard.addVisualizations([PIE_CHART_VIS_NAME]);
-      await pieChart.expectPieSliceCount(0);
+      await pieChart.expectEmptyPieChart();
 
       await PageObjects.timePicker.setHistoricalDataRange();
       await pieChart.expectPieSliceCount(10);
@@ -124,6 +126,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         '2015-09-19 06:31:44.000',
         '2015-09-23 18:31:44.000'
       );
+      await elasticChart.setNewChartUiDebugFlag(true);
       await pieChart.expectPieSliceCount(10);
     });
   });

test/functional/apps/dashboard/group5/index.ts

@@ -25,19 +25,19 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
   describe('dashboard app - group 5', function () {
     // TODO: Remove when vislib is removed
     // https://github.com/elastic/kibana/issues/56143
-    describe('new charts library', function () {
+    describe('old charts library', function () {
       before(async () => {
         await loadLogstash();
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:legacyPieChartsLibrary': false,
+          'visualization:visualize:legacyPieChartsLibrary': true,
         });
         await browser.refresh();
       });
 
       after(async () => {
         await unloadLogstash();
         await kibanaServer.uiSettings.update({
-          'visualization:visualize:legacyPieChartsLibrary': true,
+          'visualization:visualize:legacyPieChartsLibrary': false,
         });
         await browser.refresh();
       });