add vega_chart_page, refactor

elastic · Jan 3, 2020 · bd0e10b · bd0e10b
1 parent 4ab65d7
commit bd0e10b
Show file tree

Hide file tree

Showing 23 changed files with 117 additions and 96 deletions.
diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js
@@ -30,7 +30,6 @@ export default function({ getService, getPageObjects }) {
     'visEditor',
     'visChart',
     'header',
-    'settings',
     'timePicker',
   ]);
 

diff --git a/test/functional/apps/visualize/_data_table.js b/test/functional/apps/visualize/_data_table.js
@@ -25,14 +25,7 @@ export default function({ getService, getPageObjects }) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects([
-    'common',
-    'visualize',
-    'header',
-    'timePicker',
-    'visEditor',
-    'visChart',
-  ]);
+  const PageObjects = getPageObjects(['visualize', 'timePicker', 'visEditor', 'visChart']);
 
   describe('data table', function indexPatternCreation() {
     const vizName1 = 'Visualization DataTable';

diff --git a/test/functional/apps/visualize/_data_table_nontimeindex.js b/test/functional/apps/visualize/_data_table_nontimeindex.js
@@ -25,7 +25,7 @@ export default function({ getService, getPageObjects }) {
   const retry = getService('retry');
   const filterBar = getService('filterBar');
   const renderable = getService('renderable');
-  const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'header', 'visChart']);
 
   describe.skip('data table with index without time filter', function indexPatternCreation() {
     const vizName1 = 'Visualization DataTable without time filter';

diff --git a/test/functional/apps/visualize/_embedding_chart.js b/test/functional/apps/visualize/_embedding_chart.js
@@ -25,7 +25,6 @@ export default function({ getService, getPageObjects }) {
   const renderable = getService('renderable');
   const embedding = getService('embedding');
   const PageObjects = getPageObjects([
-    'common',
     'visualize',
     'visEditor',
     'visChart',

diff --git a/test/functional/apps/visualize/_experimental_vis.js b/test/functional/apps/visualize/_experimental_vis.js
@@ -21,7 +21,7 @@ import expect from '@kbn/expect';
 
 export default ({ getService, getPageObjects }) => {
   const log = getService('log');
-  const PageObjects = getPageObjects(['common', 'visualize']);
+  const PageObjects = getPageObjects(['visualize']);
 
   describe('visualize app', function() {
     this.tags('smoke');

diff --git a/test/functional/apps/visualize/_gauge_chart.js b/test/functional/apps/visualize/_gauge_chart.js
@@ -24,13 +24,7 @@ export default function({ getService, getPageObjects }) {
   const retry = getService('retry');
   const inspector = getService('inspector');
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects([
-    'common',
-    'visualize',
-    'visEditor',
-    'visChart',
-    'timePicker',
-  ]);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   // FLAKY: https://github.com/elastic/kibana/issues/45089
   describe('gauge chart', function indexPatternCreation() {

diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js
@@ -22,13 +22,7 @@ import expect from '@kbn/expect';
 export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects([
-    'common',
-    'visualize',
-    'visEditor',
-    'visChart',
-    'timePicker',
-  ]);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   describe('heatmap chart', function indexPatternCreation() {
     this.tags('smoke');

diff --git a/test/functional/apps/visualize/_inspector.js b/test/functional/apps/visualize/_inspector.js
@@ -21,13 +21,7 @@ export default function({ getService, getPageObjects }) {
   const log = getService('log');
   const inspector = getService('inspector');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects([
-    'common',
-    'visualize',
-    'visEditor',
-    'visChart',
-    'timePicker',
-  ]);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   describe('inspector', function describeIndexTests() {
     this.tags('smoke');

diff --git a/test/functional/apps/visualize/_markdown_vis.js b/test/functional/apps/visualize/_markdown_vis.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 
 export default function({ getPageObjects, getService }) {
-  const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'visChart', 'header']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'header']);
   const find = getService('find');
   const inspector = getService('inspector');
   const markdown = `

diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js
@@ -24,13 +24,7 @@ export default function({ getService, getPageObjects }) {
   const retry = getService('retry');
   const filterBar = getService('filterBar');
   const inspector = getService('inspector');
-  const PageObjects = getPageObjects([
-    'common',
-    'visualize',
-    'visEditor',
-    'visChart',
-    'timePicker',
-  ]);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   describe('metric chart', function() {
     before(async function() {

diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.js
@@ -30,7 +30,6 @@ export default function({ getService, getPageObjects }) {
     'visEditor',
     'visChart',
     'header',
-    'settings',
     'timePicker',
   ]);
 

diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js
@@ -25,7 +25,6 @@ export default function({ getService, getPageObjects }) {
   const kibanaServer = getService('kibanaServer');
   const browser = getService('browser');
   const PageObjects = getPageObjects([
-    'common',
     'visualize',
     'header',
     'pointSeries',

diff --git a/test/functional/apps/visualize/_region_map.js b/test/functional/apps/visualize/_region_map.js
@@ -24,13 +24,7 @@ export default function({ getService, getPageObjects }) {
     const inspector = getService('inspector');
     const log = getService('log');
     const find = getService('find');
-    const PageObjects = getPageObjects([
-      'common',
-      'visualize',
-      'visEditor',
-      'timePicker',
-      'settings',
-    ]);
+    const PageObjects = getPageObjects(['visualize', 'visEditor', 'timePicker']);
 
     before(async function() {
       log.debug('navigateToApp visualize');

diff --git a/test/functional/apps/visualize/_tile_map.js b/test/functional/apps/visualize/_tile_map.js
@@ -33,7 +33,6 @@ export default function({ getService, getPageObjects }) {
     'visEditor',
     'visChart',
     'timePicker',
-    'settings',
     'tileMap',
   ]);
 

diff --git a/test/functional/apps/visualize/_vega_chart.js b/test/functional/apps/visualize/_vega_chart.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 
 export default function({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['common', 'header', 'timePicker', 'visualize', 'visChart']);
+  const PageObjects = getPageObjects(['timePicker', 'visualize', 'visChart', 'vegaChart']);
   const filterBar = getService('filterBar');
   const inspector = getService('inspector');
   const log = getService('log');
@@ -40,15 +40,15 @@ export default function({ getService, getPageObjects }) {
         });
 
         it.skip('should have some initial vega spec text', async function() {
-          const vegaSpec = await PageObjects.visChart.getVegaSpec();
+          const vegaSpec = await PageObjects.vegaChart.getSpec();
           expect(vegaSpec)
             .to.contain('{')
             .and.to.contain('data');
           expect(vegaSpec.length).to.be.above(500);
         });
 
         it('should have view and control containers', async function() {
-          const view = await PageObjects.visChart.getVegaViewContainer();
+          const view = await PageObjects.vegaChart.getViewContainer();
           expect(view).to.be.ok();
           const size = await view.getSize();
           expect(size)
@@ -57,7 +57,7 @@ export default function({ getService, getPageObjects }) {
           expect(size.width).to.be.above(0);
           expect(size.height).to.be.above(0);
 
-          const controls = await PageObjects.visChart.getVegaControlContainer();
+          const controls = await PageObjects.vegaChart.getControlContainer();
           expect(controls).to.be.ok();
         });
       });
@@ -73,9 +73,9 @@ export default function({ getService, getPageObjects }) {
         });
 
         it.skip('should render different data in response to filter change', async function() {
-          await PageObjects.visualize.expectVisToMatchScreenshot('vega_chart');
+          await PageObjects.vegaChart.expectVisToMatchScreenshot('vega_chart');
           await filterBar.addFilter('@tags.raw', 'is', 'error');
-          await PageObjects.visualize.expectVisToMatchScreenshot('vega_chart_filtered');
+          await PageObjects.vegaChart.expectVisToMatchScreenshot('vega_chart_filtered');
         });
       });
     });

diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js
@@ -25,14 +25,7 @@ export default function({ getService, getPageObjects }) {
   const inspector = getService('inspector');
   const testSubjects = getService('testSubjects');
   const filterBar = getService('filterBar');
-  const PageObjects = getPageObjects([
-    'common',
-    'visualize',
-    'visEditor',
-    'visChart',
-    'header',
-    'timePicker',
-  ]);
+  const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
   // FLAKY: https://github.com/elastic/kibana/issues/22322
   describe('vertical bar chart', function() {

diff --git a/test/functional/apps/visualize/_visualize_listing.js b/test/functional/apps/visualize/_visualize_listing.js
@@ -20,7 +20,7 @@
 import expect from '@kbn/expect';
 
 export default function({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['visualize', 'visEditor', 'header', 'common']);
+  const PageObjects = getPageObjects(['visualize', 'visEditor']);
   const listingTable = getService('listingTable');
 
   // FLAKY: https://github.com/elastic/kibana/issues/40912

diff --git a/test/functional/page_objects/index.ts b/test/functional/page_objects/index.ts
@@ -39,7 +39,6 @@ import { NewsfeedPageProvider } from './newsfeed_page';
 import { PointSeriesPageProvider } from './point_series_page';
 // @ts-ignore not TS yet
 import { SettingsPageProvider } from './settings_page';
-// @ts-ignore not TS yet
 import { SharePageProvider } from './share_page';
 // @ts-ignore not TS yet
 import { ShieldPageProvider } from './shield_page';
@@ -53,6 +52,7 @@ import { VisualizeEditorPageProvider } from './visualize_editor_page';
 import { VisualizeChartPageProvider } from './visualize_chart_page';
 import { TileMapPageProvider } from './tile_map_page';
 import { TagCloudPageProvider } from './tag_cloud_page';
+import { VegaChartPageProvider } from './vega_chart_page';
 
 export const pageObjects = {
   common: CommonPageProvider,
@@ -77,4 +77,5 @@ export const pageObjects = {
   visChart: VisualizeChartPageProvider,
   tileMap: TileMapPageProvider,
   tagCloud: TagCloudPageProvider,
+  vegaChart: VegaChartPageProvider,
 };
diff --git a/test/functional/page_objects/tile_map_page.ts b/test/functional/page_objects/tile_map_page.ts
@@ -25,7 +25,7 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC
   const retry = getService('retry');
   const log = getService('log');
   const inspector = getService('inspector');
-  const { header } = getPageObjects(['common', 'header']);
+  const { header } = getPageObjects(['header']);
 
   class TileMapPage {
     public async getZoomSelectors(zoomSelector: string) {

diff --git a/test/functional/page_objects/vega_chart_page.ts b/test/functional/page_objects/vega_chart_page.ts
@@ -0,0 +1,91 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export function VegaChartPageProvider({
+  getService,
+  getPageObjects,
+  updateBaselines,
+}: FtrProviderContext & { updateBaselines: boolean }) {
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
+  const browser = getService('browser');
+  const screenshot = getService('screenshots');
+  const log = getService('log');
+  const { visEditor, visChart } = getPageObjects(['visEditor', 'visChart']);
+
+  class VegaChartPage {
+    public async getSpec() {
+      // Adapted from console_page.js:getVisibleTextFromAceEditor(). Is there a common utilities file?
+      const editor = await testSubjects.find('vega-editor');
+      const lines = await editor.findAllByClassName('ace_line_group');
+      const linesText = await Promise.all(
+        lines.map(async line => {
+          return await line.getVisibleText();
+        })
+      );
+      return linesText.join('\n');
+    }
+
+    public async getViewContainer() {
+      return await find.byCssSelector('div.vgaVis__view');
+    }
+
+    public async getControlContainer() {
+      return await find.byCssSelector('div.vgaVis__controls');
+    }
+
+    /**
+     * Removes chrome and takes a small screenshot of a vis to compare against a baseline.
+     * @param {string} name The name of the baseline image.
+     * @param {object} opts Options object.
+     * @param {number} opts.threshold Threshold for allowed variance when comparing images.
+     */
+    public async expectVisToMatchScreenshot(name: string, opts = { threshold: 0.05 }) {
+      log.debug(`expectVisToMatchScreenshot(${name})`);
+
+      // Collapse sidebar and inject some CSS to hide the nav so we have a focused screenshot
+      await visEditor.clickEditorSidebarCollapse();
+      await visChart.waitForVisualizationRenderingStabilized();
+      await browser.execute(`
+          var el = document.createElement('style');
+          el.id = '__data-test-style';
+          el.innerHTML = '[data-test-subj="headerGlobalNav"] { display: none; } ';
+          el.innerHTML += '[data-test-subj="top-nav"] { display: none; } ';
+          el.innerHTML += '[data-test-subj="experimentalVisInfo"] { display: none; } ';
+          document.body.appendChild(el);
+        `);
+
+      const percentDifference = await screenshot.compareAgainstBaseline(name, updateBaselines);
+
+      // Reset the chart to its original state
+      await browser.execute(`
+          var el = document.getElementById('__data-test-style');
+          document.body.removeChild(el);
+        `);
+      await visEditor.clickEditorSidebarCollapse();
+      await visChart.waitForVisualizationRenderingStabilized();
+      expect(percentDifference).to.be.lessThan(opts.threshold);
+    }
+  }
+
+  return new VegaChartPage();
+}
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
@@ -324,26 +324,6 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       return element.getVisibleText();
     }
 
-    public async getVegaSpec() {
-      // Adapted from console_page.js:getVisibleTextFromAceEditor(). Is there a common utilities file?
-      const editor = await testSubjects.find('vega-editor');
-      const lines = await editor.findAllByClassName('ace_line_group');
-      const linesText = await Promise.all(
-        lines.map(async line => {
-          return await line.getVisibleText();
-        })
-      );
-      return linesText.join('\n');
-    }
-
-    public async getVegaViewContainer() {
-      return await find.byCssSelector('div.vgaVis__view');
-    }
-
-    public async getVegaControlContainer() {
-      return await find.byCssSelector('div.vgaVis__controls');
-    }
-
     /**
      * If you are writing new tests, you should rather look into getTableVisContent method instead.
      */