Convert functional vega tests to ts and unskip tests (#72238)
* convert to ts and unskip tests * relax tests and remove unused imports * remove test exclusion * remove inspector test Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
122d7fe18f
commit
6a53b0021e
4 changed files with 52 additions and 44 deletions
|
@ -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,13 +38,15 @@ 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);
|
||||
});
|
||||
|
||||
|
@ -44,7 +54,8 @@ export default function ({ getService, getPageObjects }) {
|
|||
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');
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
Before Width: | Height: | Size: 58 KiB |
Loading…
Reference in a new issue