Skip to content

Commit

Permalink
Convert functional vega tests to ts and unskip tests (#72238) (#73249)
Browse files Browse the repository at this point in the history
  • Loading branch information
flash1293 authored Jul 27, 2020
1 parent 34e6a2d commit f8c2b91
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 44 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -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);

Expand All @@ -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');
});
});
});
Expand Down
61 changes: 25 additions & 36 deletions test/functional/page_objects/vega_chart_page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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');
}
Expand All @@ -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;
}
}

Expand Down
Binary file removed test/functional/screenshots/baseline/vega_chart.png
Binary file not shown.
Binary file not shown.

0 comments on commit f8c2b91

Please sign in to comment.