From 191187a3a562db74e32407df9d477a1c42340aee Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Mon, 16 Dec 2019 16:18:05 +0100 Subject: [PATCH 1/9] add new POs and services --- .../input_control_vis/chained_controls.js | 4 +- .../input_control_options.js | 10 +- .../input_control_vis/input_control_range.ts | 36 +--- test/functional/page_objects/index.ts | 2 + .../page_objects/visual_editor_page.ts | 122 +++++++++++ .../functional/page_objects/visualize_page.js | 10 +- test/functional/services/visualize_chart.ts | 191 ++++++++++++++++++ 7 files changed, 337 insertions(+), 38 deletions(-) create mode 100644 test/functional/page_objects/visual_editor_page.ts create mode 100644 test/functional/services/visualize_chart.ts diff --git a/test/functional/apps/visualize/input_control_vis/chained_controls.js b/test/functional/apps/visualize/input_control_vis/chained_controls.js index 96d9dae519b51..b56a37218aba5 100644 --- a/test/functional/apps/visualize/input_control_vis/chained_controls.js +++ b/test/functional/apps/visualize/input_control_vis/chained_controls.js @@ -21,7 +21,7 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const filterBar = getService('filterBar'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']); + const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']); const testSubjects = getService('testSubjects'); const find = getService('find'); const comboBox = getService('comboBox'); @@ -65,7 +65,7 @@ export default function({ getService, getPageObjects }) { it('should create a seperate filter pill for parent control and child control', async () => { await comboBox.set('listControlSelect1', '14.61.182.136'); - await PageObjects.visualize.inputControlSubmit(); + await PageObjects.visEditor.inputControlSubmit(); const hasParentControlFilter = await filterBar.hasFilter('geo.src', 'BR'); expect(hasParentControlFilter).to.equal(true); diff --git a/test/functional/apps/visualize/input_control_vis/input_control_options.js b/test/functional/apps/visualize/input_control_vis/input_control_options.js index 1c3f63e94ae75..9fd2da9a234a5 100644 --- a/test/functional/apps/visualize/input_control_vis/input_control_options.js +++ b/test/functional/apps/visualize/input_control_vis/input_control_options.js @@ -21,7 +21,7 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const filterBar = getService('filterBar'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']); + const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']); const testSubjects = getService('testSubjects'); const inspector = getService('inspector'); const find = getService('find'); @@ -89,7 +89,7 @@ export default function({ getService, getPageObjects }) { }); it('should add filter pill when submit button is clicked', async () => { - await PageObjects.visualize.inputControlSubmit(); + await PageObjects.visEditor.inputControlSubmit(); const hasFilter = await filterBar.hasFilter(FIELD_NAME, 'ios'); expect(hasFilter).to.equal(true); @@ -98,7 +98,7 @@ export default function({ getService, getPageObjects }) { it('should replace existing filter pill(s) when new item is selected', async () => { await comboBox.clear('listControlSelect0'); await comboBox.set('listControlSelect0', 'osx'); - await PageObjects.visualize.inputControlSubmit(); + await PageObjects.visEditor.inputControlSubmit(); await PageObjects.common.sleep(1000); const hasOldFilter = await filterBar.hasFilter(FIELD_NAME, 'ios'); @@ -117,7 +117,7 @@ export default function({ getService, getPageObjects }) { it('should clear form when Clear button is clicked but not remove filter pill', async () => { await comboBox.set('listControlSelect0', 'ios'); - await PageObjects.visualize.inputControlSubmit(); + await PageObjects.visEditor.inputControlSubmit(); const hasFilterBeforeClearBtnClicked = await filterBar.hasFilter(FIELD_NAME, 'ios'); expect(hasFilterBeforeClearBtnClicked).to.equal(true); @@ -130,7 +130,7 @@ export default function({ getService, getPageObjects }) { }); it('should remove filter pill when cleared form is submitted', async () => { - await PageObjects.visualize.inputControlSubmit(); + await PageObjects.visEditor.inputControlSubmit(); const hasFilter = await filterBar.hasFilter(FIELD_NAME, 'ios'); expect(hasFilter).to.equal(false); }); diff --git a/test/functional/apps/visualize/input_control_vis/input_control_range.ts b/test/functional/apps/visualize/input_control_vis/input_control_range.ts index 2d6550de5dec9..f48ba7b54daf1 100644 --- a/test/functional/apps/visualize/input_control_vis/input_control_range.ts +++ b/test/functional/apps/visualize/input_control_vis/input_control_range.ts @@ -25,7 +25,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { const esArchiver = getService('esArchiver'); const kibanaServer = getService('kibanaServer'); const find = getService('find'); - const { visualize } = getPageObjects(['visualize']); + const { visualize, visEditor } = getPageObjects(['visualize', 'visEditor']); describe('input control range', () => { before(async () => { @@ -35,36 +35,22 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { }); it('should add filter with scripted field', async () => { - await visualize.addInputControl('range'); - await visualize.setFilterParams({ - indexPattern: 'kibana_sample_data_flights', - field: 'hour_of_day', - }); - await visualize.clickGo(); - await visualize.setFilterRange({ - min: '7', - max: '10', - }); - await visualize.inputControlSubmit(); + await visEditor.addInputControl('range'); + await visEditor.setFilterParams(0, 'kibana_sample_data_flights', 'hour_of_day'); + await visEditor.clickGo(); + await visEditor.setFilterRange(0, '7', '10'); + await visEditor.inputControlSubmit(); const controlFilters = await find.allByCssSelector('[data-test-subj^="filter"]'); expect(controlFilters).to.have.length(1); expect(await controlFilters[0].getVisibleText()).to.equal('hour_of_day: 7 to 10'); }); it('should add filter with price field', async () => { - await visualize.addInputControl('range'); - await visualize.setFilterParams({ - aggNth: 1, - indexPattern: 'kibana_sample_data_flights', - field: 'AvgTicketPrice', - }); - await visualize.clickGo(); - await visualize.setFilterRange({ - aggNth: 1, - min: '400', - max: '999', - }); - await visualize.inputControlSubmit(); + await visEditor.addInputControl('range'); + await visEditor.setFilterParams(1, 'kibana_sample_data_flights', 'AvgTicketPrice'); + await visEditor.clickGo(); + await visEditor.setFilterRange(1, '400', '999'); + await visEditor.inputControlSubmit(); const controlFilters = await find.allByCssSelector('[data-test-subj^="filter"]'); expect(controlFilters).to.have.length(2); expect(await controlFilters[1].getVisibleText()).to.equal('AvgTicketPrice: $400 to $999'); diff --git a/test/functional/page_objects/index.ts b/test/functional/page_objects/index.ts index 5a104c8d17bf2..22af136f6d438 100644 --- a/test/functional/page_objects/index.ts +++ b/test/functional/page_objects/index.ts @@ -50,6 +50,7 @@ import { TimelionPageProvider } from './timelion_page'; import { VisualBuilderPageProvider } from './visual_builder_page'; // @ts-ignore not TS yet import { VisualizePageProvider } from './visualize_page'; +import { VisualEditorPageProvider } from './visual_editor_page'; export const pageObjects = { common: CommonPageProvider, @@ -70,4 +71,5 @@ export const pageObjects = { timePicker: TimePickerPageProvider, visualBuilder: VisualBuilderPageProvider, visualize: VisualizePageProvider, + visEditor: VisualEditorPageProvider, }; diff --git a/test/functional/page_objects/visual_editor_page.ts b/test/functional/page_objects/visual_editor_page.ts new file mode 100644 index 0000000000000..3c0aded60be9f --- /dev/null +++ b/test/functional/page_objects/visual_editor_page.ts @@ -0,0 +1,122 @@ +/* + * 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 VisualEditorPageProvider({ getService, getPageObjects }: FtrProviderContext) { + const find = getService('find'); + const log = getService('log'); + const testSubjects = getService('testSubjects'); + const comboBox = getService('comboBox'); + const { common, header, visualize } = getPageObjects(['common', 'header', 'visualize']); + + class VisualEditorPage { + async inputControlSubmit() { + await testSubjects.clickWhenNotDisabled('inputControlSubmitBtn'); + await visualize.waitForVisualizationRenderingStabilized(); + } + + async addInputControl(type: string) { + if (type) { + const selectInput = await testSubjects.find('selectControlType'); + await selectInput.type(type); + } + await testSubjects.click('inputControlEditorAddBtn'); + await header.waitUntilLoadingHasFinished(); + } + + async clickGo() { + const prevRenderingCount = await visualize.getVisualizationRenderingCount(); + log.debug(`Before Rendering count ${prevRenderingCount}`); + await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton'); + await visualize.waitForRenderingCount(prevRenderingCount + 1); + } + + async removeDimension(aggNth: number) { + await testSubjects.click(`visEditorAggAccordion${aggNth} > removeDimensionBtn`); + } + + async setFilterParams(aggNth: number, indexPattern: string, field: string) { + await comboBox.set(`indexPatternSelect-${aggNth}`, indexPattern); + await comboBox.set(`fieldSelect-${aggNth}`, field); + } + + async setFilterRange(aggNth: number, min: string, max: string) { + const control = await testSubjects.find(`inputControl${aggNth}`); + const inputMin = await control.findByCssSelector('[name$="minValue"]'); + await inputMin.type(min); + const inputMax = await control.findByCssSelector('[name$="maxValue"]'); + await inputMax.type(max); + } + + async clickSplitDirection(direction: string) { + const control = await testSubjects.find('visEditorSplitBy'); + const radioBtn = await control.findByCssSelector(`[title="${direction}"]`); + await radioBtn.click(); + } + + async getBucketErrorMessage() { + const error = await find.byCssSelector( + '[group-name="buckets"] [data-test-subj="defaultEditorAggSelect"] + .euiFormErrorText' + ); + const errorMessage = await error.getAttribute('innerText'); + log.debug(errorMessage); + return errorMessage; + } + + async selectOrderByMetric(aggNth: number, metric: string) { + const sortSelect = await testSubjects.find(`visEditorOrderBy${aggNth}`); + const sortMetric = await sortSelect.findByCssSelector(`option[value="${metric}"]`); + await sortMetric.click(); + } + + async selectAggregation(aggValue: string, groupName = 'buckets', childAggregationType = false) { + const comboBoxElement = await find.byCssSelector(` + [group-name="${groupName}"] + [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen + ${childAggregationType ? '.visEditorAgg__subAgg' : ''} + [data-test-subj="defaultEditorAggSelect"] + `); + + await comboBox.setElement(comboBoxElement, aggValue); + await common.sleep(500); + } + + async selectField(fieldValue: string, groupName = 'buckets', childAggregationType = false) { + log.debug(`selectField ${fieldValue}`); + const selector = ` + [group-name="${groupName}"] + [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen + [data-test-subj="visAggEditorParams"] + ${childAggregationType ? '.visEditorAgg__subAgg' : ''} + [data-test-subj="visDefaultEditorField"] + `; + const fieldEl = await find.byCssSelector(selector); + await comboBox.setElement(fieldEl, fieldValue); + } + + async selectCustomSortMetric(aggNth: number, metric: string, field: string) { + await this.selectOrderByMetric(aggNth, 'custom'); + await this.selectAggregation(metric, 'buckets', true); + await this.selectField(field, 'buckets', true); + } + } + + return new VisualEditorPage(); +} diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index 33b7515b58d2d..f78dfb931c3c1 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -340,11 +340,6 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli await PageObjects.header.waitUntilLoadingHasFinished(); } - async inputControlSubmit() { - await testSubjects.clickWhenNotDisabled('inputControlSubmitBtn'); - await this.waitForVisualizationRenderingStabilized(); - } - async inputControlClear() { await testSubjects.click('inputControlClearBtn'); await PageObjects.header.waitUntilLoadingHasFinished(); @@ -843,7 +838,8 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli await this.clickVisualizationByName(vizName); await PageObjects.header.waitUntilLoadingHasFinished(); } - + // vis_chart service + // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ async getXAxisLabels() { const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom'); const $ = await xAxis.parseDomContent(); @@ -1034,6 +1030,8 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli return await Promise.all(getChartTypesPromises); } + // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + async expectError() { return await testSubjects.existOrFail('visLibVisualizeError'); } diff --git a/test/functional/services/visualize_chart.ts b/test/functional/services/visualize_chart.ts new file mode 100644 index 0000000000000..9eb4a764af6f7 --- /dev/null +++ b/test/functional/services/visualize_chart.ts @@ -0,0 +1,191 @@ +/* + * 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'; +import { WebElementWrapper } from './lib/web_element_wrapper'; + +export function VisualizeChartProvider({ getService }: FtrProviderContext) { + const testSubjects = getService('testSubjects'); + const config = getService('config'); + const find = getService('find'); + const log = getService('log'); + const retry = getService('retry'); + const defaultFindTimeout = config.get('timeouts.find'); + + class VisualizeChart { + public async getXAxisLabels() { + const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom'); + const $ = await xAxis.parseDomContent(); + return $('.x > g > text') + .toArray() + .map(tick => + $(tick) + .text() + .trim() + ); + } + + public async getYAxisLabels() { + const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left'); + const $ = await yAxis.parseDomContent(); + return $('.y > g > text') + .toArray() + .map(tick => + $(tick) + .text() + .trim() + ); + } + + /* + ** This method gets the chart data and scales it based on chart height and label. + ** Returns an array of height values + */ + public async getAreaChartData(dataLabel: string, axis = 'ValueAxis-1') { + const yAxisRatio = await this.getChartYAxisRatio(axis); + + const rectangle = await find.byCssSelector('rect.background'); + const yAxisHeight = await rectangle.getAttribute('height'); + log.debug(`height --------- ${yAxisHeight}`); + + const path = await retry.try( + async () => + await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) + ); + const data = await path.getAttribute('d'); + log.debug(data); + // This area chart data starts with a 'M'ove to a x,y location, followed + // by a bunch of 'L'ines from that point to the next. Those points are + // the values we're going to use to calculate the data values we're testing. + // So git rid of the one 'M' and split the rest on the 'L's. + const tempArray = data + .replace('M ', '') + .replace('M', '') + .replace(/ L /g, 'L') + .replace(/ /g, ',') + .split('L'); + const chartSections = tempArray.length / 2; + // log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel); + const chartData = []; + for (let i = 0; i < chartSections; i++) { + chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) * yAxisRatio); + log.debug('chartData[i] =' + chartData[i]); + } + return chartData; + } + + /* + ** This method returns the paths that compose an area chart. + */ + public async getAreaChartPaths(dataLabel: string) { + const path = await retry.try( + async () => + await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) + ); + const data = await path.getAttribute('d'); + log.debug(data); + // This area chart data starts with a 'M'ove to a x,y location, followed + // by a bunch of 'L'ines from that point to the next. Those points are + // the values we're going to use to calculate the data values we're testing. + // So git rid of the one 'M' and split the rest on the 'L's. + return data.split('L'); + } + + // The current test shows dots, not a line. This function gets the dots and normalizes their height. + async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { + // 1). get the range/pixel ratio + const yAxisRatio = await this.getChartYAxisRatio(axis); + // 2). find and save the y-axis pixel size (the chart height) + const rectangle = await find.byCssSelector('clipPath rect'); + const yAxisHeight = await rectangle.getAttribute('height'); + // 3). get the visWrapper__chart elements + const chartTypes = await retry.try( + async () => + await find.allByCssSelector( + `.visWrapper__chart circle[data-label="${dataLabel}"][fill-opacity="1"]`, + defaultFindTimeout * 2 + ) + ); + // 4). for each chart element, find the green circle, then the cy position + const chartData = await Promise.all( + chartTypes.map(async chart => { + const cy = await chart.getAttribute('cy'); + // the point_series_options test has data in the billions range and + // getting 11 digits of precision with these calculations is very hard + return Math.round(((yAxisHeight - cy) * yAxisRatio).toPrecision(6)); + }) + ); + + return chartData; + } + + // this is ALMOST identical to DiscoverPage.getBarChartData + async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { + // 1). get the range/pixel ratio + const yAxisRatio = await this.getChartYAxisRatio(axis); + // 3). get the visWrapper__chart elements + const svg = await find.byCssSelector('div.chart'); + const $ = await svg.parseDomContent(); + const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`) + .toArray() + .map(chart => { + const barHeight = $(chart).attr('height'); + return Math.round(barHeight * yAxisRatio); + }); + + return chartData; + } + + // Returns value per pixel + async getChartYAxisRatio(axis = 'ValueAxis-1') { + // 1). get the maximum chart Y-Axis marker value and Y position + const maxYAxisChartMarker = await retry.try( + async () => + await find.byCssSelector( + `div.visAxis__splitAxes--y > div > svg > g.${axis} > g:last-of-type.tick` + ) + ); + const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, ''); + const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y; + log.debug(`maxYLabel = ${maxYLabel}, maxYLabelYPosition = ${maxYLabelYPosition}`); + + // 2). get the minimum chart Y-Axis marker value and Y position + const minYAxisChartMarker = await find.byCssSelector( + 'div.visAxis__column--y.visAxis__column--left > div > div > svg:nth-child(2) > g > g:nth-child(1).tick' + ); + const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', ''); + const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y; + return (maxYLabel - minYLabel) / (minYLabelYPosition - maxYLabelYPosition); + } + + async getHeatmapData() { + const chartTypes = await retry.try( + async () => await find.allByCssSelector('svg > g > g.series rect', defaultFindTimeout * 2) + ); + log.debug('rects=' + chartTypes); + async function getChartType(chart) { + return await chart.getAttribute('data-label'); + } + const getChartTypesPromises = chartTypes.map(getChartType); + return await Promise.all(getChartTypesPromises); + } + } + + return new VisualizeChart(); +} From f0a62a29bb7809277a3610d253f27e6a0111523f Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Sat, 28 Dec 2019 02:40:55 +0100 Subject: [PATCH 2/9] split visualize_page --- .../apps/dashboard/dashboard_state.js | 31 +- .../apps/getting_started/_shakespeare.js | 63 +- test/functional/apps/visualize/_area_chart.js | 122 +- .../functional/apps/visualize/_chart_types.ts | 4 +- test/functional/apps/visualize/_data_table.js | 250 +-- .../visualize/_data_table_nontimeindex.js | 64 +- .../apps/visualize/_embedding_chart.js | 35 +- .../functional/apps/visualize/_gauge_chart.js | 52 +- .../apps/visualize/_heatmap_chart.js | 56 +- .../visualize/_histogram_request_start.js | 26 +- test/functional/apps/visualize/_inspector.js | 32 +- test/functional/apps/visualize/_line_chart.js | 72 +- .../apps/visualize/_linked_saved_searches.js | 21 +- .../apps/visualize/_markdown_vis.js | 18 +- .../apps/visualize/_metric_chart.js | 86 +- test/functional/apps/visualize/_pie_chart.js | 152 +- .../apps/visualize/_point_series_options.js | 72 +- test/functional/apps/visualize/_region_map.js | 29 +- test/functional/apps/visualize/_tag_cloud.js | 45 +- test/functional/apps/visualize/_tile_map.js | 66 +- test/functional/apps/visualize/_tsvb_chart.ts | 6 +- test/functional/apps/visualize/_vega_chart.js | 8 +- .../apps/visualize/_vertical_bar_chart.js | 166 +- .../_vertical_bar_chart_nontimeindex.js | 110 +- .../apps/visualize/_visualize_listing.js | 39 +- .../input_control_vis/dynamic_options.js | 4 +- .../input_control_options.js | 26 +- test/functional/page_objects/index.ts | 11 +- .../page_objects/point_series_page.js | 4 - test/functional/page_objects/share_page.ts | 2 +- .../functional/page_objects/tag_cloud_page.ts | 52 + test/functional/page_objects/tile_map_page.ts | 102 ++ .../page_objects/visual_builder_page.ts | 22 +- .../page_objects/visual_editor_page.ts | 122 -- .../page_objects/visualize_chart_page.ts | 407 +++++ .../page_objects/visualize_editor_page.ts | 452 ++++++ .../functional/page_objects/visualize_page.js | 1400 ----------------- .../functional/page_objects/visualize_page.ts | 309 ++++ .../services/dashboard/visualizations.js | 4 +- test/functional/services/index.ts | 4 +- ...lize_listing_table.ts => listing_table.ts} | 58 +- test/functional/services/test_subjects.ts | 19 + test/functional/services/visualize_chart.ts | 191 --- .../self_changing_vis.js | 8 +- .../functional/apps/security/rbac_phase1.js | 11 +- x-pack/test/reporting/functional/reporting.js | 7 +- 46 files changed, 2324 insertions(+), 2516 deletions(-) create mode 100644 test/functional/page_objects/tag_cloud_page.ts create mode 100644 test/functional/page_objects/tile_map_page.ts delete mode 100644 test/functional/page_objects/visual_editor_page.ts create mode 100644 test/functional/page_objects/visualize_chart_page.ts create mode 100644 test/functional/page_objects/visualize_editor_page.ts delete mode 100644 test/functional/page_objects/visualize_page.js create mode 100644 test/functional/page_objects/visualize_page.ts rename test/functional/services/{visualize_listing_table.ts => listing_table.ts} (50%) delete mode 100644 test/functional/services/visualize_chart.ts diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js index 3caab3db44cb3..3b9e404e9b94d 100644 --- a/test/functional/apps/dashboard/dashboard_state.js +++ b/test/functional/apps/dashboard/dashboard_state.js @@ -27,7 +27,14 @@ import { } from '../../../../src/plugins/dashboard_embeddable_container/public/embeddable/dashboard_constants'; export default function({ getService, getPageObjects }) { - const PageObjects = getPageObjects(['dashboard', 'visualize', 'header', 'discover']); + const PageObjects = getPageObjects([ + 'dashboard', + 'visualize', + 'header', + 'discover', + 'tileMap', + 'visChart', + ]); const testSubjects = getService('testSubjects'); const browser = getService('browser'); const queryBar = getService('queryBar'); @@ -58,14 +65,14 @@ export default function({ getService, getPageObjects }) { await PageObjects.dashboard.switchToEditMode(); - await PageObjects.visualize.openLegendOptionColors('Count'); - await PageObjects.visualize.selectNewLegendColorChoice('#EA6460'); + await PageObjects.visChart.openLegendOptionColors('Count'); + await PageObjects.visChart.selectNewLegendColorChoice('#EA6460'); await PageObjects.dashboard.saveDashboard('Overridden colors'); await PageObjects.dashboard.gotoDashboardLandingPage(); await PageObjects.dashboard.loadSavedDashboard('Overridden colors'); - const colorChoiceRetained = await PageObjects.visualize.doesSelectedLegendColorExist( + const colorChoiceRetained = await PageObjects.visChart.doesSelectedLegendColorExist( '#EA6460' ); @@ -153,10 +160,10 @@ export default function({ getService, getPageObjects }) { await dashboardPanelActions.openContextMenu(); await dashboardPanelActions.clickEdit(); - await PageObjects.visualize.clickMapZoomIn(); - await PageObjects.visualize.clickMapZoomIn(); - await PageObjects.visualize.clickMapZoomIn(); - await PageObjects.visualize.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); await PageObjects.visualize.saveVisualizationExpectSuccess('Visualization TileMap'); @@ -225,8 +232,8 @@ export default function({ getService, getPageObjects }) { describe('for embeddable config color parameters on a visualization', () => { it('updates a pie slice color on a soft refresh', async function() { await dashboardAddPanel.addVisualization(PIE_CHART_VIS_NAME); - await PageObjects.visualize.openLegendOptionColors('80,000'); - await PageObjects.visualize.selectNewLegendColorChoice('#F9D9F9'); + await PageObjects.visChart.openLegendOptionColors('80,000'); + await PageObjects.visChart.selectNewLegendColorChoice('#F9D9F9'); const currentUrl = await browser.getCurrentUrl(); const newUrl = currentUrl.replace('F9D9F9', 'FFFFFF'); await browser.get(newUrl.toString(), false); @@ -248,7 +255,7 @@ export default function({ getService, getPageObjects }) { // Unskip once https://github.com/elastic/kibana/issues/15736 is fixed. it.skip('and updates the pie slice legend color', async function() { await retry.try(async () => { - const colorExists = await PageObjects.visualize.doesSelectedLegendColorExist('#FFFFFF'); + const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist('#FFFFFF'); expect(colorExists).to.be(true); }); }); @@ -269,7 +276,7 @@ export default function({ getService, getPageObjects }) { // Unskip once https://github.com/elastic/kibana/issues/15736 is fixed. it.skip('resets the legend color as well', async function() { await retry.try(async () => { - const colorExists = await PageObjects.visualize.doesSelectedLegendColorExist('#57c17b'); + const colorExists = await PageObjects.visChart.doesSelectedLegendColorExist('#57c17b'); expect(colorExists).to.be(true); }); }); diff --git a/test/functional/apps/getting_started/_shakespeare.js b/test/functional/apps/getting_started/_shakespeare.js index 04d81f4b46083..5af1676cf423f 100644 --- a/test/functional/apps/getting_started/_shakespeare.js +++ b/test/functional/apps/getting_started/_shakespeare.js @@ -23,7 +23,14 @@ export default function({ getService, getPageObjects }) { const log = getService('log'); const esArchiver = getService('esArchiver'); const retry = getService('retry'); - const PageObjects = getPageObjects(['console', 'common', 'settings', 'visualize']); + const PageObjects = getPageObjects([ + 'console', + 'common', + 'settings', + 'visualize', + 'visEditor', + 'visChart', + ]); // https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html @@ -63,11 +70,11 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickVerticalBarChart(); await PageObjects.visualize.clickNewSearch('shakes*'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); const expectedChartValues = [111396]; await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData('Count'); + const data = await PageObjects.visChart.getBarChartData('Count'); log.debug('data=' + data); log.debug('data.length=' + data.length); expect(data[0] - expectedChartValues[0]).to.be.lessThan(5); @@ -84,22 +91,22 @@ export default function({ getService, getPageObjects }) { it('should configure metric Unique Count Speaking Parts', async function() { log.debug('Metric = Unique Count, speaker, Speaking Parts'); // this first change to the YAxis metric agg uses the default aggIndex of 1 - await PageObjects.visualize.selectYAxisAggregation( + await PageObjects.visEditor.selectYAxisAggregation( 'Unique Count', 'speaker', 'Speaking Parts' ); // then increment the aggIndex for the next one we create aggIndex = aggIndex + 1; - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const expectedChartValues = [935]; await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData('Speaking Parts'); + const data = await PageObjects.visChart.getBarChartData('Speaking Parts'); log.debug('data=' + data); log.debug('data.length=' + data.length); expect(data).to.eql(expectedChartValues); }); - const title = await PageObjects.visualize.getYAxisTitle(); + const title = await PageObjects.visChart.getYAxisTitle(); expect(title).to.be('Speaking Parts'); }); @@ -110,23 +117,23 @@ export default function({ getService, getPageObjects }) { 5. Click Apply changes images/apply-changes-button.png to view the results. */ it('should configure Terms aggregation on play_name', async function() { - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Aggregation = Terms'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.selectAggregation('Terms'); aggIndex = aggIndex + 1; log.debug('Field = play_name'); - await PageObjects.visualize.selectField('play_name'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('play_name'); + await PageObjects.visEditor.clickGo(); const expectedChartValues = [71, 65, 62, 55, 55]; await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData('Speaking Parts'); + const data = await PageObjects.visChart.getBarChartData('Speaking Parts'); log.debug('data=' + data); log.debug('data.length=' + data.length); expect(data).to.eql(expectedChartValues); }); - const labels = await PageObjects.visualize.getXAxisLabels(); + const labels = await PageObjects.visChart.getXAxisLabels(); expect(labels).to.eql([ 'Richard III', 'Henry VI Part 2', @@ -145,21 +152,21 @@ export default function({ getService, getPageObjects }) { 2. Choose the Max aggregation and select the speech_number field. */ it('should configure Max aggregation metric on speech_number', async function() { - await PageObjects.visualize.clickBucket('Y-axis', 'metrics'); + await PageObjects.visEditor.clickBucket('Y-axis', 'metrics'); log.debug('Aggregation = Max'); - await PageObjects.visualize.selectYAxisAggregation( + await PageObjects.visEditor.selectYAxisAggregation( 'Max', 'speech_number', 'Max Speaking Parts', aggIndex ); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const expectedChartValues = [71, 65, 62, 55, 55]; const expectedChartValues2 = [177, 106, 153, 132, 162]; await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData('Speaking Parts'); - const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts'); + const data = await PageObjects.visChart.getBarChartData('Speaking Parts'); + const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts'); log.debug('data=' + data); log.debug('data.length=' + data.length); log.debug('data2=' + data2); @@ -168,7 +175,7 @@ export default function({ getService, getPageObjects }) { expect(data2).to.eql(expectedChartValues2); }); - const labels = await PageObjects.visualize.getXAxisLabels(); + const labels = await PageObjects.visChart.getXAxisLabels(); expect(labels).to.eql([ 'Richard III', 'Henry VI Part 2', @@ -184,15 +191,15 @@ export default function({ getService, getPageObjects }) { 4. Click Apply changes images/apply-changes-button.png. Your chart should now look like this: */ it('should configure change options to normal bars', async function() { - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.selectChartMode('normal'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.selectChartMode('normal'); + await PageObjects.visEditor.clickGo(); const expectedChartValues = [71, 65, 62, 55, 55]; const expectedChartValues2 = [177, 106, 153, 132, 162]; await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData('Speaking Parts'); - const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts'); + const data = await PageObjects.visChart.getBarChartData('Speaking Parts'); + const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts'); log.debug('data=' + data); log.debug('data.length=' + data.length); log.debug('data2=' + data2); @@ -210,15 +217,15 @@ export default function({ getService, getPageObjects }) { Save this chart with the name Bar Example. */ it('should change the Y-Axis extents', async function() { - await PageObjects.visualize.setAxisExtents('50', '250'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setAxisExtents('50', '250'); + await PageObjects.visEditor.clickGo(); // same values as previous test except scaled down by the 50 for Y-Axis min const expectedChartValues = [21, 15, 12, 5, 5]; const expectedChartValues2 = [127, 56, 103, 82, 112]; await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData('Speaking Parts'); - const data2 = await PageObjects.visualize.getBarChartData('Max Speaking Parts'); + const data = await PageObjects.visChart.getBarChartData('Speaking Parts'); + const data2 = await PageObjects.visChart.getBarChartData('Max Speaking Parts'); log.debug('data=' + data); log.debug('data.length=' + data.length); log.debug('data2=' + data2); diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js index b8fa253f72104..ee63266fa62af 100644 --- a/test/functional/apps/visualize/_area_chart.js +++ b/test/functional/apps/visualize/_area_chart.js @@ -24,7 +24,15 @@ export default function({ getService, getPageObjects }) { const inspector = getService('inspector'); const browser = getService('browser'); const retry = getService('retry'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'settings', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'header', + 'settings', + 'timePicker', + ]); describe('area charts', function indexPatternCreation() { const vizName1 = 'Visualization AreaChart Name Test'; @@ -38,17 +46,17 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Click X-axis'); - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Click Date Histogram'); - await PageObjects.visualize.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); log.debug('Check field value'); - const fieldValues = await PageObjects.visualize.getField(); + const fieldValues = await PageObjects.visEditor.getField(); log.debug('fieldValue = ' + fieldValues); expect(fieldValues[0]).to.be('@timestamp'); - const intervalValue = await PageObjects.visualize.getInterval(); + const intervalValue = await PageObjects.visEditor.getInterval(); log.debug('intervalValue = ' + intervalValue); expect(intervalValue[0]).to.be('Auto'); - return PageObjects.visualize.clickGo(); + return PageObjects.visEditor.clickGo(); }; before(initAreaChart); @@ -70,7 +78,7 @@ export default function({ getService, getPageObjects }) { it('should save and load', async function() { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should have inspector enabled', async function() { @@ -113,14 +121,14 @@ export default function({ getService, getPageObjects }) { ]; await retry.try(async function tryingForTime() { - const labels = await PageObjects.visualize.getXAxisLabels(); + const labels = await PageObjects.visChart.getXAxisLabels(); log.debug('X-Axis labels = ' + labels); expect(labels).to.eql(xAxisLabels); }); - const labels = await PageObjects.visualize.getYAxisLabels(); + const labels = await PageObjects.visChart.getYAxisLabels(); log.debug('Y-Axis labels = ' + labels); expect(labels).to.eql(yAxisLabels); - const paths = await PageObjects.visualize.getAreaChartData('Count'); + const paths = await PageObjects.visChart.getAreaChartData('Count'); log.debug('expectedAreaChartData = ' + expectedAreaChartData); log.debug('actual chart data = ' + paths); expect(paths).to.eql(expectedAreaChartData); @@ -185,9 +193,9 @@ export default function({ getService, getPageObjects }) { ['2015-09-20 19:00', '55'], ]; - await PageObjects.visualize.toggleOpenEditor(2); - await PageObjects.visualize.setInterval('Second'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.toggleOpenEditor(2); + await PageObjects.visEditor.setInterval('Second'); + await PageObjects.visEditor.clickGo(); await inspector.open(); await inspector.expectTableData(expectedTableData); await inspector.close(); @@ -217,9 +225,9 @@ export default function({ getService, getPageObjects }) { ['2015-09-20 19:00', '0.015'], ]; - await PageObjects.visualize.toggleAdvancedParams('2'); - await PageObjects.visualize.toggleScaleMetrics(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.toggleAdvancedParams('2'); + await PageObjects.visEditor.toggleScaleMetrics(); + await PageObjects.visEditor.clickGo(); await inspector.open(); await inspector.expectTableData(expectedTableData); await inspector.close(); @@ -249,11 +257,11 @@ export default function({ getService, getPageObjects }) { ['2015-09-20 19:00', '55', '2.053KB'], ]; - await PageObjects.visualize.clickBucket('Y-axis', 'metrics'); - await PageObjects.visualize.selectAggregation('Top Hit', 'metrics'); - await PageObjects.visualize.selectField('bytes', 'metrics'); - await PageObjects.visualize.selectAggregateWith('average'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Y-axis', 'metrics'); + await PageObjects.visEditor.selectAggregation('Top Hit', 'metrics'); + await PageObjects.visEditor.selectField('bytes', 'metrics'); + await PageObjects.visEditor.selectAggregateWith('average'); + await PageObjects.visEditor.clickGo(); await inspector.open(); await inspector.expectTableData(expectedTableData); await inspector.close(); @@ -285,13 +293,13 @@ export default function({ getService, getPageObjects }) { const axisId = 'ValueAxis-1'; it('should show ticks on selecting log scale', async () => { - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.clickYAxisOptions(axisId); - await PageObjects.visualize.selectYAxisScaleType(axisId, 'log'); - await PageObjects.visualize.clickYAxisAdvancedOptions(axisId); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.clickYAxisOptions(axisId); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log'); + await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -317,9 +325,9 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting log scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -345,10 +353,10 @@ export default function({ getService, getPageObjects }) { }); it('should show ticks on selecting square root scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '0', '200', @@ -364,18 +372,18 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting square root scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400']; expect(labels).to.eql(expectedLabels); }); it('should show ticks on selecting linear scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); log.debug(labels); const expectedLabels = [ '0', @@ -392,9 +400,9 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting linear scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400']; expect(labels).to.eql(expectedLabels); }); @@ -412,16 +420,16 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch('long-window-logstash-*'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); log.debug('Click X-axis'); - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Click Date Histogram'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.setInterval('Yearly'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.setInterval('Yearly'); + await PageObjects.visEditor.clickGo(); // This svg area is composed by 7 years (2013 - 2019). // 7 points are used to draw the upper line (usually called y1) // 7 points compose the lower line (usually called y0) - const paths = await PageObjects.visualize.getAreaChartPaths('Count'); + const paths = await PageObjects.visChart.getAreaChartPaths('Count'); log.debug('actual chart data = ' + paths); const numberOfSegments = 7 * 2; expect(paths.length).to.eql(numberOfSegments); @@ -435,17 +443,17 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch('long-window-logstash-*'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); log.debug('Click X-axis'); - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Click Date Histogram'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.setInterval('Monthly'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.setInterval('Monthly'); + await PageObjects.visEditor.clickGo(); // This svg area is composed by 67 months 3 (2013) + 5 * 12 + 4 (2019) // 67 points are used to draw the upper line (usually called y1) // 67 points compose the lower line (usually called y0) const numberOfSegments = 67 * 2; - const paths = await PageObjects.visualize.getAreaChartPaths('Count'); + const paths = await PageObjects.visChart.getAreaChartPaths('Count'); log.debug('actual chart data = ' + paths); expect(paths.length).to.eql(numberOfSegments); }); diff --git a/test/functional/apps/visualize/_chart_types.ts b/test/functional/apps/visualize/_chart_types.ts index 5a3c54ccff1fc..038bc47d47d46 100644 --- a/test/functional/apps/visualize/_chart_types.ts +++ b/test/functional/apps/visualize/_chart_types.ts @@ -23,7 +23,7 @@ import { FtrProviderContext } from '../../ftr_provider_context'; // eslint-disable-next-line import/no-default-export export default function({ getService, getPageObjects }: FtrProviderContext) { const log = getService('log'); - const PageObjects = getPageObjects(['common', 'visualize']); + const PageObjects = getPageObjects(['common', 'visualize', 'visChart']); let isOss = true; describe('chart types', function() { @@ -61,7 +61,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { log.debug('oss= ' + isOss); // find all the chart types and make sure there all there - const chartTypes = await PageObjects.visualize.getChartTypes(); + const chartTypes = await PageObjects.visChart.getChartTypes(); log.debug('returned chart types = ' + chartTypes); log.debug('expected chart types = ' + expectedChartTypes); expect(chartTypes).to.eql(expectedChartTypes); diff --git a/test/functional/apps/visualize/_data_table.js b/test/functional/apps/visualize/_data_table.js index e8fe8fb656877..54db61f72cff9 100644 --- a/test/functional/apps/visualize/_data_table.js +++ b/test/functional/apps/visualize/_data_table.js @@ -22,9 +22,17 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const log = getService('log'); const inspector = getService('inspector'); + const testSubjects = getService('testSubjects'); const retry = getService('retry'); const filterBar = getService('filterBar'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'header', + 'timePicker', + 'visEditor', + 'visChart', + ]); describe('data table', function indexPatternCreation() { const vizName1 = 'Visualization DataTable'; @@ -38,27 +46,27 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Bucket = Split rows'); - await PageObjects.visualize.clickBucket('Split rows'); + await PageObjects.visEditor.clickBucket('Split rows'); log.debug('Aggregation = Histogram'); - await PageObjects.visualize.selectAggregation('Histogram'); + await PageObjects.visEditor.selectAggregation('Histogram'); log.debug('Field = bytes'); - await PageObjects.visualize.selectField('bytes'); + await PageObjects.visEditor.selectField('bytes'); log.debug('Interval = 2000'); - await PageObjects.visualize.setNumericInterval('2000'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setNumericInterval('2000'); + await PageObjects.visEditor.clickGo(); }); it('should allow applying changed params', async () => { - await PageObjects.visualize.setNumericInterval('1', { append: true }); - const interval = await PageObjects.visualize.getNumericInterval(); + await PageObjects.visEditor.setNumericInterval('1', { append: true }); + const interval = await PageObjects.visEditor.getNumericInterval(); expect(interval).to.be('20001'); - const isApplyButtonEnabled = await PageObjects.visualize.isApplyEnabled(); + const isApplyButtonEnabled = await PageObjects.visEditor.isApplyEnabled(); expect(isApplyButtonEnabled).to.be(true); }); it('should allow reseting changed params', async () => { - await PageObjects.visualize.clickReset(); - const interval = await PageObjects.visualize.getNumericInterval(); + await PageObjects.visEditor.clickReset(); + const interval = await PageObjects.visEditor.getNumericInterval(); expect(interval).to.be('2000'); }); @@ -66,7 +74,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should have inspector enabled', async function() { @@ -96,7 +104,7 @@ export default function({ getService, getPageObjects }) { it('should show percentage columns', async () => { async function expectValidTableData() { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql([ '≥ 0 and < 1000', '1,351 64.7%', @@ -110,16 +118,16 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Range'); - await PageObjects.visualize.selectField('bytes'); - await PageObjects.visualize.clickGo(); - await PageObjects.visualize.clickOptionsTab(); - await PageObjects.visualize.setSelectByOptionText( + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Range'); + await PageObjects.visEditor.selectField('bytes'); + await PageObjects.visEditor.clickGo(); + await PageObjects.visEditor.clickOptionsTab(); + await PageObjects.visEditor.setSelectByOptionText( 'datatableVisualizationPercentageCol', 'Count' ); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); await expectValidTableData(); @@ -128,20 +136,20 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(SAVE_NAME); await PageObjects.visualize.loadSavedVisualization(SAVE_NAME); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); await expectValidTableData(); // check that it works after selecting a column that's deleted - await PageObjects.visualize.clickData(); - await PageObjects.visualize.clickBucket('Metric', 'metrics'); - await PageObjects.visualize.selectAggregation('Average', 'metrics'); - await PageObjects.visualize.selectField('bytes', 'metrics'); - await PageObjects.visualize.removeDimension(1); - await PageObjects.visualize.clickGo(); - await PageObjects.visualize.clickOptionsTab(); - - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickData(); + await PageObjects.visEditor.clickBucket('Metric', 'metrics'); + await PageObjects.visEditor.selectAggregation('Average', 'metrics'); + await PageObjects.visEditor.selectField('bytes', 'metrics'); + await PageObjects.visEditor.removeDimension(1); + await PageObjects.visEditor.clickGo(); + await PageObjects.visEditor.clickOptionsTab(); + + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql([ '≥ 0 and < 1000', '344.094B', @@ -155,12 +163,12 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Metric', 'metrics'); - await PageObjects.visualize.selectAggregation('Average Bucket', 'metrics'); - await PageObjects.visualize.selectAggregation('Terms', 'metrics', 'buckets'); - await PageObjects.visualize.selectField('geo.src', 'metrics', 'buckets'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickBucket('Metric', 'metrics'); + await PageObjects.visEditor.selectAggregation('Average Bucket', 'metrics'); + await PageObjects.visEditor.selectAggregation('Terms', 'metrics', 'buckets'); + await PageObjects.visEditor.selectField('geo.src', 'metrics', 'buckets'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data.split('\n')); expect(data.trim().split('\n')).to.be.eql(['14,004 1,412.6']); }); @@ -170,12 +178,12 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.setInterval('Daily'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.setInterval('Daily'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data.split('\n')); expect(data.trim().split('\n')).to.be.eql([ '2015-09-20', @@ -192,12 +200,12 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.setInterval('Daily'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.setInterval('Daily'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql([ '2015-09-20', '4,757', @@ -210,15 +218,15 @@ export default function({ getService, getPageObjects }) { it('should correctly filter for applied time filter on the main timefield', async () => { await filterBar.addFilter('@timestamp', 'is between', '2015-09-19', '2015-09-21'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']); }); it('should correctly filter for pinned filters', async () => { await filterBar.toggleFilterPinned('@timestamp'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']); }); @@ -227,11 +235,11 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickMetricEditor(); - await PageObjects.visualize.selectAggregation('Top Hit', 'metrics'); - await PageObjects.visualize.selectField('agent.raw', 'metrics'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickMetricEditor(); + await PageObjects.visEditor.selectAggregation('Top Hit', 'metrics'); + await PageObjects.visEditor.selectField('agent.raw', 'metrics'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data); expect(data.length).to.be.greaterThan(0); }); @@ -241,11 +249,11 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Range'); - await PageObjects.visualize.selectField('bytes'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Range'); + await PageObjects.visEditor.selectField('bytes'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql([ '≥ 0 and < 1000', '1,351', @@ -260,19 +268,19 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('extension.raw'); - await PageObjects.visualize.setSize(2); - await PageObjects.visualize.clickGo(); - - await PageObjects.visualize.toggleOtherBucket(); - await PageObjects.visualize.toggleMissingBucket(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('extension.raw'); + await PageObjects.visEditor.setSize(2); + await PageObjects.visEditor.clickGo(); + + await PageObjects.visEditor.toggleOtherBucket(); + await PageObjects.visEditor.toggleMissingBucket(); + await PageObjects.visEditor.clickGo(); }); it('should show correct data', async () => { - const data = await PageObjects.visualize.getTableVisContent(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ ['jpg', '9,109'], ['css', '2,159'], @@ -281,9 +289,9 @@ export default function({ getService, getPageObjects }) { }); it('should apply correct filter', async () => { - await PageObjects.visualize.filterOnTableCell(1, 3); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - const data = await PageObjects.visualize.getTableVisContent(); + await PageObjects.visChart.filterOnTableCell(1, 3); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ ['png', '1,373'], ['gif', '918'], @@ -298,20 +306,20 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('extension.raw'); - await PageObjects.visualize.setSize(2); - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('geo.dest'); - await PageObjects.visualize.toggleOpenEditor(3, 'false'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('extension.raw'); + await PageObjects.visEditor.setSize(2); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('geo.dest'); + await PageObjects.visEditor.toggleOpenEditor(3, 'false'); + await PageObjects.visEditor.clickGo(); }); it('should show correct data without showMetricsAtAllLevels', async () => { - const data = await PageObjects.visualize.getTableVisContent(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ ['jpg', 'CN', '1,718'], ['jpg', 'IN', '1,511'], @@ -327,10 +335,10 @@ export default function({ getService, getPageObjects }) { }); it('should show correct data without showMetricsAtAllLevels even if showPartialRows is selected', async () => { - await PageObjects.visualize.clickOptionsTab(); - await PageObjects.visualize.checkCheckbox('showPartialRows'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisContent(); + await PageObjects.visEditor.clickOptionsTab(); + await testSubjects.setCheckbox('showPartialRows', 'check'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ ['jpg', 'CN', '1,718'], ['jpg', 'IN', '1,511'], @@ -346,10 +354,10 @@ export default function({ getService, getPageObjects }) { }); it('should show metrics on each level', async () => { - await PageObjects.visualize.clickOptionsTab(); - await PageObjects.visualize.checkCheckbox('showMetricsAtAllLevels'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisContent(); + await PageObjects.visEditor.clickOptionsTab(); + await testSubjects.setCheckbox('showMetricsAtAllLevels', 'check'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ ['jpg', '9,109', 'CN', '1,718'], ['jpg', '9,109', 'IN', '1,511'], @@ -365,12 +373,12 @@ export default function({ getService, getPageObjects }) { }); it('should show metrics other than count on each level', async () => { - await PageObjects.visualize.clickData(); - await PageObjects.visualize.clickBucket('Metric', 'metrics'); - await PageObjects.visualize.selectAggregation('Average', 'metrics'); - await PageObjects.visualize.selectField('bytes', 'metrics'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisContent(); + await PageObjects.visEditor.clickData(); + await PageObjects.visEditor.clickBucket('Metric', 'metrics'); + await PageObjects.visEditor.selectAggregation('Average', 'metrics'); + await PageObjects.visEditor.selectField('bytes', 'metrics'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ ['jpg', '9,109', '5.469KB', 'CN', '1,718', '5.477KB'], ['jpg', '9,109', '5.469KB', 'IN', '1,511', '5.456KB'], @@ -392,26 +400,26 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split table'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('extension.raw'); - await PageObjects.visualize.setSize(2); - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('geo.dest'); - await PageObjects.visualize.setSize(3, 3); - await PageObjects.visualize.toggleOpenEditor(3, 'false'); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('geo.src'); - await PageObjects.visualize.setSize(3, 4); - await PageObjects.visualize.toggleOpenEditor(4, 'false'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Split table'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('extension.raw'); + await PageObjects.visEditor.setSize(2); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('geo.dest'); + await PageObjects.visEditor.setSize(3, 3); + await PageObjects.visEditor.toggleOpenEditor(3, 'false'); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('geo.src'); + await PageObjects.visEditor.setSize(3, 4); + await PageObjects.visEditor.toggleOpenEditor(4, 'false'); + await PageObjects.visEditor.clickGo(); }); it('should have a splitted table', async () => { - const data = await PageObjects.visualize.getTableVisContent(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ [ ['CN', 'CN', '330'], @@ -439,10 +447,10 @@ export default function({ getService, getPageObjects }) { }); it('should show metrics for split bucket when using showMetricsAtAllLevels', async () => { - await PageObjects.visualize.clickOptionsTab(); - await PageObjects.visualize.checkCheckbox('showMetricsAtAllLevels'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisContent(); + await PageObjects.visEditor.clickOptionsTab(); + await testSubjects.setCheckbox('showMetricsAtAllLevels', 'check'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisContent(); expect(data).to.be.eql([ [ ['CN', '1,718', 'CN', '330'], diff --git a/test/functional/apps/visualize/_data_table_nontimeindex.js b/test/functional/apps/visualize/_data_table_nontimeindex.js index 77478f5d10edc..e6d7a7fce9070 100644 --- 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', 'header']); + const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header']); describe.skip('data table with index without time filter', function indexPatternCreation() { const vizName1 = 'Visualization DataTable without time filter'; @@ -40,27 +40,27 @@ export default function({ getService, getPageObjects }) { PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED ); log.debug('Bucket = Split Rows'); - await PageObjects.visualize.clickBucket('Split rows'); + await PageObjects.visEditor.clickBucket('Split rows'); log.debug('Aggregation = Histogram'); - await PageObjects.visualize.selectAggregation('Histogram'); + await PageObjects.visEditor.selectAggregation('Histogram'); log.debug('Field = bytes'); - await PageObjects.visualize.selectField('bytes'); + await PageObjects.visEditor.selectField('bytes'); log.debug('Interval = 2000'); - await PageObjects.visualize.setNumericInterval('2000'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setNumericInterval('2000'); + await PageObjects.visEditor.clickGo(); }); it('should allow applying changed params', async () => { - await PageObjects.visualize.setNumericInterval('1', { append: true }); - const interval = await PageObjects.visualize.getNumericInterval(); + await PageObjects.visEditor.setNumericInterval('1', true); + const interval = await PageObjects.visEditor.getNumericInterval(); expect(interval).to.be('20001'); - const isApplyButtonEnabled = await PageObjects.visualize.isApplyEnabled(); + const isApplyButtonEnabled = await PageObjects.visEditor.isApplyEnabled(); expect(isApplyButtonEnabled).to.be(true); }); it('should allow reseting changed params', async () => { - await PageObjects.visualize.clickReset(); - const interval = await PageObjects.visualize.getNumericInterval(); + await PageObjects.visEditor.clickReset(); + const interval = await PageObjects.visEditor.getNumericInterval(); expect(interval).to.be('2000'); }); @@ -68,7 +68,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should have inspector enabled', async function() { @@ -102,12 +102,12 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch( PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED ); - await PageObjects.visualize.clickBucket('Metric', 'metrics'); - await PageObjects.visualize.selectAggregation('Average Bucket', 'metrics'); - await PageObjects.visualize.selectAggregation('Terms', 'metrics', 'buckets'); - await PageObjects.visualize.selectField('geo.src', 'metrics', 'buckets'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickBucket('Metric', 'metrics'); + await PageObjects.visEditor.selectAggregation('Average Bucket', 'metrics'); + await PageObjects.visEditor.selectAggregation('Terms', 'metrics', 'buckets'); + await PageObjects.visEditor.selectField('geo.src', 'metrics', 'buckets'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data.split('\n')); expect(data.trim().split('\n')).to.be.eql(['14,004 1,412.6']); }); @@ -118,12 +118,12 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch( PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED ); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.setInterval('Daily'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.setInterval('Daily'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data.split('\n')); expect(data.trim().split('\n')).to.be.eql([ '2015-09-20', @@ -141,12 +141,12 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch( PageObjects.visualize.index.LOGSTASH_NON_TIME_BASED ); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.setInterval('Daily'); - await PageObjects.visualize.clickGo(); - const data = await PageObjects.visualize.getTableVisData(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.setInterval('Daily'); + await PageObjects.visEditor.clickGo(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql([ '2015-09-20', '4,757', @@ -161,7 +161,7 @@ export default function({ getService, getPageObjects }) { await filterBar.addFilter('@timestamp', 'is between', '2015-09-19', '2015-09-21'); await PageObjects.header.waitUntilLoadingHasFinished(); await renderable.waitForRender(); - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']); }); @@ -169,7 +169,7 @@ export default function({ getService, getPageObjects }) { await filterBar.toggleFilterPinned('@timestamp'); await PageObjects.header.waitUntilLoadingHasFinished(); await renderable.waitForRender(); - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); expect(data.trim().split('\n')).to.be.eql(['2015-09-20', '4,757']); }); }); diff --git a/test/functional/apps/visualize/_embedding_chart.js b/test/functional/apps/visualize/_embedding_chart.js index c16dc3b1279ff..a15911a9837b1 100644 --- a/test/functional/apps/visualize/_embedding_chart.js +++ b/test/functional/apps/visualize/_embedding_chart.js @@ -24,7 +24,14 @@ export default function({ getService, getPageObjects }) { const log = getService('log'); const renderable = getService('renderable'); const embedding = getService('embedding'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'header', + 'timePicker', + ]); describe('embedding', () => { describe('a data table', () => { @@ -33,22 +40,22 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickDataTable(); await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split rows'); - await PageObjects.visualize.selectAggregation('Histogram'); - await PageObjects.visualize.selectField('bytes'); - await PageObjects.visualize.setNumericInterval('2000', undefined, 3); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split rows'); + await PageObjects.visEditor.selectAggregation('Histogram'); + await PageObjects.visEditor.selectField('bytes'); + await PageObjects.visEditor.setNumericInterval('2000', undefined, 3); + await PageObjects.visEditor.clickGo(); }); it('should allow opening table vis in embedded mode', async () => { await embedding.openInEmbeddedMode(); await renderable.waitForRender(); - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data.split('\n')); expect(data.trim().split('\n')).to.be.eql([ '2015-09-20 00:00', @@ -89,7 +96,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.header.waitUntilLoadingHasFinished(); await renderable.waitForRender(); - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data.split('\n')); expect(data.trim().split('\n')).to.be.eql([ '2015-09-21 00:00', @@ -126,11 +133,11 @@ export default function({ getService, getPageObjects }) { }); it('should allow to change timerange from the visualization in embedded mode', async () => { - await PageObjects.visualize.filterOnTableCell(1, 7); + await PageObjects.visChart.filterOnTableCell(1, 7); await PageObjects.header.waitUntilLoadingHasFinished(); await renderable.waitForRender(); - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); log.debug(data.split('\n')); expect(data.trim().split('\n')).to.be.eql([ '03:00', diff --git a/test/functional/apps/visualize/_gauge_chart.js b/test/functional/apps/visualize/_gauge_chart.js index 2b9033d1ae9d2..97582b5f8e599 100644 --- a/test/functional/apps/visualize/_gauge_chart.js +++ b/test/functional/apps/visualize/_gauge_chart.js @@ -24,7 +24,13 @@ export default function({ getService, getPageObjects }) { const retry = getService('retry'); const inspector = getService('inspector'); const testSubjects = getService('testSubjects'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'timePicker', + ]); // FLAKY: https://github.com/elastic/kibana/issues/45089 describe('gauge chart', function indexPatternCreation() { @@ -50,24 +56,24 @@ export default function({ getService, getPageObjects }) { // initial metric of "Count" is selected by default return retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getGaugeValue(); + const metricValue = await PageObjects.visChart.getGaugeValue(); expect(expectedCount).to.eql(metricValue); }); }); it('should show Split Gauges', async function() { log.debug('Bucket = Split Group'); - await PageObjects.visualize.clickBucket('Split group'); + await PageObjects.visEditor.clickBucket('Split group'); log.debug('Aggregation = Terms'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.selectAggregation('Terms'); log.debug('Field = machine.os.raw'); - await PageObjects.visualize.selectField('machine.os.raw'); + await PageObjects.visEditor.selectField('machine.os.raw'); log.debug('Size = 4'); - await PageObjects.visualize.setSize('4'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setSize('4'); + await PageObjects.visEditor.clickGo(); await retry.try(async () => { - expect(await PageObjects.visualize.getGaugeValue()).to.eql([ + expect(await PageObjects.visChart.getGaugeValue()).to.eql([ '2,904', 'win 8', '2,858', @@ -83,34 +89,34 @@ export default function({ getService, getPageObjects }) { it('should show correct values for fields with fieldFormatters', async function() { const expectedTexts = ['2,904', 'win 8: Count', '0B', 'win 8: Min bytes']; - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('machine.os.raw'); - await PageObjects.visualize.setSize('1'); - await PageObjects.visualize.clickBucket('Metric', 'metrics'); - await PageObjects.visualize.selectAggregation('Min', 'metrics'); - await PageObjects.visualize.selectField('bytes', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('machine.os.raw'); + await PageObjects.visEditor.setSize('1'); + await PageObjects.visEditor.clickBucket('Metric', 'metrics'); + await PageObjects.visEditor.selectAggregation('Min', 'metrics'); + await PageObjects.visEditor.selectField('bytes', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getGaugeValue(); + const metricValue = await PageObjects.visChart.getGaugeValue(); expect(expectedTexts).to.eql(metricValue); }); }); it('should format the metric correctly in percentage mode', async function() { await initGaugeVis(); - await PageObjects.visualize.clickMetricEditor(); - await PageObjects.visualize.selectAggregation('Average', 'metrics'); - await PageObjects.visualize.selectField('bytes', 'metrics'); - await PageObjects.visualize.clickOptionsTab(); + await PageObjects.visEditor.clickMetricEditor(); + await PageObjects.visEditor.selectAggregation('Average', 'metrics'); + await PageObjects.visEditor.selectField('bytes', 'metrics'); + await PageObjects.visEditor.clickOptionsTab(); await testSubjects.setValue('gaugeColorRange2__to', '10000'); await testSubjects.click('gaugePercentageMode'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - await PageObjects.visualize.clickGo(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { const expectedTexts = ['57.273%', 'Average bytes']; - const metricValue = await PageObjects.visualize.getGaugeValue(); + const metricValue = await PageObjects.visChart.getGaugeValue(); expect(expectedTexts).to.eql(metricValue); }); }); diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js index 226e490a6b232..f66c0b988190b 100644 --- a/test/functional/apps/visualize/_heatmap_chart.js +++ b/test/functional/apps/visualize/_heatmap_chart.js @@ -22,7 +22,13 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const log = getService('log'); const inspector = getService('inspector'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'timePicker', + ]); describe('heatmap chart', function indexPatternCreation() { this.tags('smoke'); @@ -36,20 +42,20 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Bucket = X-Axis'); - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Aggregation = Date Histogram'); - await PageObjects.visualize.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); log.debug('Field = @timestamp'); - await PageObjects.visualize.selectField('@timestamp'); + await PageObjects.visEditor.selectField('@timestamp'); // leaving Interval set to Auto - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); }); it('should save and load', async function() { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should have inspector enabled', async function() { @@ -87,16 +93,16 @@ export default function({ getService, getPageObjects }) { }); it('should show 4 color ranges as default colorNumbers param', async function() { - const legends = await PageObjects.visualize.getLegendEntries(); + const legends = await PageObjects.visChart.getLegendEntries(); const expectedLegends = ['0 - 400', '400 - 800', '800 - 1,200', '1,200 - 1,600']; expect(legends).to.eql(expectedLegends); }); it('should show 6 color ranges if changed on options', async function() { - await PageObjects.visualize.clickOptionsTab(); - await PageObjects.visualize.changeHeatmapColorNumbers(6); - await PageObjects.visualize.clickGo(); - const legends = await PageObjects.visualize.getLegendEntries(); + await PageObjects.visEditor.clickOptionsTab(); + await PageObjects.visEditor.changeHeatmapColorNumbers(6); + await PageObjects.visEditor.clickGo(); + const legends = await PageObjects.visChart.getLegendEntries(); const expectedLegends = [ '0 - 267', '267 - 534', @@ -108,23 +114,23 @@ export default function({ getService, getPageObjects }) { expect(legends).to.eql(expectedLegends); }); it('should show 6 custom color ranges', async function() { - await PageObjects.visualize.clickOptionsTab(); - await PageObjects.visualize.clickEnableCustomRanges(); - await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.clickAddRange(); + await PageObjects.visEditor.clickOptionsTab(); + await PageObjects.visEditor.clickEnableCustomRanges(); + await PageObjects.visEditor.clickAddRange(); + await PageObjects.visEditor.clickAddRange(); + await PageObjects.visEditor.clickAddRange(); + await PageObjects.visEditor.clickAddRange(); + await PageObjects.visEditor.clickAddRange(); + await PageObjects.visEditor.clickAddRange(); + await PageObjects.visEditor.clickAddRange(); log.debug('customize 2 last ranges'); - await PageObjects.visualize.setCustomRangeByIndex(6, '650', '720'); - await PageObjects.visualize.setCustomRangeByIndex(7, '800', '905'); + await PageObjects.visEditor.setCustomRangeByIndex(6, '650', '720'); + await PageObjects.visEditor.setCustomRangeByIndex(7, '800', '905'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - await PageObjects.visualize.clickGo(); - const legends = await PageObjects.visualize.getLegendEntries(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); + await PageObjects.visEditor.clickGo(); + const legends = await PageObjects.visChart.getLegendEntries(); const expectedLegends = [ '0 - 100', '100 - 200', diff --git a/test/functional/apps/visualize/_histogram_request_start.js b/test/functional/apps/visualize/_histogram_request_start.js index a601e370a568f..fe7a7d392bdb7 100644 --- a/test/functional/apps/visualize/_histogram_request_start.js +++ b/test/functional/apps/visualize/_histogram_request_start.js @@ -22,7 +22,13 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const log = getService('log'); const retry = getService('retry'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'timePicker', + ]); describe('histogram agg onSearchRequestStart', function() { before(async function() { @@ -33,21 +39,21 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Bucket = Split Rows'); - await PageObjects.visualize.clickBucket('Split rows'); + await PageObjects.visEditor.clickBucket('Split rows'); log.debug('Aggregation = Histogram'); - await PageObjects.visualize.selectAggregation('Histogram'); + await PageObjects.visEditor.selectAggregation('Histogram'); log.debug('Field = machine.ram'); - await PageObjects.visualize.selectField('machine.ram'); + await PageObjects.visEditor.selectField('machine.ram'); }); describe('interval parameter uses autoBounds', function() { it('should use provided value when number of generated buckets is less than histogram:maxBars', async function() { const providedInterval = 2400000000; log.debug(`Interval = ${providedInterval}`); - await PageObjects.visualize.setNumericInterval(providedInterval); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setNumericInterval(providedInterval); + await PageObjects.visEditor.clickGo(); await retry.try(async () => { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); const dataArray = data.replace(/,/g, '').split('\n'); expect(dataArray.length).to.eql(20); const bucketStart = parseInt(dataArray[0], 10); @@ -60,11 +66,11 @@ export default function({ getService, getPageObjects }) { it('should scale value to round number when number of generated buckets is greater than histogram:maxBars', async function() { const providedInterval = 100; log.debug(`Interval = ${providedInterval}`); - await PageObjects.visualize.setNumericInterval(providedInterval); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setNumericInterval(providedInterval); + await PageObjects.visEditor.clickGo(); await PageObjects.common.sleep(1000); //fix this await retry.try(async () => { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); const dataArray = data.replace(/,/g, '').split('\n'); expect(dataArray.length).to.eql(20); const bucketStart = parseInt(dataArray[0], 10); diff --git a/test/functional/apps/visualize/_inspector.js b/test/functional/apps/visualize/_inspector.js index 76b75f62b5f2a..53395db70f877 100644 --- a/test/functional/apps/visualize/_inspector.js +++ b/test/functional/apps/visualize/_inspector.js @@ -21,7 +21,13 @@ export default function({ getService, getPageObjects }) { const log = getService('log'); const inspector = getService('inspector'); const filterBar = getService('filterBar'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'timePicker', + ]); describe('inspector', function describeIndexTests() { this.tags('smoke'); @@ -39,10 +45,10 @@ export default function({ getService, getPageObjects }) { await inspector.expectTableHeaders(['Count']); log.debug('Add Average Metric on machine.ram field'); - await PageObjects.visualize.clickBucket('Y-axis', 'metrics'); - await PageObjects.visualize.selectAggregation('Average', 'metrics'); - await PageObjects.visualize.selectField('machine.ram', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Y-axis', 'metrics'); + await PageObjects.visEditor.selectAggregation('Average', 'metrics'); + await PageObjects.visEditor.selectField('machine.ram', 'metrics'); + await PageObjects.visEditor.clickGo(); await inspector.open(); await inspector.expectTableHeaders(['Count', 'Average machine.ram']); }); @@ -50,23 +56,23 @@ export default function({ getService, getPageObjects }) { describe('filtering on inspector table values', function() { before(async function() { log.debug('Add X-axis terms agg on machine.os.raw'); - await PageObjects.visualize.clickBucket('X-axis'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('machine.os.raw'); - await PageObjects.visualize.setSize(2); - await PageObjects.visualize.toggleOtherBucket(3); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('X-axis'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('machine.os.raw'); + await PageObjects.visEditor.setSize(2); + await PageObjects.visEditor.toggleOtherBucket(3); + await PageObjects.visEditor.clickGo(); }); beforeEach(async function() { await inspector.open(); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); }); afterEach(async function() { await inspector.close(); await filterBar.removeFilter('machine.os.raw'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); }); it('should allow filtering for values', async function() { diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart.js index 6a0a21e76924d..a40a1f0337c09 100644 --- a/test/functional/apps/visualize/_line_chart.js +++ b/test/functional/apps/visualize/_line_chart.js @@ -24,7 +24,13 @@ export default function({ getService, getPageObjects }) { const inspector = getService('inspector'); const retry = getService('retry'); const testSubjects = getService('testSubjects'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'timePicker', + ]); describe('line charts', function() { const vizName1 = 'Visualization LineChart'; @@ -37,14 +43,14 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Bucket = Split chart'); - await PageObjects.visualize.clickBucket('Split chart'); + await PageObjects.visEditor.clickBucket('Split chart'); log.debug('Aggregation = Terms'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.selectAggregation('Terms'); log.debug('Field = extension'); - await PageObjects.visualize.selectField('extension.raw'); + await PageObjects.visEditor.selectField('extension.raw'); log.debug('switch from Rows to Columns'); - await PageObjects.visualize.clickSplitDirection('Columns'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickSplitDirection('Columns'); + await PageObjects.visEditor.clickGo(); }; before(initLineChart); @@ -91,8 +97,8 @@ export default function({ getService, getPageObjects }) { const expectedChartData = ['png 1,373', 'php 445', 'jpg 9,109', 'gif 918', 'css 2,159']; log.debug('Order By = Term'); - await PageObjects.visualize.selectOrderByMetric(2, '_key'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectOrderByMetric(2, '_key'); + await PageObjects.visEditor.clickGo(); await retry.try(async function() { const data = await PageObjects.visualize.getLineChartData(); log.debug('data=' + data); @@ -172,7 +178,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); describe.skip('switch between Y axis scale types', () => { @@ -180,13 +186,13 @@ export default function({ getService, getPageObjects }) { const axisId = 'ValueAxis-1'; it('should show ticks on selecting log scale', async () => { - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.clickYAxisOptions(axisId); - await PageObjects.visualize.selectYAxisScaleType(axisId, 'log'); - await PageObjects.visualize.clickYAxisAdvancedOptions(axisId); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.clickYAxisOptions(axisId); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log'); + await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -212,9 +218,9 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting log scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -240,36 +246,36 @@ export default function({ getService, getPageObjects }) { }); it('should show ticks on selecting square root scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000']; expect(labels).to.eql(expectedLabels); }); it('should show filtered ticks on selecting square root scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['2,000', '4,000', '6,000', '8,000']; expect(labels).to.eql(expectedLabels); }); it('should show ticks on selecting linear scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); log.debug(labels); const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000']; expect(labels).to.eql(expectedLabels); }); it('should show filtered ticks on selecting linear scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['2,000', '4,000', '6,000', '8,000']; expect(labels).to.eql(expectedLabels); }); diff --git a/test/functional/apps/visualize/_linked_saved_searches.js b/test/functional/apps/visualize/_linked_saved_searches.js index 9bbe8c9d2147c..37ec3f06f2ecd 100644 --- a/test/functional/apps/visualize/_linked_saved_searches.js +++ b/test/functional/apps/visualize/_linked_saved_searches.js @@ -22,7 +22,14 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const filterBar = getService('filterBar'); const retry = getService('retry'); - const PageObjects = getPageObjects(['common', 'discover', 'visualize', 'header', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'discover', + 'visualize', + 'header', + 'timePicker', + 'visChart', + ]); describe('visualize app', function describeIndexTests() { describe('linked saved searched', () => { @@ -43,7 +50,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickSavedSearch(savedSearchName); await PageObjects.timePicker.setDefaultAbsoluteRange(); await retry.waitFor('wait for count to equal 9,109', async () => { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); return data.trim() === '9,109'; }); }); @@ -54,7 +61,7 @@ export default function({ getService, getPageObjects }) { 'Sep 21, 2015 @ 10:00:00.000' ); await retry.waitFor('wait for count to equal 3,950', async () => { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); return data.trim() === '3,950'; }); }); @@ -63,7 +70,7 @@ export default function({ getService, getPageObjects }) { await filterBar.addFilter('bytes', 'is between', '100', '3000'); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.waitFor('wait for count to equal 707', async () => { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); return data.trim() === '707'; }); }); @@ -71,7 +78,7 @@ export default function({ getService, getPageObjects }) { it('should allow unlinking from a linked search', async () => { await PageObjects.visualize.clickUnlinkSavedSearch(); await retry.waitFor('wait for count to equal 707', async () => { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); return data.trim() === '707'; }); // The filter on the saved search should now be in the editor @@ -82,7 +89,7 @@ export default function({ getService, getPageObjects }) { await filterBar.toggleFilterEnabled('extension.raw'); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.waitFor('wait for count to equal 1,293', async () => { - const unfilteredData = await PageObjects.visualize.getTableVisData(); + const unfilteredData = await PageObjects.visChart.getTableVisData(); return unfilteredData.trim() === '1,293'; }); }); @@ -91,7 +98,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccess('Unlinked before saved'); await PageObjects.header.waitUntilLoadingHasFinished(); await retry.waitFor('wait for count to equal 1,293', async () => { - const data = await PageObjects.visualize.getTableVisData(); + const data = await PageObjects.visChart.getTableVisData(); return data.trim() === '1,293'; }); }); diff --git a/test/functional/apps/visualize/_markdown_vis.js b/test/functional/apps/visualize/_markdown_vis.js index 870c465f2de37..13f8972ca97b6 100644 --- 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', 'header']); + const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'visChart', 'header']); const find = getService('find'); const inspector = getService('inspector'); const markdown = ` @@ -33,8 +33,8 @@ export default function({ getPageObjects, getService }) { before(async function() { await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickMarkdownWidget(); - await PageObjects.visualize.setMarkdownTxt(markdown); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setMarkdownTxt(markdown); + await PageObjects.visEditor.clickGo(); }); describe('markdown vis', () => { @@ -43,29 +43,29 @@ export default function({ getPageObjects, getService }) { }); it('should render markdown as html', async function() { - const h1Txt = await PageObjects.visualize.getMarkdownBodyDescendentText('h1'); + const h1Txt = await PageObjects.visChart.getMarkdownBodyDescendentText('h1'); expect(h1Txt).to.equal('Heading 1'); }); it('should not render html in markdown as html', async function() { const expected = 'Heading 1\n

Inline HTML that should not be rendered as html

'; - const actual = await PageObjects.visualize.getMarkdownText(); + const actual = await PageObjects.visChart.getMarkdownText(); expect(actual).to.equal(expected); }); it('should auto apply changes if auto mode is turned on', async function() { const markdown2 = '## Heading 2'; - await PageObjects.visualize.toggleAutoMode(); - await PageObjects.visualize.setMarkdownTxt(markdown2); + await PageObjects.visEditor.toggleAutoMode(); + await PageObjects.visEditor.setMarkdownTxt(markdown2); await PageObjects.header.waitUntilLoadingHasFinished(); - const h1Txt = await PageObjects.visualize.getMarkdownBodyDescendentText('h2'); + const h1Txt = await PageObjects.visChart.getMarkdownBodyDescendentText('h2'); expect(h1Txt).to.equal('Heading 2'); }); it('should resize the editor', async function() { const editorSidebar = await find.byCssSelector('.visEditor__sidebar'); const initialSize = await editorSidebar.getSize(); - await PageObjects.visualize.sizeUpEditor(); + await PageObjects.visEditor.sizeUpEditor(); const afterSize = await editorSidebar.getSize(); expect(afterSize.width).to.be.greaterThan(initialSize.width); }); diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js index 31140a1718cfe..58d443698d782 100644 --- a/test/functional/apps/visualize/_metric_chart.js +++ b/test/functional/apps/visualize/_metric_chart.js @@ -24,7 +24,13 @@ export default function({ getService, getPageObjects }) { const retry = getService('retry'); const filterBar = getService('filterBar'); const inspector = getService('inspector'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'timePicker', + ]); describe('metric chart', function() { before(async function() { @@ -45,21 +51,21 @@ export default function({ getService, getPageObjects }) { // initial metric of "Count" is selected by default await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(expectedCount).to.eql(metricValue); }); }); it('should show Average', async function() { const avgMachineRam = ['13,104,036,080.615', 'Average machine.ram']; - await PageObjects.visualize.clickMetricEditor(); + await PageObjects.visEditor.clickMetricEditor(); log.debug('Aggregation = Average'); - await PageObjects.visualize.selectAggregation('Average', 'metrics'); + await PageObjects.visEditor.selectAggregation('Average', 'metrics'); log.debug('Field = machine.ram'); - await PageObjects.visualize.selectField('machine.ram', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('machine.ram', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(avgMachineRam).to.eql(metricValue); }); }); @@ -67,12 +73,12 @@ export default function({ getService, getPageObjects }) { it('should show Sum', async function() { const sumPhpMemory = ['85,865,880', 'Sum of phpmemory']; log.debug('Aggregation = Sum'); - await PageObjects.visualize.selectAggregation('Sum', 'metrics'); + await PageObjects.visEditor.selectAggregation('Sum', 'metrics'); log.debug('Field = phpmemory'); - await PageObjects.visualize.selectField('phpmemory', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('phpmemory', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(sumPhpMemory).to.eql(metricValue); }); }); @@ -81,12 +87,12 @@ export default function({ getService, getPageObjects }) { const medianBytes = ['5,565.263', '50th percentile of bytes']; // For now, only comparing the text label part of the metric log.debug('Aggregation = Median'); - await PageObjects.visualize.selectAggregation('Median', 'metrics'); + await PageObjects.visEditor.selectAggregation('Median', 'metrics'); log.debug('Field = bytes'); - await PageObjects.visualize.selectField('bytes', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('bytes', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); // only comparing the text label! expect(medianBytes[1]).to.eql(metricValue[1]); }); @@ -95,12 +101,12 @@ export default function({ getService, getPageObjects }) { it('should show Min', async function() { const minTimestamp = ['Sep 20, 2015 @ 00:00:00.000', 'Min @timestamp']; log.debug('Aggregation = Min'); - await PageObjects.visualize.selectAggregation('Min', 'metrics'); + await PageObjects.visEditor.selectAggregation('Min', 'metrics'); log.debug('Field = @timestamp'); - await PageObjects.visualize.selectField('@timestamp', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('@timestamp', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(minTimestamp).to.eql(metricValue); }); }); @@ -111,12 +117,12 @@ export default function({ getService, getPageObjects }) { 'Max relatedContent.article:modified_time', ]; log.debug('Aggregation = Max'); - await PageObjects.visualize.selectAggregation('Max', 'metrics'); + await PageObjects.visEditor.selectAggregation('Max', 'metrics'); log.debug('Field = relatedContent.article:modified_time'); - await PageObjects.visualize.selectField('relatedContent.article:modified_time', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('relatedContent.article:modified_time', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(maxRelatedContentArticleModifiedTime).to.eql(metricValue); }); }); @@ -124,12 +130,12 @@ export default function({ getService, getPageObjects }) { it('should show Unique Count', async function() { const uniqueCountClientip = ['1,000', 'Unique count of clientip']; log.debug('Aggregation = Unique Count'); - await PageObjects.visualize.selectAggregation('Unique Count', 'metrics'); + await PageObjects.visEditor.selectAggregation('Unique Count', 'metrics'); log.debug('Field = clientip'); - await PageObjects.visualize.selectField('clientip', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('clientip', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(uniqueCountClientip).to.eql(metricValue); }); }); @@ -153,12 +159,12 @@ export default function({ getService, getPageObjects }) { ]; log.debug('Aggregation = Percentiles'); - await PageObjects.visualize.selectAggregation('Percentiles', 'metrics'); + await PageObjects.visEditor.selectAggregation('Percentiles', 'metrics'); log.debug('Field = machine.ram'); - await PageObjects.visualize.selectField('machine.ram', 'metrics'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('machine.ram', 'metrics'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(percentileMachineRam).to.eql(metricValue); }); }); @@ -166,14 +172,14 @@ export default function({ getService, getPageObjects }) { it('should show Percentile Ranks', async function() { const percentileRankBytes = ['2.036%', 'Percentile rank 99 of "memory"']; log.debug('Aggregation = Percentile Ranks'); - await PageObjects.visualize.selectAggregation('Percentile Ranks', 'metrics'); + await PageObjects.visEditor.selectAggregation('Percentile Ranks', 'metrics'); log.debug('Field = bytes'); - await PageObjects.visualize.selectField('memory', 'metrics'); + await PageObjects.visEditor.selectField('memory', 'metrics'); log.debug('Values = 99'); - await PageObjects.visualize.setValue('99'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setValue('99'); + await PageObjects.visEditor.clickGo(); await retry.try(async function tryingForTime() { - const metricValue = await PageObjects.visualize.getMetric(); + const metricValue = await PageObjects.visChart.getMetric(); expect(percentileRankBytes).to.eql(metricValue); }); }); @@ -191,12 +197,12 @@ export default function({ getService, getPageObjects }) { it('should allow filtering with buckets', async function() { log.debug('Bucket = Split Group'); - await PageObjects.visualize.clickBucket('Split group'); + await PageObjects.visEditor.clickBucket('Split group'); log.debug('Aggregation = Terms'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.selectAggregation('Terms'); log.debug('Field = machine.os.raw'); - await PageObjects.visualize.selectField('machine.os.raw'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('machine.os.raw'); + await PageObjects.visEditor.clickGo(); let filterCount = 0; await retry.try(async function tryingForTime() { diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.js index 03067bb2182c5..4a35d1f80250b 100644 --- a/test/functional/apps/visualize/_pie_chart.js +++ b/test/functional/apps/visualize/_pie_chart.js @@ -24,7 +24,15 @@ export default function({ getService, getPageObjects }) { const filterBar = getService('filterBar'); const pieChart = getService('pieChart'); const inspector = getService('inspector'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'settings', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'header', + 'settings', + 'timePicker', + ]); describe('pie chart', function() { const vizName1 = 'Visualization PieChart'; @@ -36,24 +44,24 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); + await PageObjects.visEditor.clickBucket('Split slices'); log.debug('Click aggregation Histogram'); - await PageObjects.visualize.selectAggregation('Histogram'); + await PageObjects.visEditor.selectAggregation('Histogram'); log.debug('Click field memory'); - await PageObjects.visualize.selectField('memory'); + await PageObjects.visEditor.selectField('memory'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.common.sleep(1003); log.debug('setNumericInterval 4000'); - await PageObjects.visualize.setNumericInterval('40000'); + await PageObjects.visEditor.setNumericInterval('40000'); log.debug('clickGo'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); }); it('should save and load', async function() { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should have inspector enabled', async function() { @@ -93,15 +101,15 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); + await PageObjects.visEditor.clickBucket('Split slices'); log.debug('Click aggregation Terms'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.selectAggregation('Terms'); log.debug('Click field machine.os.raw'); - await PageObjects.visualize.selectField('machine.os.raw'); - await PageObjects.visualize.toggleOtherBucket(2); - await PageObjects.visualize.toggleMissingBucket(2); + await PageObjects.visEditor.selectField('machine.os.raw'); + await PageObjects.visEditor.toggleOtherBucket(2); + await PageObjects.visEditor.toggleMissingBucket(2); log.debug('clickGo'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); await pieChart.expectPieChartLabels(expectedTableData); }); @@ -109,20 +117,20 @@ export default function({ getService, getPageObjects }) { const expectedTableData = ['Missing', 'osx']; await pieChart.filterOnPieSlice('Other'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); await pieChart.expectPieChartLabels(expectedTableData); await filterBar.removeFilter('machine.os.raw'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should apply correct filter on other bucket by clicking on a legend', async () => { const expectedTableData = ['Missing', 'osx']; - await PageObjects.visualize.filterLegend('Other'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.filterLegend('Other'); + await PageObjects.visChart.waitForVisualization(); await pieChart.expectPieChartLabels(expectedTableData); await filterBar.removeFilter('machine.os.raw'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should show two levels of other buckets', async () => { @@ -171,15 +179,15 @@ export default function({ getService, getPageObjects }) { 'Other', ]; - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split slices'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split slices'); + await PageObjects.visEditor.selectAggregation('Terms'); log.debug('Click field geo.src'); - await PageObjects.visualize.selectField('geo.src'); - await PageObjects.visualize.toggleOtherBucket(3); - await PageObjects.visualize.toggleMissingBucket(3); + await PageObjects.visEditor.selectField('geo.src'); + await PageObjects.visEditor.toggleOtherBucket(3); + await PageObjects.visEditor.toggleMissingBucket(3); log.debug('clickGo'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); await pieChart.expectPieChartLabels(expectedTableData); }); }); @@ -187,17 +195,17 @@ export default function({ getService, getPageObjects }) { describe('disabled aggs', () => { before(async () => { await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForRenderingCount(); + await PageObjects.visChart.waitForRenderingCount(); }); it('should show correct result with one agg disabled', async () => { const expectedTableData = ['win 8', 'win xp', 'win 7', 'ios', 'osx']; - await PageObjects.visualize.clickBucket('Split slices'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('machine.os.raw'); - await PageObjects.visualize.toggleDisabledAgg(2); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Split slices'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('machine.os.raw'); + await PageObjects.visEditor.toggleDisabledAgg(2); + await PageObjects.visEditor.clickGo(); await pieChart.expectPieChartLabels(expectedTableData); }); @@ -206,15 +214,15 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForRenderingCount(); + await PageObjects.visChart.waitForRenderingCount(); const expectedTableData = ['win 8', 'win xp', 'win 7', 'ios', 'osx']; await pieChart.expectPieChartLabels(expectedTableData); }); it('should show correct result when agg is re-enabled', async () => { - await PageObjects.visualize.toggleDisabledAgg(2); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.toggleDisabledAgg(2); + await PageObjects.visEditor.clickGo(); const expectedTableData = [ '0', @@ -291,24 +299,24 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); + await PageObjects.visEditor.clickBucket('Split slices'); log.debug('Click aggregation Filters'); - await PageObjects.visualize.selectAggregation('Filters'); + await PageObjects.visEditor.selectAggregation('Filters'); log.debug('Set the 1st filter value'); - await PageObjects.visualize.setFilterAggregationValue('geo.dest:"US"'); + await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"US"'); log.debug('Add new filter'); - await PageObjects.visualize.addNewFilterAggregation(); + await PageObjects.visEditor.addNewFilterAggregation(); log.debug('Set the 2nd filter value'); - await PageObjects.visualize.setFilterAggregationValue('geo.dest:"CN"', 1); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"CN"', 1); + await PageObjects.visEditor.clickGo(); const emptyFromTime = 'Sep 19, 2016 @ 06:31:44.000'; const emptyToTime = 'Sep 23, 2016 @ 18:31:44.000'; log.debug( 'Switch to a different time range from "' + emptyFromTime + '" to "' + emptyToTime + '"' ); await PageObjects.timePicker.setAbsoluteRange(emptyFromTime, emptyToTime); - await PageObjects.visualize.waitForVisualization(); - await PageObjects.visualize.expectError(); + await PageObjects.visChart.waitForVisualization(); + await PageObjects.visChart.expectError(); }); }); describe('multi series slice', () => { @@ -327,22 +335,22 @@ export default function({ getService, getPageObjects }) { ); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); + await PageObjects.visEditor.clickBucket('Split slices'); log.debug('Click aggregation Histogram'); - await PageObjects.visualize.selectAggregation('Histogram'); + await PageObjects.visEditor.selectAggregation('Histogram'); log.debug('Click field memory'); - await PageObjects.visualize.selectField('memory'); + await PageObjects.visEditor.selectField('memory'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.common.sleep(1003); log.debug('setNumericInterval 4000'); - await PageObjects.visualize.setNumericInterval('40000'); + await PageObjects.visEditor.setNumericInterval('40000'); log.debug('Toggle previous editor'); - await PageObjects.visualize.toggleAggregationEditor(2); + await PageObjects.visEditor.toggleAggregationEditor(2); log.debug('select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('geo.dest'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Split slices'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('geo.dest'); + await PageObjects.visEditor.clickGo(); }); it('should show correct chart', async () => { @@ -428,11 +436,11 @@ export default function({ getService, getPageObjects }) { '360,000', 'CN', ]; - await PageObjects.visualize.filterLegend('CN'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.filterLegend('CN'); + await PageObjects.visChart.waitForVisualization(); await pieChart.expectPieChartLabels(expectedTableData); await filterBar.removeFilter('geo.dest'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should still showing pie chart when a subseries have zero data', async function() { @@ -442,21 +450,21 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); + await PageObjects.visEditor.clickBucket('Split slices'); log.debug('Click aggregation Filters'); - await PageObjects.visualize.selectAggregation('Filters'); + await PageObjects.visEditor.selectAggregation('Filters'); log.debug('Set the 1st filter value'); - await PageObjects.visualize.setFilterAggregationValue('geo.dest:"US"'); + await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"US"'); log.debug('Toggle previous editor'); - await PageObjects.visualize.toggleAggregationEditor(2); + await PageObjects.visEditor.toggleAggregationEditor(2); log.debug('Add a new series, select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); + await PageObjects.visEditor.clickBucket('Split slices'); log.debug('Click aggregation Filters'); - await PageObjects.visualize.selectAggregation('Filters'); + await PageObjects.visEditor.selectAggregation('Filters'); log.debug('Set the 1st filter value of the aggregation id 3'); - await PageObjects.visualize.setFilterAggregationValue('geo.dest:"UX"', 0, 3); - await PageObjects.visualize.clickGo(); - const legends = await PageObjects.visualize.getLegendEntries(); + await PageObjects.visEditor.setFilterAggregationValue('geo.dest:"UX"', 0, 3); + await PageObjects.visEditor.clickGo(); + const legends = await PageObjects.visChart.getLegendEntries(); const expectedLegends = ['geo.dest:"US"', 'geo.dest:"UX"']; expect(legends).to.eql(expectedLegends); }); @@ -469,15 +477,15 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select bucket Split chart'); - await PageObjects.visualize.clickBucket('Split chart'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('machine.os.raw'); - await PageObjects.visualize.toggleAggregationEditor(2); + await PageObjects.visEditor.clickBucket('Split chart'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('machine.os.raw'); + await PageObjects.visEditor.toggleAggregationEditor(2); log.debug('Add a new series, select bucket Split slices'); - await PageObjects.visualize.clickBucket('Split slices'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('geo.src'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('Split slices'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('geo.src'); + await PageObjects.visEditor.clickGo(); }); it('shows correct split chart', async () => { @@ -522,7 +530,7 @@ export default function({ getService, getPageObjects }) { ['ios', '478', 'CN', '478'], ['osx', '228', 'CN', '228'], ]; - await PageObjects.visualize.filterLegend('CN'); + await PageObjects.visChart.filterLegend('CN'); await PageObjects.header.waitUntilLoadingHasFinished(); await inspector.open(); await inspector.setTablePageSize(50); diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js index 2d496cb575db7..082ccce1f9863 100644 --- a/test/functional/apps/visualize/_point_series_options.js +++ b/test/functional/apps/visualize/_point_series_options.js @@ -30,6 +30,8 @@ export default function({ getService, getPageObjects }) { 'header', 'pointSeries', 'timePicker', + 'visEditor', + 'visChart', ]); const pointSeriesVis = PageObjects.pointSeries; const inspector = getService('inspector'); @@ -42,18 +44,18 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Bucket = X-axis'); - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Aggregation = Date Histogram'); - await PageObjects.visualize.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); log.debug('Field = @timestamp'); - await PageObjects.visualize.selectField('@timestamp'); + await PageObjects.visEditor.selectField('@timestamp'); // add another metrics log.debug('Metric = Value Axis'); - await PageObjects.visualize.clickBucket('Y-axis', 'metrics'); + await PageObjects.visEditor.clickBucket('Y-axis', 'metrics'); log.debug('Aggregation = Average'); - await PageObjects.visualize.selectAggregation('Average', 'metrics'); + await PageObjects.visEditor.selectAggregation('Average', 'metrics'); log.debug('Field = memory'); - await PageObjects.visualize.selectField('machine.ram', 'metrics'); + await PageObjects.visEditor.selectField('machine.ram', 'metrics'); // go to options page log.debug('Going to axis options'); await pointSeriesVis.clickAxisOptions(); @@ -61,11 +63,11 @@ export default function({ getService, getPageObjects }) { log.debug('adding axis'); await pointSeriesVis.clickAddAxis(); // set average count to use second value axis - await PageObjects.visualize.toggleAccordion('visEditorSeriesAccordion3'); + await PageObjects.visEditor.toggleAccordion('visEditorSeriesAccordion3'); log.debug('Average memory value axis - ValueAxis-2'); await pointSeriesVis.setSeriesAxis(1, 'ValueAxis-2'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - await PageObjects.visualize.clickGo(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); + await PageObjects.visEditor.clickGo(); } describe('point series', function describeIndexTests() { @@ -158,7 +160,7 @@ export default function({ getService, getPageObjects }) { describe('multiple chart types', function() { it('should change average series type to histogram', async function() { await pointSeriesVis.setSeriesType(1, 'histogram'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const length = await pointSeriesVis.getHistogramSeries(); expect(length).to.be(1); }); @@ -166,12 +168,12 @@ export default function({ getService, getPageObjects }) { describe('grid lines', function() { before(async function() { - await pointSeriesVis.clickOptions(); + await PageObjects.visEditor.clickOptionsTab(); }); it('should show category grid lines', async function() { await pointSeriesVis.toggleGridCategoryLines(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const gridLines = await pointSeriesVis.getGridLines(); expect(gridLines.length).to.be(9); gridLines.forEach(gridLine => { @@ -182,7 +184,7 @@ export default function({ getService, getPageObjects }) { it('should show value axis grid lines', async function() { await pointSeriesVis.setGridValueAxis('ValueAxis-2'); await pointSeriesVis.toggleGridCategoryLines(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const gridLines = await pointSeriesVis.getGridLines(); expect(gridLines.length).to.be(9); gridLines.forEach(gridLine => { @@ -199,36 +201,36 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickLineChart(); await PageObjects.visualize.clickNewSearch(); - await PageObjects.visualize.selectYAxisAggregation('Average', 'bytes', customLabel, 1); - await PageObjects.visualize.clickGo(); - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.clickYAxisOptions('ValueAxis-1'); + await PageObjects.visEditor.selectYAxisAggregation('Average', 'bytes', customLabel, 1); + await PageObjects.visEditor.clickGo(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.clickYAxisOptions('ValueAxis-1'); }); it('should render a custom label when one is set', async function() { - const title = await PageObjects.visualize.getYAxisTitle(); + const title = await PageObjects.visChart.getYAxisTitle(); expect(title).to.be(customLabel); }); it('should render a custom axis title when one is set, overriding the custom label', async function() { await pointSeriesVis.setAxisTitle(axisTitle); - await PageObjects.visualize.clickGo(); - const title = await PageObjects.visualize.getYAxisTitle(); + await PageObjects.visEditor.clickGo(); + const title = await PageObjects.visChart.getYAxisTitle(); expect(title).to.be(axisTitle); }); it('should preserve saved axis titles after a vis is saved and reopened', async function() { await PageObjects.visualize.saveVisualizationExpectSuccess(visName); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); await PageObjects.visualize.loadSavedVisualization(visName); - await PageObjects.visualize.waitForRenderingCount(); - await PageObjects.visualize.clickData(); - await PageObjects.visualize.toggleOpenEditor(1); - await PageObjects.visualize.setCustomLabel('test', 1); - await PageObjects.visualize.clickGo(); - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.clickYAxisOptions('ValueAxis-1'); - const title = await PageObjects.visualize.getYAxisTitle(); + await PageObjects.visChart.waitForRenderingCount(); + await PageObjects.visEditor.clickData(); + await PageObjects.visEditor.toggleOpenEditor(1); + await PageObjects.visEditor.setCustomLabel('test', 1); + await PageObjects.visEditor.clickGo(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.clickYAxisOptions('ValueAxis-1'); + const title = await PageObjects.visChart.getYAxisTitle(); expect(title).to.be(axisTitle); }); }); @@ -238,7 +240,7 @@ export default function({ getService, getPageObjects }) { it('should show round labels in default timezone', async function() { await initChart(); - const labels = await PageObjects.visualize.getXAxisLabels(); + const labels = await PageObjects.visChart.getXAxisLabels(); expect(labels.join()).to.contain(expectedLabels.join()); }); @@ -248,7 +250,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.header.awaitKibanaChrome(); await initChart(); - const labels = await PageObjects.visualize.getXAxisLabels(); + const labels = await PageObjects.visChart.getXAxisLabels(); expect(labels.join()).to.contain(expectedLabels.join()); }); @@ -258,10 +260,10 @@ export default function({ getService, getPageObjects }) { const toTime = 'Sep 22, 2015 @ 16:08:34.554'; // note that we're setting the absolute time range while we're in 'America/Phoenix' tz await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); - await PageObjects.visualize.waitForRenderingCount(); + await PageObjects.visChart.waitForRenderingCount(); await retry.waitFor('wait for x-axis labels to match expected for Phoenix', async () => { - const labels = await PageObjects.visualize.getXAxisLabels(); + const labels = await PageObjects.visChart.getXAxisLabels(); log.debug(`Labels: ${labels}`); return ( labels.toString() === ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'].toString() @@ -303,11 +305,11 @@ export default function({ getService, getPageObjects }) { await browser.refresh(); // wait some time before trying to check for rendering count await PageObjects.header.awaitKibanaChrome(); - await PageObjects.visualize.waitForRenderingCount(); + await PageObjects.visChart.waitForRenderingCount(); log.debug('getXAxisLabels'); await retry.waitFor('wait for x-axis labels to match expected for UTC', async () => { - const labels2 = await PageObjects.visualize.getXAxisLabels(); + const labels2 = await PageObjects.visChart.getXAxisLabels(); log.debug(`Labels: ${labels2}`); return ( labels2.toString() === ['17:00', '18:00', '19:00', '20:00', '21:00', '22:00'].toString() diff --git a/test/functional/apps/visualize/_region_map.js b/test/functional/apps/visualize/_region_map.js index f6c81dab5921f..7e15397d5a173 100644 --- a/test/functional/apps/visualize/_region_map.js +++ b/test/functional/apps/visualize/_region_map.js @@ -24,7 +24,13 @@ export default function({ getService, getPageObjects }) { const inspector = getService('inspector'); const log = getService('log'); const find = getService('find'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker', 'settings']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'timePicker', + 'settings', + ]); before(async function() { log.debug('navigateToApp visualize'); @@ -34,12 +40,12 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Bucket = Shape field'); - await PageObjects.visualize.clickBucket('Shape field'); + await PageObjects.visEditor.clickBucket('Shape field'); log.debug('Aggregation = Terms'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.selectAggregation('Terms'); log.debug('Field = geo.src'); - await PageObjects.visualize.selectField('geo.src'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectField('geo.src'); + await PageObjects.visEditor.clickGo(); }); describe('vector map', function indexPatternCreation() { @@ -60,26 +66,27 @@ export default function({ getService, getPageObjects }) { }); it('should change results after changing layer to world', async function() { - await PageObjects.visualize.clickOptions(); - await PageObjects.visualize.setSelectByOptionText( + // not sure here?! + await PageObjects.visEditor.clickOptions(); + await PageObjects.visEditor.setSelectByOptionText( 'regionMapOptionsSelectLayer', 'World Countries' ); //ensure all fields are there - await PageObjects.visualize.setSelectByOptionText( + await PageObjects.visEditor.setSelectByOptionText( 'regionMapOptionsSelectJoinField', 'ISO 3166-1 alpha-2 code' ); - await PageObjects.visualize.setSelectByOptionText( + await PageObjects.visEditor.setSelectByOptionText( 'regionMapOptionsSelectJoinField', 'ISO 3166-1 alpha-3 code' ); - await PageObjects.visualize.setSelectByOptionText( + await PageObjects.visEditor.setSelectByOptionText( 'regionMapOptionsSelectJoinField', 'name' ); - await PageObjects.visualize.setSelectByOptionText( + await PageObjects.visEditor.setSelectByOptionText( 'regionMapOptionsSelectJoinField', 'ISO 3166-1 alpha-2 code' ); diff --git a/test/functional/apps/visualize/_tag_cloud.js b/test/functional/apps/visualize/_tag_cloud.js index 97b8036b30503..61d0646cad24d 100644 --- a/test/functional/apps/visualize/_tag_cloud.js +++ b/test/functional/apps/visualize/_tag_cloud.js @@ -26,7 +26,16 @@ export default function({ getService, getPageObjects }) { const browser = getService('browser'); const retry = getService('retry'); const find = getService('find'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'settings', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'header', + 'settings', + 'timePicker', + 'tagCloud', + ]); describe('tag cloud chart', function() { const vizName1 = 'Visualization tagCloud'; @@ -40,15 +49,15 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select Tags'); - await PageObjects.visualize.clickBucket('Tags'); + await PageObjects.visEditor.clickBucket('Tags'); log.debug('Click aggregation Terms'); - await PageObjects.visualize.selectAggregation('Terms'); + await PageObjects.visEditor.selectAggregation('Terms'); log.debug('Click field machine.ram'); await retry.try(async function tryingForTime() { - await PageObjects.visualize.selectField(termsField); + await PageObjects.visEditor.selectField(termsField); }); - await PageObjects.visualize.selectOrderByMetric(2, '_key'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.selectOrderByMetric(2, '_key'); + await PageObjects.visEditor.clickGo(); }); it('should have inspector enabled', async function() { @@ -56,7 +65,7 @@ export default function({ getService, getPageObjects }) { }); it('should show correct tag cloud data', async function() { - const data = await PageObjects.visualize.getTextTag(); + const data = await PageObjects.tagCloud.getTextTag(); log.debug(data); expect(data).to.eql([ '32,212,254,720', @@ -69,22 +78,22 @@ export default function({ getService, getPageObjects }) { it('should collapse the sidebar', async function() { const editorSidebar = await find.byCssSelector('.collapsible-sidebar'); - await PageObjects.visualize.clickEditorSidebarCollapse(); + await PageObjects.visEditor.clickEditorSidebarCollapse(); // Give d3 tag cloud some time to rearrange tags await PageObjects.common.sleep(1000); const afterSize = await editorSidebar.getSize(); expect(afterSize.width).to.be(0); - await PageObjects.visualize.clickEditorSidebarCollapse(); + await PageObjects.visEditor.clickEditorSidebarCollapse(); }); it('should still show all tags after sidebar has been collapsed', async function() { - await PageObjects.visualize.clickEditorSidebarCollapse(); + await PageObjects.visEditor.clickEditorSidebarCollapse(); // Give d3 tag cloud some time to rearrange tags await PageObjects.common.sleep(1000); - await PageObjects.visualize.clickEditorSidebarCollapse(); + await PageObjects.visEditor.clickEditorSidebarCollapse(); // Give d3 tag cloud some time to rearrange tags await PageObjects.common.sleep(1000); - const data = await PageObjects.visualize.getTextTag(); + const data = await PageObjects.tagCloud.getTextTag(); log.debug(data); expect(data).to.eql([ '32,212,254,720', @@ -100,7 +109,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.common.sleep(1000); await browser.setWindowSize(1200, 800); await PageObjects.common.sleep(1000); - const data = await PageObjects.visualize.getTextTag(); + const data = await PageObjects.tagCloud.getTextTag(); expect(data).to.eql([ '32,212,254,720', '21,474,836,480', @@ -114,7 +123,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should show the tags and relative size', function() { @@ -153,7 +162,7 @@ export default function({ getService, getPageObjects }) { }); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); after(async function() { @@ -168,15 +177,15 @@ export default function({ getService, getPageObjects }) { }); it('should format tags with field formatter', async function() { - const data = await PageObjects.visualize.getTextTag(); + const data = await PageObjects.tagCloud.getTextTag(); log.debug(data); expect(data).to.eql(['30GB', '20GB', '19GB', '18GB', '17GB']); }); it('should apply filter with unformatted value', async function() { - await PageObjects.visualize.selectTagCloudTag('30GB'); + await PageObjects.tagCloud.selectTagCloudTag('30GB'); await PageObjects.header.waitUntilLoadingHasFinished(); - const data = await PageObjects.visualize.getTextTag(); + const data = await PageObjects.tagCloud.getTextTag(); expect(data).to.eql(['30GB']); }); }); diff --git a/test/functional/apps/visualize/_tile_map.js b/test/functional/apps/visualize/_tile_map.js index e2946339b1f08..7c2f8122c8437 100644 --- a/test/functional/apps/visualize/_tile_map.js +++ b/test/functional/apps/visualize/_tile_map.js @@ -27,7 +27,15 @@ export default function({ getService, getPageObjects }) { const filterBar = getService('filterBar'); const testSubjects = getService('testSubjects'); const browser = getService('browser'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker', 'settings']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'timePicker', + 'settings', + 'tileMap', + ]); describe('tile map visualize app', function() { describe('incomplete config', function describeIndexTests() { @@ -45,8 +53,8 @@ export default function({ getService, getPageObjects }) { it('should be able to zoom in twice', async () => { //should not throw - await PageObjects.visualize.clickMapZoomIn(); - await PageObjects.visualize.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); }); }); @@ -61,14 +69,14 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('select bucket Geo Coordinates'); - await PageObjects.visualize.clickBucket('Geo coordinates'); + await PageObjects.visEditor.clickBucket('Geo coordinates'); log.debug('Click aggregation Geohash'); - await PageObjects.visualize.selectAggregation('Geohash'); + await PageObjects.visEditor.selectAggregation('Geohash'); log.debug('Click field geo.coordinates'); await retry.try(async function tryingForTime() { - await PageObjects.visualize.selectField('geo.coordinates'); + await PageObjects.visEditor.selectField('geo.coordinates'); }); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); }); /** @@ -106,9 +114,9 @@ export default function({ getService, getPageObjects }) { ['-', '8', '108', { lat: 18, lon: -157 }], ]; //level 1 - await PageObjects.visualize.clickMapZoomOut(); + await PageObjects.tileMap.clickMapZoomOut(); //level 0 - await PageObjects.visualize.clickMapZoomOut(); + await PageObjects.tileMap.clickMapZoomOut(); await inspector.open(); await inspector.setTablePageSize(50); @@ -118,8 +126,8 @@ export default function({ getService, getPageObjects }) { }); it('should not be able to zoom out beyond 0', async function() { - await PageObjects.visualize.zoomAllTheWayOut(); - const enabled = await PageObjects.visualize.getMapZoomOutEnabled(); + await PageObjects.tileMap.zoomAllTheWayOut(); + const enabled = await PageObjects.tileMap.getMapZoomOutEnabled(); expect(enabled).to.be(false); }); @@ -148,7 +156,7 @@ export default function({ getService, getPageObjects }) { ['-', 'b7', '167', { lat: 64, lon: -163 }], ]; - await PageObjects.visualize.clickMapFitDataBounds(); + await PageObjects.tileMap.clickMapFitDataBounds(); await inspector.open(); const data = await inspector.getTableData(); await inspector.close(); @@ -164,8 +172,8 @@ export default function({ getService, getPageObjects }) { await filterBar.addFilter('bytes', 'is between', '19980', '19990'); await filterBar.toggleFilterPinned('bytes'); - await PageObjects.visualize.zoomAllTheWayOut(); - await PageObjects.visualize.clickMapFitDataBounds(); + await PageObjects.tileMap.zoomAllTheWayOut(); + await PageObjects.tileMap.clickMapFitDataBounds(); await inspector.open(); const data = await inspector.getTableData(); @@ -178,15 +186,15 @@ export default function({ getService, getPageObjects }) { it('Newly saved visualization retains map bounds', async () => { const vizName1 = 'Visualization TileMap'; - await PageObjects.visualize.clickMapZoomIn(); - await PageObjects.visualize.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); - const mapBounds = await PageObjects.visualize.getMapBounds(); + const mapBounds = await PageObjects.tileMap.getMapBounds(); await inspector.close(); await PageObjects.visualize.saveVisualizationExpectSuccess(vizName1); - const afterSaveMapBounds = await PageObjects.visualize.getMapBounds(); + const afterSaveMapBounds = await PageObjects.tileMap.getMapBounds(); await inspector.close(); // For some reason the values are slightly different, so we can't check that they are equal. But we did @@ -207,17 +215,17 @@ export default function({ getService, getPageObjects }) { }); it('when not checked does not add filters to aggregation', async () => { - await PageObjects.visualize.toggleOpenEditor(2); - await PageObjects.visualize.setIsFilteredByCollarCheckbox(false); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.toggleOpenEditor(2); + await PageObjects.visEditor.setIsFilteredByCollarCheckbox(false); + await PageObjects.visEditor.clickGo(); await inspector.open(); await inspector.expectTableHeaders(['geohash_grid', 'Count', 'Geo Centroid']); await inspector.close(); }); after(async () => { - await PageObjects.visualize.setIsFilteredByCollarCheckbox(true); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setIsFilteredByCollarCheckbox(true); + await PageObjects.visEditor.clickGo(); }); }); }); @@ -245,18 +253,18 @@ export default function({ getService, getPageObjects }) { const zoomLevel = 9; for (let i = 0; i < zoomLevel; i++) { - await PageObjects.visualize.clickMapZoomIn(); + await PageObjects.tileMap.clickMapZoomIn(); } }); beforeEach(async function() { - await PageObjects.visualize.clickMapZoomIn(waitForLoading); + await PageObjects.tileMap.clickMapZoomIn(waitForLoading); }); afterEach(async function() { if (!last) { await PageObjects.common.sleep(toastDefaultLife); - await PageObjects.visualize.clickMapZoomOut(waitForLoading); + await PageObjects.tileMap.clickMapZoomOut(waitForLoading); } }); @@ -270,11 +278,11 @@ export default function({ getService, getPageObjects }) { it('should suppress zoom warning if suppress warnings button clicked', async () => { last = true; - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); await find.clickByCssSelector('[data-test-subj="suppressZoomWarnings"]'); - await PageObjects.visualize.clickMapZoomOut(waitForLoading); + await PageObjects.tileMap.clickMapZoomOut(waitForLoading); await testSubjects.waitForDeleted('suppressZoomWarnings'); - await PageObjects.visualize.clickMapZoomIn(waitForLoading); + await PageObjects.tileMap.clickMapZoomIn(waitForLoading); await testSubjects.missingOrFail('maxZoomWarning'); }); diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts index dc4b9a786eaa4..8dbe356889568 100644 --- a/test/functional/apps/visualize/_tsvb_chart.ts +++ b/test/functional/apps/visualize/_tsvb_chart.ts @@ -25,7 +25,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { const esArchiver = getService('esArchiver'); const log = getService('log'); const inspector = getService('inspector'); - const PageObjects = getPageObjects(['visualize', 'visualBuilder', 'timePicker']); + const PageObjects = getPageObjects(['visualize', 'visualBuilder', 'timePicker', 'visChart']); describe('visual builder', function describeIndexTests() { this.tags('smoke'); @@ -80,7 +80,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { }); it('should verify gauge label and count display', async () => { - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); const labelString = await PageObjects.visualBuilder.getGaugeLabel(); expect(labelString).to.be('Count'); const gaugeCount = await PageObjects.visualBuilder.getGaugeCount(); @@ -96,7 +96,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { }); it('should verify topN label and count display', async () => { - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); const labelString = await PageObjects.visualBuilder.getTopNLabel(); expect(labelString).to.be('Count'); const gaugeCount = await PageObjects.visualBuilder.getTopNCount(); diff --git a/test/functional/apps/visualize/_vega_chart.js b/test/functional/apps/visualize/_vega_chart.js index 224dec7ef2a71..ee891c29864c1 100644 --- 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']); + const PageObjects = getPageObjects(['common', 'header', 'timePicker', 'visualize', 'visChart']); const filterBar = getService('filterBar'); const inspector = getService('inspector'); const log = getService('log'); @@ -40,7 +40,7 @@ export default function({ getService, getPageObjects }) { }); it.skip('should have some initial vega spec text', async function() { - const vegaSpec = await PageObjects.visualize.getVegaSpec(); + const vegaSpec = await PageObjects.visChart.getVegaSpec(); expect(vegaSpec) .to.contain('{') .and.to.contain('data'); @@ -48,7 +48,7 @@ export default function({ getService, getPageObjects }) { }); it('should have view and control containers', async function() { - const view = await PageObjects.visualize.getVegaViewContainer(); + const view = await PageObjects.visChart.getVegaViewContainer(); 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.visualize.getVegaControlContainer(); + const controls = await PageObjects.visChart.getVegaControlContainer(); expect(controls).to.be.ok(); }); }); diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js index 1153cc12e23ed..8252094e42d69 100644 --- a/test/functional/apps/visualize/_vertical_bar_chart.js +++ b/test/functional/apps/visualize/_vertical_bar_chart.js @@ -23,8 +23,16 @@ export default function({ getService, getPageObjects }) { const log = getService('log'); const retry = getService('retry'); const inspector = getService('inspector'); + const testSubjects = getService('testSubjects'); const filterBar = getService('filterBar'); - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']); + const PageObjects = getPageObjects([ + 'common', + 'visualize', + 'visEditor', + 'visChart', + 'header', + 'timePicker', + ]); // FLAKY: https://github.com/elastic/kibana/issues/22322 describe('vertical bar chart', function() { @@ -38,13 +46,13 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.clickNewSearch(); await PageObjects.timePicker.setDefaultAbsoluteRange(); log.debug('Bucket = X-Axis'); - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Aggregation = Date Histogram'); - await PageObjects.visualize.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); log.debug('Field = @timestamp'); - await PageObjects.visualize.selectField('@timestamp'); + await PageObjects.visEditor.selectField('@timestamp'); // leaving Interval set to Auto - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); }; before(initBarChart); @@ -53,7 +61,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should have inspector enabled', async function() { @@ -92,7 +100,7 @@ export default function({ getService, getPageObjects }) { // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function // try sleeping a bit before getting that data await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData(); + const data = await PageObjects.visChart.getBarChartData(); log.debug('data=' + data); log.debug('data.length=' + data.length); expect(data).to.eql(expectedChartValues); @@ -203,15 +211,15 @@ export default function({ getService, getPageObjects }) { // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function // try sleeping a bit before getting that data await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData(); + const data = await PageObjects.visChart.getBarChartData(); log.debug('data=' + data); log.debug('data.length=' + data.length); expect(data).to.eql(expectedChartValues); }); - await PageObjects.visualize.toggleOpenEditor(2); - await PageObjects.visualize.clickDropPartialBuckets(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.toggleOpenEditor(2); + await PageObjects.visEditor.clickDropPartialBuckets(); + await PageObjects.visEditor.clickGo(); expectedChartValues = [ 218, @@ -279,7 +287,7 @@ export default function({ getService, getPageObjects }) { // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function // try sleeping a bit before getting that data await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData(); + const data = await PageObjects.visChart.getBarChartData(); log.debug('data=' + data); log.debug('data.length=' + data.length); expect(data).to.eql(expectedChartValues); @@ -291,13 +299,13 @@ export default function({ getService, getPageObjects }) { const axisId = 'ValueAxis-1'; it('should show ticks on selecting log scale', async () => { - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.clickYAxisOptions(axisId); - await PageObjects.visualize.selectYAxisScaleType(axisId, 'log'); - await PageObjects.visualize.clickYAxisAdvancedOptions(axisId); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.clickYAxisOptions(axisId); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log'); + await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -323,9 +331,9 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting log scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -351,10 +359,10 @@ export default function({ getService, getPageObjects }) { }); it('should show ticks on selecting square root scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '0', '200', @@ -370,18 +378,18 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting square root scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400']; expect(labels).to.eql(expectedLabels); }); it('should show ticks on selecting linear scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); log.debug(labels); const expectedLabels = [ '0', @@ -398,9 +406,9 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting linear scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400']; expect(labels).to.eql(expectedLabels); }); @@ -409,11 +417,11 @@ export default function({ getService, getPageObjects }) { describe('vertical bar in percent mode', async () => { it('should show ticks with percentage values', async function() { const axisId = 'ValueAxis-1'; - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.clickYAxisOptions(axisId); - await PageObjects.visualize.selectYAxisMode('percentage'); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.clickYAxisOptions(axisId); + await PageObjects.visEditor.selectYAxisMode('percentage'); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); expect(labels[0]).to.eql('0%'); expect(labels[labels.length - 1]).to.eql('100%'); }); @@ -423,36 +431,36 @@ export default function({ getService, getPageObjects }) { before(initBarChart); it('should show correct series', async function() { - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split series'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('response.raw'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split series'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('response.raw'); await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const expectedEntries = ['200', '404', '503']; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); it('should allow custom sorting of series', async () => { - await PageObjects.visualize.toggleOpenEditor(1, 'false'); - await PageObjects.visualize.selectCustomSortMetric(3, 'Min', 'bytes'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.toggleOpenEditor(1, 'false'); + await PageObjects.visEditor.selectCustomSortMetric(3, 'Min', 'bytes'); + await PageObjects.visEditor.clickGo(); const expectedEntries = ['404', '200', '503']; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); it('should correctly filter by legend', async () => { - await PageObjects.visualize.filterLegend('200'); - await PageObjects.visualize.waitForVisualization(); - const legendEntries = await PageObjects.visualize.getLegendEntries(); + await PageObjects.visChart.filterLegend('200'); + await PageObjects.visChart.waitForVisualization(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); const expectedEntries = ['200']; expect(legendEntries).to.eql(expectedEntries); await filterBar.removeFilter('response.raw'); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); }); @@ -460,18 +468,18 @@ export default function({ getService, getPageObjects }) { before(initBarChart); it('should show correct series', async function() { - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split series'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('response.raw'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split series'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('response.raw'); await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - await PageObjects.visualize.toggleOpenEditor(3, 'false'); - await PageObjects.visualize.clickBucket('Split series'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('machine.os'); + await PageObjects.visEditor.toggleOpenEditor(3, 'false'); + await PageObjects.visEditor.clickBucket('Split series'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('machine.os'); await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const expectedEntries = [ '200 - win 8', @@ -490,18 +498,18 @@ export default function({ getService, getPageObjects }) { '404 - win 8', '404 - win xp', ]; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); it('should show correct series when disabling first agg', async function() { // this will avoid issues with the play tooltip covering the disable agg button - await PageObjects.visualize.scrollSubjectIntoView('metricsAggGroup'); - await PageObjects.visualize.toggleDisabledAgg(3); - await PageObjects.visualize.clickGo(); + await testSubjects.scrollIntoView('metricsAggGroup'); + await PageObjects.visEditor.toggleDisabledAgg(3); + await PageObjects.visEditor.clickGo(); const expectedEntries = ['win 8', 'win xp', 'ios', 'osx', 'win 7']; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); }); @@ -510,24 +518,24 @@ export default function({ getService, getPageObjects }) { before(initBarChart); it('should show correct series', async function() { - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.toggleOpenEditor(1); - await PageObjects.visualize.selectAggregation('Derivative', 'metrics'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.toggleOpenEditor(1); + await PageObjects.visEditor.selectAggregation('Derivative', 'metrics'); await PageObjects.visualize.waitForVisualizationRenderingStabilized(); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const expectedEntries = ['Derivative of Count']; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); it('should show an error if last bucket aggregation is terms', async () => { - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split series'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('response.raw'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split series'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('response.raw'); - const errorMessage = await PageObjects.visualize.getBucketErrorMessage(); + const errorMessage = await PageObjects.visEditor.getBucketErrorMessage(); expect(errorMessage).to.contain('Last bucket aggregation must be "Date Histogram"'); }); }); diff --git a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js index e796f281b0689..56df3778bd4b5 100644 --- a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js +++ b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js @@ -23,7 +23,7 @@ export default function({ getService, getPageObjects }) { const log = getService('log'); const retry = getService('retry'); const inspector = getService('inspector'); - const PageObjects = getPageObjects(['common', 'visualize', 'header']); + const PageObjects = getPageObjects(['common', 'visualize', 'header', 'visEditor', 'visChart']); // FLAKY: https://github.com/elastic/kibana/issues/22322 describe.skip('vertical bar chart with index without time filter', function() { @@ -39,12 +39,12 @@ export default function({ getService, getPageObjects }) { ); await PageObjects.common.sleep(500); log.debug('Bucket = X-Axis'); - await PageObjects.visualize.clickBucket('X-axis'); + await PageObjects.visEditor.clickBucket('X-axis'); log.debug('Aggregation = Date Histogram'); - await PageObjects.visualize.selectAggregation('Date Histogram'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); log.debug('Field = @timestamp'); - await PageObjects.visualize.selectField('@timestamp'); - await PageObjects.visualize.setCustomInterval('3h'); + await PageObjects.visEditor.selectField('@timestamp'); + await PageObjects.visEditor.setCustomInterval('3h'); await PageObjects.visualize.waitForVisualizationRenderingStabilized(); }; @@ -54,7 +54,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1); await PageObjects.visualize.loadSavedVisualization(vizName1); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); }); it('should have inspector enabled', async function() { @@ -93,7 +93,7 @@ export default function({ getService, getPageObjects }) { // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function // try sleeping a bit before getting that data await retry.try(async () => { - const data = await PageObjects.visualize.getBarChartData(); + const data = await PageObjects.visChart.getBarChartData(); log.debug('data=' + data); log.debug('data.length=' + data.length); expect(data).to.eql(expectedChartValues); @@ -134,13 +134,13 @@ export default function({ getService, getPageObjects }) { const axisId = 'ValueAxis-1'; it('should show ticks on selecting log scale', async () => { - await PageObjects.visualize.clickMetricsAndAxes(); - await PageObjects.visualize.clickYAxisOptions(axisId); - await PageObjects.visualize.selectYAxisScaleType(axisId, 'log'); - await PageObjects.visualize.clickYAxisAdvancedOptions(axisId); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.clickMetricsAndAxes(); + await PageObjects.visEditor.clickYAxisOptions(axisId); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'log'); + await PageObjects.visEditor.clickYAxisAdvancedOptions(axisId); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -166,9 +166,9 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting log scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '2', '3', @@ -194,10 +194,10 @@ export default function({ getService, getPageObjects }) { }); it('should show ticks on selecting square root scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'square root'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'square root'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = [ '0', '200', @@ -213,18 +213,18 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting square root scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400']; expect(labels).to.eql(expectedLabels); }); it('should show ticks on selecting linear scale', async () => { - await PageObjects.visualize.selectYAxisScaleType(axisId, 'linear'); - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, false); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.selectYAxisScaleType(axisId, 'linear'); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); log.debug(labels); const expectedLabels = [ '0', @@ -241,9 +241,9 @@ export default function({ getService, getPageObjects }) { }); it('should show filtered ticks on selecting linear scale', async () => { - await PageObjects.visualize.changeYAxisFilterLabelsCheckbox(axisId, true); - await PageObjects.visualize.clickGo(); - const labels = await PageObjects.visualize.getYAxisLabels(); + await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); + await PageObjects.visEditor.clickGo(); + const labels = await PageObjects.visChart.getYAxisLabels(); const expectedLabels = ['200', '400', '600', '800', '1,000', '1,200', '1,400']; expect(labels).to.eql(expectedLabels); }); @@ -253,18 +253,18 @@ export default function({ getService, getPageObjects }) { before(initBarChart); it('should show correct series', async function() { - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split series'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('response.raw'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split series'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('response.raw'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.common.sleep(1003); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); await PageObjects.header.waitUntilLoadingHasFinished(); const expectedEntries = ['200', '404', '503']; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); }); @@ -273,20 +273,20 @@ export default function({ getService, getPageObjects }) { before(initBarChart); it('should show correct series', async function() { - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.clickBucket('Split series'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('response.raw'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.clickBucket('Split series'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('response.raw'); await PageObjects.header.waitUntilLoadingHasFinished(); - await PageObjects.visualize.toggleOpenEditor(3, 'false'); - await PageObjects.visualize.clickBucket('Split series'); - await PageObjects.visualize.selectAggregation('Terms'); - await PageObjects.visualize.selectField('machine.os'); + await PageObjects.visEditor.toggleOpenEditor(3, 'false'); + await PageObjects.visEditor.clickBucket('Split series'); + await PageObjects.visEditor.selectAggregation('Terms'); + await PageObjects.visEditor.selectField('machine.os'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.common.sleep(1003); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); await PageObjects.header.waitUntilLoadingHasFinished(); const expectedEntries = [ @@ -306,17 +306,17 @@ export default function({ getService, getPageObjects }) { '404 - win 8', '404 - win xp', ]; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); it('should show correct series when disabling first agg', async function() { - await PageObjects.visualize.toggleDisabledAgg(3); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.toggleDisabledAgg(3); + await PageObjects.visEditor.clickGo(); await PageObjects.header.waitUntilLoadingHasFinished(); const expectedEntries = ['win 8', 'win xp', 'ios', 'osx', 'win 7']; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); }); @@ -325,17 +325,17 @@ export default function({ getService, getPageObjects }) { before(initBarChart); it('should show correct series', async function() { - await PageObjects.visualize.toggleOpenEditor(2, 'false'); - await PageObjects.visualize.toggleOpenEditor(1); - await PageObjects.visualize.selectAggregation('Derivative', 'metrics'); + await PageObjects.visEditor.toggleOpenEditor(2, 'false'); + await PageObjects.visEditor.toggleOpenEditor(1); + await PageObjects.visEditor.selectAggregation('Derivative', 'metrics'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.common.sleep(1003); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); await PageObjects.header.waitUntilLoadingHasFinished(); const expectedEntries = ['Derivative of Count']; - const legendEntries = await PageObjects.visualize.getLegendEntries(); + const legendEntries = await PageObjects.visChart.getLegendEntries(); expect(legendEntries).to.eql(expectedEntries); }); }); diff --git a/test/functional/apps/visualize/_visualize_listing.js b/test/functional/apps/visualize/_visualize_listing.js index 63a8a8310d2c1..2c94a3ab4f131 100644 --- a/test/functional/apps/visualize/_visualize_listing.js +++ b/test/functional/apps/visualize/_visualize_listing.js @@ -19,8 +19,9 @@ import expect from '@kbn/expect'; -export default function({ getPageObjects }) { - const PageObjects = getPageObjects(['visualize', 'header', 'common']); +export default function({ getService, getPageObjects }) { + const PageObjects = getPageObjects(['visualize', 'visEditor', 'header', 'common']); + const listingTable = getService('listingTable'); // FLAKY: https://github.com/elastic/kibana/issues/40912 describe.skip('visualize listing page', function describeIndexTests() { @@ -36,7 +37,7 @@ export default function({ getPageObjects }) { // type markdown is used for simplicity await PageObjects.visualize.createSimpleMarkdownViz(vizName); await PageObjects.visualize.gotoVisualizationLandingPage(); - const visCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + const visCount = await listingTable.getItemsCount('visualize'); expect(visCount).to.equal(1); }); @@ -45,11 +46,11 @@ export default function({ getPageObjects }) { await PageObjects.visualize.createSimpleMarkdownViz(vizName + '2'); await PageObjects.visualize.gotoVisualizationLandingPage(); - let visCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + let visCount = await listingTable.getItemsCount('visualize'); expect(visCount).to.equal(3); await PageObjects.visualize.deleteAllVisualizations(); - visCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + visCount = await listingTable.getItemsCount('visualize'); expect(visCount).to.equal(0); }); }); @@ -60,45 +61,45 @@ export default function({ getPageObjects }) { await PageObjects.visualize.gotoVisualizationLandingPage(); await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickMarkdownWidget(); - await PageObjects.visualize.setMarkdownTxt('HELLO'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.setMarkdownTxt('HELLO'); + await PageObjects.visEditor.clickGo(); await PageObjects.visualize.saveVisualization('Hello World'); await PageObjects.visualize.gotoVisualizationLandingPage(); }); it('matches on the first word', async function() { - await PageObjects.visualize.searchForItemWithName('Hello'); - const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + await listingTable.searchForItemWithName('Hello'); + const itemCount = await listingTable.getItemsCount('visualize'); expect(itemCount).to.equal(1); }); it('matches the second word', async function() { - await PageObjects.visualize.searchForItemWithName('World'); - const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + await listingTable.searchForItemWithName('World'); + const itemCount = await listingTable.getItemsCount('visualize'); expect(itemCount).to.equal(1); }); it('matches the second word prefix', async function() { - await PageObjects.visualize.searchForItemWithName('Wor'); - const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + await listingTable.searchForItemWithName('Wor'); + const itemCount = await listingTable.getItemsCount('visualize'); expect(itemCount).to.equal(1); }); it('does not match mid word', async function() { - await PageObjects.visualize.searchForItemWithName('orld'); - const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + await listingTable.searchForItemWithName('orld'); + const itemCount = await listingTable.getItemsCount('visualize'); expect(itemCount).to.equal(0); }); it('is case insensitive', async function() { - await PageObjects.visualize.searchForItemWithName('hello world'); - const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + await listingTable.searchForItemWithName('hello world'); + const itemCount = await listingTable.getItemsCount('visualize'); expect(itemCount).to.equal(1); }); it('is using AND operator', async function() { - await PageObjects.visualize.searchForItemWithName('hello banana'); - const itemCount = await PageObjects.visualize.getCountOfItemsInListingTable(); + await listingTable.searchForItemWithName('hello banana'); + const itemCount = await listingTable.getItemsCount('visualize'); expect(itemCount).to.equal(0); }); }); diff --git a/test/functional/apps/visualize/input_control_vis/dynamic_options.js b/test/functional/apps/visualize/input_control_vis/dynamic_options.js index 2354855f12079..d78c780a728a7 100644 --- a/test/functional/apps/visualize/input_control_vis/dynamic_options.js +++ b/test/functional/apps/visualize/input_control_vis/dynamic_options.js @@ -20,7 +20,7 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { - const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']); + const PageObjects = getPageObjects(['common', 'visualize', 'visEditor', 'header', 'timePicker']); const comboBox = getService('comboBox'); describe('dynamic options', () => { @@ -55,7 +55,7 @@ export default function({ getService, getPageObjects }) { it('should not fetch new options when non-string is filtered', async () => { await comboBox.set('fieldSelect-0', 'clientip'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const initialOptions = await comboBox.getOptionsList('listControlSelect0'); expect( diff --git a/test/functional/apps/visualize/input_control_vis/input_control_options.js b/test/functional/apps/visualize/input_control_vis/input_control_options.js index 9fd2da9a234a5..8e8891ac585b3 100644 --- a/test/functional/apps/visualize/input_control_vis/input_control_options.js +++ b/test/functional/apps/visualize/input_control_vis/input_control_options.js @@ -38,11 +38,11 @@ export default function({ getService, getPageObjects }) { 'Jan 1, 2017 @ 00:00:00.000', 'Jan 1, 2017 @ 00:00:00.000' ); - await PageObjects.visualize.clickVisEditorTab('controls'); - await PageObjects.visualize.addInputControl(); + await PageObjects.visEditor.clickVisEditorTab('controls'); + await PageObjects.visEditor.addInputControl(); await comboBox.set('indexPatternSelect-0', 'logstash- '); await comboBox.set('fieldSelect-0', FIELD_NAME); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); }); it('should not have inspector enabled', async function() { @@ -121,7 +121,7 @@ export default function({ getService, getPageObjects }) { const hasFilterBeforeClearBtnClicked = await filterBar.hasFilter(FIELD_NAME, 'ios'); expect(hasFilterBeforeClearBtnClicked).to.equal(true); - await PageObjects.visualize.inputControlClear(); + await PageObjects.visEditor.inputControlClear(); const hasValue = await comboBox.doesComboBoxHaveSelectedOptions('listControlSelect0'); expect(hasValue).to.equal(false); @@ -138,17 +138,17 @@ export default function({ getService, getPageObjects }) { describe('updateFiltersOnChange is true', () => { before(async () => { - await PageObjects.visualize.clickVisEditorTab('options'); - await PageObjects.visualize.checkSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickVisEditorTab('options'); + await PageObjects.visEditor.checkSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox'); + await PageObjects.visEditor.clickGo(); }); after(async () => { - await PageObjects.visualize.clickVisEditorTab('options'); - await PageObjects.visualize.uncheckSwitch( + await PageObjects.visEditor.clickVisEditorTab('options'); + await PageObjects.visEditor.uncheckSwitch( 'inputControlEditorUpdateFiltersOnChangeCheckbox' ); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); }); it('should not display staging control buttons', async () => { @@ -173,9 +173,9 @@ export default function({ getService, getPageObjects }) { describe('useTimeFilter', () => { it('should use global time filter when getting terms', async () => { - await PageObjects.visualize.clickVisEditorTab('options'); - await PageObjects.visualize.checkCheckbox('inputControlEditorUseTimeFilterCheckbox'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickVisEditorTab('options'); + await testSubjects.setCheckbox('inputControlEditorUseTimeFilterCheckbox', 'check'); + await PageObjects.visEditor.clickGo(); // Expect control to be disabled because no terms could be gathered with time filter applied const input = await find.byCssSelector('[data-test-subj="inputControl0"] input'); diff --git a/test/functional/page_objects/index.ts b/test/functional/page_objects/index.ts index 22af136f6d438..91c5e162e2754 100644 --- a/test/functional/page_objects/index.ts +++ b/test/functional/page_objects/index.ts @@ -48,9 +48,11 @@ import { TimePickerPageProvider } from './time_picker'; // @ts-ignore not TS yet import { TimelionPageProvider } from './timelion_page'; import { VisualBuilderPageProvider } from './visual_builder_page'; -// @ts-ignore not TS yet import { VisualizePageProvider } from './visualize_page'; -import { VisualEditorPageProvider } from './visual_editor_page'; +import { VisualizeEditorPageProvider } from './visualize_editor_page'; +import { VisualizeChartPageProvider } from './visualize_chart_page'; +import { TileMapPageProvider } from './tile_map_page'; +import { TagCloudPageProvider } from './tag_cloud_page'; export const pageObjects = { common: CommonPageProvider, @@ -71,5 +73,8 @@ export const pageObjects = { timePicker: TimePickerPageProvider, visualBuilder: VisualBuilderPageProvider, visualize: VisualizePageProvider, - visEditor: VisualEditorPageProvider, + visEditor: VisualizeEditorPageProvider, + visChart: VisualizeChartPageProvider, + tileMap: TileMapPageProvider, + tagCloud: TagCloudPageProvider, }; diff --git a/test/functional/page_objects/point_series_page.js b/test/functional/page_objects/point_series_page.js index 9172809eb73e5..74bf07b59bc38 100644 --- a/test/functional/page_objects/point_series_page.js +++ b/test/functional/page_objects/point_series_page.js @@ -23,10 +23,6 @@ export function PointSeriesPageProvider({ getService }) { const find = getService('find'); class PointSeriesVis { - async clickOptions() { - return await testSubjects.click('visEditorTaboptions'); - } - async clickAxisOptions() { return await testSubjects.click('visEditorTabadvanced'); } diff --git a/test/functional/page_objects/share_page.ts b/test/functional/page_objects/share_page.ts index 906effcb54a26..d0fb46369f98d 100644 --- a/test/functional/page_objects/share_page.ts +++ b/test/functional/page_objects/share_page.ts @@ -78,7 +78,7 @@ export function SharePageProvider({ getService, getPageObjects }: FtrProviderCon async checkShortenUrl() { const shareForm = await testSubjects.find('shareUrlForm'); - await PageObjects.visualize.checkCheckbox('useShortUrl'); + await testSubjects.setCheckbox('useShortUrl', 'check'); await shareForm.waitForDeletedByCssSelector('.euiLoadingSpinner'); } diff --git a/test/functional/page_objects/tag_cloud_page.ts b/test/functional/page_objects/tag_cloud_page.ts new file mode 100644 index 0000000000000..48bffc102696d --- /dev/null +++ b/test/functional/page_objects/tag_cloud_page.ts @@ -0,0 +1,52 @@ +/* + * 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'; +import { WebElementWrapper } from '../services/lib/web_element_wrapper'; + +export function TagCloudPageProvider({ getService, getPageObjects }: FtrProviderContext) { + const find = getService('find'); + const testSubjects = getService('testSubjects'); + const { header, visChart } = getPageObjects(['header', 'visChart']); + + class TagCloudPage { + async selectTagCloudTag(tagDisplayText: string) { + await testSubjects.click(tagDisplayText); + await header.waitUntilLoadingHasFinished(); + } + + async getTextTag() { + await visChart.waitForVisualization(); + const elements = await find.allByCssSelector('text'); + return await Promise.all(elements.map(async element => await element.getVisibleText())); + } + + async getTextSizes() { + const tags = await find.allByCssSelector('text'); + async function returnTagSize(tag: WebElementWrapper) { + const style = await tag.getAttribute('style'); + const fontSize = style.match(/font-size: ([^;]*);/); + return fontSize ? fontSize[1] : ''; + } + return await Promise.all(tags.map(returnTagSize)); + } + } + + return new TagCloudPage(); +} diff --git a/test/functional/page_objects/tile_map_page.ts b/test/functional/page_objects/tile_map_page.ts new file mode 100644 index 0000000000000..5147df996a1eb --- /dev/null +++ b/test/functional/page_objects/tile_map_page.ts @@ -0,0 +1,102 @@ +/* + * 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 TileMapPageProvider({ getService, getPageObjects }: FtrProviderContext) { + const find = getService('find'); + const testSubjects = getService('testSubjects'); + const retry = getService('retry'); + const log = getService('log'); + const inspector = getService('inspector'); + const { header } = getPageObjects(['common', 'header']); + + class TileMapPage { + async getZoomSelectors(zoomSelector: string) { + return await find.allByCssSelector(zoomSelector); + } + + async clickMapButton(zoomSelector: string, waitForLoading?: boolean) { + await retry.try(async () => { + const zooms = await this.getZoomSelectors(zoomSelector); + await Promise.all(zooms.map(async zoom => await zoom.click())); + if (waitForLoading) { + await header.waitUntilLoadingHasFinished(); + } + }); + } + + async getVisualizationRequest() { + log.debug('getVisualizationRequest'); + await inspector.open(); + await testSubjects.click('inspectorViewChooser'); + await testSubjects.click('inspectorViewChooserRequests'); + await testSubjects.click('inspectorRequestDetailRequest'); + return await testSubjects.getVisibleText('inspectorRequestBody'); + } + + async getMapBounds() { + const request = await this.getVisualizationRequest(); + const requestObject = JSON.parse(request); + return requestObject.aggs.filter_agg.filter.geo_bounding_box['geo.coordinates']; + } + + async clickMapZoomIn(waitForLoading = true) { + await this.clickMapButton('a.leaflet-control-zoom-in', waitForLoading); + } + + async clickMapZoomOut(waitForLoading = true) { + await this.clickMapButton('a.leaflet-control-zoom-out', waitForLoading); + } + + async getMapZoomEnabled(zoomSelector: string) { + const zooms = await this.getZoomSelectors(zoomSelector); + const classAttributes = await Promise.all( + zooms.map(async zoom => await zoom.getAttribute('class')) + ); + return !classAttributes.join('').includes('leaflet-disabled'); + } + + async zoomAllTheWayOut() { + // we can tell we're at level 1 because zoom out is disabled + return await retry.try(async () => { + await this.clickMapZoomOut(); + const enabled = await this.getMapZoomOutEnabled(); + // should be able to zoom more as current config has 0 as min level. + if (enabled) { + throw new Error('Not fully zoomed out yet'); + } + }); + } + + async getMapZoomInEnabled() { + return await this.getMapZoomEnabled('a.leaflet-control-zoom-in'); + } + + async getMapZoomOutEnabled() { + return await this.getMapZoomEnabled('a.leaflet-control-zoom-out'); + } + + async clickMapFitDataBounds() { + return await this.clickMapButton('a.fa-crop'); + } + } + + return new TileMapPage(); +} diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts index 97d5787350376..2fa59d5fd89d8 100644 --- a/test/functional/page_objects/visual_builder_page.ts +++ b/test/functional/page_objects/visual_builder_page.ts @@ -26,7 +26,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro const retry = getService('retry'); const testSubjects = getService('testSubjects'); const comboBox = getService('comboBox'); - const PageObjects = getPageObjects(['common', 'header', 'visualize', 'timePicker']); + const PageObjects = getPageObjects(['common', 'header', 'visualize', 'timePicker', 'visChart']); type Duration = | 'Milliseconds' @@ -101,7 +101,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro } public async getMetricValue() { - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); const metricValue = await find.byCssSelector('.tvbVisMetric__value--primary'); return metricValue.getVisibleText(); } @@ -110,7 +110,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro const input = await find.byCssSelector('.tvbMarkdownEditor__editor textarea'); await this.clearMarkdown(); await input.type(markdown, { charByChar: true }); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); } public async clearMarkdown() { @@ -304,7 +304,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro } public async getRhythmChartLegendValue(nth = 0) { - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); const metricValue = ( await find.allByCssSelector(`.echLegendItem .echLegendItem__displayValue`) )[nth]; @@ -348,7 +348,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro const prevAggs = await testSubjects.findAll('aggSelector'); const elements = await testSubjects.findAll('addMetricAddBtn'); await elements[nth].click(); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); await retry.waitFor('new agg is added', async () => { const currentAggs = await testSubjects.findAll('aggSelector'); return currentAggs.length > prevAggs.length; @@ -485,7 +485,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro await this.checkColorPickerPopUpIsPresent(); await find.setValue('.tvbColorPickerPopUp input', colorHex); await this.clickColorPicker(); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); } public async checkColorPickerPopUpIsPresent(): Promise { @@ -494,10 +494,10 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro } public async changePanelPreview(nth: number = 0): Promise { - const prevRenderingCount = await PageObjects.visualize.getVisualizationRenderingCount(); + const prevRenderingCount = await PageObjects.visChart.getVisualizationRenderingCount(); const changePreviewBtnArray = await testSubjects.findAll('AddActivatePanelBtn'); await changePreviewBtnArray[nth].click(); - await PageObjects.visualize.waitForRenderingCount(prevRenderingCount + 1); + await PageObjects.visChart.waitForRenderingCount(prevRenderingCount + 1); } public async checkPreviewIsDisabled(): Promise { @@ -508,7 +508,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro public async cloneSeries(nth: number = 0): Promise { const cloneBtnArray = await testSubjects.findAll('AddCloneBtn'); await cloneBtnArray[nth].click(); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); } /** @@ -525,10 +525,10 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro } public async deleteSeries(nth: number = 0): Promise { - const prevRenderingCount = await PageObjects.visualize.getVisualizationRenderingCount(); + const prevRenderingCount = await PageObjects.visChart.getVisualizationRenderingCount(); const cloneBtnArray = await testSubjects.findAll('AddDeleteBtn'); await cloneBtnArray[nth].click(); - await PageObjects.visualize.waitForRenderingCount(prevRenderingCount + 1); + await PageObjects.visChart.waitForRenderingCount(prevRenderingCount + 1); } public async getLegendItems(): Promise { diff --git a/test/functional/page_objects/visual_editor_page.ts b/test/functional/page_objects/visual_editor_page.ts deleted file mode 100644 index 3c0aded60be9f..0000000000000 --- a/test/functional/page_objects/visual_editor_page.ts +++ /dev/null @@ -1,122 +0,0 @@ -/* - * 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 VisualEditorPageProvider({ getService, getPageObjects }: FtrProviderContext) { - const find = getService('find'); - const log = getService('log'); - const testSubjects = getService('testSubjects'); - const comboBox = getService('comboBox'); - const { common, header, visualize } = getPageObjects(['common', 'header', 'visualize']); - - class VisualEditorPage { - async inputControlSubmit() { - await testSubjects.clickWhenNotDisabled('inputControlSubmitBtn'); - await visualize.waitForVisualizationRenderingStabilized(); - } - - async addInputControl(type: string) { - if (type) { - const selectInput = await testSubjects.find('selectControlType'); - await selectInput.type(type); - } - await testSubjects.click('inputControlEditorAddBtn'); - await header.waitUntilLoadingHasFinished(); - } - - async clickGo() { - const prevRenderingCount = await visualize.getVisualizationRenderingCount(); - log.debug(`Before Rendering count ${prevRenderingCount}`); - await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton'); - await visualize.waitForRenderingCount(prevRenderingCount + 1); - } - - async removeDimension(aggNth: number) { - await testSubjects.click(`visEditorAggAccordion${aggNth} > removeDimensionBtn`); - } - - async setFilterParams(aggNth: number, indexPattern: string, field: string) { - await comboBox.set(`indexPatternSelect-${aggNth}`, indexPattern); - await comboBox.set(`fieldSelect-${aggNth}`, field); - } - - async setFilterRange(aggNth: number, min: string, max: string) { - const control = await testSubjects.find(`inputControl${aggNth}`); - const inputMin = await control.findByCssSelector('[name$="minValue"]'); - await inputMin.type(min); - const inputMax = await control.findByCssSelector('[name$="maxValue"]'); - await inputMax.type(max); - } - - async clickSplitDirection(direction: string) { - const control = await testSubjects.find('visEditorSplitBy'); - const radioBtn = await control.findByCssSelector(`[title="${direction}"]`); - await radioBtn.click(); - } - - async getBucketErrorMessage() { - const error = await find.byCssSelector( - '[group-name="buckets"] [data-test-subj="defaultEditorAggSelect"] + .euiFormErrorText' - ); - const errorMessage = await error.getAttribute('innerText'); - log.debug(errorMessage); - return errorMessage; - } - - async selectOrderByMetric(aggNth: number, metric: string) { - const sortSelect = await testSubjects.find(`visEditorOrderBy${aggNth}`); - const sortMetric = await sortSelect.findByCssSelector(`option[value="${metric}"]`); - await sortMetric.click(); - } - - async selectAggregation(aggValue: string, groupName = 'buckets', childAggregationType = false) { - const comboBoxElement = await find.byCssSelector(` - [group-name="${groupName}"] - [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen - ${childAggregationType ? '.visEditorAgg__subAgg' : ''} - [data-test-subj="defaultEditorAggSelect"] - `); - - await comboBox.setElement(comboBoxElement, aggValue); - await common.sleep(500); - } - - async selectField(fieldValue: string, groupName = 'buckets', childAggregationType = false) { - log.debug(`selectField ${fieldValue}`); - const selector = ` - [group-name="${groupName}"] - [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen - [data-test-subj="visAggEditorParams"] - ${childAggregationType ? '.visEditorAgg__subAgg' : ''} - [data-test-subj="visDefaultEditorField"] - `; - const fieldEl = await find.byCssSelector(selector); - await comboBox.setElement(fieldEl, fieldValue); - } - - async selectCustomSortMetric(aggNth: number, metric: string, field: string) { - await this.selectOrderByMetric(aggNth, 'custom'); - await this.selectAggregation(metric, 'buckets', true); - await this.selectField(field, 'buckets', true); - } - } - - return new VisualEditorPage(); -} diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts new file mode 100644 index 0000000000000..7d9316787b1d9 --- /dev/null +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -0,0 +1,407 @@ +/* + * 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 VisualizeChartPageProvider({ getService, getPageObjects }: FtrProviderContext) { + const testSubjects = getService('testSubjects'); + const config = getService('config'); + const find = getService('find'); + const log = getService('log'); + const retry = getService('retry'); + const table = getService('table'); + const defaultFindTimeout = config.get('timeouts.find'); + const { common } = getPageObjects(['common']); + + class VisualizeChart { + public async getYAxisTitle() { + const title = await find.byCssSelector('.y-axis-div .y-axis-title text'); + return await title.getVisibleText(); + } + + public async getXAxisLabels() { + const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom'); + const $ = await xAxis.parseDomContent(); + return $('.x > g > text') + .toArray() + .map(tick => + $(tick) + .text() + .trim() + ); + } + + public async getYAxisLabels() { + const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left'); + const $ = await yAxis.parseDomContent(); + return $('.y > g > text') + .toArray() + .map(tick => + $(tick) + .text() + .trim() + ); + } + + /* + ** This method gets the chart data and scales it based on chart height and label. + ** Returns an array of height values + */ + public async getAreaChartData(dataLabel: string, axis = 'ValueAxis-1') { + const yAxisRatio = await this.getChartYAxisRatio(axis); + + const rectangle = await find.byCssSelector('rect.background'); + const yAxisHeight = Number(await rectangle.getAttribute('height')); + log.debug(`height --------- ${yAxisHeight}`); + + const path = await retry.try( + async () => + await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) + ); + const data = await path.getAttribute('d'); + log.debug(data); + // This area chart data starts with a 'M'ove to a x,y location, followed + // by a bunch of 'L'ines from that point to the next. Those points are + // the values we're going to use to calculate the data values we're testing. + // So git rid of the one 'M' and split the rest on the 'L's. + const tempArray = data + .replace('M ', '') + .replace('M', '') + .replace(/ L /g, 'L') + .replace(/ /g, ',') + .split('L'); + const chartSections = tempArray.length / 2; + // log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel); + const chartData = []; + for (let i = 0; i < chartSections; i++) { + chartData[i] = Math.round((yAxisHeight - Number(tempArray[i].split(',')[1])) * yAxisRatio); + log.debug('chartData[i] =' + chartData[i]); + } + return chartData; + } + + /* + ** This method returns the paths that compose an area chart. + */ + public async getAreaChartPaths(dataLabel: string) { + const path = await retry.try( + async () => + await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) + ); + const data = await path.getAttribute('d'); + log.debug(data); + // This area chart data starts with a 'M'ove to a x,y location, followed + // by a bunch of 'L'ines from that point to the next. Those points are + // the values we're going to use to calculate the data values we're testing. + // So git rid of the one 'M' and split the rest on the 'L's. + return data.split('L'); + } + + // The current test shows dots, not a line. This function gets the dots and normalizes their height. + async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { + // 1). get the range/pixel ratio + const yAxisRatio = await this.getChartYAxisRatio(axis); + // 2). find and save the y-axis pixel size (the chart height) + const rectangle = await find.byCssSelector('clipPath rect'); + const yAxisHeight = Number(await rectangle.getAttribute('height')); + // 3). get the visWrapper__chart elements + const chartTypes = await retry.try( + async () => + await find.allByCssSelector( + `.visWrapper__chart circle[data-label="${dataLabel}"][fill-opacity="1"]`, + defaultFindTimeout * 2 + ) + ); + // 4). for each chart element, find the green circle, then the cy position + const chartData = await Promise.all( + chartTypes.map(async chart => { + const cy = Number(await chart.getAttribute('cy')); + // the point_series_options test has data in the billions range and + // getting 11 digits of precision with these calculations is very hard + return Math.round(Number(((yAxisHeight - cy) * yAxisRatio).toPrecision(6))); + }) + ); + + return chartData; + } + + // this is ALMOST identical to DiscoverPage.getBarChartData + async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { + // 1). get the range/pixel ratio + const yAxisRatio = await this.getChartYAxisRatio(axis); + // 3). get the visWrapper__chart elements + const svg = await find.byCssSelector('div.chart'); + const $ = await svg.parseDomContent(); + const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`) + .toArray() + .map(chart => { + const barHeight = Number($(chart).attr('height')); + return Math.round(barHeight * yAxisRatio); + }); + + return chartData; + } + + // Returns value per pixel + async getChartYAxisRatio(axis = 'ValueAxis-1') { + // 1). get the maximum chart Y-Axis marker value and Y position + const maxYAxisChartMarker = await retry.try( + async () => + await find.byCssSelector( + `div.visAxis__splitAxes--y > div > svg > g.${axis} > g:last-of-type.tick` + ) + ); + const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, ''); + const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y; + log.debug(`maxYLabel = ${maxYLabel}, maxYLabelYPosition = ${maxYLabelYPosition}`); + + // 2). get the minimum chart Y-Axis marker value and Y position + const minYAxisChartMarker = await find.byCssSelector( + 'div.visAxis__column--y.visAxis__column--left > div > div > svg:nth-child(2) > g > g:nth-child(1).tick' + ); + const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', ''); + const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y; + return (Number(maxYLabel) - Number(minYLabel)) / (minYLabelYPosition - maxYLabelYPosition); + } + + async toggleLegend(show = true) { + await retry.try(async () => { + const isVisible = find.byCssSelector('.visLegend'); + if ((show && !isVisible) || (!show && isVisible)) { + await testSubjects.click('vislibToggleLegend'); + } + }); + } + + async filterLegend(name: string) { + await this.toggleLegend(); + await testSubjects.click(`legend-${name}`); + const filters = await testSubjects.find(`legend-${name}-filters`); + const [filterIn] = await filters.findAllByCssSelector(`input`); + await filterIn.click(); + await this.waitForVisualizationRenderingStabilized(); + } + + async doesLegendColorChoiceExist(color: string) { + return await testSubjects.exists(`legendSelectColor-${color}`); + } + + async selectNewLegendColorChoice(color: string) { + await testSubjects.click(`legendSelectColor-${color}`); + } + + async doesSelectedLegendColorExist(color: string) { + return await testSubjects.exists(`legendSelectedColor-${color}`); + } + + async expectError() { + return await testSubjects.existOrFail('visLibVisualizeError'); + } + + async getChartTypes() { + const chartTypeField = await testSubjects.find('visNewDialogTypes'); + const $ = await chartTypeField.parseDomContent(); + return $('button') + .toArray() + .map(chart => + $(chart) + .findTestSubject('visTypeTitle') + .text() + .trim() + ); + } + + async getVisualizationRenderingCount() { + const visualizationLoader = await testSubjects.find('visualizationLoader'); + const renderingCount = await visualizationLoader.getAttribute('data-rendering-count'); + return Number(renderingCount); + } + + async waitForRenderingCount(minimumCount = 1) { + await retry.waitFor( + `rendering count to be greater than or equal to [${minimumCount}]`, + async () => { + const currentRenderingCount = await this.getVisualizationRenderingCount(); + log.debug(`-- currentRenderingCount=${currentRenderingCount}`); + return currentRenderingCount >= minimumCount; + } + ); + } + + async waitForVisualizationRenderingStabilized() { + // assuming rendering is done when data-rendering-count is constant within 1000 ms + await retry.waitFor('rendering count to stabilize', async () => { + const firstCount = await this.getVisualizationRenderingCount(); + log.debug(`-- firstCount=${firstCount}`); + + await common.sleep(1000); + + const secondCount = await this.getVisualizationRenderingCount(); + log.debug(`-- secondCount=${secondCount}`); + + return firstCount === secondCount; + }); + } + + async waitForVisualization() { + await this.waitForVisualizationRenderingStabilized(); + return await find.byCssSelector('.visualization'); + } + + async getLegendEntries() { + const legendEntries = await find.allByCssSelector( + '.visLegend__button', + defaultFindTimeout * 2 + ); + return await Promise.all( + legendEntries.map(async chart => await chart.getAttribute('data-label')) + ); + } + + async openLegendOptionColors(name: string) { + await this.waitForVisualizationRenderingStabilized(); + await retry.try(async () => { + // This click has been flaky in opening the legend, hence the retry. See + // https://github.com/elastic/kibana/issues/17468 + await testSubjects.click(`legend-${name}`); + await this.waitForVisualizationRenderingStabilized(); + // arbitrary color chosen, any available would do + const isOpen = await this.doesLegendColorChoiceExist('#EF843C'); + if (!isOpen) { + throw new Error('legend color selector not open'); + } + }); + } + + async filterOnTableCell(column: string, row: string) { + await retry.try(async () => { + const tableVis = await testSubjects.find('tableVis'); + const cell = await tableVis.findByCssSelector( + `tbody tr:nth-child(${row}) td:nth-child(${column})` + ); + await cell.moveMouseTo(); + const filterBtn = await testSubjects.findDescendant('filterForCellValue', cell); + await filterBtn.click(); + }); + } + + async getMarkdownText() { + const markdownContainer = await testSubjects.find('markdownBody'); + return markdownContainer.getVisibleText(); + } + + async getMarkdownBodyDescendentText(selector: string) { + const markdownContainer = await testSubjects.find('markdownBody'); + const element = await find.descendantDisplayedByCssSelector(selector, markdownContainer); + return element.getVisibleText(); + } + + 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'); + } + + async getVegaViewContainer() { + return await find.byCssSelector('div.vgaVis__view'); + } + + async getVegaControlContainer() { + return await find.byCssSelector('div.vgaVis__controls'); + } + + /** + * If you are writing new tests, you should rather look into getTableVisContent method instead. + */ + async getTableVisData() { + return await testSubjects.getVisibleText('paginated-table-body'); + } + + /** + * This function is the newer function to retrieve data from within a table visualization. + * It uses a better return format, than the old getTableVisData, by properly splitting + * cell values into arrays. Please use this function for newer tests. + */ + async getTableVisContent({ stripEmptyRows = true } = {}) { + return await retry.try(async () => { + const container = await testSubjects.find('tableVis'); + const allTables = await testSubjects.findAllDescendant('paginated-table-body', container); + + if (allTables.length === 0) { + return []; + } + + const allData = await Promise.all( + allTables.map(async t => { + let data = await table.getDataFromElement(t); + if (stripEmptyRows) { + data = data.filter(row => row.length > 0 && row.some(cell => cell.trim().length > 0)); + } + return data; + }) + ); + + if (allTables.length === 1) { + // If there was only one table we return only the data for that table + // This prevents an unnecessary array around that single table, which + // is the case we have in most tests. + return allData[0]; + } + + return allData; + }); + } + + async getMetric() { + const elements = await find.allByCssSelector( + '[data-test-subj="visualizationLoader"] .mtrVis__container' + ); + const values = await Promise.all( + elements.map(async element => { + const text = await element.getVisibleText(); + return text; + }) + ); + return values + .filter(item => item.length > 0) + .reduce((arr: string[], item) => arr.concat(item.split('\n')), []); + } + + async getGaugeValue() { + const elements = await find.allByCssSelector( + '[data-test-subj="visualizationLoader"] .chart svg text' + ); + const values = await Promise.all( + elements.map(async element => { + const text = await element.getVisibleText(); + return text; + }) + ); + return values.filter(item => item.length > 0); + } + } + + return new VisualizeChart(); +} diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts new file mode 100644 index 0000000000000..8bf2bcd251718 --- /dev/null +++ b/test/functional/page_objects/visualize_editor_page.ts @@ -0,0 +1,452 @@ +/* + * 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/expect.js'; +import { FtrProviderContext } from '../ftr_provider_context'; + +export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrProviderContext) { + const find = getService('find'); + const log = getService('log'); + const retry = getService('retry'); + const browser = getService('browser'); + const testSubjects = getService('testSubjects'); + const comboBox = getService('comboBox'); + const { common, header, visChart } = getPageObjects(['common', 'header', 'visChart']); + + class VisualizeEditorPage { + async clickOptionsTab() { + await testSubjects.click('visEditorTaboptions'); + } + + async clickMetricsAndAxes() { + await testSubjects.click('visEditorTabadvanced'); + } + + async clickVisEditorTab(tabName: string) { + await testSubjects.click('visEditorTab' + tabName); + await header.waitUntilLoadingHasFinished(); + } + + async clickData() { + await testSubjects.click('visualizeEditDataLink'); + } + + async inputControlClear() { + await testSubjects.click('inputControlClearBtn'); + await header.waitUntilLoadingHasFinished(); + } + + async inputControlSubmit() { + await testSubjects.clickWhenNotDisabled('inputControlSubmitBtn'); + await visChart.waitForVisualizationRenderingStabilized(); + } + + async addInputControl(type: string) { + if (type) { + const selectInput = await testSubjects.find('selectControlType'); + await selectInput.type(type); + } + await testSubjects.click('inputControlEditorAddBtn'); + await header.waitUntilLoadingHasFinished(); + } + + async clickGo() { + const prevRenderingCount = await visChart.getVisualizationRenderingCount(); + log.debug(`Before Rendering count ${prevRenderingCount}`); + await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton'); + await visChart.waitForRenderingCount(prevRenderingCount + 1); + } + + async removeDimension(aggNth: number) { + await testSubjects.click(`visEditorAggAccordion${aggNth} > removeDimensionBtn`); + } + + async setFilterParams(aggNth: number, indexPattern: string, field: string) { + await comboBox.set(`indexPatternSelect-${aggNth}`, indexPattern); + await comboBox.set(`fieldSelect-${aggNth}`, field); + } + + async setFilterRange(aggNth: number, min: string, max: string) { + const control = await testSubjects.find(`inputControl${aggNth}`); + const inputMin = await control.findByCssSelector('[name$="minValue"]'); + await inputMin.type(min); + const inputMax = await control.findByCssSelector('[name$="maxValue"]'); + await inputMax.type(max); + } + + async clickSplitDirection(direction: string) { + const control = await testSubjects.find('visEditorSplitBy'); + const radioBtn = await control.findByCssSelector(`[title="${direction}"]`); + await radioBtn.click(); + } + + /** + * Adds new bucket + * @param bucketName bucket name, like 'X-axis', 'Split rows', 'Split series' + * @param type aggregation type, like 'buckets', 'metrics' + */ + async clickBucket(bucketName: string, type = 'buckets') { + await testSubjects.click(`visEditorAdd_${type}`); + await find.clickByCssSelector(`[data-test-subj="visEditorAdd_${type}_${bucketName}"`); + } + + async clickEnableCustomRanges() { + await testSubjects.click('heatmapUseCustomRanges'); + } + + async clickAddRange() { + await testSubjects.click(`heatmapColorRange__addRangeButton`); + } + + async setCustomRangeByIndex(index: string, from: string, to: string) { + await testSubjects.setValue(`heatmapColorRange${index}__from`, from); + await testSubjects.setValue(`heatmapColorRange${index}__to`, to); + } + + async changeHeatmapColorNumbers(value = 6) { + const input = await testSubjects.find(`heatmapColorsNumber`); + await input.clearValueWithKeyboard(); + await input.type(`${value}`); + } + + async getBucketErrorMessage() { + const error = await find.byCssSelector( + '[group-name="buckets"] [data-test-subj="defaultEditorAggSelect"] + .euiFormErrorText' + ); + const errorMessage = await error.getAttribute('innerText'); + log.debug(errorMessage); + return errorMessage; + } + + async addNewFilterAggregation() { + return await testSubjects.click('visEditorAddFilterButton'); + } + + async selectField(fieldValue: string, groupName = 'buckets', childAggregationType = false) { + log.debug(`selectField ${fieldValue}`); + const selector = ` + [group-name="${groupName}"] + [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen + [data-test-subj="visAggEditorParams"] + ${childAggregationType ? '.visEditorAgg__subAgg' : ''} + [data-test-subj="visDefaultEditorField"] + `; + const fieldEl = await find.byCssSelector(selector); + await comboBox.setElement(fieldEl, fieldValue); + } + + async selectOrderByMetric(aggNth: number, metric: string) { + const sortSelect = await testSubjects.find(`visEditorOrderBy${aggNth}`); + const sortMetric = await sortSelect.findByCssSelector(`option[value="${metric}"]`); + await sortMetric.click(); + } + + async selectCustomSortMetric(aggNth: number, metric: string, field: string) { + await this.selectOrderByMetric(aggNth, 'custom'); + await this.selectAggregation(metric, 'buckets', true); + await this.selectField(field, 'buckets', true); + } + + async selectAggregation(aggValue: string, groupName = 'buckets', childAggregationType = false) { + const comboBoxElement = await find.byCssSelector(` + [group-name="${groupName}"] + [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen + ${childAggregationType ? '.visEditorAgg__subAgg' : ''} + [data-test-subj="defaultEditorAggSelect"] + `); + + await comboBox.setElement(comboBoxElement, aggValue); + await common.sleep(500); + } + + /** + * Set the test for a filter aggregation. + * @param {*} filterValue the string value of the filter + * @param {*} filterIndex used when multiple filters are configured on the same aggregation + * @param {*} aggregationId the ID if the aggregation. On Tests, it start at from 2 + */ + async setFilterAggregationValue(filterValue: string, filterIndex = 0, aggregationId = 2) { + await testSubjects.setValue( + `visEditorFilterInput_${aggregationId}_${filterIndex}`, + filterValue + ); + } + + async setValue(newValue: string) { + const input = await find.byCssSelector('[data-test-subj="visEditorPercentileRanks"] input'); + await input.clearValue(); + await input.type(newValue); + } + + async clickEditorSidebarCollapse() { + await testSubjects.click('collapseSideBarButton'); + } + + async clickDropPartialBuckets() { + return await testSubjects.click('dropPartialBucketsCheckbox'); + } + + async setMarkdownTxt(markdownTxt: string) { + const input = await testSubjects.find('markdownTextarea'); + await input.clearValue(); + await input.type(markdownTxt); + } + + async isSwitchChecked(selector: string) { + const checkbox = await testSubjects.find(selector); + const isChecked = await checkbox.getAttribute('aria-checked'); + return isChecked === 'true'; + } + + async checkSwitch(selector: string) { + const isChecked = await this.isSwitchChecked(selector); + if (!isChecked) { + log.debug(`checking switch ${selector}`); + await testSubjects.click(selector); + } + } + + async uncheckSwitch(selector: string) { + const isChecked = await this.isSwitchChecked(selector); + if (isChecked) { + log.debug(`unchecking switch ${selector}`); + await testSubjects.click(selector); + } + } + + async setIsFilteredByCollarCheckbox(value = true) { + await retry.try(async () => { + const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox'); + if (isChecked !== value) { + await testSubjects.click('isFilteredByCollarCheckbox'); + throw new Error('isFilteredByCollar not set correctly'); + } + }); + } + + async setCustomLabel(label: string, index = 1) { + const customLabel = await testSubjects.find(`visEditorStringInput${index}customLabel`); + customLabel.type(label); + } + + async selectYAxisAggregation(agg: string, field: string, label: string, index = 1) { + // index starts on the first "count" metric at 1 + // Each new metric or aggregation added to a visualization gets the next index. + // So to modify a metric or aggregation tests need to keep track of the + // order they are added. + await this.toggleOpenEditor(index); + + // select our agg + const aggSelect = await find.byCssSelector( + `#visEditorAggAccordion${index} [data-test-subj="defaultEditorAggSelect"]` + ); + await comboBox.setElement(aggSelect, agg); + + const fieldSelect = await find.byCssSelector( + `#visEditorAggAccordion${index} [data-test-subj="visDefaultEditorField"]` + ); + // select our field + await comboBox.setElement(fieldSelect, field); + // enter custom label + await this.setCustomLabel(label, index); + } + + async getField() { + return await comboBox.getComboBoxSelectedOptions('visDefaultEditorField'); + } + + async sizeUpEditor() { + await testSubjects.click('visualizeEditorResizer'); + await browser.pressKeys(browser.keys.ARROW_RIGHT); + } + + async clickOptions() { + await find.clickByPartialLinkText('Options'); + await header.waitUntilLoadingHasFinished(); + } + + async toggleDisabledAgg(agg: string) { + await testSubjects.click(`visEditorAggAccordion${agg} > ~toggleDisableAggregationBtn`); + await header.waitUntilLoadingHasFinished(); + } + + async toggleAggregationEditor(agg: string) { + await find.clickByCssSelector( + `[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button` + ); + await header.waitUntilLoadingHasFinished(); + } + + async toggleOtherBucket(agg = 2) { + return await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`); + } + + async toggleMissingBucket(agg = 2) { + return await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`); + } + + async toggleScaleMetrics() { + return await testSubjects.click('scaleMetricsSwitch'); + } + + async toggleAutoMode() { + await testSubjects.click('visualizeEditorAutoButton'); + } + + async isApplyEnabled() { + const applyButton = await testSubjects.find('visualizeEditorRenderButton'); + return await applyButton.isEnabled(); + } + + async toggleAccordion(id: string, toState = 'true') { + const toggle = await find.byCssSelector(`button[aria-controls="${id}"]`); + const toggleOpen = await toggle.getAttribute('aria-expanded'); + log.debug(`toggle ${id} expand = ${toggleOpen}`); + if (toggleOpen !== toState) { + log.debug(`toggle ${id} click()`); + await toggle.click(); + } + } + + async toggleOpenEditor(index: number, toState = 'true') { + // index, see selectYAxisAggregation + await this.toggleAccordion(`visEditorAggAccordion${index}`, toState); + } + + async toggleAdvancedParams(aggId: string) { + const accordion = await testSubjects.find(`advancedParams-${aggId}`); + const accordionButton = await find.descendantDisplayedByCssSelector('button', accordion); + await accordionButton.click(); + } + + async clickReset() { + await testSubjects.click('visualizeEditorResetButton'); + await visChart.waitForVisualization(); + } + + async clickYAxisOptions(axisId: string) { + await testSubjects.click(`toggleYAxisOptions-${axisId}`); + } + + async clickYAxisAdvancedOptions(axisId: string) { + await testSubjects.click(`toggleYAxisAdvancedOptions-${axisId}`); + } + + async changeYAxisFilterLabelsCheckbox(axisId: string, enabled: boolean) { + const selector = `yAxisFilterLabelsCheckbox-${axisId}`; + await testSubjects.setCheckbox(selector, enabled ? 'check' : 'uncheck'); + } + + async setSize(newValue: string, aggId: string) { + const dataTestSubj = aggId + ? `visEditorAggAccordion${aggId} > sizeParamEditor` + : 'sizeParamEditor'; + await testSubjects.setValue(dataTestSubj, String(newValue)); + } + + async selectChartMode(mode: string) { + const selector = await find.byCssSelector(`#seriesMode0 > option[value="${mode}"]`); + await selector.click(); + } + + async selectYAxisScaleType(axisId: string, scaleType: string) { + const selectElement = await testSubjects.find(`scaleSelectYAxis-${axisId}`); + const selector = await selectElement.findByCssSelector(`option[value="${scaleType}"]`); + await selector.click(); + } + + async selectYAxisMode(mode: string) { + const selector = await find.byCssSelector(`#valueAxisMode0 > option[value="${mode}"]`); + await selector.click(); + } + + async setAxisExtents(min: string, max: string, axisId = 'ValueAxis-1') { + await this.toggleAccordion(`yAxisAccordion${axisId}`); + await this.toggleAccordion(`yAxisOptionsAccordion${axisId}`); + + await testSubjects.click('yAxisSetYExtents'); + await testSubjects.setValue('yAxisYExtentsMax', max); + await testSubjects.setValue('yAxisYExtentsMin', min); + } + + async selectAggregateWith(fieldValue: string) { + await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue); + } + + async setInterval(newValue: string) { + log.debug(`Visualize.setInterval(${newValue})`); + return await comboBox.set('visEditorInterval', newValue); + } + + async getInterval() { + return await comboBox.getComboBoxSelectedOptions('visEditorInterval'); + } + + async setCustomInterval(newValue: string) { + log.debug(`Visualize.setCustomInterval(${newValue})`); + return await comboBox.setCustom('visEditorInterval', newValue); + } + + async setNumericInterval(newValue: string, options = { append: false }, agg = 2) { + if (options.append) { + await testSubjects.append(`visEditorInterval${agg}`, String(newValue)); + } else { + await testSubjects.setValue(`visEditorInterval${agg}`, String(newValue)); + } + } + + async getNumericInterval(agg = 2) { + return await testSubjects.getAttribute(`visEditorInterval${agg}`, 'value'); + } + + async clickMetricEditor() { + await find.clickByCssSelector('[group-name="metrics"] .euiAccordion__button'); + } + + async clickMetricByIndex(index: number) { + log.debug(`clickMetricByIndex(${index})`); + const metrics = await find.allByCssSelector( + '[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container' + ); + expect(metrics.length).greaterThan(index); + await metrics[index].click(); + } + + async setSelectByOptionText(selectId: string, optionText: string) { + const selectField = await find.byCssSelector(`#${selectId}`); + const options = await find.allByCssSelector(`#${selectId} > option`); + const $ = await selectField.parseDomContent(); + const optionsText = $('option') + .toArray() + .map(option => $(option).text()); + const optionIndex = optionsText.indexOf(optionText); + + if (optionIndex === -1) { + throw new Error( + `Unable to find option '${optionText}' in select ${selectId}. Available options: ${optionsText.join( + ',' + )}` + ); + } + await options[optionIndex].click(); + } + } + + return new VisualizeEditorPage(); +} diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js deleted file mode 100644 index 7b7d40b2dc9e8..0000000000000 --- a/test/functional/page_objects/visualize_page.js +++ /dev/null @@ -1,1400 +0,0 @@ -/* - * 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 { VisualizeConstants } from '../../../src/legacy/core_plugins/kibana/public/visualize/np_ready/visualize_constants'; -import Bluebird from 'bluebird'; -import expect from '@kbn/expect'; - -export function VisualizePageProvider({ getService, getPageObjects, updateBaselines }) { - const browser = getService('browser'); - const config = getService('config'); - const testSubjects = getService('testSubjects'); - const retry = getService('retry'); - const find = getService('find'); - const log = getService('log'); - const inspector = getService('inspector'); - const screenshot = getService('screenshots'); - const table = getService('table'); - const globalNav = getService('globalNav'); - const PageObjects = getPageObjects(['common', 'header']); - const defaultFindTimeout = config.get('timeouts.find'); - const comboBox = getService('comboBox'); - - class VisualizePage { - get index() { - return { - LOGSTASH_TIME_BASED: 'logstash-*', - LOGSTASH_NON_TIME_BASED: 'logstash*', - }; - } - - async gotoVisualizationLandingPage() { - log.debug('gotoVisualizationLandingPage'); - await PageObjects.common.navigateToApp('visualize'); - } - - async checkListingSelectAllCheckbox() { - const element = await testSubjects.find('checkboxSelectAll'); - const isSelected = await element.isSelected(); - if (!isSelected) { - log.debug(`checking checkbox "checkboxSelectAll"`); - await testSubjects.click('checkboxSelectAll'); - } - } - - async navigateToNewVisualization() { - log.debug('navigateToApp visualize'); - await PageObjects.common.navigateToApp('visualize'); - await this.clickNewVisualization(); - await this.waitForVisualizationSelectPage(); - } - - async clickNewVisualization() { - // newItemButton button is only visible when there are items in the listing table is displayed. - let exists = await testSubjects.exists('newItemButton'); - if (exists) { - return await testSubjects.click('newItemButton'); - } - - exists = await testSubjects.exists('createVisualizationPromptButton'); - // no viz exist, click createVisualizationPromptButton to create new dashboard - return await this.createVisualizationPromptButton(); - } - - /* - This method should use retry loop to delete visualizations from multiple pages until we find the createVisualizationPromptButton. - Perhaps it *could* set the page size larger than the default 10, but it might still need to loop anyway. - */ - async deleteAllVisualizations() { - await retry.try(async () => { - await this.checkListingSelectAllCheckbox(); - await this.clickDeleteSelected(); - await PageObjects.common.clickConfirmOnModal(); - await testSubjects.find('createVisualizationPromptButton'); - }); - } - - async createSimpleMarkdownViz(vizName) { - await this.gotoVisualizationLandingPage(); - await this.navigateToNewVisualization(); - await this.clickMarkdownWidget(); - await this.setMarkdownTxt(vizName); - await this.clickGo(); - await this.saveVisualization(vizName); - } - - async createVisualizationPromptButton() { - await testSubjects.click('createVisualizationPromptButton'); - } - - async getSearchFilter() { - const searchFilter = await find.allByCssSelector('.euiFieldSearch'); - return searchFilter[0]; - } - - async clearFilter() { - const searchFilter = await this.getSearchFilter(); - await searchFilter.clearValue(); - await searchFilter.click(); - } - - async searchForItemWithName(name) { - log.debug(`searchForItemWithName: ${name}`); - - await retry.try(async () => { - const searchFilter = await this.getSearchFilter(); - await searchFilter.clearValue(); - await searchFilter.click(); - // Note: this replacement of - to space is to preserve original logic but I'm not sure why or if it's needed. - await searchFilter.type(name.replace('-', ' ')); - await PageObjects.common.pressEnterKey(); - }); - - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async clickDeleteSelected() { - await testSubjects.click('deleteSelectedItems'); - } - - async getCreatePromptExists() { - log.debug('getCreatePromptExists'); - return await testSubjects.exists('createVisualizationPromptButton'); - } - - async getCountOfItemsInListingTable() { - const elements = await find.allByCssSelector('[data-test-subj^="visListingTitleLink"]'); - return elements.length; - } - - async waitForVisualizationSelectPage() { - await retry.try(async () => { - const visualizeSelectTypePage = await testSubjects.find('visNewDialogTypes'); - if (!(await visualizeSelectTypePage.isDisplayed())) { - throw new Error('wait for visualization select page'); - } - }); - } - - async clickVisType(type) { - await testSubjects.click(`visType-${type}`); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async clickAreaChart() { - await this.clickVisType('area'); - } - - async clickDataTable() { - await this.clickVisType('table'); - } - - async clickLineChart() { - await this.clickVisType('line'); - } - - async clickRegionMap() { - await this.clickVisType('region_map'); - } - - async clickMarkdownWidget() { - await this.clickVisType('markdown'); - } - - // clickBucket(bucketName) 'X-axis', 'Split area', 'Split chart' - async clickBucket(bucketName, type = 'buckets') { - await testSubjects.click(`visEditorAdd_${type}`); - await find.clickByCssSelector(`[data-test-subj="visEditorAdd_${type}_${bucketName}"`); - } - - async clickMetric() { - await this.clickVisType('metric'); - } - - async clickGauge() { - await this.clickVisType('gauge'); - } - - async clickPieChart() { - await this.clickVisType('pie'); - } - - async clickTileMap() { - await this.clickVisType('tile_map'); - } - - async clickTagCloud() { - await this.clickVisType('tagcloud'); - } - - async clickVega() { - await this.clickVisType('vega'); - } - - async clickVisualBuilder() { - await this.clickVisType('metrics'); - } - - async clickEditorSidebarCollapse() { - await testSubjects.click('collapseSideBarButton'); - } - - async selectTagCloudTag(tagDisplayText) { - await testSubjects.click(tagDisplayText); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async getTextTag() { - await this.waitForVisualization(); - const elements = await find.allByCssSelector('text'); - return await Promise.all(elements.map(async element => await element.getVisibleText())); - } - - async getTextSizes() { - const tags = await find.allByCssSelector('text'); - async function returnTagSize(tag) { - const style = await tag.getAttribute('style'); - return style.match(/font-size: ([^;]*);/)[1]; - } - return await Promise.all(tags.map(returnTagSize)); - } - - async clickVerticalBarChart() { - await this.clickVisType('histogram'); - } - - async clickHeatmapChart() { - await this.clickVisType('heatmap'); - } - - async clickInputControlVis() { - await this.clickVisType('input_control_vis'); - } - - async getChartTypes() { - const chartTypeField = await testSubjects.find('visNewDialogTypes'); - const chartTypes = await chartTypeField.findAllByTagName('button'); - async function getChartType(chart) { - const label = await testSubjects.findDescendant('visTypeTitle', chart); - return await label.getVisibleText(); - } - const getChartTypesPromises = chartTypes.map(getChartType); - return await Promise.all(getChartTypesPromises); - } - - async selectVisSourceIfRequired() { - log.debug('selectVisSourceIfRequired'); - const selectPage = await testSubjects.findAll('visualizeSelectSearch'); - if (selectPage.length) { - log.debug('a search is required for this visualization'); - await this.clickNewSearch(); - } - } - - async isBetaInfoShown() { - return await testSubjects.exists('betaVisInfo'); - } - - async getBetaTypeLinks() { - return await find.allByCssSelector('[data-vis-stage="beta"]'); - } - - async getExperimentalTypeLinks() { - return await find.allByCssSelector('[data-vis-stage="experimental"]'); - } - - async isExperimentalInfoShown() { - return await testSubjects.exists('experimentalVisInfo'); - } - - async getExperimentalInfo() { - return await testSubjects.find('experimentalVisInfo'); - } - - async clickAbsoluteButton() { - await find.clickByCssSelector( - 'ul.nav.nav-pills.nav-stacked.kbn-timepicker-modes:contains("absolute")', - defaultFindTimeout * 2 - ); - } - - async clickDropPartialBuckets() { - return await testSubjects.click('dropPartialBucketsCheckbox'); - } - - async setMarkdownTxt(markdownTxt) { - const input = await testSubjects.find('markdownTextarea'); - await input.clearValue(); - await input.type(markdownTxt); - } - - async getMarkdownText() { - const markdownContainer = await testSubjects.find('markdownBody'); - return markdownContainer.getVisibleText(); - } - - async getMarkdownBodyDescendentText(selector) { - const markdownContainer = await testSubjects.find('markdownBody'); - const element = await find.descendantDisplayedByCssSelector(selector, markdownContainer); - return element.getVisibleText(); - } - - 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 Bluebird.map(lines, l => l.getVisibleText()); - return linesText.join('\n'); - } - - async getVegaViewContainer() { - return await find.byCssSelector('div.vgaVis__view'); - } - - async getVegaControlContainer() { - return await find.byCssSelector('div.vgaVis__controls'); - } - - async addInputControl(type) { - if (type) { - const selectInput = await testSubjects.find('selectControlType'); - await selectInput.type(type); - } - await testSubjects.click('inputControlEditorAddBtn'); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async inputControlClear() { - await testSubjects.click('inputControlClearBtn'); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async isChecked(selector) { - const checkbox = await testSubjects.find(selector); - return await checkbox.isSelected(); - } - - async checkCheckbox(selector) { - const isChecked = await this.isChecked(selector); - if (!isChecked) { - log.debug(`checking checkbox ${selector}`); - await testSubjects.click(selector); - } - } - - async uncheckCheckbox(selector) { - const isChecked = await this.isChecked(selector); - if (isChecked) { - log.debug(`unchecking checkbox ${selector}`); - await testSubjects.click(selector); - } - } - - async isSwitchChecked(selector) { - const checkbox = await testSubjects.find(selector); - const isChecked = await checkbox.getAttribute('aria-checked'); - return isChecked === 'true'; - } - - async checkSwitch(selector) { - const isChecked = await this.isSwitchChecked(selector); - if (!isChecked) { - log.debug(`checking switch ${selector}`); - await testSubjects.click(selector); - } - } - - async uncheckSwitch(selector) { - const isChecked = await this.isSwitchChecked(selector); - if (isChecked) { - log.debug(`unchecking switch ${selector}`); - await testSubjects.click(selector); - } - } - - async setSelectByOptionText(selectId, optionText) { - const selectField = await find.byCssSelector(`#${selectId}`); - const options = await find.allByCssSelector(`#${selectId} > option`); - const $ = await selectField.parseDomContent(); - const optionsText = $('option') - .toArray() - .map(option => $(option).text()); - const optionIndex = optionsText.indexOf(optionText); - - if (optionIndex === -1) { - throw new Error( - `Unable to find option '${optionText}' in select ${selectId}. Available options: ${optionsText.join( - ',' - )}` - ); - } - await options[optionIndex].click(); - } - - async getSideEditorExists() { - return await find.existsByCssSelector('.collapsible-sidebar'); - } - - async setInspectorTablePageSize(size) { - const panel = await testSubjects.find('inspectorPanel'); - await find.clickByButtonText('Rows per page: 20', panel); - // The buttons for setting table page size are in a popover element. This popover - // element appears as if it's part of the inspectorPanel but it's really attached - // to the body element by a portal. - const tableSizesPopover = await find.byCssSelector('.euiPanel'); - await find.clickByButtonText(`${size} rows`, tableSizesPopover); - } - - async getMetric() { - const elements = await find.allByCssSelector( - '[data-test-subj="visualizationLoader"] .mtrVis__container' - ); - const values = await Promise.all( - elements.map(async element => { - const text = await element.getVisibleText(); - return text; - }) - ); - return values - .filter(item => item.length > 0) - .reduce((arr, item) => arr.concat(item.split('\n')), []); - } - - async getGaugeValue() { - const elements = await find.allByCssSelector( - '[data-test-subj="visualizationLoader"] .chart svg text' - ); - const values = await Promise.all( - elements.map(async element => { - const text = await element.getVisibleText(); - return text; - }) - ); - return values.filter(item => item.length > 0); - } - - async clickMetricEditor() { - await find.clickByCssSelector('[group-name="metrics"] .euiAccordion__button'); - } - - async clickMetricByIndex(index) { - log.debug(`clickMetricByIndex(${index})`); - const metrics = await find.allByCssSelector( - '[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container' - ); - expect(metrics.length).greaterThan(index); - await metrics[index].click(); - } - - async clickNewSearch(indexPattern = this.index.LOGSTASH_TIME_BASED) { - await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async clickSavedSearch(savedSearchName) { - await testSubjects.click(`savedObjectTitle${savedSearchName.split(' ').join('-')}`); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async clickUnlinkSavedSearch() { - await testSubjects.doubleClick('unlinkSavedSearch'); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async setValue(newValue) { - const input = await find.byCssSelector('[data-test-subj="visEditorPercentileRanks"] input'); - await input.clearValue(); - await input.type(newValue); - } - - async selectSearch(searchName) { - await find.clickByLinkText(searchName); - } - - async getErrorMessage() { - const element = await find.byCssSelector('.item>h4'); - return await element.getVisibleText(); - } - - async selectAggregation(myString, groupName = 'buckets', childAggregationType = null) { - const comboBoxElement = await find.byCssSelector(` - [group-name="${groupName}"] - [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen - ${childAggregationType ? '.visEditorAgg__subAgg' : ''} - [data-test-subj="defaultEditorAggSelect"] - `); - - await comboBox.setElement(comboBoxElement, myString); - await PageObjects.common.sleep(500); - } - - async applyFilters() { - return await testSubjects.click('filterBarApplyFilters'); - } - /** - * Set the test for a filter aggregation. - * @param {*} filterValue the string value of the filter - * @param {*} filterIndex used when multiple filters are configured on the same aggregation - * @param {*} aggregationId the ID if the aggregation. On Tests, it start at from 2 - */ - async setFilterAggregationValue(filterValue, filterIndex = 0, aggregationId = 2) { - await testSubjects.setValue( - `visEditorFilterInput_${aggregationId}_${filterIndex}`, - filterValue - ); - } - - async addNewFilterAggregation() { - return await testSubjects.click('visEditorAddFilterButton'); - } - - async toggleOpenEditor(index, toState = 'true') { - // index, see selectYAxisAggregation - await this.toggleAccordion(`visEditorAggAccordion${index}`, toState); - } - - async toggleAccordion(id, toState = 'true') { - const toggle = await find.byCssSelector(`button[aria-controls="${id}"]`); - const toggleOpen = await toggle.getAttribute('aria-expanded'); - log.debug(`toggle ${id} expand = ${toggleOpen}`); - if (toggleOpen !== toState) { - log.debug(`toggle ${id} click()`); - await toggle.click(); - } - } - - async toggleAdvancedParams(aggId) { - const accordion = await testSubjects.find(`advancedParams-${aggId}`); - const accordionButton = await find.descendantDisplayedByCssSelector('button', accordion); - await accordionButton.click(); - } - - async selectYAxisAggregation(agg, field, label, index = 1) { - // index starts on the first "count" metric at 1 - // Each new metric or aggregation added to a visualization gets the next index. - // So to modify a metric or aggregation tests need to keep track of the - // order they are added. - await this.toggleOpenEditor(index); - - // select our agg - const aggSelect = await find.byCssSelector( - `#visEditorAggAccordion${index} [data-test-subj="defaultEditorAggSelect"]` - ); - await comboBox.setElement(aggSelect, agg); - - const fieldSelect = await find.byCssSelector( - `#visEditorAggAccordion${index} [data-test-subj="visDefaultEditorField"]` - ); - // select our field - await comboBox.setElement(fieldSelect, field); - // enter custom label - await this.setCustomLabel(label, index); - } - - async setCustomLabel(label, index = 1) { - const customLabel = await testSubjects.find(`visEditorStringInput${index}customLabel`); - customLabel.type(label); - } - - async setAxisExtents(min, max, axisId = 'ValueAxis-1') { - await this.toggleAccordion(`yAxisAccordion${axisId}`); - await this.toggleAccordion(`yAxisOptionsAccordion${axisId}`); - - await testSubjects.click('yAxisSetYExtents'); - await testSubjects.setValue('yAxisYExtentsMax', max); - await testSubjects.setValue('yAxisYExtentsMin', min); - } - - async getField() { - return await comboBox.getComboBoxSelectedOptions('visDefaultEditorField'); - } - - async selectField(fieldValue, groupName = 'buckets', childAggregationType = null) { - log.debug(`selectField ${fieldValue}`); - const selector = ` - [group-name="${groupName}"] - [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen - [data-test-subj="visAggEditorParams"] - ${childAggregationType ? '.visEditorAgg__subAgg' : ''} - [data-test-subj="visDefaultEditorField"] - `; - const fieldEl = await find.byCssSelector(selector); - await comboBox.setElement(fieldEl, fieldValue); - } - - async selectAggregateWith(fieldValue) { - await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue); - } - - async getInterval() { - return await comboBox.getComboBoxSelectedOptions('visEditorInterval'); - } - - async setInterval(newValue) { - log.debug(`Visualize.setInterval(${newValue})`); - return await comboBox.set('visEditorInterval', newValue); - } - - async setCustomInterval(newValue) { - log.debug(`Visualize.setCustomInterval(${newValue})`); - return await comboBox.setCustom('visEditorInterval', newValue); - } - - async getNumericInterval(agg = 2) { - return await testSubjects.getAttribute(`visEditorInterval${agg}`, 'value'); - } - - async setNumericInterval(newValue, { append } = {}, agg = 2) { - if (append) { - await testSubjects.append(`visEditorInterval${agg}`, String(newValue)); - } else { - await testSubjects.setValue(`visEditorInterval${agg}`, String(newValue)); - } - } - - async setSize(newValue, aggId) { - const dataTestSubj = aggId - ? `visEditorAggAccordion${aggId} > sizeParamEditor` - : 'sizeParamEditor'; - await testSubjects.setValue(dataTestSubj, String(newValue)); - } - - async toggleDisabledAgg(agg) { - await testSubjects.click(`visEditorAggAccordion${agg} > ~toggleDisableAggregationBtn`); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async toggleAggregationEditor(agg) { - await find.clickByCssSelector( - `[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button` - ); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async toggleOtherBucket(agg = 2) { - return await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`); - } - - async toggleMissingBucket(agg = 2) { - return await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`); - } - - async toggleScaleMetrics() { - return await testSubjects.click('scaleMetricsSwitch'); - } - - async isApplyEnabled() { - const applyButton = await testSubjects.find('visualizeEditorRenderButton'); - return await applyButton.isEnabled(); - } - - async clickGo() { - const prevRenderingCount = await this.getVisualizationRenderingCount(); - log.debug(`Before Rendering count ${prevRenderingCount}`); - await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton'); - await this.waitForRenderingCount(prevRenderingCount + 1); - } - - async clickReset() { - await testSubjects.click('visualizeEditorResetButton'); - await this.waitForVisualization(); - } - - async toggleAutoMode() { - await testSubjects.click('visualizeEditorAutoButton'); - } - - async sizeUpEditor() { - await testSubjects.click('visualizeEditorResizer'); - await browser.pressKeys(browser.keys.ARROW_RIGHT); - } - - async clickOptions() { - await find.clickByPartialLinkText('Options'); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async changeHeatmapColorNumbers(value = 6) { - const input = await testSubjects.find(`heatmapColorsNumber`); - await input.clearValueWithKeyboard(); - await input.type(`${value}`); - } - - async clickMetricsAndAxes() { - await testSubjects.click('visEditorTabadvanced'); - } - - async clickOptionsTab() { - await testSubjects.click('visEditorTaboptions'); - } - - async clickEnableCustomRanges() { - await testSubjects.click('heatmapUseCustomRanges'); - } - - async clickAddRange() { - await testSubjects.click(`heatmapColorRange__addRangeButton`); - } - - async setCustomRangeByIndex(index, from, to) { - await testSubjects.setValue(`heatmapColorRange${index}__from`, from); - await testSubjects.setValue(`heatmapColorRange${index}__to`, to); - } - - async clickYAxisOptions(axisId) { - await testSubjects.click(`toggleYAxisOptions-${axisId}`); - } - - async clickYAxisAdvancedOptions(axisId) { - await testSubjects.click(`toggleYAxisAdvancedOptions-${axisId}`); - } - - async changeYAxisFilterLabelsCheckbox(axisId, enabled) { - const selector = `yAxisFilterLabelsCheckbox-${axisId}`; - enabled ? await this.checkCheckbox(selector) : await this.uncheckCheckbox(selector); - } - - async selectChartMode(mode) { - const selector = await find.byCssSelector(`#seriesMode0 > option[value="${mode}"]`); - await selector.click(); - } - - async selectYAxisScaleType(axisId, scaleType) { - const selectElement = await testSubjects.find(`scaleSelectYAxis-${axisId}`); - const selector = await selectElement.findByCssSelector(`option[value="${scaleType}"]`); - await selector.click(); - } - - async selectYAxisMode(mode) { - const selector = await find.byCssSelector(`#valueAxisMode0 > option[value="${mode}"]`); - await selector.click(); - } - - async clickData() { - await testSubjects.click('visualizeEditDataLink'); - } - - async clickVisEditorTab(tabName) { - await testSubjects.click('visEditorTab' + tabName); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async selectWMS() { - await find.clickByCssSelector('input[name="wms.enabled"]'); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async ensureSavePanelOpen() { - log.debug('ensureSavePanelOpen'); - await PageObjects.header.waitUntilLoadingHasFinished(); - const isOpen = await testSubjects.exists('savedObjectSaveModal', { timeout: 5000 }); - if (!isOpen) { - await testSubjects.click('visualizeSaveButton'); - } - } - - async saveVisualization(vizName, { saveAsNew = false } = {}) { - await this.ensureSavePanelOpen(); - await testSubjects.setValue('savedObjectTitle', vizName); - if (saveAsNew) { - log.debug('Check save as new visualization'); - await testSubjects.click('saveAsNewCheckbox'); - } - log.debug('Click Save Visualization button'); - - await testSubjects.click('confirmSaveSavedObjectButton'); - - // Confirm that the Visualization has actually been saved - await testSubjects.existOrFail('saveVisualizationSuccess'); - const message = await PageObjects.common.closeToast(); - await PageObjects.header.waitUntilLoadingHasFinished(); - await PageObjects.common.waitForSaveModalToClose(); - - return message; - } - - async saveVisualizationExpectSuccess(vizName, { saveAsNew = false } = {}) { - const saveMessage = await this.saveVisualization(vizName, { saveAsNew }); - if (!saveMessage) { - throw new Error( - `Expected saveVisualization to respond with the saveMessage from the toast, got ${saveMessage}` - ); - } - } - - async saveVisualizationExpectSuccessAndBreadcrumb(vizName, { saveAsNew = false } = {}) { - await this.saveVisualizationExpectSuccess(vizName, { saveAsNew }); - await retry.waitFor( - 'last breadcrumb to have new vis name', - async () => (await globalNav.getLastBreadcrumb()) === vizName - ); - } - - async clickLoadSavedVisButton() { - // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb - // element as a child instead of building the breadcrumbs dynamically. - await find.clickByCssSelector('[href="#/visualize"]'); - } - - async filterVisByName(vizName) { - const input = await find.byCssSelector('input[name="filter"]'); - await input.click(); - // can't uses dashes in saved visualizations when filtering - // or extended character sets - // https://github.com/elastic/kibana/issues/6300 - await input.type(vizName.replace('-', ' ')); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - - async clickVisualizationByName(vizName) { - log.debug('clickVisualizationByLinkText(' + vizName + ')'); - return find.clickByPartialLinkText(vizName); - } - - async loadSavedVisualization(vizName, { navigateToVisualize = true } = {}) { - if (navigateToVisualize) { - await this.clickLoadSavedVisButton(); - } - await this.openSavedVisualization(vizName); - } - - async openSavedVisualization(vizName) { - await this.clickVisualizationByName(vizName); - await PageObjects.header.waitUntilLoadingHasFinished(); - } - // vis_chart service - // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ - async getXAxisLabels() { - const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom'); - const $ = await xAxis.parseDomContent(); - return $('.x > g > text') - .toArray() - .map(tick => - $(tick) - .text() - .trim() - ); - } - - async getYAxisLabels() { - const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left'); - const $ = await yAxis.parseDomContent(); - return $('.y > g > text') - .toArray() - .map(tick => - $(tick) - .text() - .trim() - ); - } - - /** - * 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. - */ - async expectVisToMatchScreenshot(name, 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 this.clickEditorSidebarCollapse(); - await this.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 this.clickEditorSidebarCollapse(); - await this.waitForVisualizationRenderingStabilized(); - expect(percentDifference).to.be.lessThan(opts.threshold); - } - - /* - ** This method gets the chart data and scales it based on chart height and label. - ** Returns an array of height values - */ - async getAreaChartData(dataLabel, axis = 'ValueAxis-1') { - const yAxisRatio = await this.getChartYAxisRatio(axis); - - const rectangle = await find.byCssSelector('rect.background'); - const yAxisHeight = await rectangle.getAttribute('height'); - log.debug(`height --------- ${yAxisHeight}`); - - const path = await retry.try( - async () => - await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) - ); - const data = await path.getAttribute('d'); - log.debug(data); - // This area chart data starts with a 'M'ove to a x,y location, followed - // by a bunch of 'L'ines from that point to the next. Those points are - // the values we're going to use to calculate the data values we're testing. - // So git rid of the one 'M' and split the rest on the 'L's. - const tempArray = data - .replace('M ', '') - .replace('M', '') - .replace(/ L /g, 'L') - .replace(/ /g, ',') - .split('L'); - const chartSections = tempArray.length / 2; - // log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel); - const chartData = []; - for (let i = 0; i < chartSections; i++) { - chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) * yAxisRatio); - log.debug('chartData[i] =' + chartData[i]); - } - return chartData; - } - - /* - ** This method returns the paths that compose an area chart. - */ - async getAreaChartPaths(dataLabel) { - const path = await retry.try( - async () => - await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) - ); - const data = await path.getAttribute('d'); - log.debug(data); - // This area chart data starts with a 'M'ove to a x,y location, followed - // by a bunch of 'L'ines from that point to the next. Those points are - // the values we're going to use to calculate the data values we're testing. - // So git rid of the one 'M' and split the rest on the 'L's. - return data.split('L'); - } - - // The current test shows dots, not a line. This function gets the dots and normalizes their height. - async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { - // 1). get the range/pixel ratio - const yAxisRatio = await this.getChartYAxisRatio(axis); - // 2). find and save the y-axis pixel size (the chart height) - const rectangle = await find.byCssSelector('clipPath rect'); - const yAxisHeight = await rectangle.getAttribute('height'); - // 3). get the visWrapper__chart elements - const chartTypes = await retry.try( - async () => - await find.allByCssSelector( - `.visWrapper__chart circle[data-label="${dataLabel}"][fill-opacity="1"]`, - defaultFindTimeout * 2 - ) - ); - // 4). for each chart element, find the green circle, then the cy position - const chartData = await Promise.all( - chartTypes.map(async chart => { - const cy = await chart.getAttribute('cy'); - // the point_series_options test has data in the billions range and - // getting 11 digits of precision with these calculations is very hard - return Math.round(((yAxisHeight - cy) * yAxisRatio).toPrecision(6)); - }) - ); - - return chartData; - } - - // this is ALMOST identical to DiscoverPage.getBarChartData - async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { - // 1). get the range/pixel ratio - const yAxisRatio = await this.getChartYAxisRatio(axis); - // 3). get the visWrapper__chart elements - const svg = await find.byCssSelector('div.chart'); - const $ = await svg.parseDomContent(); - const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`) - .toArray() - .map(chart => { - const barHeight = $(chart).attr('height'); - return Math.round(barHeight * yAxisRatio); - }); - - return chartData; - } - - // Returns value per pixel - async getChartYAxisRatio(axis = 'ValueAxis-1') { - // 1). get the maximum chart Y-Axis marker value and Y position - const maxYAxisChartMarker = await retry.try( - async () => - await find.byCssSelector( - `div.visAxis__splitAxes--y > div > svg > g.${axis} > g:last-of-type.tick` - ) - ); - const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, ''); - const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y; - log.debug(`maxYLabel = ${maxYLabel}, maxYLabelYPosition = ${maxYLabelYPosition}`); - - // 2). get the minimum chart Y-Axis marker value and Y position - const minYAxisChartMarker = await find.byCssSelector( - 'div.visAxis__column--y.visAxis__column--left > div > div > svg:nth-child(2) > g > g:nth-child(1).tick' - ); - const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', ''); - const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y; - return (maxYLabel - minYLabel) / (minYLabelYPosition - maxYLabelYPosition); - } - - async getHeatmapData() { - const chartTypes = await retry.try( - async () => await find.allByCssSelector('svg > g > g.series rect', defaultFindTimeout * 2) - ); - log.debug('rects=' + chartTypes); - async function getChartType(chart) { - return await chart.getAttribute('data-label'); - } - const getChartTypesPromises = chartTypes.map(getChartType); - return await Promise.all(getChartTypesPromises); - } - - // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ - - async expectError() { - return await testSubjects.existOrFail('visLibVisualizeError'); - } - - async getChartAreaWidth() { - const rect = await retry.try(async () => find.byCssSelector('clipPath rect')); - return await rect.getAttribute('width'); - } - - async getChartAreaHeight() { - const rect = await retry.try(async () => find.byCssSelector('clipPath rect')); - return await rect.getAttribute('height'); - } - - /** - * If you are writing new tests, you should rather look into getTableVisContent method instead. - */ - async getTableVisData() { - return await testSubjects.getVisibleText('paginated-table-body'); - } - - /** - * This function is the newer function to retrieve data from within a table visualization. - * It uses a better return format, than the old getTableVisData, by properly splitting - * cell values into arrays. Please use this function for newer tests. - */ - async getTableVisContent({ stripEmptyRows = true } = {}) { - return await retry.try(async () => { - const container = await testSubjects.find('tableVis'); - const allTables = await testSubjects.findAllDescendant('paginated-table-body', container); - - if (allTables.length === 0) { - return []; - } - - const allData = await Promise.all( - allTables.map(async t => { - let data = await table.getDataFromElement(t); - if (stripEmptyRows) { - data = data.filter(row => row.length > 0 && row.some(cell => cell.trim().length > 0)); - } - return data; - }) - ); - - if (allTables.length === 1) { - // If there was only one table we return only the data for that table - // This prevents an unnecessary array around that single table, which - // is the case we have in most tests. - return allData[0]; - } - - return allData; - }); - } - - async toggleIsFilteredByCollarCheckbox() { - await testSubjects.click('isFilteredByCollarCheckbox'); - } - - async setIsFilteredByCollarCheckbox(value = true) { - await retry.try(async () => { - const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox'); - if (isChecked !== value) { - await testSubjects.click('isFilteredByCollarCheckbox'); - throw new Error('isFilteredByCollar not set correctly'); - } - }); - } - - async getMarkdownData() { - const markdown = await retry.try(async () => find.byCssSelector('visualize')); - return await markdown.getVisibleText(); - } - - async getVisualizationRenderingCount() { - const visualizationLoader = await testSubjects.find('visualizationLoader'); - const renderingCount = await visualizationLoader.getAttribute('data-rendering-count'); - return Number(renderingCount); - } - - async waitForRenderingCount(minimumCount = 1) { - await retry.waitFor( - `rendering count to be greater than or equal to [${minimumCount}]`, - async () => { - const currentRenderingCount = await this.getVisualizationRenderingCount(); - log.debug(`-- currentRenderingCount=${currentRenderingCount}`); - return currentRenderingCount >= minimumCount; - } - ); - } - - async waitForVisualizationRenderingStabilized() { - //assuming rendering is done when data-rendering-count is constant within 1000 ms - await retry.waitFor('rendering count to stabilize', async () => { - const firstCount = await this.getVisualizationRenderingCount(); - log.debug(`-- firstCount=${firstCount}`); - - await PageObjects.common.sleep(1000); - - const secondCount = await this.getVisualizationRenderingCount(); - log.debug(`-- secondCount=${secondCount}`); - - return firstCount === secondCount; - }); - } - - async waitForVisualization() { - await this.waitForVisualizationRenderingStabilized(); - return await find.byCssSelector('.visualization'); - } - - async waitForVisualizationSavedToastGone() { - return await testSubjects.waitForDeleted('saveVisualizationSuccess'); - } - - async getZoomSelectors(zoomSelector) { - return await find.allByCssSelector(zoomSelector); - } - - async clickMapButton(zoomSelector, waitForLoading) { - await retry.try(async () => { - const zooms = await this.getZoomSelectors(zoomSelector); - await Promise.all(zooms.map(async zoom => await zoom.click())); - if (waitForLoading) { - await PageObjects.header.waitUntilLoadingHasFinished(); - } - }); - } - - async getVisualizationRequest() { - log.debug('getVisualizationRequest'); - await inspector.open(); - await testSubjects.click('inspectorViewChooser'); - await testSubjects.click('inspectorViewChooserRequests'); - await testSubjects.click('inspectorRequestDetailRequest'); - return await testSubjects.getVisibleText('inspectorRequestBody'); - } - - async getVisualizationResponse() { - log.debug('getVisualizationResponse'); - await inspector.open(); - await testSubjects.click('inspectorViewChooser'); - await testSubjects.click('inspectorViewChooserRequests'); - await testSubjects.click('inspectorRequestDetailResponse'); - return await testSubjects.getVisibleText('inspectorResponseBody'); - } - - async getMapBounds() { - const request = await this.getVisualizationRequest(); - const requestObject = JSON.parse(request); - return requestObject.aggs.filter_agg.filter.geo_bounding_box['geo.coordinates']; - } - - async clickMapZoomIn(waitForLoading = true) { - await this.clickMapButton('a.leaflet-control-zoom-in', waitForLoading); - } - - async clickMapZoomOut(waitForLoading = true) { - await this.clickMapButton('a.leaflet-control-zoom-out', waitForLoading); - } - - async getMapZoomEnabled(zoomSelector) { - const zooms = await this.getZoomSelectors(zoomSelector); - const classAttributes = await Promise.all( - zooms.map(async zoom => await zoom.getAttribute('class')) - ); - return !classAttributes.join('').includes('leaflet-disabled'); - } - - async zoomAllTheWayOut() { - // we can tell we're at level 1 because zoom out is disabled - return await retry.try(async () => { - await this.clickMapZoomOut(); - const enabled = await this.getMapZoomOutEnabled(); - //should be able to zoom more as current config has 0 as min level. - if (enabled) { - throw new Error('Not fully zoomed out yet'); - } - }); - } - - async getMapZoomInEnabled() { - return await this.getMapZoomEnabled('a.leaflet-control-zoom-in'); - } - - async getMapZoomOutEnabled() { - return await this.getMapZoomEnabled('a.leaflet-control-zoom-out'); - } - - async clickMapFitDataBounds() { - return await this.clickMapButton('a.fa-crop'); - } - - async clickLandingPageBreadcrumbLink() { - log.debug('clickLandingPageBreadcrumbLink'); - await find.clickByCssSelector(`a[href="#${VisualizeConstants.LANDING_PAGE_PATH}"]`); - } - - /** - * Returns true if already on the landing page (that page doesn't have a link to itself). - * @returns {Promise} - */ - async onLandingPage() { - log.debug(`VisualizePage.onLandingPage`); - const exists = await testSubjects.exists('visualizeLandingPage'); - return exists; - } - - async gotoLandingPage() { - log.debug('VisualizePage.gotoLandingPage'); - const onPage = await this.onLandingPage(); - if (!onPage) { - await retry.try(async () => { - await this.clickLandingPageBreadcrumbLink(); - const onLandingPage = await this.onLandingPage(); - if (!onLandingPage) throw new Error('Not on the landing page.'); - }); - } - } - - async getLegendEntries() { - const legendEntries = await find.allByCssSelector( - '.visLegend__button', - defaultFindTimeout * 2 - ); - return await Promise.all( - legendEntries.map(async chart => await chart.getAttribute('data-label')) - ); - } - - async openLegendOptionColors(name) { - await this.waitForVisualizationRenderingStabilized(); - await retry.try(async () => { - // This click has been flaky in opening the legend, hence the retry. See - // https://github.com/elastic/kibana/issues/17468 - await testSubjects.click(`legend-${name}`); - await this.waitForVisualizationRenderingStabilized(); - // arbitrary color chosen, any available would do - const isOpen = await this.doesLegendColorChoiceExist('#EF843C'); - if (!isOpen) { - throw new Error('legend color selector not open'); - } - }); - } - - async filterOnTableCell(column, row) { - await retry.try(async () => { - const table = await testSubjects.find('tableVis'); - const cell = await table.findByCssSelector( - `tbody tr:nth-child(${row}) td:nth-child(${column})` - ); - await cell.moveMouseTo(); - const filterBtn = await testSubjects.findDescendant('filterForCellValue', cell); - await filterBtn.click(); - }); - } - - async toggleLegend(show = true) { - await retry.try(async () => { - const isVisible = find.byCssSelector('.visLegend'); - if ((show && !isVisible) || (!show && isVisible)) { - await testSubjects.click('vislibToggleLegend'); - } - }); - } - - async filterLegend(name) { - await this.toggleLegend(); - await testSubjects.click(`legend-${name}`); - const filters = await testSubjects.find(`legend-${name}-filters`); - const [filterIn] = await filters.findAllByCssSelector(`input`); - await filterIn.click(); - await this.waitForVisualizationRenderingStabilized(); - } - - async doesLegendColorChoiceExist(color) { - return await testSubjects.exists(`legendSelectColor-${color}`); - } - - async selectNewLegendColorChoice(color) { - await testSubjects.click(`legendSelectColor-${color}`); - } - - async doesSelectedLegendColorExist(color) { - return await testSubjects.exists(`legendSelectedColor-${color}`); - } - - async getYAxisTitle() { - const title = await find.byCssSelector('.y-axis-div .y-axis-title text'); - return await title.getVisibleText(); - } - - async selectBucketType(type) { - const bucketType = await find.byCssSelector(`[data-test-subj="${type}"]`); - return await bucketType.click(); - } - - async getBucketErrorMessage() { - const error = await find.byCssSelector( - '[group-name="buckets"] [data-test-subj="defaultEditorAggSelect"] + .euiFormErrorText' - ); - const errorMessage = await error.getAttribute('innerText'); - log.debug(errorMessage); - return errorMessage; - } - - async selectOrderByMetric(agg, metric) { - const sortSelect = await testSubjects.find(`visEditorOrderBy${agg}`); - const sortMetric = await sortSelect.findByCssSelector(`option[value="${metric}"]`); - await sortMetric.click(); - } - - async selectCustomSortMetric(agg, metric, field) { - await this.selectOrderByMetric(agg, 'custom'); - await this.selectAggregation(metric, 'buckets', true); - await this.selectField(field, 'buckets', true); - } - - async clickSplitDirection(direction) { - const control = await testSubjects.find('visEditorSplitBy'); - const radioBtn = await control.findByCssSelector(`[title="${direction}"]`); - await radioBtn.click(); - } - - async countNestedTables() { - const vis = await testSubjects.find('tableVis'); - const result = []; - - for (let i = 1; true; i++) { - const selector = new Array(i).fill('.kbnAggTable__group').join(' '); - const tables = await vis.findAllByCssSelector(selector); - if (tables.length === 0) { - break; - } - result.push(tables.length); - } - - return result; - } - - async removeDimension(agg) { - await testSubjects.click(`visEditorAggAccordion${agg} > removeDimensionBtn`); - } - - async setFilterParams({ aggNth = 0, indexPattern, field }) { - await comboBox.set(`indexPatternSelect-${aggNth}`, indexPattern); - await comboBox.set(`fieldSelect-${aggNth}`, field); - } - - async setFilterRange({ aggNth = 0, min, max }) { - const control = await testSubjects.find(`inputControl${aggNth}`); - const inputMin = await control.findByCssSelector('[name$="minValue"]'); - await inputMin.type(min); - const inputMax = await control.findByCssSelector('[name$="maxValue"]'); - await inputMax.type(max); - } - - async scrollSubjectIntoView(subject) { - const element = await testSubjects.find(subject); - await element.scrollIntoViewIfNecessary(); - } - } - - return new VisualizePage(); -} diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts new file mode 100644 index 0000000000000..a33b53ea5cb58 --- /dev/null +++ b/test/functional/page_objects/visualize_page.ts @@ -0,0 +1,309 @@ +/* + * 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'; +import { VisualizeConstants } from '../../../src/legacy/core_plugins/kibana/public/visualize/np_ready/visualize_constants'; + +export function VisualizePageProvider({ getService, getPageObjects }: FtrProviderContext) { + const testSubjects = getService('testSubjects'); + const retry = getService('retry'); + const find = getService('find'); + const log = getService('log'); + const globalNav = getService('globalNav'); + const listingTable = getService('listingTable'); + const { common, header, visEditor } = getPageObjects(['common', 'header', 'visEditor']); + + class VisualizePage { + defaultIndex = { + LOGSTASH_TIME_BASED: 'logstash-*', + LOGSTASH_NON_TIME_BASED: 'logstash*', + }; + + async gotoVisualizationLandingPage() { + log.debug('gotoVisualizationLandingPage'); + await common.navigateToApp('visualize'); + } + + async clickNewVisualization() { + // newItemButton button is only visible when there are items in the listing table is displayed. + const exists = await testSubjects.exists('newItemButton'); + if (exists) { + return await testSubjects.click('newItemButton'); + } + } + + async waitForVisualizationSelectPage() { + await retry.try(async () => { + const visualizeSelectTypePage = await testSubjects.find('visNewDialogTypes'); + if (!(await visualizeSelectTypePage.isDisplayed())) { + throw new Error('wait for visualization select page'); + } + }); + } + + async navigateToNewVisualization() { + log.debug('navigateToApp visualize'); + await common.navigateToApp('visualize'); + await this.clickNewVisualization(); + await this.waitForVisualizationSelectPage(); + } + + async clickVisType(type: string) { + await testSubjects.click(`visType-${type}`); + await header.waitUntilLoadingHasFinished(); + } + + async clickAreaChart() { + await this.clickVisType('area'); + } + + async clickDataTable() { + await this.clickVisType('table'); + } + + async clickLineChart() { + await this.clickVisType('line'); + } + + async clickRegionMap() { + await this.clickVisType('region_map'); + } + + async clickMarkdownWidget() { + await this.clickVisType('markdown'); + } + + async clickMetric() { + await this.clickVisType('metric'); + } + + async clickGauge() { + await this.clickVisType('gauge'); + } + + async clickPieChart() { + await this.clickVisType('pie'); + } + + async clickTileMap() { + await this.clickVisType('tile_map'); + } + + async clickTagCloud() { + await this.clickVisType('tagcloud'); + } + + async clickVega() { + await this.clickVisType('vega'); + } + + async clickVisualBuilder() { + await this.clickVisType('metrics'); + } + + async clickVerticalBarChart() { + await this.clickVisType('histogram'); + } + + async clickHeatmapChart() { + await this.clickVisType('heatmap'); + } + + async clickInputControlVis() { + await this.clickVisType('input_control_vis'); + } + + async createSimpleMarkdownViz(vizName: string) { + await this.gotoVisualizationLandingPage(); + await this.navigateToNewVisualization(); + await this.clickMarkdownWidget(); + await visEditor.setMarkdownTxt(vizName); + await visEditor.clickGo(); + await this.saveVisualization(vizName); + } + + async getCountOfItemsInListingTable() { + const elements = await find.allByCssSelector('[data-test-subj^="visListingTitleLink"]'); + return elements.length; + } + + async clickNewSearch(indexPattern = this.defaultIndex.LOGSTASH_TIME_BASED) { + await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`); + await header.waitUntilLoadingHasFinished(); + } + + async selectVisSourceIfRequired() { + log.debug('selectVisSourceIfRequired'); + const selectPage = await testSubjects.findAll('visualizeSelectSearch'); + if (selectPage.length) { + log.debug('a search is required for this visualization'); + await this.clickNewSearch(); + } + } + + /* + This method should use retry loop to delete visualizations from multiple pages until we find the createVisualizationPromptButton. + Perhaps it *could* set the page size larger than the default 10, but it might still need to loop anyway. + */ + async deleteAllVisualizations() { + await retry.try(async () => { + await listingTable.checkListingSelectAllCheckbox(); + await listingTable.clickDeleteSelected(); + await common.clickConfirmOnModal(); + await testSubjects.find('createVisualizationPromptButton'); + }); + } + + async isBetaInfoShown() { + return await testSubjects.exists('betaVisInfo'); + } + + async getBetaTypeLinks() { + return await find.allByCssSelector('[data-vis-stage="beta"]'); + } + + async getExperimentalTypeLinks() { + return await find.allByCssSelector('[data-vis-stage="experimental"]'); + } + + async isExperimentalInfoShown() { + return await testSubjects.exists('experimentalVisInfo'); + } + + async getExperimentalInfo() { + return await testSubjects.find('experimentalVisInfo'); + } + + async getSideEditorExists() { + return await find.existsByCssSelector('.collapsible-sidebar'); + } + + async clickSavedSearch(savedSearchName: string) { + await testSubjects.click(`savedObjectTitle${savedSearchName.split(' ').join('-')}`); + await header.waitUntilLoadingHasFinished(); + } + + async clickUnlinkSavedSearch() { + await testSubjects.doubleClick('unlinkSavedSearch'); + await header.waitUntilLoadingHasFinished(); + } + + async ensureSavePanelOpen() { + log.debug('ensureSavePanelOpen'); + await header.waitUntilLoadingHasFinished(); + const isOpen = await testSubjects.exists('savedObjectSaveModal', { timeout: 5000 }); + if (!isOpen) { + await testSubjects.click('visualizeSaveButton'); + } + } + + async clickLoadSavedVisButton() { + // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb + // element as a child instead of building the breadcrumbs dynamically. + await find.clickByCssSelector('[href="#/visualize"]'); + } + + async clickVisualizationByName(vizName: string) { + log.debug('clickVisualizationByLinkText(' + vizName + ')'); + return find.clickByPartialLinkText(vizName); + } + + async loadSavedVisualization(vizName: string, { navigateToVisualize = true } = {}) { + if (navigateToVisualize) { + await this.clickLoadSavedVisButton(); + } + await this.openSavedVisualization(vizName); + } + + async openSavedVisualization(vizName: string) { + await this.clickVisualizationByName(vizName); + await header.waitUntilLoadingHasFinished(); + } + + async waitForVisualizationSavedToastGone() { + return await testSubjects.waitForDeleted('saveVisualizationSuccess'); + } + + async clickLandingPageBreadcrumbLink() { + log.debug('clickLandingPageBreadcrumbLink'); + await find.clickByCssSelector(`a[href="#${VisualizeConstants.LANDING_PAGE_PATH}"]`); + } + + /** + * Returns true if already on the landing page (that page doesn't have a link to itself). + * @returns {Promise} + */ + async onLandingPage() { + log.debug(`VisualizePage.onLandingPage`); + const exists = await testSubjects.exists('visualizeLandingPage'); + return exists; + } + + async gotoLandingPage() { + log.debug('VisualizePage.gotoLandingPage'); + const onPage = await this.onLandingPage(); + if (!onPage) { + await retry.try(async () => { + await this.clickLandingPageBreadcrumbLink(); + const onLandingPage = await this.onLandingPage(); + if (!onLandingPage) throw new Error('Not on the landing page.'); + }); + } + } + + async saveVisualization(vizName: string, { saveAsNew = false } = {}) { + await this.ensureSavePanelOpen(); + await testSubjects.setValue('savedObjectTitle', vizName); + if (saveAsNew) { + log.debug('Check save as new visualization'); + await testSubjects.click('saveAsNewCheckbox'); + } + log.debug('Click Save Visualization button'); + + await testSubjects.click('confirmSaveSavedObjectButton'); + + // Confirm that the Visualization has actually been saved + await testSubjects.existOrFail('saveVisualizationSuccess'); + const message = await common.closeToast(); + await header.waitUntilLoadingHasFinished(); + await common.waitForSaveModalToClose(); + + return message; + } + + async saveVisualizationExpectSuccess(vizName: string, { saveAsNew = false } = {}) { + const saveMessage = await this.saveVisualization(vizName, { saveAsNew }); + if (!saveMessage) { + throw new Error( + `Expected saveVisualization to respond with the saveMessage from the toast, got ${saveMessage}` + ); + } + } + + async saveVisualizationExpectSuccessAndBreadcrumb(vizName: string, { saveAsNew = false } = {}) { + await this.saveVisualizationExpectSuccess(vizName, { saveAsNew }); + await retry.waitFor( + 'last breadcrumb to have new vis name', + async () => (await globalNav.getLastBreadcrumb()) === vizName + ); + } + } + + return new VisualizePage(); +} diff --git a/test/functional/services/dashboard/visualizations.js b/test/functional/services/dashboard/visualizations.js index c4e7fe6ad3bd9..ee6491cb50f6d 100644 --- a/test/functional/services/dashboard/visualizations.js +++ b/test/functional/services/dashboard/visualizations.js @@ -24,7 +24,7 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) { const queryBar = getService('queryBar'); const testSubjects = getService('testSubjects'); const dashboardAddPanel = getService('dashboardAddPanel'); - const PageObjects = getPageObjects(['dashboard', 'visualize', 'header', 'discover']); + const PageObjects = getPageObjects(['dashboard', 'visualize', 'visEditor', 'header', 'discover']); return new (class DashboardVisualizations { async createAndAddTSVBVisualization(name) { @@ -108,7 +108,7 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) { await this.ensureNewVisualizationDialogIsShowing(); await PageObjects.visualize.clickMarkdownWidget(); await PageObjects.visualize.setMarkdownTxt(markdown); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); await PageObjects.visualize.saveVisualizationExpectSuccess(name); } })(); diff --git a/test/functional/services/index.ts b/test/functional/services/index.ts index ea47ccf1d2704..a10bb013b3af4 100644 --- a/test/functional/services/index.ts +++ b/test/functional/services/index.ts @@ -49,7 +49,7 @@ import { TestSubjectsProvider } from './test_subjects'; import { ToastsProvider } from './toasts'; // @ts-ignore not TS yet import { PieChartProvider } from './visualizations'; -import { VisualizeListingTableProvider } from './visualize_listing_table'; +import { ListingTableProvider } from './listing_table'; import { SavedQueryManagementComponentProvider } from './saved_query_management_component'; export const services = { @@ -66,7 +66,7 @@ export const services = { dashboardVisualizations: DashboardVisualizationProvider, dashboardExpect: DashboardExpectProvider, failureDebugging: FailureDebuggingProvider, - visualizeListingTable: VisualizeListingTableProvider, + listingTable: ListingTableProvider, dashboardAddPanel: DashboardAddPanelProvider, dashboardReplacePanel: DashboardReplacePanelProvider, dashboardPanelActions: DashboardPanelActionsProvider, diff --git a/test/functional/services/visualize_listing_table.ts b/test/functional/services/listing_table.ts similarity index 50% rename from test/functional/services/visualize_listing_table.ts rename to test/functional/services/listing_table.ts index 8c4640ada1c05..11ca6754cc9bf 100644 --- a/test/functional/services/visualize_listing_table.ts +++ b/test/functional/services/listing_table.ts @@ -19,13 +19,25 @@ import { FtrProviderContext } from '../ftr_provider_context'; -export function VisualizeListingTableProvider({ getService, getPageObjects }: FtrProviderContext) { +export function ListingTableProvider({ getService, getPageObjects }: FtrProviderContext) { const testSubjects = getService('testSubjects'); const find = getService('find'); const log = getService('log'); - const { header } = getPageObjects(['header']); + const retry = getService('retry'); + const { common, header } = getPageObjects(['common', 'header']); - class VisualizeListingTable { + // Currently on Dashboard, Visualize and Settings page + class ListingTable { + public async getSearchFilter() { + const searchFilter = await find.allByCssSelector('.euiFieldSearch'); + return searchFilter[0]; + } + + public async clearFilter() { + const searchFilter = await this.getSearchFilter(); + await searchFilter.clearValue(); + await searchFilter.click(); + } public async getAllVisualizationNamesOnCurrentPage(): Promise { const visualizationNames = []; const links = await find.allByCssSelector('.kuiLink'); @@ -36,8 +48,44 @@ export function VisualizeListingTableProvider({ getService, getPageObjects }: Ft return visualizationNames; } + async getItemsCount(appName: 'visualize' | 'dashboard') { + const prefixMap = { visualize: 'vis', dashboard: 'dashboard' }; + const elements = await find.allByCssSelector( + `[data-test-subj^="${prefixMap[appName]}ListingTitleLink"]` + ); + return elements.length; + } + + public async searchForItemWithName(name: string) { + log.debug(`searchForItemWithName: ${name}`); + + await retry.try(async () => { + const searchFilter = await this.getSearchFilter(); + await searchFilter.clearValue(); + await searchFilter.click(); + // Note: this replacement of - to space is to preserve original logic but I'm not sure why or if it's needed. + await searchFilter.type(name.replace('-', ' ')); + await common.pressEnterKey(); + }); + + await header.waitUntilLoadingHasFinished(); + } + + async clickDeleteSelected() { + await testSubjects.click('deleteSelectedItems'); + } + + async checkListingSelectAllCheckbox() { + const element = await testSubjects.find('checkboxSelectAll'); + const isSelected = await element.isSelected(); + if (!isSelected) { + log.debug(`checking checkbox "checkboxSelectAll"`); + await testSubjects.click('checkboxSelectAll'); + } + } + public async getAllVisualizationNames(): Promise { - log.debug('VisualizeListingTable.getAllVisualizationNames'); + log.debug('ListingTable.getAllVisualizationNames'); let morePages = true; let visualizationNames: string[] = []; while (morePages) { @@ -54,5 +102,5 @@ export function VisualizeListingTableProvider({ getService, getPageObjects }: Ft } } - return new VisualizeListingTable(); + return new ListingTable(); } diff --git a/test/functional/services/test_subjects.ts b/test/functional/services/test_subjects.ts index a3f64e6f96cc8..8ef008d5dee50 100644 --- a/test/functional/services/test_subjects.ts +++ b/test/functional/services/test_subjects.ts @@ -295,6 +295,25 @@ export function TestSubjectsProvider({ getService }: FtrProviderContext) { public getCssSelector(selector: string): string { return testSubjSelector(selector); } + + public async scrollIntoView(selector: string) { + const element = await this.find(selector); + await element.scrollIntoViewIfNecessary(); + } + + public async isChecked(selector: string) { + const checkbox = await this.find(selector); + return await checkbox.isSelected(); + } + + public async setCheckbox(selector: string, state: 'check' | 'uncheck') { + const isChecked = await this.isChecked(selector); + const states = { check: true, uncheck: false }; + if (isChecked !== states[state]) { + log.debug(`updating checkbox ${selector}`); + await this.click(selector); + } + } } return new TestSubjects(); diff --git a/test/functional/services/visualize_chart.ts b/test/functional/services/visualize_chart.ts deleted file mode 100644 index 9eb4a764af6f7..0000000000000 --- a/test/functional/services/visualize_chart.ts +++ /dev/null @@ -1,191 +0,0 @@ -/* - * 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'; -import { WebElementWrapper } from './lib/web_element_wrapper'; - -export function VisualizeChartProvider({ getService }: FtrProviderContext) { - const testSubjects = getService('testSubjects'); - const config = getService('config'); - const find = getService('find'); - const log = getService('log'); - const retry = getService('retry'); - const defaultFindTimeout = config.get('timeouts.find'); - - class VisualizeChart { - public async getXAxisLabels() { - const xAxis = await find.byCssSelector('.visAxis--x.visAxis__column--bottom'); - const $ = await xAxis.parseDomContent(); - return $('.x > g > text') - .toArray() - .map(tick => - $(tick) - .text() - .trim() - ); - } - - public async getYAxisLabels() { - const yAxis = await find.byCssSelector('.visAxis__column--y.visAxis__column--left'); - const $ = await yAxis.parseDomContent(); - return $('.y > g > text') - .toArray() - .map(tick => - $(tick) - .text() - .trim() - ); - } - - /* - ** This method gets the chart data and scales it based on chart height and label. - ** Returns an array of height values - */ - public async getAreaChartData(dataLabel: string, axis = 'ValueAxis-1') { - const yAxisRatio = await this.getChartYAxisRatio(axis); - - const rectangle = await find.byCssSelector('rect.background'); - const yAxisHeight = await rectangle.getAttribute('height'); - log.debug(`height --------- ${yAxisHeight}`); - - const path = await retry.try( - async () => - await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) - ); - const data = await path.getAttribute('d'); - log.debug(data); - // This area chart data starts with a 'M'ove to a x,y location, followed - // by a bunch of 'L'ines from that point to the next. Those points are - // the values we're going to use to calculate the data values we're testing. - // So git rid of the one 'M' and split the rest on the 'L's. - const tempArray = data - .replace('M ', '') - .replace('M', '') - .replace(/ L /g, 'L') - .replace(/ /g, ',') - .split('L'); - const chartSections = tempArray.length / 2; - // log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel); - const chartData = []; - for (let i = 0; i < chartSections; i++) { - chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) * yAxisRatio); - log.debug('chartData[i] =' + chartData[i]); - } - return chartData; - } - - /* - ** This method returns the paths that compose an area chart. - */ - public async getAreaChartPaths(dataLabel: string) { - const path = await retry.try( - async () => - await find.byCssSelector(`path[data-label="${dataLabel}"]`, defaultFindTimeout * 2) - ); - const data = await path.getAttribute('d'); - log.debug(data); - // This area chart data starts with a 'M'ove to a x,y location, followed - // by a bunch of 'L'ines from that point to the next. Those points are - // the values we're going to use to calculate the data values we're testing. - // So git rid of the one 'M' and split the rest on the 'L's. - return data.split('L'); - } - - // The current test shows dots, not a line. This function gets the dots and normalizes their height. - async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { - // 1). get the range/pixel ratio - const yAxisRatio = await this.getChartYAxisRatio(axis); - // 2). find and save the y-axis pixel size (the chart height) - const rectangle = await find.byCssSelector('clipPath rect'); - const yAxisHeight = await rectangle.getAttribute('height'); - // 3). get the visWrapper__chart elements - const chartTypes = await retry.try( - async () => - await find.allByCssSelector( - `.visWrapper__chart circle[data-label="${dataLabel}"][fill-opacity="1"]`, - defaultFindTimeout * 2 - ) - ); - // 4). for each chart element, find the green circle, then the cy position - const chartData = await Promise.all( - chartTypes.map(async chart => { - const cy = await chart.getAttribute('cy'); - // the point_series_options test has data in the billions range and - // getting 11 digits of precision with these calculations is very hard - return Math.round(((yAxisHeight - cy) * yAxisRatio).toPrecision(6)); - }) - ); - - return chartData; - } - - // this is ALMOST identical to DiscoverPage.getBarChartData - async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { - // 1). get the range/pixel ratio - const yAxisRatio = await this.getChartYAxisRatio(axis); - // 3). get the visWrapper__chart elements - const svg = await find.byCssSelector('div.chart'); - const $ = await svg.parseDomContent(); - const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`) - .toArray() - .map(chart => { - const barHeight = $(chart).attr('height'); - return Math.round(barHeight * yAxisRatio); - }); - - return chartData; - } - - // Returns value per pixel - async getChartYAxisRatio(axis = 'ValueAxis-1') { - // 1). get the maximum chart Y-Axis marker value and Y position - const maxYAxisChartMarker = await retry.try( - async () => - await find.byCssSelector( - `div.visAxis__splitAxes--y > div > svg > g.${axis} > g:last-of-type.tick` - ) - ); - const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, ''); - const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y; - log.debug(`maxYLabel = ${maxYLabel}, maxYLabelYPosition = ${maxYLabelYPosition}`); - - // 2). get the minimum chart Y-Axis marker value and Y position - const minYAxisChartMarker = await find.byCssSelector( - 'div.visAxis__column--y.visAxis__column--left > div > div > svg:nth-child(2) > g > g:nth-child(1).tick' - ); - const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', ''); - const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y; - return (maxYLabel - minYLabel) / (minYLabelYPosition - maxYLabelYPosition); - } - - async getHeatmapData() { - const chartTypes = await retry.try( - async () => await find.allByCssSelector('svg > g > g.series rect', defaultFindTimeout * 2) - ); - log.debug('rects=' + chartTypes); - async function getChartType(chart) { - return await chart.getAttribute('data-label'); - } - const getChartTypesPromises = chartTypes.map(getChartType); - return await Promise.all(getChartTypesPromises); - } - } - - return new VisualizeChart(); -} diff --git a/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js b/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js index 30b9dbe0fe80a..ef6f0a626bd15 100644 --- a/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js +++ b/test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js @@ -22,7 +22,7 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const testSubjects = getService('testSubjects'); const renderable = getService('renderable'); - const PageObjects = getPageObjects(['common', 'visualize']); + const PageObjects = getPageObjects(['common', 'visualize', 'visEditor']); async function getCounterValue() { return await testSubjects.getVisibleText('counter'); @@ -42,9 +42,9 @@ export default function({ getService, getPageObjects }) { const editor = await testSubjects.find('counterEditor'); await editor.clearValue(); await editor.type('10'); - const isApplyEnabled = await PageObjects.visualize.isApplyEnabled(); + const isApplyEnabled = await PageObjects.visEditor.isApplyEnabled(); expect(isApplyEnabled).to.be(true); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickGo(); const counter = await getCounterValue(); expect(counter).to.be('10'); }); @@ -57,7 +57,7 @@ export default function({ getService, getPageObjects }) { const editorValue = await getEditorValue(); expect(editorValue).to.be('11'); // If changing a param from within the vis it should immediately apply and not bring editor in an unchanged state - const isApplyEnabled = await PageObjects.visualize.isApplyEnabled(); + const isApplyEnabled = await PageObjects.visEditor.isApplyEnabled(); expect(isApplyEnabled).to.be(false); }); }); diff --git a/x-pack/test/functional/apps/security/rbac_phase1.js b/x-pack/test/functional/apps/security/rbac_phase1.js index 361bb6dbbdae4..9309e23bdd762 100644 --- a/x-pack/test/functional/apps/security/rbac_phase1.js +++ b/x-pack/test/functional/apps/security/rbac_phase1.js @@ -7,7 +7,14 @@ import expect from '@kbn/expect'; import { indexBy } from 'lodash'; export default function({ getService, getPageObjects }) { - const PageObjects = getPageObjects(['security', 'settings', 'common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects([ + 'security', + 'settings', + 'common', + 'visualize', + 'timePicker', + 'visChart', + ]); const log = getService('log'); const esArchiver = getService('esArchiver'); const browser = getService('browser'); @@ -110,7 +117,7 @@ export default function({ getService, getPageObjects }) { '"' ); await PageObjects.timePicker.setDefaultAbsoluteRange(); - await PageObjects.visualize.waitForVisualization(); + await PageObjects.visChart.waitForVisualization(); await PageObjects.visualize.saveVisualizationExpectSuccess(vizName1); await PageObjects.security.forceLogout(); }); diff --git a/x-pack/test/reporting/functional/reporting.js b/x-pack/test/reporting/functional/reporting.js index 7d72db8c08e22..8458f4e537b70 100644 --- a/x-pack/test/reporting/functional/reporting.js +++ b/x-pack/test/reporting/functional/reporting.js @@ -25,6 +25,7 @@ export default function({ getService, getPageObjects }) { 'header', 'discover', 'visualize', + 'visEditor', ]); const log = getService('log'); @@ -298,9 +299,9 @@ export default function({ getService, getPageObjects }) { it('becomes available when saved', async () => { await PageObjects.reporting.setTimepickerInDataRange(); - await PageObjects.visualize.clickBucket('X-axis'); - await PageObjects.visualize.selectAggregation('Date Histogram'); - await PageObjects.visualize.clickGo(); + await PageObjects.visEditor.clickBucket('X-axis'); + await PageObjects.visEditor.selectAggregation('Date Histogram'); + await PageObjects.visEditor.clickGo(); await PageObjects.visualize.saveVisualization('my viz'); await PageObjects.reporting.openPdfReportingPanel(); await expectEnabledGenerateReportButton(); From 935ac343f9b49be8f0b9ac0e664a5d3dac2de6d2 Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Mon, 30 Dec 2019 16:33:24 +0100 Subject: [PATCH 3/9] refactor PO and tests --- test/functional/apps/visualize/_data_table.js | 4 +- .../apps/visualize/_point_series_options.js | 2 +- test/functional/apps/visualize/_region_map.js | 3 +- .../page_objects/visualize_chart_page.ts | 88 +++++---- .../page_objects/visualize_editor_page.ts | 177 +++++++++--------- .../functional/page_objects/visualize_page.ts | 105 +++++------ 6 files changed, 196 insertions(+), 183 deletions(-) diff --git a/test/functional/apps/visualize/_data_table.js b/test/functional/apps/visualize/_data_table.js index 54db61f72cff9..f3575d7a8afb3 100644 --- a/test/functional/apps/visualize/_data_table.js +++ b/test/functional/apps/visualize/_data_table.js @@ -141,7 +141,7 @@ export default function({ getService, getPageObjects }) { await expectValidTableData(); // check that it works after selecting a column that's deleted - await PageObjects.visEditor.clickData(); + await PageObjects.visEditor.clickDataTab(); await PageObjects.visEditor.clickBucket('Metric', 'metrics'); await PageObjects.visEditor.selectAggregation('Average', 'metrics'); await PageObjects.visEditor.selectField('bytes', 'metrics'); @@ -373,7 +373,7 @@ export default function({ getService, getPageObjects }) { }); it('should show metrics other than count on each level', async () => { - await PageObjects.visEditor.clickData(); + await PageObjects.visEditor.clickDataTab(); await PageObjects.visEditor.clickBucket('Metric', 'metrics'); await PageObjects.visEditor.selectAggregation('Average', 'metrics'); await PageObjects.visEditor.selectField('bytes', 'metrics'); diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js index 082ccce1f9863..1edd5919faef0 100644 --- a/test/functional/apps/visualize/_point_series_options.js +++ b/test/functional/apps/visualize/_point_series_options.js @@ -224,7 +224,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visChart.waitForVisualization(); await PageObjects.visualize.loadSavedVisualization(visName); await PageObjects.visChart.waitForRenderingCount(); - await PageObjects.visEditor.clickData(); + await PageObjects.visEditor.clickDataTab(); await PageObjects.visEditor.toggleOpenEditor(1); await PageObjects.visEditor.setCustomLabel('test', 1); await PageObjects.visEditor.clickGo(); diff --git a/test/functional/apps/visualize/_region_map.js b/test/functional/apps/visualize/_region_map.js index 7e15397d5a173..dcdb10739ade8 100644 --- a/test/functional/apps/visualize/_region_map.js +++ b/test/functional/apps/visualize/_region_map.js @@ -66,8 +66,7 @@ export default function({ getService, getPageObjects }) { }); it('should change results after changing layer to world', async function() { - // not sure here?! - await PageObjects.visEditor.clickOptions(); + await PageObjects.visEditor.clickOptionsTab(); await PageObjects.visEditor.setSelectByOptionText( 'regionMapOptionsSelectLayer', 'World Countries' diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index 7d9316787b1d9..02fa05667b8f9 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -59,9 +59,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr ); } - /* - ** This method gets the chart data and scales it based on chart height and label. - ** Returns an array of height values + /** + * Gets the chart data and scales it based on chart height and label. + * @param dataLabel data-label value + * @param axis axis value, 'ValueAxis-1' by default + * + * Returns an array of height values */ public async getAreaChartData(dataLabel: string, axis = 'ValueAxis-1') { const yAxisRatio = await this.getChartYAxisRatio(axis); @@ -87,7 +90,6 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr .replace(/ /g, ',') .split('L'); const chartSections = tempArray.length / 2; - // log.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel); const chartData = []; for (let i = 0; i < chartSections; i++) { chartData[i] = Math.round((yAxisHeight - Number(tempArray[i].split(',')[1])) * yAxisRatio); @@ -96,8 +98,9 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr return chartData; } - /* - ** This method returns the paths that compose an area chart. + /** + * Returns the paths that compose an area chart. + * @param dataLabel data-label value */ public async getAreaChartPaths(dataLabel: string) { const path = await retry.try( @@ -113,8 +116,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr return data.split('L'); } - // The current test shows dots, not a line. This function gets the dots and normalizes their height. - async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { + /** + * Gets the dots and normalizes their height. + * @param dataLabel data-label value + * @param axis axis value, 'ValueAxis-1' by default + */ + public async getLineChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { // 1). get the range/pixel ratio const yAxisRatio = await this.getChartYAxisRatio(axis); // 2). find and save the y-axis pixel size (the chart height) @@ -141,11 +148,13 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr return chartData; } - // this is ALMOST identical to DiscoverPage.getBarChartData - async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { - // 1). get the range/pixel ratio + /** + * Returns bar chart data in pixels + * @param dataLabel data-label value + * @param axis axis value, 'ValueAxis-1' by default + */ + public async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') { const yAxisRatio = await this.getChartYAxisRatio(axis); - // 3). get the visWrapper__chart elements const svg = await find.byCssSelector('div.chart'); const $ = await svg.parseDomContent(); const chartData = $(`g > g.series > rect[data-label="${dataLabel}"]`) @@ -158,8 +167,11 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr return chartData; } - // Returns value per pixel - async getChartYAxisRatio(axis = 'ValueAxis-1') { + /** + * Returns the range/pixel ratio + * @param axis axis value, 'ValueAxis-1' by default + */ + private async getChartYAxisRatio(axis = 'ValueAxis-1') { // 1). get the maximum chart Y-Axis marker value and Y position const maxYAxisChartMarker = await retry.try( async () => @@ -180,7 +192,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr return (Number(maxYLabel) - Number(minYLabel)) / (minYLabelYPosition - maxYLabelYPosition); } - async toggleLegend(show = true) { + public async toggleLegend(show = true) { await retry.try(async () => { const isVisible = find.byCssSelector('.visLegend'); if ((show && !isVisible) || (!show && isVisible)) { @@ -189,7 +201,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr }); } - async filterLegend(name: string) { + public async filterLegend(name: string) { await this.toggleLegend(); await testSubjects.click(`legend-${name}`); const filters = await testSubjects.find(`legend-${name}-filters`); @@ -198,23 +210,23 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr await this.waitForVisualizationRenderingStabilized(); } - async doesLegendColorChoiceExist(color: string) { + public async doesLegendColorChoiceExist(color: string) { return await testSubjects.exists(`legendSelectColor-${color}`); } - async selectNewLegendColorChoice(color: string) { + public async selectNewLegendColorChoice(color: string) { await testSubjects.click(`legendSelectColor-${color}`); } - async doesSelectedLegendColorExist(color: string) { + public async doesSelectedLegendColorExist(color: string) { return await testSubjects.exists(`legendSelectedColor-${color}`); } - async expectError() { - return await testSubjects.existOrFail('visLibVisualizeError'); + public async expectError() { + await testSubjects.existOrFail('visLibVisualizeError'); } - async getChartTypes() { + public async getChartTypes() { const chartTypeField = await testSubjects.find('visNewDialogTypes'); const $ = await chartTypeField.parseDomContent(); return $('button') @@ -227,13 +239,13 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr ); } - async getVisualizationRenderingCount() { + public async getVisualizationRenderingCount() { const visualizationLoader = await testSubjects.find('visualizationLoader'); const renderingCount = await visualizationLoader.getAttribute('data-rendering-count'); return Number(renderingCount); } - async waitForRenderingCount(minimumCount = 1) { + public async waitForRenderingCount(minimumCount = 1) { await retry.waitFor( `rendering count to be greater than or equal to [${minimumCount}]`, async () => { @@ -244,7 +256,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr ); } - async waitForVisualizationRenderingStabilized() { + public async waitForVisualizationRenderingStabilized() { // assuming rendering is done when data-rendering-count is constant within 1000 ms await retry.waitFor('rendering count to stabilize', async () => { const firstCount = await this.getVisualizationRenderingCount(); @@ -259,12 +271,12 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr }); } - async waitForVisualization() { + public async waitForVisualization() { await this.waitForVisualizationRenderingStabilized(); return await find.byCssSelector('.visualization'); } - async getLegendEntries() { + public async getLegendEntries() { const legendEntries = await find.allByCssSelector( '.visLegend__button', defaultFindTimeout * 2 @@ -274,7 +286,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr ); } - async openLegendOptionColors(name: string) { + public async openLegendOptionColors(name: string) { await this.waitForVisualizationRenderingStabilized(); await retry.try(async () => { // This click has been flaky in opening the legend, hence the retry. See @@ -289,7 +301,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr }); } - async filterOnTableCell(column: string, row: string) { + public async filterOnTableCell(column: string, row: string) { await retry.try(async () => { const tableVis = await testSubjects.find('tableVis'); const cell = await tableVis.findByCssSelector( @@ -301,18 +313,18 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr }); } - async getMarkdownText() { + public async getMarkdownText() { const markdownContainer = await testSubjects.find('markdownBody'); return markdownContainer.getVisibleText(); } - async getMarkdownBodyDescendentText(selector: string) { + public async getMarkdownBodyDescendentText(selector: string) { const markdownContainer = await testSubjects.find('markdownBody'); const element = await find.descendantDisplayedByCssSelector(selector, markdownContainer); return element.getVisibleText(); } - async getVegaSpec() { + 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'); @@ -324,18 +336,18 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr return linesText.join('\n'); } - async getVegaViewContainer() { + public async getVegaViewContainer() { return await find.byCssSelector('div.vgaVis__view'); } - async getVegaControlContainer() { + public async getVegaControlContainer() { return await find.byCssSelector('div.vgaVis__controls'); } /** * If you are writing new tests, you should rather look into getTableVisContent method instead. */ - async getTableVisData() { + public async getTableVisData() { return await testSubjects.getVisibleText('paginated-table-body'); } @@ -344,7 +356,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr * It uses a better return format, than the old getTableVisData, by properly splitting * cell values into arrays. Please use this function for newer tests. */ - async getTableVisContent({ stripEmptyRows = true } = {}) { + public async getTableVisContent({ stripEmptyRows = true } = {}) { return await retry.try(async () => { const container = await testSubjects.find('tableVis'); const allTables = await testSubjects.findAllDescendant('paginated-table-body', container); @@ -374,7 +386,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr }); } - async getMetric() { + public async getMetric() { const elements = await find.allByCssSelector( '[data-test-subj="visualizationLoader"] .mtrVis__container' ); @@ -389,7 +401,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr .reduce((arr: string[], item) => arr.concat(item.split('\n')), []); } - async getGaugeValue() { + public async getGaugeValue() { const elements = await find.allByCssSelector( '[data-test-subj="visualizationLoader"] .chart svg text' ); diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts index 8bf2bcd251718..8dcd7e0002a65 100644 --- a/test/functional/page_objects/visualize_editor_page.ts +++ b/test/functional/page_objects/visualize_editor_page.ts @@ -30,59 +30,59 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP const { common, header, visChart } = getPageObjects(['common', 'header', 'visChart']); class VisualizeEditorPage { - async clickOptionsTab() { + public async clickDataTab() { + await testSubjects.click('visualizeEditDataLink'); + } + + public async clickOptionsTab() { await testSubjects.click('visEditorTaboptions'); } - async clickMetricsAndAxes() { + public async clickMetricsAndAxes() { await testSubjects.click('visEditorTabadvanced'); } - async clickVisEditorTab(tabName: string) { + public async clickVisEditorTab(tabName: string) { await testSubjects.click('visEditorTab' + tabName); await header.waitUntilLoadingHasFinished(); } - async clickData() { - await testSubjects.click('visualizeEditDataLink'); + public async addInputControl(type?: string) { + if (type) { + const selectInput = await testSubjects.find('selectControlType'); + await selectInput.type(type); + } + await testSubjects.click('inputControlEditorAddBtn'); + await header.waitUntilLoadingHasFinished(); } - async inputControlClear() { + public async inputControlClear() { await testSubjects.click('inputControlClearBtn'); await header.waitUntilLoadingHasFinished(); } - async inputControlSubmit() { + public async inputControlSubmit() { await testSubjects.clickWhenNotDisabled('inputControlSubmitBtn'); await visChart.waitForVisualizationRenderingStabilized(); } - async addInputControl(type: string) { - if (type) { - const selectInput = await testSubjects.find('selectControlType'); - await selectInput.type(type); - } - await testSubjects.click('inputControlEditorAddBtn'); - await header.waitUntilLoadingHasFinished(); - } - - async clickGo() { + public async clickGo() { const prevRenderingCount = await visChart.getVisualizationRenderingCount(); log.debug(`Before Rendering count ${prevRenderingCount}`); await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton'); await visChart.waitForRenderingCount(prevRenderingCount + 1); } - async removeDimension(aggNth: number) { + public async removeDimension(aggNth: number) { await testSubjects.click(`visEditorAggAccordion${aggNth} > removeDimensionBtn`); } - async setFilterParams(aggNth: number, indexPattern: string, field: string) { + public async setFilterParams(aggNth: number, indexPattern: string, field: string) { await comboBox.set(`indexPatternSelect-${aggNth}`, indexPattern); await comboBox.set(`fieldSelect-${aggNth}`, field); } - async setFilterRange(aggNth: number, min: string, max: string) { + public async setFilterRange(aggNth: number, min: string, max: string) { const control = await testSubjects.find(`inputControl${aggNth}`); const inputMin = await control.findByCssSelector('[name$="minValue"]'); await inputMin.type(min); @@ -90,7 +90,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP await inputMax.type(max); } - async clickSplitDirection(direction: string) { + public async clickSplitDirection(direction: string) { const control = await testSubjects.find('visEditorSplitBy'); const radioBtn = await control.findByCssSelector(`[title="${direction}"]`); await radioBtn.click(); @@ -101,31 +101,31 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP * @param bucketName bucket name, like 'X-axis', 'Split rows', 'Split series' * @param type aggregation type, like 'buckets', 'metrics' */ - async clickBucket(bucketName: string, type = 'buckets') { + public async clickBucket(bucketName: string, type = 'buckets') { await testSubjects.click(`visEditorAdd_${type}`); await find.clickByCssSelector(`[data-test-subj="visEditorAdd_${type}_${bucketName}"`); } - async clickEnableCustomRanges() { + public async clickEnableCustomRanges() { await testSubjects.click('heatmapUseCustomRanges'); } - async clickAddRange() { + public async clickAddRange() { await testSubjects.click(`heatmapColorRange__addRangeButton`); } - async setCustomRangeByIndex(index: string, from: string, to: string) { + public async setCustomRangeByIndex(index: string, from: string, to: string) { await testSubjects.setValue(`heatmapColorRange${index}__from`, from); await testSubjects.setValue(`heatmapColorRange${index}__to`, to); } - async changeHeatmapColorNumbers(value = 6) { + public async changeHeatmapColorNumbers(value = 6) { const input = await testSubjects.find(`heatmapColorsNumber`); await input.clearValueWithKeyboard(); await input.type(`${value}`); } - async getBucketErrorMessage() { + public async getBucketErrorMessage() { const error = await find.byCssSelector( '[group-name="buckets"] [data-test-subj="defaultEditorAggSelect"] + .euiFormErrorText' ); @@ -134,11 +134,15 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP return errorMessage; } - async addNewFilterAggregation() { - return await testSubjects.click('visEditorAddFilterButton'); + public async addNewFilterAggregation() { + await testSubjects.click('visEditorAddFilterButton'); } - async selectField(fieldValue: string, groupName = 'buckets', childAggregationType = false) { + public async selectField( + fieldValue: string, + groupName = 'buckets', + childAggregationType = false + ) { log.debug(`selectField ${fieldValue}`); const selector = ` [group-name="${groupName}"] @@ -151,19 +155,23 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP await comboBox.setElement(fieldEl, fieldValue); } - async selectOrderByMetric(aggNth: number, metric: string) { + public async selectOrderByMetric(aggNth: number, metric: string) { const sortSelect = await testSubjects.find(`visEditorOrderBy${aggNth}`); const sortMetric = await sortSelect.findByCssSelector(`option[value="${metric}"]`); await sortMetric.click(); } - async selectCustomSortMetric(aggNth: number, metric: string, field: string) { + public async selectCustomSortMetric(aggNth: number, metric: string, field: string) { await this.selectOrderByMetric(aggNth, 'custom'); await this.selectAggregation(metric, 'buckets', true); await this.selectField(field, 'buckets', true); } - async selectAggregation(aggValue: string, groupName = 'buckets', childAggregationType = false) { + public async selectAggregation( + aggValue: string, + groupName = 'buckets', + childAggregationType = false + ) { const comboBoxElement = await find.byCssSelector(` [group-name="${groupName}"] [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen @@ -181,40 +189,44 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP * @param {*} filterIndex used when multiple filters are configured on the same aggregation * @param {*} aggregationId the ID if the aggregation. On Tests, it start at from 2 */ - async setFilterAggregationValue(filterValue: string, filterIndex = 0, aggregationId = 2) { + public async setFilterAggregationValue( + filterValue: string, + filterIndex = 0, + aggregationId = 2 + ) { await testSubjects.setValue( `visEditorFilterInput_${aggregationId}_${filterIndex}`, filterValue ); } - async setValue(newValue: string) { + public async setValue(newValue: string) { const input = await find.byCssSelector('[data-test-subj="visEditorPercentileRanks"] input'); await input.clearValue(); await input.type(newValue); } - async clickEditorSidebarCollapse() { + public async clickEditorSidebarCollapse() { await testSubjects.click('collapseSideBarButton'); } - async clickDropPartialBuckets() { - return await testSubjects.click('dropPartialBucketsCheckbox'); + public async clickDropPartialBuckets() { + await testSubjects.click('dropPartialBucketsCheckbox'); } - async setMarkdownTxt(markdownTxt: string) { + public async setMarkdownTxt(markdownTxt: string) { const input = await testSubjects.find('markdownTextarea'); await input.clearValue(); await input.type(markdownTxt); } - async isSwitchChecked(selector: string) { + public async isSwitchChecked(selector: string) { const checkbox = await testSubjects.find(selector); const isChecked = await checkbox.getAttribute('aria-checked'); return isChecked === 'true'; } - async checkSwitch(selector: string) { + public async checkSwitch(selector: string) { const isChecked = await this.isSwitchChecked(selector); if (!isChecked) { log.debug(`checking switch ${selector}`); @@ -222,7 +234,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } } - async uncheckSwitch(selector: string) { + public async uncheckSwitch(selector: string) { const isChecked = await this.isSwitchChecked(selector); if (isChecked) { log.debug(`unchecking switch ${selector}`); @@ -230,7 +242,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } } - async setIsFilteredByCollarCheckbox(value = true) { + public async setIsFilteredByCollarCheckbox(value = true) { await retry.try(async () => { const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox'); if (isChecked !== value) { @@ -240,12 +252,12 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP }); } - async setCustomLabel(label: string, index = 1) { + public async setCustomLabel(label: string, index = 1) { const customLabel = await testSubjects.find(`visEditorStringInput${index}customLabel`); customLabel.type(label); } - async selectYAxisAggregation(agg: string, field: string, label: string, index = 1) { + public async selectYAxisAggregation(agg: string, field: string, label: string, index = 1) { // index starts on the first "count" metric at 1 // Each new metric or aggregation added to a visualization gets the next index. // So to modify a metric or aggregation tests need to keep track of the @@ -267,54 +279,49 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP await this.setCustomLabel(label, index); } - async getField() { + public async getField() { return await comboBox.getComboBoxSelectedOptions('visDefaultEditorField'); } - async sizeUpEditor() { + public async sizeUpEditor() { await testSubjects.click('visualizeEditorResizer'); await browser.pressKeys(browser.keys.ARROW_RIGHT); } - async clickOptions() { - await find.clickByPartialLinkText('Options'); - await header.waitUntilLoadingHasFinished(); - } - - async toggleDisabledAgg(agg: string) { + public async toggleDisabledAgg(agg: string) { await testSubjects.click(`visEditorAggAccordion${agg} > ~toggleDisableAggregationBtn`); await header.waitUntilLoadingHasFinished(); } - async toggleAggregationEditor(agg: string) { + public async toggleAggregationEditor(agg: string) { await find.clickByCssSelector( `[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button` ); await header.waitUntilLoadingHasFinished(); } - async toggleOtherBucket(agg = 2) { - return await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`); + public async toggleOtherBucket(agg = 2) { + await testSubjects.click(`visEditorAggAccordion${agg} > otherBucketSwitch`); } - async toggleMissingBucket(agg = 2) { - return await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`); + public async toggleMissingBucket(agg = 2) { + await testSubjects.click(`visEditorAggAccordion${agg} > missingBucketSwitch`); } - async toggleScaleMetrics() { - return await testSubjects.click('scaleMetricsSwitch'); + public async toggleScaleMetrics() { + await testSubjects.click('scaleMetricsSwitch'); } - async toggleAutoMode() { + public async toggleAutoMode() { await testSubjects.click('visualizeEditorAutoButton'); } - async isApplyEnabled() { + public async isApplyEnabled() { const applyButton = await testSubjects.find('visualizeEditorRenderButton'); return await applyButton.isEnabled(); } - async toggleAccordion(id: string, toState = 'true') { + public async toggleAccordion(id: string, toState = 'true') { const toggle = await find.byCssSelector(`button[aria-controls="${id}"]`); const toggleOpen = await toggle.getAttribute('aria-expanded'); log.debug(`toggle ${id} expand = ${toggleOpen}`); @@ -324,59 +331,59 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } } - async toggleOpenEditor(index: number, toState = 'true') { + public async toggleOpenEditor(index: number, toState = 'true') { // index, see selectYAxisAggregation await this.toggleAccordion(`visEditorAggAccordion${index}`, toState); } - async toggleAdvancedParams(aggId: string) { + public async toggleAdvancedParams(aggId: string) { const accordion = await testSubjects.find(`advancedParams-${aggId}`); const accordionButton = await find.descendantDisplayedByCssSelector('button', accordion); await accordionButton.click(); } - async clickReset() { + public async clickReset() { await testSubjects.click('visualizeEditorResetButton'); await visChart.waitForVisualization(); } - async clickYAxisOptions(axisId: string) { + public async clickYAxisOptions(axisId: string) { await testSubjects.click(`toggleYAxisOptions-${axisId}`); } - async clickYAxisAdvancedOptions(axisId: string) { + public async clickYAxisAdvancedOptions(axisId: string) { await testSubjects.click(`toggleYAxisAdvancedOptions-${axisId}`); } - async changeYAxisFilterLabelsCheckbox(axisId: string, enabled: boolean) { + public async changeYAxisFilterLabelsCheckbox(axisId: string, enabled: boolean) { const selector = `yAxisFilterLabelsCheckbox-${axisId}`; await testSubjects.setCheckbox(selector, enabled ? 'check' : 'uncheck'); } - async setSize(newValue: string, aggId: string) { + public async setSize(newValue: string, aggId: string) { const dataTestSubj = aggId ? `visEditorAggAccordion${aggId} > sizeParamEditor` : 'sizeParamEditor'; await testSubjects.setValue(dataTestSubj, String(newValue)); } - async selectChartMode(mode: string) { + public async selectChartMode(mode: string) { const selector = await find.byCssSelector(`#seriesMode0 > option[value="${mode}"]`); await selector.click(); } - async selectYAxisScaleType(axisId: string, scaleType: string) { + public async selectYAxisScaleType(axisId: string, scaleType: string) { const selectElement = await testSubjects.find(`scaleSelectYAxis-${axisId}`); const selector = await selectElement.findByCssSelector(`option[value="${scaleType}"]`); await selector.click(); } - async selectYAxisMode(mode: string) { + public async selectYAxisMode(mode: string) { const selector = await find.byCssSelector(`#valueAxisMode0 > option[value="${mode}"]`); await selector.click(); } - async setAxisExtents(min: string, max: string, axisId = 'ValueAxis-1') { + public async setAxisExtents(min: string, max: string, axisId = 'ValueAxis-1') { await this.toggleAccordion(`yAxisAccordion${axisId}`); await this.toggleAccordion(`yAxisOptionsAccordion${axisId}`); @@ -385,25 +392,25 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP await testSubjects.setValue('yAxisYExtentsMin', min); } - async selectAggregateWith(fieldValue: string) { + public async selectAggregateWith(fieldValue: string) { await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue); } - async setInterval(newValue: string) { + public async setInterval(newValue: string) { log.debug(`Visualize.setInterval(${newValue})`); - return await comboBox.set('visEditorInterval', newValue); + await comboBox.set('visEditorInterval', newValue); } - async getInterval() { + public async getInterval() { return await comboBox.getComboBoxSelectedOptions('visEditorInterval'); } - async setCustomInterval(newValue: string) { + public async setCustomInterval(newValue: string) { log.debug(`Visualize.setCustomInterval(${newValue})`); - return await comboBox.setCustom('visEditorInterval', newValue); + await comboBox.setCustom('visEditorInterval', newValue); } - async setNumericInterval(newValue: string, options = { append: false }, agg = 2) { + public async setNumericInterval(newValue: string, options = { append: false }, agg = 2) { if (options.append) { await testSubjects.append(`visEditorInterval${agg}`, String(newValue)); } else { @@ -411,15 +418,15 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } } - async getNumericInterval(agg = 2) { + public async getNumericInterval(agg = 2) { return await testSubjects.getAttribute(`visEditorInterval${agg}`, 'value'); } - async clickMetricEditor() { + public async clickMetricEditor() { await find.clickByCssSelector('[group-name="metrics"] .euiAccordion__button'); } - async clickMetricByIndex(index: number) { + public async clickMetricByIndex(index: number) { log.debug(`clickMetricByIndex(${index})`); const metrics = await find.allByCssSelector( '[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container' @@ -428,7 +435,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP await metrics[index].click(); } - async setSelectByOptionText(selectId: string, optionText: string) { + public async setSelectByOptionText(selectId: string, optionText: string) { const selectField = await find.byCssSelector(`#${selectId}`); const options = await find.allByCssSelector(`#${selectId} > option`); const $ = await selectField.parseDomContent(); diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts index a33b53ea5cb58..7d2809318de84 100644 --- a/test/functional/page_objects/visualize_page.ts +++ b/test/functional/page_objects/visualize_page.ts @@ -35,12 +35,11 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide LOGSTASH_NON_TIME_BASED: 'logstash*', }; - async gotoVisualizationLandingPage() { - log.debug('gotoVisualizationLandingPage'); + public async gotoVisualizationLandingPage() { await common.navigateToApp('visualize'); } - async clickNewVisualization() { + public async clickNewVisualization() { // newItemButton button is only visible when there are items in the listing table is displayed. const exists = await testSubjects.exists('newItemButton'); if (exists) { @@ -48,7 +47,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide } } - async waitForVisualizationSelectPage() { + public async waitForVisualizationSelectPage() { await retry.try(async () => { const visualizeSelectTypePage = await testSubjects.find('visNewDialogTypes'); if (!(await visualizeSelectTypePage.isDisplayed())) { @@ -57,79 +56,78 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide }); } - async navigateToNewVisualization() { - log.debug('navigateToApp visualize'); + public async navigateToNewVisualization() { await common.navigateToApp('visualize'); await this.clickNewVisualization(); await this.waitForVisualizationSelectPage(); } - async clickVisType(type: string) { + public async clickVisType(type: string) { await testSubjects.click(`visType-${type}`); await header.waitUntilLoadingHasFinished(); } - async clickAreaChart() { + public async clickAreaChart() { await this.clickVisType('area'); } - async clickDataTable() { + public async clickDataTable() { await this.clickVisType('table'); } - async clickLineChart() { + public async clickLineChart() { await this.clickVisType('line'); } - async clickRegionMap() { + public async clickRegionMap() { await this.clickVisType('region_map'); } - async clickMarkdownWidget() { + public async clickMarkdownWidget() { await this.clickVisType('markdown'); } - async clickMetric() { + public async clickMetric() { await this.clickVisType('metric'); } - async clickGauge() { + public async clickGauge() { await this.clickVisType('gauge'); } - async clickPieChart() { + public async clickPieChart() { await this.clickVisType('pie'); } - async clickTileMap() { + public async clickTileMap() { await this.clickVisType('tile_map'); } - async clickTagCloud() { + public async clickTagCloud() { await this.clickVisType('tagcloud'); } - async clickVega() { + public async clickVega() { await this.clickVisType('vega'); } - async clickVisualBuilder() { + public async clickVisualBuilder() { await this.clickVisType('metrics'); } - async clickVerticalBarChart() { + public async clickVerticalBarChart() { await this.clickVisType('histogram'); } - async clickHeatmapChart() { + public async clickHeatmapChart() { await this.clickVisType('heatmap'); } - async clickInputControlVis() { + public async clickInputControlVis() { await this.clickVisType('input_control_vis'); } - async createSimpleMarkdownViz(vizName: string) { + public async createSimpleMarkdownViz(vizName: string) { await this.gotoVisualizationLandingPage(); await this.navigateToNewVisualization(); await this.clickMarkdownWidget(); @@ -138,17 +136,12 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide await this.saveVisualization(vizName); } - async getCountOfItemsInListingTable() { - const elements = await find.allByCssSelector('[data-test-subj^="visListingTitleLink"]'); - return elements.length; - } - - async clickNewSearch(indexPattern = this.defaultIndex.LOGSTASH_TIME_BASED) { + public async clickNewSearch(indexPattern = this.defaultIndex.LOGSTASH_TIME_BASED) { await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`); await header.waitUntilLoadingHasFinished(); } - async selectVisSourceIfRequired() { + public async selectVisSourceIfRequired() { log.debug('selectVisSourceIfRequired'); const selectPage = await testSubjects.findAll('visualizeSelectSearch'); if (selectPage.length) { @@ -157,11 +150,10 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide } } - /* - This method should use retry loop to delete visualizations from multiple pages until we find the createVisualizationPromptButton. - Perhaps it *could* set the page size larger than the default 10, but it might still need to loop anyway. - */ - async deleteAllVisualizations() { + /** + * Deletes all existing visualizations + */ + public async deleteAllVisualizations() { await retry.try(async () => { await listingTable.checkListingSelectAllCheckbox(); await listingTable.clickDeleteSelected(); @@ -170,41 +162,41 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide }); } - async isBetaInfoShown() { + public async isBetaInfoShown() { return await testSubjects.exists('betaVisInfo'); } - async getBetaTypeLinks() { + public async getBetaTypeLinks() { return await find.allByCssSelector('[data-vis-stage="beta"]'); } - async getExperimentalTypeLinks() { + public async getExperimentalTypeLinks() { return await find.allByCssSelector('[data-vis-stage="experimental"]'); } - async isExperimentalInfoShown() { + public async isExperimentalInfoShown() { return await testSubjects.exists('experimentalVisInfo'); } - async getExperimentalInfo() { + public async getExperimentalInfo() { return await testSubjects.find('experimentalVisInfo'); } - async getSideEditorExists() { + public async getSideEditorExists() { return await find.existsByCssSelector('.collapsible-sidebar'); } - async clickSavedSearch(savedSearchName: string) { + public async clickSavedSearch(savedSearchName: string) { await testSubjects.click(`savedObjectTitle${savedSearchName.split(' ').join('-')}`); await header.waitUntilLoadingHasFinished(); } - async clickUnlinkSavedSearch() { + public async clickUnlinkSavedSearch() { await testSubjects.doubleClick('unlinkSavedSearch'); await header.waitUntilLoadingHasFinished(); } - async ensureSavePanelOpen() { + public async ensureSavePanelOpen() { log.debug('ensureSavePanelOpen'); await header.waitUntilLoadingHasFinished(); const isOpen = await testSubjects.exists('savedObjectSaveModal', { timeout: 5000 }); @@ -213,34 +205,34 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide } } - async clickLoadSavedVisButton() { + public async clickLoadSavedVisButton() { // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb // element as a child instead of building the breadcrumbs dynamically. await find.clickByCssSelector('[href="#/visualize"]'); } - async clickVisualizationByName(vizName: string) { + public async clickVisualizationByName(vizName: string) { log.debug('clickVisualizationByLinkText(' + vizName + ')'); return find.clickByPartialLinkText(vizName); } - async loadSavedVisualization(vizName: string, { navigateToVisualize = true } = {}) { + public async loadSavedVisualization(vizName: string, { navigateToVisualize = true } = {}) { if (navigateToVisualize) { await this.clickLoadSavedVisButton(); } await this.openSavedVisualization(vizName); } - async openSavedVisualization(vizName: string) { + public async openSavedVisualization(vizName: string) { await this.clickVisualizationByName(vizName); await header.waitUntilLoadingHasFinished(); } - async waitForVisualizationSavedToastGone() { + public async waitForVisualizationSavedToastGone() { return await testSubjects.waitForDeleted('saveVisualizationSuccess'); } - async clickLandingPageBreadcrumbLink() { + public async clickLandingPageBreadcrumbLink() { log.debug('clickLandingPageBreadcrumbLink'); await find.clickByCssSelector(`a[href="#${VisualizeConstants.LANDING_PAGE_PATH}"]`); } @@ -249,13 +241,13 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide * Returns true if already on the landing page (that page doesn't have a link to itself). * @returns {Promise} */ - async onLandingPage() { + public async onLandingPage() { log.debug(`VisualizePage.onLandingPage`); const exists = await testSubjects.exists('visualizeLandingPage'); return exists; } - async gotoLandingPage() { + public async gotoLandingPage() { log.debug('VisualizePage.gotoLandingPage'); const onPage = await this.onLandingPage(); if (!onPage) { @@ -267,7 +259,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide } } - async saveVisualization(vizName: string, { saveAsNew = false } = {}) { + public async saveVisualization(vizName: string, { saveAsNew = false } = {}) { await this.ensureSavePanelOpen(); await testSubjects.setValue('savedObjectTitle', vizName); if (saveAsNew) { @@ -287,7 +279,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide return message; } - async saveVisualizationExpectSuccess(vizName: string, { saveAsNew = false } = {}) { + public async saveVisualizationExpectSuccess(vizName: string, { saveAsNew = false } = {}) { const saveMessage = await this.saveVisualization(vizName, { saveAsNew }); if (!saveMessage) { throw new Error( @@ -296,7 +288,10 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide } } - async saveVisualizationExpectSuccessAndBreadcrumb(vizName: string, { saveAsNew = false } = {}) { + public async saveVisualizationExpectSuccessAndBreadcrumb( + vizName: string, + { saveAsNew = false } = {} + ) { await this.saveVisualizationExpectSuccess(vizName, { saveAsNew }); await retry.waitFor( 'last breadcrumb to have new vis name', From 9c29b1c431d059e7d481860dfab43abff076d3a1 Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Mon, 30 Dec 2019 20:45:59 +0100 Subject: [PATCH 4/9] lost changes --- test/functional/apps/visualize/_line_chart.js | 4 ++-- .../functional/apps/visualize/_point_series_options.js | 4 ++-- test/functional/apps/visualize/_tsvb_table.ts | 8 ++++++-- test/functional/apps/visualize/_vertical_bar_chart.js | 8 ++++---- .../apps/visualize/_vertical_bar_chart_nontimeindex.js | 2 +- test/functional/page_objects/visualize_page.ts | 10 +++++++++- .../functional/apps/visualize/hybrid_visualization.ts | 4 ++-- 7 files changed, 26 insertions(+), 14 deletions(-) diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart.js index a40a1f0337c09..becf66f0fd5b1 100644 --- a/test/functional/apps/visualize/_line_chart.js +++ b/test/functional/apps/visualize/_line_chart.js @@ -66,7 +66,7 @@ export default function({ getService, getPageObjects }) { // sleep a bit before trying to get the chart data await PageObjects.common.sleep(3000); - const data = await PageObjects.visualize.getLineChartData(); + const data = await PageObjects.visChart.getLineChartData(); log.debug('data=' + data); const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1% for (let x = 0; x < data.length; x++) { @@ -100,7 +100,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visEditor.selectOrderByMetric(2, '_key'); await PageObjects.visEditor.clickGo(); await retry.try(async function() { - const data = await PageObjects.visualize.getLineChartData(); + const data = await PageObjects.visChart.getLineChartData(); log.debug('data=' + data); const tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1% for (let x = 0; x < data.length; x++) { diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js index 1edd5919faef0..da5776ae00227 100644 --- a/test/functional/apps/visualize/_point_series_options.js +++ b/test/functional/apps/visualize/_point_series_options.js @@ -131,14 +131,14 @@ export default function({ getService, getPageObjects }) { ]; await retry.try(async () => { - const data = await PageObjects.visualize.getLineChartData('Count'); + const data = await PageObjects.visChart.getLineChartData('Count'); log.debug('count data=' + data); log.debug('data.length=' + data.length); expect(data).to.eql(expectedChartValues[0]); }); await retry.try(async () => { - const avgMemoryData = await PageObjects.visualize.getLineChartData( + const avgMemoryData = await PageObjects.visChart.getLineChartData( 'Average machine.ram', 'ValueAxis-2' ); diff --git a/test/functional/apps/visualize/_tsvb_table.ts b/test/functional/apps/visualize/_tsvb_table.ts index a36b6facb3039..5808212559b18 100644 --- a/test/functional/apps/visualize/_tsvb_table.ts +++ b/test/functional/apps/visualize/_tsvb_table.ts @@ -21,7 +21,11 @@ import expect from '@kbn/expect'; import { FtrProviderContext } from '../../ftr_provider_context'; export default function({ getPageObjects }: FtrProviderContext) { - const { visualBuilder, visualize } = getPageObjects(['visualBuilder', 'visualize']); + const { visualBuilder, visualize, visChart } = getPageObjects([ + 'visualBuilder', + 'visualize', + 'visChart', + ]); describe('visual builder', function describeIndexTests() { describe('table', () => { @@ -32,7 +36,7 @@ export default function({ getPageObjects }: FtrProviderContext) { await visualBuilder.checkTableTabIsPresent(); await visualBuilder.selectGroupByField('machine.os.raw'); await visualBuilder.setColumnLabelValue('OS'); - await visualize.waitForVisualizationRenderingStabilized(); + await visChart.waitForVisualizationRenderingStabilized(); }); it('should display correct values on changing group by field and column name', async () => { diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js index 8252094e42d69..ed807350d0f13 100644 --- a/test/functional/apps/visualize/_vertical_bar_chart.js +++ b/test/functional/apps/visualize/_vertical_bar_chart.js @@ -435,7 +435,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visEditor.clickBucket('Split series'); await PageObjects.visEditor.selectAggregation('Terms'); await PageObjects.visEditor.selectField('response.raw'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); await PageObjects.visEditor.clickGo(); const expectedEntries = ['200', '404', '503']; @@ -472,13 +472,13 @@ export default function({ getService, getPageObjects }) { await PageObjects.visEditor.clickBucket('Split series'); await PageObjects.visEditor.selectAggregation('Terms'); await PageObjects.visEditor.selectField('response.raw'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); await PageObjects.visEditor.toggleOpenEditor(3, 'false'); await PageObjects.visEditor.clickBucket('Split series'); await PageObjects.visEditor.selectAggregation('Terms'); await PageObjects.visEditor.selectField('machine.os'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); await PageObjects.visEditor.clickGo(); const expectedEntries = [ @@ -521,7 +521,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visEditor.toggleOpenEditor(2, 'false'); await PageObjects.visEditor.toggleOpenEditor(1); await PageObjects.visEditor.selectAggregation('Derivative', 'metrics'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); await PageObjects.visEditor.clickGo(); const expectedEntries = ['Derivative of Count']; diff --git a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js index 56df3778bd4b5..de7b12084eed3 100644 --- a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js +++ b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js @@ -45,7 +45,7 @@ export default function({ getService, getPageObjects }) { log.debug('Field = @timestamp'); await PageObjects.visEditor.selectField('@timestamp'); await PageObjects.visEditor.setCustomInterval('3h'); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); }; before(initBarChart); diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts index 7d2809318de84..532401ca662e3 100644 --- a/test/functional/page_objects/visualize_page.ts +++ b/test/functional/page_objects/visualize_page.ts @@ -41,10 +41,18 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide public async clickNewVisualization() { // newItemButton button is only visible when there are items in the listing table is displayed. - const exists = await testSubjects.exists('newItemButton'); + let exists = await testSubjects.exists('newItemButton'); if (exists) { return await testSubjects.click('newItemButton'); } + + exists = await testSubjects.exists('createVisualizationPromptButton'); + // no viz exist, click createVisualizationPromptButton to create new dashboard + return await this.createVisualizationPromptButton(); + } + + public async createVisualizationPromptButton() { + await testSubjects.click('createVisualizationPromptButton'); } public async waitForVisualizationSelectPage() { diff --git a/x-pack/test/functional/apps/visualize/hybrid_visualization.ts b/x-pack/test/functional/apps/visualize/hybrid_visualization.ts index 03b6ed8e8e7c5..5ec6bd275133a 100644 --- a/x-pack/test/functional/apps/visualize/hybrid_visualization.ts +++ b/x-pack/test/functional/apps/visualize/hybrid_visualization.ts @@ -7,7 +7,7 @@ import { FtrProviderContext } from '../../ftr_provider_context'; export default function({ getPageObjects, getService }: FtrProviderContext) { const esArchiver = getService('esArchiver'); - const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); + const PageObjects = getPageObjects(['common', 'visualize', 'timePicker', 'visChart']); const inspector = getService('inspector'); describe('hybrid index pattern', () => { @@ -81,7 +81,7 @@ export default function({ getPageObjects, getService }: FtrProviderContext) { await PageObjects.common.navigateToApp('visualize'); await PageObjects.visualize.clickVisualizationByName('hybrid_histogram_line_chart'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); - await PageObjects.visualize.waitForVisualizationRenderingStabilized(); + await PageObjects.visChart.waitForVisualizationRenderingStabilized(); await inspector.open(); await inspector.setTablePageSize(50); await inspector.expectTableData(expectedData); From 9cd29159c47bab1529bf0fac4c51e8b727eeff46 Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Mon, 30 Dec 2019 21:46:42 +0100 Subject: [PATCH 5/9] more fixes --- test/functional/apps/visualize/_metric_chart.js | 4 ++-- test/functional/apps/visualize/_tag_cloud.js | 2 +- test/functional/page_objects/visualize_editor_page.ts | 3 --- test/functional/services/dashboard/visualizations.js | 2 +- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js index 58d443698d782..1cbddf9e0d533 100644 --- a/test/functional/apps/visualize/_metric_chart.js +++ b/test/functional/apps/visualize/_metric_chart.js @@ -189,7 +189,7 @@ export default function({ getService, getPageObjects }) { let filterCount = 0; await retry.try(async function tryingForTime() { // click first metric bucket - await PageObjects.visualize.clickMetricByIndex(0); + await PageObjects.visEditor.clickMetricByIndex(0); filterCount = await filterBar.getFilterCount(); }); expect(filterCount).to.equal(0); @@ -207,7 +207,7 @@ export default function({ getService, getPageObjects }) { let filterCount = 0; await retry.try(async function tryingForTime() { // click first metric bucket - await PageObjects.visualize.clickMetricByIndex(0); + await PageObjects.visEditor.clickMetricByIndex(0); filterCount = await filterBar.getFilterCount(); }); await filterBar.removeAllFilters(); diff --git a/test/functional/apps/visualize/_tag_cloud.js b/test/functional/apps/visualize/_tag_cloud.js index 61d0646cad24d..4f921cec1fdf1 100644 --- a/test/functional/apps/visualize/_tag_cloud.js +++ b/test/functional/apps/visualize/_tag_cloud.js @@ -127,7 +127,7 @@ export default function({ getService, getPageObjects }) { }); it('should show the tags and relative size', function() { - return PageObjects.visualize.getTextSizes().then(function(results) { + return PageObjects.tagCloud.getTextSizes().then(function(results) { log.debug('results here ' + results); expect(results).to.eql(['72px', '63px', '25px', '32px', '18px']); }); diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts index 8dcd7e0002a65..1811eb34c6f3c 100644 --- a/test/functional/page_objects/visualize_editor_page.ts +++ b/test/functional/page_objects/visualize_editor_page.ts @@ -397,7 +397,6 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } public async setInterval(newValue: string) { - log.debug(`Visualize.setInterval(${newValue})`); await comboBox.set('visEditorInterval', newValue); } @@ -406,7 +405,6 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } public async setCustomInterval(newValue: string) { - log.debug(`Visualize.setCustomInterval(${newValue})`); await comboBox.setCustom('visEditorInterval', newValue); } @@ -427,7 +425,6 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } public async clickMetricByIndex(index: number) { - log.debug(`clickMetricByIndex(${index})`); const metrics = await find.allByCssSelector( '[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container' ); diff --git a/test/functional/services/dashboard/visualizations.js b/test/functional/services/dashboard/visualizations.js index ee6491cb50f6d..5e722ccce8970 100644 --- a/test/functional/services/dashboard/visualizations.js +++ b/test/functional/services/dashboard/visualizations.js @@ -107,7 +107,7 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) { } await this.ensureNewVisualizationDialogIsShowing(); await PageObjects.visualize.clickMarkdownWidget(); - await PageObjects.visualize.setMarkdownTxt(markdown); + await PageObjects.visEditor.setMarkdownTxt(markdown); await PageObjects.visEditor.clickGo(); await PageObjects.visualize.saveVisualizationExpectSuccess(name); } From 885b0585fc000e4092ca3792f938208c82e70bfe Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Thu, 2 Jan 2020 11:03:28 +0100 Subject: [PATCH 6/9] fix tslint error --- test/functional/page_objects/share_page.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/functional/page_objects/share_page.ts b/test/functional/page_objects/share_page.ts index d0fb46369f98d..fc8db9b78a03f 100644 --- a/test/functional/page_objects/share_page.ts +++ b/test/functional/page_objects/share_page.ts @@ -19,10 +19,9 @@ import { FtrProviderContext } from '../ftr_provider_context'; -export function SharePageProvider({ getService, getPageObjects }: FtrProviderContext) { +export function SharePageProvider({ getService }: FtrProviderContext) { const testSubjects = getService('testSubjects'); const find = getService('find'); - const PageObjects = getPageObjects(['visualize', 'common']); const log = getService('log'); class SharePage { From 4ab65d7be5769d3dea5f3153334076dd62792ea6 Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Fri, 3 Jan 2020 16:07:29 +0100 Subject: [PATCH 7/9] refactor POs --- test/functional/apps/visualize/_data_table.js | 4 +-- .../visualize/_data_table_nontimeindex.js | 4 +-- .../apps/visualize/_embedding_chart.js | 2 +- .../visualize/_histogram_request_start.js | 4 +-- test/functional/apps/visualize/_pie_chart.js | 4 +-- .../_vertical_bar_chart_nontimeindex.js | 2 +- .../functional/page_objects/tag_cloud_page.ts | 6 ++-- test/functional/page_objects/tile_map_page.ts | 22 ++++++------ .../page_objects/visualize_chart_page.ts | 2 +- .../page_objects/visualize_editor_page.ts | 36 +++++++++++-------- .../functional/page_objects/visualize_page.ts | 11 +++--- test/functional/services/listing_table.ts | 8 ++--- 12 files changed, 56 insertions(+), 49 deletions(-) diff --git a/test/functional/apps/visualize/_data_table.js b/test/functional/apps/visualize/_data_table.js index f3575d7a8afb3..483d262002b4f 100644 --- a/test/functional/apps/visualize/_data_table.js +++ b/test/functional/apps/visualize/_data_table.js @@ -52,12 +52,12 @@ export default function({ getService, getPageObjects }) { log.debug('Field = bytes'); await PageObjects.visEditor.selectField('bytes'); log.debug('Interval = 2000'); - await PageObjects.visEditor.setNumericInterval('2000'); + await PageObjects.visEditor.setInterval('2000', { type: 'numeric' }); await PageObjects.visEditor.clickGo(); }); it('should allow applying changed params', async () => { - await PageObjects.visEditor.setNumericInterval('1', { append: true }); + await PageObjects.visEditor.setInterval('1', { type: 'numeric', append: true }); const interval = await PageObjects.visEditor.getNumericInterval(); expect(interval).to.be('20001'); const isApplyButtonEnabled = await PageObjects.visEditor.isApplyEnabled(); diff --git a/test/functional/apps/visualize/_data_table_nontimeindex.js b/test/functional/apps/visualize/_data_table_nontimeindex.js index e6d7a7fce9070..f6545e7d0d621 100644 --- a/test/functional/apps/visualize/_data_table_nontimeindex.js +++ b/test/functional/apps/visualize/_data_table_nontimeindex.js @@ -46,12 +46,12 @@ export default function({ getService, getPageObjects }) { log.debug('Field = bytes'); await PageObjects.visEditor.selectField('bytes'); log.debug('Interval = 2000'); - await PageObjects.visEditor.setNumericInterval('2000'); + await PageObjects.visEditor.setInterval('2000', { type: 'numeric' }); await PageObjects.visEditor.clickGo(); }); it('should allow applying changed params', async () => { - await PageObjects.visEditor.setNumericInterval('1', true); + await PageObjects.visEditor.setInterval('1', { type: 'numeric', append: true }); const interval = await PageObjects.visEditor.getNumericInterval(); expect(interval).to.be('20001'); const isApplyButtonEnabled = await PageObjects.visEditor.isApplyEnabled(); diff --git a/test/functional/apps/visualize/_embedding_chart.js b/test/functional/apps/visualize/_embedding_chart.js index a15911a9837b1..a2d957b257bc6 100644 --- a/test/functional/apps/visualize/_embedding_chart.js +++ b/test/functional/apps/visualize/_embedding_chart.js @@ -47,7 +47,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visEditor.clickBucket('Split rows'); await PageObjects.visEditor.selectAggregation('Histogram'); await PageObjects.visEditor.selectField('bytes'); - await PageObjects.visEditor.setNumericInterval('2000', undefined, 3); + await PageObjects.visEditor.setInterval('2000', { type: 'numeric', aggNth: 3 }); await PageObjects.visEditor.clickGo(); }); diff --git a/test/functional/apps/visualize/_histogram_request_start.js b/test/functional/apps/visualize/_histogram_request_start.js index fe7a7d392bdb7..a74fa8856a3b3 100644 --- a/test/functional/apps/visualize/_histogram_request_start.js +++ b/test/functional/apps/visualize/_histogram_request_start.js @@ -50,7 +50,7 @@ export default function({ getService, getPageObjects }) { it('should use provided value when number of generated buckets is less than histogram:maxBars', async function() { const providedInterval = 2400000000; log.debug(`Interval = ${providedInterval}`); - await PageObjects.visEditor.setNumericInterval(providedInterval); + await PageObjects.visEditor.setInterval(providedInterval, { type: 'numeric' }); await PageObjects.visEditor.clickGo(); await retry.try(async () => { const data = await PageObjects.visChart.getTableVisData(); @@ -66,7 +66,7 @@ export default function({ getService, getPageObjects }) { it('should scale value to round number when number of generated buckets is greater than histogram:maxBars', async function() { const providedInterval = 100; log.debug(`Interval = ${providedInterval}`); - await PageObjects.visEditor.setNumericInterval(providedInterval); + await PageObjects.visEditor.setInterval(providedInterval, { type: 'numeric' }); await PageObjects.visEditor.clickGo(); await PageObjects.common.sleep(1000); //fix this await retry.try(async () => { diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.js index 4a35d1f80250b..4fb677c717d91 100644 --- a/test/functional/apps/visualize/_pie_chart.js +++ b/test/functional/apps/visualize/_pie_chart.js @@ -52,7 +52,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.common.sleep(1003); log.debug('setNumericInterval 4000'); - await PageObjects.visEditor.setNumericInterval('40000'); + await PageObjects.visEditor.setInterval('40000', { type: 'numeric' }); log.debug('clickGo'); await PageObjects.visEditor.clickGo(); }); @@ -343,7 +343,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.common.sleep(1003); log.debug('setNumericInterval 4000'); - await PageObjects.visEditor.setNumericInterval('40000'); + await PageObjects.visEditor.setInterval('40000', { type: 'numeric' }); log.debug('Toggle previous editor'); await PageObjects.visEditor.toggleAggregationEditor(2); log.debug('select bucket Split slices'); diff --git a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js index de7b12084eed3..2371df6e92476 100644 --- a/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js +++ b/test/functional/apps/visualize/_vertical_bar_chart_nontimeindex.js @@ -44,7 +44,7 @@ export default function({ getService, getPageObjects }) { await PageObjects.visEditor.selectAggregation('Date Histogram'); log.debug('Field = @timestamp'); await PageObjects.visEditor.selectField('@timestamp'); - await PageObjects.visEditor.setCustomInterval('3h'); + await PageObjects.visEditor.setInterval('3h', { type: 'custom' }); await PageObjects.visChart.waitForVisualizationRenderingStabilized(); }; diff --git a/test/functional/page_objects/tag_cloud_page.ts b/test/functional/page_objects/tag_cloud_page.ts index 48bffc102696d..7d87caa39b2fb 100644 --- a/test/functional/page_objects/tag_cloud_page.ts +++ b/test/functional/page_objects/tag_cloud_page.ts @@ -26,18 +26,18 @@ export function TagCloudPageProvider({ getService, getPageObjects }: FtrProvider const { header, visChart } = getPageObjects(['header', 'visChart']); class TagCloudPage { - async selectTagCloudTag(tagDisplayText: string) { + public async selectTagCloudTag(tagDisplayText: string) { await testSubjects.click(tagDisplayText); await header.waitUntilLoadingHasFinished(); } - async getTextTag() { + public async getTextTag() { await visChart.waitForVisualization(); const elements = await find.allByCssSelector('text'); return await Promise.all(elements.map(async element => await element.getVisibleText())); } - async getTextSizes() { + public async getTextSizes() { const tags = await find.allByCssSelector('text'); async function returnTagSize(tag: WebElementWrapper) { const style = await tag.getAttribute('style'); diff --git a/test/functional/page_objects/tile_map_page.ts b/test/functional/page_objects/tile_map_page.ts index 5147df996a1eb..2614d39dc7107 100644 --- a/test/functional/page_objects/tile_map_page.ts +++ b/test/functional/page_objects/tile_map_page.ts @@ -28,11 +28,11 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC const { header } = getPageObjects(['common', 'header']); class TileMapPage { - async getZoomSelectors(zoomSelector: string) { + public async getZoomSelectors(zoomSelector: string) { return await find.allByCssSelector(zoomSelector); } - async clickMapButton(zoomSelector: string, waitForLoading?: boolean) { + public async clickMapButton(zoomSelector: string, waitForLoading?: boolean) { await retry.try(async () => { const zooms = await this.getZoomSelectors(zoomSelector); await Promise.all(zooms.map(async zoom => await zoom.click())); @@ -42,7 +42,7 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC }); } - async getVisualizationRequest() { + public async getVisualizationRequest() { log.debug('getVisualizationRequest'); await inspector.open(); await testSubjects.click('inspectorViewChooser'); @@ -51,21 +51,21 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC return await testSubjects.getVisibleText('inspectorRequestBody'); } - async getMapBounds() { + public async getMapBounds(): Promise { const request = await this.getVisualizationRequest(); const requestObject = JSON.parse(request); return requestObject.aggs.filter_agg.filter.geo_bounding_box['geo.coordinates']; } - async clickMapZoomIn(waitForLoading = true) { + public async clickMapZoomIn(waitForLoading = true) { await this.clickMapButton('a.leaflet-control-zoom-in', waitForLoading); } - async clickMapZoomOut(waitForLoading = true) { + public async clickMapZoomOut(waitForLoading = true) { await this.clickMapButton('a.leaflet-control-zoom-out', waitForLoading); } - async getMapZoomEnabled(zoomSelector: string) { + public async getMapZoomEnabled(zoomSelector: string): Promise { const zooms = await this.getZoomSelectors(zoomSelector); const classAttributes = await Promise.all( zooms.map(async zoom => await zoom.getAttribute('class')) @@ -73,7 +73,7 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC return !classAttributes.join('').includes('leaflet-disabled'); } - async zoomAllTheWayOut() { + public async zoomAllTheWayOut(): Promise { // we can tell we're at level 1 because zoom out is disabled return await retry.try(async () => { await this.clickMapZoomOut(); @@ -85,15 +85,15 @@ export function TileMapPageProvider({ getService, getPageObjects }: FtrProviderC }); } - async getMapZoomInEnabled() { + public async getMapZoomInEnabled() { return await this.getMapZoomEnabled('a.leaflet-control-zoom-in'); } - async getMapZoomOutEnabled() { + public async getMapZoomOutEnabled() { return await this.getMapZoomEnabled('a.leaflet-control-zoom-out'); } - async clickMapFitDataBounds() { + public async clickMapFitDataBounds() { return await this.clickMapButton('a.fa-crop'); } } diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index 02fa05667b8f9..d5654dc24b4b0 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -273,7 +273,7 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr public async waitForVisualization() { await this.waitForVisualizationRenderingStabilized(); - return await find.byCssSelector('.visualization'); + await find.byCssSelector('.visualization'); } public async getLegendEntries() { diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts index 1811eb34c6f3c..824bdab3eee13 100644 --- a/test/functional/page_objects/visualize_editor_page.ts +++ b/test/functional/page_objects/visualize_editor_page.ts @@ -29,6 +29,12 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP const comboBox = getService('comboBox'); const { common, header, visChart } = getPageObjects(['common', 'header', 'visChart']); + interface IntervalOptions { + type: 'default' | 'numeric' | 'custom'; + aggNth: number; + append: boolean; + } + class VisualizeEditorPage { public async clickDataTab() { await testSubjects.click('visualizeEditDataLink'); @@ -396,26 +402,28 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue); } - public async setInterval(newValue: string) { - await comboBox.set('visEditorInterval', newValue); + public async setInterval( + newValue: string, + { type = 'default', aggNth = 2, append = false }: IntervalOptions + ) { + log.debug(`visEditor.setInterval(${newValue}, {${type}, ${aggNth}, ${append}})`); + if (type === 'default') { + await comboBox.set('visEditorInterval', newValue); + } else if (type === 'custom') { + await comboBox.setCustom('visEditorInterval', newValue); + } else { + if (append) { + await testSubjects.append(`visEditorInterval${aggNth}`, String(newValue)); + } else { + await testSubjects.setValue(`visEditorInterval${aggNth}`, String(newValue)); + } + } } public async getInterval() { return await comboBox.getComboBoxSelectedOptions('visEditorInterval'); } - public async setCustomInterval(newValue: string) { - await comboBox.setCustom('visEditorInterval', newValue); - } - - public async setNumericInterval(newValue: string, options = { append: false }, agg = 2) { - if (options.append) { - await testSubjects.append(`visEditorInterval${agg}`, String(newValue)); - } else { - await testSubjects.setValue(`visEditorInterval${agg}`, String(newValue)); - } - } - public async getNumericInterval(agg = 2) { return await testSubjects.getAttribute(`visEditorInterval${agg}`, 'value'); } diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts index 532401ca662e3..4450b59814a4f 100644 --- a/test/functional/page_objects/visualize_page.ts +++ b/test/functional/page_objects/visualize_page.ts @@ -30,7 +30,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide const { common, header, visEditor } = getPageObjects(['common', 'header', 'visEditor']); class VisualizePage { - defaultIndex = { + index = { LOGSTASH_TIME_BASED: 'logstash-*', LOGSTASH_NON_TIME_BASED: 'logstash*', }; @@ -144,7 +144,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide await this.saveVisualization(vizName); } - public async clickNewSearch(indexPattern = this.defaultIndex.LOGSTASH_TIME_BASED) { + public async clickNewSearch(indexPattern = this.index.LOGSTASH_TIME_BASED) { await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`); await header.waitUntilLoadingHasFinished(); } @@ -221,7 +221,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide public async clickVisualizationByName(vizName: string) { log.debug('clickVisualizationByLinkText(' + vizName + ')'); - return find.clickByPartialLinkText(vizName); + await find.clickByPartialLinkText(vizName); } public async loadSavedVisualization(vizName: string, { navigateToVisualize = true } = {}) { @@ -237,7 +237,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide } public async waitForVisualizationSavedToastGone() { - return await testSubjects.waitForDeleted('saveVisualizationSuccess'); + await testSubjects.waitForDeleted('saveVisualizationSuccess'); } public async clickLandingPageBreadcrumbLink() { @@ -251,8 +251,7 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide */ public async onLandingPage() { log.debug(`VisualizePage.onLandingPage`); - const exists = await testSubjects.exists('visualizeLandingPage'); - return exists; + return await testSubjects.exists('visualizeLandingPage'); } public async gotoLandingPage() { diff --git a/test/functional/services/listing_table.ts b/test/functional/services/listing_table.ts index 11ca6754cc9bf..ec886cf694f2e 100644 --- a/test/functional/services/listing_table.ts +++ b/test/functional/services/listing_table.ts @@ -26,7 +26,6 @@ export function ListingTableProvider({ getService, getPageObjects }: FtrProvider const retry = getService('retry'); const { common, header } = getPageObjects(['common', 'header']); - // Currently on Dashboard, Visualize and Settings page class ListingTable { public async getSearchFilter() { const searchFilter = await find.allByCssSelector('.euiFieldSearch'); @@ -38,6 +37,7 @@ export function ListingTableProvider({ getService, getPageObjects }: FtrProvider await searchFilter.clearValue(); await searchFilter.click(); } + public async getAllVisualizationNamesOnCurrentPage(): Promise { const visualizationNames = []; const links = await find.allByCssSelector('.kuiLink'); @@ -48,7 +48,7 @@ export function ListingTableProvider({ getService, getPageObjects }: FtrProvider return visualizationNames; } - async getItemsCount(appName: 'visualize' | 'dashboard') { + public async getItemsCount(appName: 'visualize' | 'dashboard'): Promise { const prefixMap = { visualize: 'vis', dashboard: 'dashboard' }; const elements = await find.allByCssSelector( `[data-test-subj^="${prefixMap[appName]}ListingTitleLink"]` @@ -71,11 +71,11 @@ export function ListingTableProvider({ getService, getPageObjects }: FtrProvider await header.waitUntilLoadingHasFinished(); } - async clickDeleteSelected() { + public async clickDeleteSelected() { await testSubjects.click('deleteSelectedItems'); } - async checkListingSelectAllCheckbox() { + public async checkListingSelectAllCheckbox() { const element = await testSubjects.find('checkboxSelectAll'); const isSelected = await element.isSelected(); if (!isSelected) { From bd0e10bd7c9d1e60aa3d0a42fc5bb89c6b1eb57b Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Fri, 3 Jan 2020 18:48:50 +0100 Subject: [PATCH 8/9] add vega_chart_page, refactor --- test/functional/apps/visualize/_area_chart.js | 1 - test/functional/apps/visualize/_data_table.js | 9 +- .../visualize/_data_table_nontimeindex.js | 2 +- .../apps/visualize/_embedding_chart.js | 1 - .../apps/visualize/_experimental_vis.js | 2 +- .../functional/apps/visualize/_gauge_chart.js | 8 +- .../apps/visualize/_heatmap_chart.js | 8 +- test/functional/apps/visualize/_inspector.js | 8 +- .../apps/visualize/_markdown_vis.js | 2 +- .../apps/visualize/_metric_chart.js | 8 +- test/functional/apps/visualize/_pie_chart.js | 1 - .../apps/visualize/_point_series_options.js | 1 - test/functional/apps/visualize/_region_map.js | 8 +- test/functional/apps/visualize/_tile_map.js | 1 - test/functional/apps/visualize/_vega_chart.js | 12 +-- .../apps/visualize/_vertical_bar_chart.js | 9 +- .../apps/visualize/_visualize_listing.js | 2 +- test/functional/page_objects/index.ts | 3 +- test/functional/page_objects/tile_map_page.ts | 2 +- .../page_objects/vega_chart_page.ts | 91 +++++++++++++++++++ .../page_objects/visualize_chart_page.ts | 20 ---- .../page_objects/visualize_editor_page.ts | 12 +-- test/functional/services/screenshots.ts | 2 +- 23 files changed, 117 insertions(+), 96 deletions(-) create mode 100644 test/functional/page_objects/vega_chart_page.ts diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js index ee63266fa62af..e52cfdf478c33 100644 --- 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 index 483d262002b4f..0a9ff1e77a2ef 100644 --- 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 index f6545e7d0d621..3db3cd094a81b 100644 --- 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 index a2d957b257bc6..940aa3eb5d462 100644 --- 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 index ae364244b4f5c..2ce15cf913eff 100644 --- 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 index 97582b5f8e599..7ebb4548f967b 100644 --- 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 index f66c0b988190b..2cea861d0f64d 100644 --- 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 index 53395db70f877..84f955d9c7879 100644 --- 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 index 13f8972ca97b6..51c03c90f507b 100644 --- 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 index 1cbddf9e0d533..6a95f7553943c 100644 --- 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 index 4fb677c717d91..313a4e39e5030 100644 --- 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 index da5776ae00227..e7ce5808554b4 100644 --- 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 index dcdb10739ade8..10cbd9913c70c 100644 --- 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 index 7c2f8122c8437..397eaeb0f3013 100644 --- 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 index ee891c29864c1..df0603c7f95f5 100644 --- 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,7 +40,7 @@ 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'); @@ -48,7 +48,7 @@ export default function({ getService, getPageObjects }) { }); 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 index ed807350d0f13..2efa812c7a734 100644 --- 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 index 2c94a3ab4f131..e277c3c7d104d 100644 --- 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 index 91c5e162e2754..5526243ea2bbd 100644 --- 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 index 2614d39dc7107..b41578f782af4 100644 --- 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 new file mode 100644 index 0000000000000..9931ebebef6ef --- /dev/null +++ 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 index d5654dc24b4b0..310f7324caccb 100644 --- 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. */ diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts index 824bdab3eee13..7e512975356f3 100644 --- a/test/functional/page_objects/visualize_editor_page.ts +++ b/test/functional/page_objects/visualize_editor_page.ts @@ -30,9 +30,9 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP const { common, header, visChart } = getPageObjects(['common', 'header', 'visChart']); interface IntervalOptions { - type: 'default' | 'numeric' | 'custom'; - aggNth: number; - append: boolean; + type?: 'default' | 'numeric' | 'custom'; + aggNth?: number; + append?: boolean; } class VisualizeEditorPage { @@ -402,10 +402,8 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP await testSubjects.selectValue('visDefaultEditorAggregateWith', fieldValue); } - public async setInterval( - newValue: string, - { type = 'default', aggNth = 2, append = false }: IntervalOptions - ) { + public async setInterval(newValue: string, options: IntervalOptions = {}) { + const { type = 'default', aggNth = 2, append = false } = options; log.debug(`visEditor.setInterval(${newValue}, {${type}, ${aggNth}, ${append}})`); if (type === 'default') { await comboBox.set('visEditorInterval', newValue); diff --git a/test/functional/services/screenshots.ts b/test/functional/services/screenshots.ts index 9e673fe919a74..4c5728174cf99 100644 --- a/test/functional/services/screenshots.ts +++ b/test/functional/services/screenshots.ts @@ -51,7 +51,7 @@ export async function ScreenshotsProvider({ getService }: FtrProviderContext) { * @param updateBaselines {boolean} optional, pass true to update the baseline snapshot. * @return {Promise.} Percentage difference between the baseline and the current snapshot. */ - async compareAgainstBaseline(name: string, updateBaselines: boolean, el: WebElementWrapper) { + async compareAgainstBaseline(name: string, updateBaselines: boolean, el?: WebElementWrapper) { log.debug('compareAgainstBaseline'); const sessionPath = resolve(SESSION_DIRECTORY, `${name}.png`); await this._take(sessionPath, el); From 82b6fdb37e4fc7151c498ec8c052e7fb3472c1e2 Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Tue, 7 Jan 2020 11:55:20 +0100 Subject: [PATCH 9/9] review fix --- test/functional/apps/visualize/_chart_types.ts | 4 ++-- .../page_objects/visualize_chart_page.ts | 13 ------------- test/functional/page_objects/visualize_page.ts | 17 +++++++++++++++++ 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/test/functional/apps/visualize/_chart_types.ts b/test/functional/apps/visualize/_chart_types.ts index 038bc47d47d46..5a3c54ccff1fc 100644 --- a/test/functional/apps/visualize/_chart_types.ts +++ b/test/functional/apps/visualize/_chart_types.ts @@ -23,7 +23,7 @@ import { FtrProviderContext } from '../../ftr_provider_context'; // eslint-disable-next-line import/no-default-export export default function({ getService, getPageObjects }: FtrProviderContext) { const log = getService('log'); - const PageObjects = getPageObjects(['common', 'visualize', 'visChart']); + const PageObjects = getPageObjects(['common', 'visualize']); let isOss = true; describe('chart types', function() { @@ -61,7 +61,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { log.debug('oss= ' + isOss); // find all the chart types and make sure there all there - const chartTypes = await PageObjects.visChart.getChartTypes(); + const chartTypes = await PageObjects.visualize.getChartTypes(); log.debug('returned chart types = ' + chartTypes); log.debug('expected chart types = ' + expectedChartTypes); expect(chartTypes).to.eql(expectedChartTypes); diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index 310f7324caccb..138e5758ede7c 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -226,19 +226,6 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr await testSubjects.existOrFail('visLibVisualizeError'); } - public async getChartTypes() { - const chartTypeField = await testSubjects.find('visNewDialogTypes'); - const $ = await chartTypeField.parseDomContent(); - return $('button') - .toArray() - .map(chart => - $(chart) - .findTestSubject('visTypeTitle') - .text() - .trim() - ); - } - public async getVisualizationRenderingCount() { const visualizationLoader = await testSubjects.find('visualizationLoader'); const renderingCount = await visualizationLoader.getAttribute('data-rendering-count'); diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts index 4450b59814a4f..1562cf9745f2d 100644 --- a/test/functional/page_objects/visualize_page.ts +++ b/test/functional/page_objects/visualize_page.ts @@ -29,6 +29,10 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide const listingTable = getService('listingTable'); const { common, header, visEditor } = getPageObjects(['common', 'header', 'visEditor']); + /** + * This page object contains the visualization type selection, the landing page, + * and the open/save dialog functions + */ class VisualizePage { index = { LOGSTASH_TIME_BASED: 'logstash-*', @@ -55,6 +59,19 @@ export function VisualizePageProvider({ getService, getPageObjects }: FtrProvide await testSubjects.click('createVisualizationPromptButton'); } + public async getChartTypes() { + const chartTypeField = await testSubjects.find('visNewDialogTypes'); + const $ = await chartTypeField.parseDomContent(); + return $('button') + .toArray() + .map(chart => + $(chart) + .findTestSubject('visTypeTitle') + .text() + .trim() + ); + } + public async waitForVisualizationSelectPage() { await retry.try(async () => { const visualizeSelectTypePage = await testSubjects.find('visNewDialogTypes');