From 32c9e2ce61ebff81d93d031817523b47186a3e13 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Wed, 12 Aug 2020 16:15:31 +0300 Subject: [PATCH] [Vega] add functional tests for Vega visualization (#74097) (#74843) * [Vega] [Inspector] add functional tests for Request tab * add some tests for Vega Debug tab * add clipboard permissions for webdriver * add smoke tests for data grid * fix CI * add some tests for vega expression funcitons * change order * Update _vega_chart.ts * Rename dagta_grid.ts to data_grid.ts * Update index.ts * Update data_grid.ts * stabilize tests Co-authored-by: Elastic Machine Co-authored-by: Elastic Machine --- .../public/components/vega_actions_menu.tsx | 2 +- .../vega_inspector/components/spec_viewer.tsx | 8 +- .../vega_inspector/vega_data_inspector.tsx | 3 + test/functional/apps/visualize/_vega_chart.ts | 193 +++++++++++++++++- .../page_objects/vega_chart_page.ts | 65 +++++- test/functional/services/common/browser.ts | 12 ++ test/functional/services/data_grid.ts | 55 +++++ test/functional/services/index.ts | 9 +- test/functional/services/inspector.ts | 12 ++ test/functional/services/remote/webdriver.ts | 12 +- .../services/visualizations/index.ts | 1 + .../visualizations/vega_debug_inspector.ts | 68 ++++++ 12 files changed, 422 insertions(+), 18 deletions(-) create mode 100644 test/functional/services/data_grid.ts create mode 100644 test/functional/services/visualizations/vega_debug_inspector.ts diff --git a/src/plugins/vis_type_vega/public/components/vega_actions_menu.tsx b/src/plugins/vis_type_vega/public/components/vega_actions_menu.tsx index f10954df432c2..33fa1ceefd3d5 100644 --- a/src/plugins/vis_type_vega/public/components/vega_actions_menu.tsx +++ b/src/plugins/vis_type_vega/public/components/vega_actions_menu.tsx @@ -70,7 +70,7 @@ function VegaActionsMenu({ formatHJson, formatJson }: VegaActionsMenuProps) { return ( {
{(copy) => ( - + {copyToClipboardLabel} )} diff --git a/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.tsx b/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.tsx index 3b9427c96e62a..6dfa7a23c4fe8 100644 --- a/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.tsx +++ b/src/plugins/vis_type_vega/public/vega_inspector/vega_data_inspector.tsx @@ -47,11 +47,13 @@ export const VegaDataInspector = ({ adapters }: VegaDataInspectorProps) => { id: 'data-viewer--id', name: dataSetsLabel, content: , + 'data-test-subj': 'vegaDataInspectorDataViewerButton', }, { id: 'signal-viewer--id', name: signalValuesLabel, content: , + 'data-test-subj': 'vegaDataInspectorSignalViewerButton', }, { id: 'spec-viewer--id', @@ -59,6 +61,7 @@ export const VegaDataInspector = ({ adapters }: VegaDataInspectorProps) => { content: ( ), + 'data-test-subj': 'vegaDataInspectorSpecViewerButton', }, ]; diff --git a/test/functional/apps/visualize/_vega_chart.ts b/test/functional/apps/visualize/_vega_chart.ts index a1ed8460f1b22..b59d9590bb62a 100644 --- a/test/functional/apps/visualize/_vega_chart.ts +++ b/test/functional/apps/visualize/_vega_chart.ts @@ -16,10 +16,25 @@ * specific language governing permissions and limitations * under the License. */ - +import { unzip } from 'lodash'; import expect from '@kbn/expect'; import { FtrProviderContext } from '../../ftr_provider_context'; +const getTestSpec = (expression: string) => ` +{ +config: { "kibana": {"renderer": "svg"} } +$schema: https://vega.github.io/schema/vega/v5.json +marks: [{ + type: text + encode: { update: { text: { value: "Test" } } } +}] +signals: [ { + on: [{ + events: click + update: ${expression} + }] +}]}`; + export default function ({ getPageObjects, getService }: FtrProviderContext) { const PageObjects = getPageObjects([ 'timePicker', @@ -29,7 +44,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { 'vegaChart', ]); const filterBar = getService('filterBar'); + const inspector = getService('inspector'); + const vegaDebugInspectorView = getService('vegaDebugInspector'); const log = getService('log'); + const retry = getService('retry'); + const browser = getService('browser'); describe('vega chart in visualize app', () => { before(async () => { @@ -88,5 +107,177 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); }); }); + + describe('Inspector Panel', () => { + it('should have inspector enabled', async () => { + await inspector.expectIsEnabled(); + }); + + describe('Request Tab', () => { + beforeEach(async () => { + await inspector.open(); + }); + + afterEach(async () => { + await inspector.close(); + }); + + it('should contain "Statistics", "Request", "Response" tabs', async () => { + await inspector.openInspectorRequestsView(); + + for (const getFn of [ + inspector.getOpenRequestDetailRequestButton, + inspector.getOpenRequestDetailResponseButton, + inspector.getOpenRequestStatisticButton, + ]) { + await retry.try(async () => { + const requestStatisticTab = await getFn(); + + expect(await requestStatisticTab.isEnabled()).to.be(true); + }); + } + }); + + it('should set the default query name if not given in the schema', async () => { + const requests = await inspector.getRequestNames(); + + expect(requests).to.be('Unnamed request #0'); + }); + + it('should log the request statistic', async () => { + await inspector.openInspectorRequestsView(); + const rawTableData = await inspector.getTableData(); + + expect(unzip(rawTableData)[0].join(', ')).to.be( + 'Hits, Hits (total), Query time, Request timestamp' + ); + }); + }); + + describe('Debug Tab', () => { + beforeEach(async () => { + await inspector.open(); + }); + + afterEach(async () => { + await inspector.close(); + }); + + it('should contain "Data Sets", "Signal Values", "Spec" tabs', async () => { + await vegaDebugInspectorView.openVegaDebugInspectorView(); + + for (const getFn of [ + vegaDebugInspectorView.getOpenDataViewerButton, + vegaDebugInspectorView.getOpenSignalViewerButton, + vegaDebugInspectorView.getOpenSpecViewerButton, + ]) { + await retry.try(async () => { + const requestStatisticTab = await getFn(); + + expect(await requestStatisticTab.isEnabled()).to.be(true); + }); + } + }); + + it('should contain data on "Signal Values" tab', async () => { + await vegaDebugInspectorView.openVegaDebugInspectorView(); + await vegaDebugInspectorView.navigateToSignalViewerTab(); + + const { rows, columns } = await vegaDebugInspectorView.getGridTableData(); + + expect(columns.join(', ')).to.be('Signal, Value'); + expect(rows.length).to.be.greaterThan(0); + expect(rows[0].length).to.be(2); + }); + + it('should contain data on "Signal Values" tab', async () => { + await vegaDebugInspectorView.openVegaDebugInspectorView(); + await vegaDebugInspectorView.navigateToDataViewerTab(); + + const { rows, columns } = await vegaDebugInspectorView.getGridTableData(); + + expect(columns.length).to.be.greaterThan(0); + expect(rows.length).to.be.greaterThan(0); + }); + + it('should be able to copy vega spec to clipboard', async () => { + await vegaDebugInspectorView.openVegaDebugInspectorView(); + await vegaDebugInspectorView.navigateToSpecViewerTab(); + + const copyCopyToClipboardButton = await vegaDebugInspectorView.getCopyClipboardButton(); + + expect(await copyCopyToClipboardButton.isEnabled()).to.be(true); + + // The "clipboard-read" permission of the Permissions API must be granted + if (!(await browser.checkBrowserPermission('clipboard-read'))) { + return; + } + + await copyCopyToClipboardButton.click(); + + expect( + (await browser.getClipboardValue()).includes( + '"$schema": "https://vega.github.io/schema/vega-lite/' + ) + ).to.be(true); + }); + }); + }); + + describe('Vega extension functions', () => { + beforeEach(async () => { + await filterBar.removeAllFilters(); + }); + + const fillSpecAndGo = async (newSpec: string) => { + await PageObjects.vegaChart.fillSpec(newSpec); + await PageObjects.visEditor.clickGo(); + + const viewContainer = await PageObjects.vegaChart.getViewContainer(); + const textElement = await viewContainer.findByTagName('text'); + + await textElement.click(); + }; + + it('should update global time range by calling "kibanaSetTimeFilter" expression', async () => { + await fillSpecAndGo(getTestSpec('kibanaSetTimeFilter("2019", "2020")')); + + const currentTimeRange = await PageObjects.timePicker.getTimeConfig(); + + expect(currentTimeRange.start).to.be('Jan 1, 2019 @ 00:00:00.000'); + expect(currentTimeRange.end).to.be('Jan 1, 2020 @ 00:00:00.000'); + }); + + it('should set filter by calling "kibanaAddFilter" expression', async () => { + await fillSpecAndGo( + getTestSpec('kibanaAddFilter({ query_string: { query: "response:200" }})') + ); + + expect(await filterBar.getFilterCount()).to.be(1); + }); + + it('should remove filter by calling "kibanaRemoveFilter" expression', async () => { + await filterBar.addFilter('response', 'is', '200'); + + expect(await filterBar.getFilterCount()).to.be(1); + + await fillSpecAndGo( + getTestSpec('kibanaRemoveFilter({ match_phrase: { response: "200" }})') + ); + + expect(await filterBar.getFilterCount()).to.be(0); + }); + + it('should remove all filters by calling "kibanaRemoveAllFilters" expression', async () => { + await filterBar.addFilter('response', 'is', '200'); + await filterBar.addFilter('response', 'is', '500'); + + expect(await filterBar.getFilterCount()).to.be(2); + + await fillSpecAndGo(getTestSpec('kibanaRemoveAllFilters()')); + + expect(await filterBar.getFilterCount()).to.be(0); + }); + }); }); } diff --git a/test/functional/page_objects/vega_chart_page.ts b/test/functional/page_objects/vega_chart_page.ts index b9906911b00f1..1173c35af3384 100644 --- a/test/functional/page_objects/vega_chart_page.ts +++ b/test/functional/page_objects/vega_chart_page.ts @@ -18,8 +18,14 @@ */ import { Key } from 'selenium-webdriver'; +import expect from '@kbn/expect'; import { FtrProviderContext } from '../ftr_provider_context'; +const compareSpecs = (first: string, second: string) => { + const normalizeSpec = (spec: string) => spec.replace(/[\n ]/g, ''); + return normalizeSpec(first) === normalizeSpec(second); +}; + export function VegaChartPageProvider({ getService, getPageObjects, @@ -28,24 +34,57 @@ export function VegaChartPageProvider({ const testSubjects = getService('testSubjects'); const browser = getService('browser'); const { common } = getPageObjects(['common']); + const retry = getService('retry'); class VegaChartPage { - public async getSpec() { + public getEditor() { + return testSubjects.find('vega-editor'); + } + + public getViewContainer() { + return find.byCssSelector('div.vgaVis__view'); + } + + public getControlContainer() { + return find.byCssSelector('div.vgaVis__controls'); + } + + public async getRawSpec() { // Adapted from console_page.js:getVisibleTextFromAceEditor(). Is there a common utilities file? - const editor = await testSubjects.find('vega-editor'); + const editor = await this.getEditor(); const lines = await editor.findAllByClassName('ace_line_group'); - const linesText = await Promise.all( + + return await Promise.all( lines.map(async (line) => { return await line.getVisibleText(); }) ); - return linesText.join('\n'); } - public async typeInSpec(text: string) { - const editor = await testSubjects.find('vega-editor'); + public async getSpec() { + return (await this.getRawSpec()).join('\n'); + } + + public async focusEditor() { + const editor = await this.getEditor(); const textarea = await editor.findByClassName('ace_content'); + await textarea.click(); + } + + public async fillSpec(newSpec: string) { + await retry.try(async () => { + await this.cleanSpec(); + await this.focusEditor(); + await browser.pressKeys(newSpec); + + expect(compareSpecs(await this.getSpec(), newSpec)).to.be(true); + }); + } + + public async typeInSpec(text: string) { + await this.focusEditor(); + let repeats = 20; while (--repeats > 0) { await browser.pressKeys(Key.ARROW_UP); @@ -55,12 +94,16 @@ export function VegaChartPageProvider({ await browser.pressKeys(text); } - public async getViewContainer() { - return await find.byCssSelector('div.vgaVis__view'); - } + public async cleanSpec() { + const editor = await this.getEditor(); + const aceGutter = await editor.findByClassName('ace_gutter'); + + await retry.try(async () => { + await aceGutter.doubleClick(); + await browser.pressKeys(Key.BACK_SPACE); - public async getControlContainer() { - return await find.byCssSelector('div.vgaVis__controls'); + expect(await this.getSpec()).to.be(''); + }); } public async getYAxisLabels() { diff --git a/test/functional/services/common/browser.ts b/test/functional/services/common/browser.ts index d591cd755b29d..068ece59d2ec0 100644 --- a/test/functional/services/common/browser.ts +++ b/test/functional/services/common/browser.ts @@ -487,5 +487,17 @@ export async function BrowserProvider({ getService }: FtrProviderContext) { const _id = idOrElement instanceof WebElementWrapper ? idOrElement._webElement : idOrElement; await driver.switchTo().frame(_id); } + + public async checkBrowserPermission(permission: string): Promise { + const result: any = await driver.executeAsyncScript( + `navigator.permissions.query({name:'${permission}'}).then(arguments[0])` + ); + + return Boolean(result?.state === 'granted'); + } + + public getClipboardValue(): Promise { + return driver.executeAsyncScript('navigator.clipboard.readText().then(arguments[0])'); + } })(); } diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts new file mode 100644 index 0000000000000..40157caab5756 --- /dev/null +++ b/test/functional/services/data_grid.ts @@ -0,0 +1,55 @@ +/* + * 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 { FtrProviderContext } from '../ftr_provider_context'; + +interface TabbedGridData { + columns: string[]; + rows: string[][]; +} + +export function DataGridProvider({ getService }: FtrProviderContext) { + const find = getService('find'); + + class DataGrid { + async getDataGridTableData(): Promise { + const table = await find.byCssSelector('.euiDataGrid'); + const $ = await table.parseDomContent(); + + const columns = $('.euiDataGridHeaderCell__content') + .toArray() + .map((cell) => $(cell).text()); + const rows = $.findTestSubjects('dataGridRow') + .toArray() + .map((row) => + $(row) + .find('.euiDataGridRowCell__truncate') + .toArray() + .map((cell) => $(cell).text()) + ); + + return { + columns, + rows, + }; + } + } + + return new DataGrid(); +} diff --git a/test/functional/services/index.ts b/test/functional/services/index.ts index 7891a6b00f729..4c97d672bae2e 100644 --- a/test/functional/services/index.ts +++ b/test/functional/services/index.ts @@ -47,7 +47,12 @@ import { RemoteProvider } from './remote'; import { RenderableProvider } from './renderable'; import { TableProvider } from './table'; import { ToastsProvider } from './toasts'; -import { PieChartProvider, ElasticChartProvider } from './visualizations'; +import { DataGridProvider } from './data_grid'; +import { + PieChartProvider, + ElasticChartProvider, + VegaDebugInspectorViewProvider, +} from './visualizations'; import { ListingTableProvider } from './listing_table'; import { SavedQueryManagementComponentProvider } from './saved_query_management_component'; import { KibanaSupertestProvider } from './supertest'; @@ -72,12 +77,14 @@ export const services = { dashboardPanelActions: DashboardPanelActionsProvider, flyout: FlyoutProvider, comboBox: ComboBoxProvider, + dataGrid: DataGridProvider, embedding: EmbeddingProvider, renderable: RenderableProvider, table: TableProvider, browser: BrowserProvider, pieChart: PieChartProvider, inspector: InspectorProvider, + vegaDebugInspector: VegaDebugInspectorViewProvider, appsMenu: AppsMenuProvider, globalNav: GlobalNavProvider, toasts: ToastsProvider, diff --git a/test/functional/services/inspector.ts b/test/functional/services/inspector.ts index d8ac224ddd9bc..1c0bf7ad46df1 100644 --- a/test/functional/services/inspector.ts +++ b/test/functional/services/inspector.ts @@ -233,6 +233,18 @@ export function InspectorProvider({ getService }: FtrProviderContext) { const singleRequest = await testSubjects.find('inspectorRequestName'); return await singleRequest.getVisibleText(); } + + public getOpenRequestStatisticButton() { + return testSubjects.find('inspectorRequestDetailStatistics'); + } + + public getOpenRequestDetailRequestButton() { + return testSubjects.find('inspectorRequestDetailRequest'); + } + + public getOpenRequestDetailResponseButton() { + return testSubjects.find('inspectorRequestDetailResponse'); + } } return new Inspector(); diff --git a/test/functional/services/remote/webdriver.ts b/test/functional/services/remote/webdriver.ts index 6342002f8e786..b00b7bb5bf971 100644 --- a/test/functional/services/remote/webdriver.ts +++ b/test/functional/services/remote/webdriver.ts @@ -53,9 +53,15 @@ const SECOND = 1000; const MINUTE = 60 * SECOND; const NO_QUEUE_COMMANDS = ['getLog', 'getStatus', 'newSession', 'quit']; const downloadDir = resolve(REPO_ROOT, 'target/functional-tests/downloads'); -const chromiumDownloadPrefs = { +const chromiumUserPrefs = { 'download.default_directory': downloadDir, 'download.prompt_for_download': false, + 'profile.content_settings.exceptions.clipboard': { + '[*.],*': { + last_modified: Date.now(), + setting: 1, + }, + }, }; /** @@ -135,7 +141,7 @@ async function attemptToCreateCommand( const prefs = new logging.Preferences(); prefs.setLevel(logging.Type.BROWSER, logging.Level.ALL); - chromeOptions.setUserPreferences(chromiumDownloadPrefs); + chromeOptions.setUserPreferences(chromiumUserPrefs); chromeOptions.setLoggingPrefs(prefs); chromeOptions.set('unexpectedAlertBehaviour', 'accept'); chromeOptions.setAcceptInsecureCerts(config.acceptInsecureCerts); @@ -180,7 +186,7 @@ async function attemptToCreateCommand( edgeOptions.setBinaryPath(edgePaths.browserPath); const options = edgeOptions.get('ms:edgeOptions'); // overriding options to include preferences - Object.assign(options, { prefs: chromiumDownloadPrefs }); + Object.assign(options, { prefs: chromiumUserPrefs }); edgeOptions.set('ms:edgeOptions', options); const session = await new Builder() .forBrowser('MicrosoftEdge') diff --git a/test/functional/services/visualizations/index.ts b/test/functional/services/visualizations/index.ts index 1da1691b07c2a..10019e63d684e 100644 --- a/test/functional/services/visualizations/index.ts +++ b/test/functional/services/visualizations/index.ts @@ -19,3 +19,4 @@ export { PieChartProvider } from './pie_chart'; export { ElasticChartProvider } from './elastic_chart'; +export { VegaDebugInspectorViewProvider } from './vega_debug_inspector'; diff --git a/test/functional/services/visualizations/vega_debug_inspector.ts b/test/functional/services/visualizations/vega_debug_inspector.ts new file mode 100644 index 0000000000000..3847ebbbf1279 --- /dev/null +++ b/test/functional/services/visualizations/vega_debug_inspector.ts @@ -0,0 +1,68 @@ +/* + * 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 { FtrProviderContext } from '../../ftr_provider_context'; + +export function VegaDebugInspectorViewProvider({ getService }: FtrProviderContext) { + const testSubjects = getService('testSubjects'); + const inspector = getService('inspector'); + const dataGrid = getService('dataGrid'); + + class VegaDebugInspectorView { + async openVegaDebugInspectorView() { + await inspector.openInspectorView('inspectorViewChooserVega debug'); + } + + public getOpenDataViewerButton() { + return testSubjects.find('vegaDataInspectorDataViewerButton'); + } + + public getOpenSignalViewerButton() { + return testSubjects.find('vegaDataInspectorSignalViewerButton'); + } + + public getOpenSpecViewerButton() { + return testSubjects.find('vegaDataInspectorSpecViewerButton'); + } + + public getCopyClipboardButton() { + return testSubjects.find('vegaDataInspectorCopyClipboardButton'); + } + + public getGridTableData() { + return dataGrid.getDataGridTableData(); + } + + public async navigateToDataViewerTab() { + const dataViewerButton = await this.getOpenDataViewerButton(); + await dataViewerButton.click(); + } + + public async navigateToSignalViewerTab() { + const signalViewerButton = await this.getOpenSignalViewerButton(); + await signalViewerButton.click(); + } + + public async navigateToSpecViewerTab() { + const specViewerButton = await this.getOpenSpecViewerButton(); + await specViewerButton.click(); + } + } + + return new VegaDebugInspectorView(); +}