Functional tests: refactor visualize_page (#53845)

* add new POs and services

* split visualize_page

* refactor PO and tests

* lost changes

* more fixes

* fix tslint error

* refactor POs

* add vega_chart_page, refactor

* review fix

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: dmlemeshko

test/functional/apps/dashboard/dashboard_state.js

@@ -27,7 +27,14 @@ import {
 } from '../../../../src/plugins/dashboard_embeddable_container/public/embeddable/dashboard_constants';
 
 export default function({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['dashboard', 'visualize', 'header', 'discover']);
+  const PageObjects = getPageObjects([
+    'dashboard',
+    'visualize',
+    'header',
+    'discover',
+    'tileMap',
+    'visChart',
+  ]);
   const testSubjects = getService('testSubjects');
   const browser = getService('browser');
   const queryBar = getService('queryBar');
@@ -58,14 +65,14 @@ export default function({ getService, getPageObjects }) {
 
       await PageObjects.dashboard.switchToEditMode();
 
-      await PageObjects.visualize.openLegendOptionColors('Count');
-      await PageObjects.visualize.selectNewLegendColorChoice('#EA6460');
+      await PageObjects.visChart.openLegendOptionColors('Count');
+      await PageObjects.visChart.selectNewLegendColorChoice('#EA6460');
 
       await PageObjects.dashboard.saveDashboard('Overridden colors');
 
       await PageObjects.dashboard.gotoDashboardLandingPage();
       await PageObjects.dashboard.loadSavedDashboard('Overridden colors');
-      const colorChoiceRetained = await PageObjects.visualize.doesSelectedLegendColorExist(
+      const colorChoiceRetained = await PageObjects.visChart.doesSelectedLegendColorExist(
         '#EA6460'
       );
 
@@ -153,10 +160,10 @@ export default function({ getService, getPageObjects }) {
       await dashboardPanelActions.openContextMenu();
       await dashboardPanelActions.clickEdit();
 
-      await PageObjects.visualize.clickMapZoomIn();
-      await PageObjects.visualize.clickMapZoomIn();
-      await PageObjects.visualize.clickMapZoomIn();
-      await PageObjects.visualize.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
+      await PageObjects.tileMap.clickMapZoomIn();
 
       await PageObjects.visualize.saveVisualizationExpectSuccess('Visualization TileMap');
 
@@ -225,8 +232,8 @@ export default function({ getService, getPageObjects }) {
       describe('for embeddable config color parameters on a visualization', () => {
         it('updates a pie slice color on a soft refresh', async function() {
           await dashboardAddPanel.addVisualization(PIE_CHART_VIS_NAME);
-          await PageObjects.visualize.openLegendOptionColors('80,000');
-          await PageObjects.visualize.selectNewLegendColorChoice('#F9D9F9');
+          await PageObjects.visChart.openLegendOptionColors('80,000');
+          await PageObjects.visChart.selectNewLegendColorChoice('#F9D9F9');
           const currentUrl = await browser.getCurrentUrl();
           const newUrl = currentUrl.replace('F9D9F9', 'FFFFFF');
           await browser.get(newUrl.toString(), false);
@@ -248,7 +255,7 @@ export default function({ getService, getPageObjects }) {
         // Unskip once https://github.com/elastic/kibana/issues/15736 is fixed.
         it.skip('and updates the pie slice legend color', async function() {
           await retry.try(async () => {
-            const colorExists = await PageObjects.visualize.doesSelectedLegendColorExist('#FFFFFF');
+            const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist('#FFFFFF');
             expect(colorExists).to.be(true);
           });
         });
@@ -269,7 +276,7 @@ export default function({ getService, getPageObjects }) {
         // Unskip once https://github.com/elastic/kibana/issues/15736 is fixed.
         it.skip('resets the legend color as well', async function() {
           await retry.try(async () => {
-            const colorExists = await PageObjects.visualize.doesSelectedLegendColorExist('#57c17b');
+            const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist('#57c17b');
             expect(colorExists).to.be(true);
           });
         });

test/functional/apps/getting_started/_shakespeare.js

@@ -23,7 +23,14 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const retry = getService('retry');
-  const PageObjects = getPageObjects(['console', 'common', 'settings', 'visualize']);
+  const PageObjects = getPageObjects([
+    'console',
+    'common',
+    'settings',
+    'visualize',
+    'visEditor',
+    'visChart',
+  ]);
 
   // https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html
 
@@ -63,11 +70,11 @@ export default function({ getService, getPageObjects }) {
       await PageObjects.visualize.navigateToNewVisualization();
       await PageObjects.visualize.clickVerticalBarChart();
       await PageObjects.visualize.clickNewSearch('shakes*');
-      await PageObjects.visualize.waitForVisualization();
+      await PageObjects.visChart.waitForVisualization();
 
       const expectedChartValues = [111396];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Count');
+        const data = await PageObjects.visChart.getBarChartData('Count');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data[0] - expectedChartValues[0]).to.be.lessThan(5);
@@ -84,22 +91,22 @@ export default function({ getService, getPageObjects }) {
     it('should configure metric Unique Count Speaking Parts', async function() {
       log.debug('Metric = Unique Count, speaker, Speaking Parts');
       // this first change to the YAxis metric agg uses the default aggIndex of 1
-      await PageObjects.visualize.selectYAxisAggregation(
+      await PageObjects.visEditor.selectYAxisAggregation(
         'Unique Count',
         'speaker',
         'Speaking Parts'
       );
       // then increment the aggIndex for the next one we create
       aggIndex = aggIndex + 1;
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
       const expectedChartValues = [935];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
       });
-      const title = await PageObjects.visualize.getYAxisTitle();
+      const title = await PageObjects.visChart.getYAxisTitle();
       expect(title).to.be('Speaking Parts');
     });
 
@@ -110,23 +117,23 @@ export default function({ getService, getPageObjects }) {
     5. Click Apply changes images/apply-changes-button.png to view the results.
     */
     it('should configure Terms aggregation on play_name', async function() {
-      await PageObjects.visualize.clickBucket('X-axis');
+      await PageObjects.visEditor.clickBucket('X-axis');
       log.debug('Aggregation = Terms');
-      await PageObjects.visualize.selectAggregation('Terms');
+      await PageObjects.visEditor.selectAggregation('Terms');
       aggIndex = aggIndex + 1;
       log.debug('Field = play_name');
-      await PageObjects.visualize.selectField('play_name');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.selectField('play_name');
+      await PageObjects.visEditor.clickGo();
 
       const expectedChartValues = [71, 65, 62, 55, 55];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         expect(data).to.eql(expectedChartValues);
       });
 
-      const labels = await PageObjects.visualize.getXAxisLabels();
+      const labels = await PageObjects.visChart.getXAxisLabels();
       expect(labels).to.eql([
         'Richard III',
         'Henry VI Part 2',
@@ -145,21 +152,21 @@ export default function({ getService, getPageObjects }) {
     2. Choose the Max aggregation and select the speech_number field.
     */
     it('should configure Max aggregation metric on speech_number', async function() {
-      await PageObjects.visualize.clickBucket('Y-axis', 'metrics');
+      await PageObjects.visEditor.clickBucket('Y-axis', 'metrics');
       log.debug('Aggregation = Max');
-      await PageObjects.visualize.selectYAxisAggregation(
+      await PageObjects.visEditor.selectYAxisAggregation(
         'Max',
         'speech_number',
         'Max Speaking Parts',
         aggIndex
       );
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickGo();
 
       const expectedChartValues = [71, 65, 62, 55, 55];
       const expectedChartValues2 = [177, 106, 153, 132, 162];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
-        const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
+        const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         log.debug('data2=' + data2);
@@ -168,7 +175,7 @@ export default function({ getService, getPageObjects }) {
         expect(data2).to.eql(expectedChartValues2);
       });
 
-      const labels = await PageObjects.visualize.getXAxisLabels();
+      const labels = await PageObjects.visChart.getXAxisLabels();
       expect(labels).to.eql([
         'Richard III',
         'Henry VI Part 2',
@@ -184,15 +191,15 @@ export default function({ getService, getPageObjects }) {
     4. Click Apply changes images/apply-changes-button.png. Your chart should now look like this:
     */
     it('should configure change options to normal bars', async function() {
-      await PageObjects.visualize.clickMetricsAndAxes();
-      await PageObjects.visualize.selectChartMode('normal');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.clickMetricsAndAxes();
+      await PageObjects.visEditor.selectChartMode('normal');
+      await PageObjects.visEditor.clickGo();
 
       const expectedChartValues = [71, 65, 62, 55, 55];
       const expectedChartValues2 = [177, 106, 153, 132, 162];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
-        const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
+        const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         log.debug('data2=' + data2);
@@ -210,15 +217,15 @@ export default function({ getService, getPageObjects }) {
     Save this chart with the name Bar Example.
     */
     it('should change the Y-Axis extents', async function() {
-      await PageObjects.visualize.setAxisExtents('50', '250');
-      await PageObjects.visualize.clickGo();
+      await PageObjects.visEditor.setAxisExtents('50', '250');
+      await PageObjects.visEditor.clickGo();
 
       // same values as previous test except scaled down by the 50 for Y-Axis min
       const expectedChartValues = [21, 15, 12, 5, 5];
       const expectedChartValues2 = [127, 56, 103, 82, 112];
       await retry.try(async () => {
-        const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
-        const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts');
+        const data = await PageObjects.visChart.getBarChartData('Speaking Parts');
+        const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts');
         log.debug('data=' + data);
         log.debug('data.length=' + data.length);
         log.debug('data2=' + data2);