Convert functional vega tests to ts and unskip tests (#72238) (#73249)

test/functional/apps/visualize/_vega_chart.js → test/functional/apps/visualize/_vega_chart.ts

@@ -18,9 +18,17 @@
  */
 
 import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function ({ getService, getPageObjects }) {
-  const PageObjects = getPageObjects(['timePicker', 'visualize', 'visChart', 'vegaChart']);
+// eslint-disable-next-line import/no-default-export
+export default function ({ getPageObjects, getService }: FtrProviderContext) {
+  const PageObjects = getPageObjects([
+    'timePicker',
+    'visualize',
+    'visChart',
+    'visEditor',
+    'vegaChart',
+  ]);
   const filterBar = getService('filterBar');
   const log = getService('log');
 
@@ -30,21 +38,24 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.navigateToNewVisualization();
       log.debug('clickVega');
       await PageObjects.visualize.clickVega();
+      await PageObjects.visChart.waitForVisualizationRenderingStabilized();
     });
 
     describe('vega chart', () => {
       describe('initial render', () => {
-        it.skip('should have some initial vega spec text', async function () {
+        it('should have some initial vega spec text', async function () {
           const vegaSpec = await PageObjects.vegaChart.getSpec();
-          expect(vegaSpec).to.contain('{').and.to.contain('data');
+          expect(vegaSpec).to.contain('{');
+          expect(vegaSpec).to.contain('data');
           expect(vegaSpec.length).to.be.above(500);
         });
 
         it('should have view and control containers', async function () {
           const view = await PageObjects.vegaChart.getViewContainer();
           expect(view).to.be.ok();
           const size = await view.getSize();
-          expect(size).to.have.property('width').and.to.have.property('height');
+          expect(size).to.have.property('width');
+          expect(size).to.have.property('height');
           expect(size.width).to.be.above(0);
           expect(size.height).to.be.above(0);
 
@@ -63,10 +74,18 @@ export default function ({ getService, getPageObjects }) {
           await filterBar.removeAllFilters();
         });
 
-        it.skip('should render different data in response to filter change', async function () {
-          await PageObjects.vegaChart.expectVisToMatchScreenshot('vega_chart');
+        it('should render different data in response to filter change', async function () {
+          await PageObjects.vegaChart.typeInSpec('"config": { "kibana": {"renderer": "svg"} },');
+          await PageObjects.visEditor.clickGo();
+          await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+          const fullDataLabels = await PageObjects.vegaChart.getYAxisLabels();
+          expect(fullDataLabels[0]).to.eql('0');
+          expect(fullDataLabels[fullDataLabels.length - 1]).to.eql('1,600');
           await filterBar.addFilter('@tags.raw', 'is', 'error');
-          await PageObjects.vegaChart.expectVisToMatchScreenshot('vega_chart_filtered');
+          await PageObjects.visChart.waitForVisualizationRenderingStabilized();
+          const filteredDataLabels = await PageObjects.vegaChart.getYAxisLabels();
+          expect(filteredDataLabels[0]).to.eql('0');
+          expect(filteredDataLabels[filteredDataLabels.length - 1]).to.eql('90');
         });
       });
     });

test/functional/page_objects/vega_chart_page.ts

@@ -17,20 +17,17 @@
  * under the License.
  */
 
-import expect from '@kbn/expect';
+import { Key } from 'selenium-webdriver';
 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']);
+  const { common } = getPageObjects(['common']);
 
   class VegaChartPage {
     public async getSpec() {
@@ -45,6 +42,19 @@ export function VegaChartPageProvider({
       return linesText.join('\n');
     }
 
+    public async typeInSpec(text: string) {
+      const editor = await testSubjects.find('vega-editor');
+      const textarea = await editor.findByClassName('ace_content');
+      await textarea.click();
+      let repeats = 20;
+      while (--repeats > 0) {
+        await browser.pressKeys(Key.ARROW_UP);
+        await common.sleep(50);
+      }
+      await browser.pressKeys(Key.ARROW_RIGHT);
+      await browser.pressKeys(text);
+    }
+
     public async getViewContainer() {
       return await find.byCssSelector('div.vgaVis__view');
     }
@@ -53,37 +63,16 @@ export function VegaChartPageProvider({
       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);
+    public async getYAxisLabels() {
+      const chart = await testSubjects.find('visualizationLoader');
+      const yAxis = await chart.findByCssSelector('[aria-label^="Y-axis"]');
+      const tickGroup = await yAxis.findByClassName('role-axis-label');
+      const labels = await tickGroup.findAllByCssSelector('text');
+      const labelTexts: string[] = [];
+      for (const label of labels) {
+        labelTexts.push(await label.getVisibleText());
+      }
+      return labelTexts;
     }
   }