From 89aff0210ff00bd24e0c915cecb98c5104ff43d7 Mon Sep 17 00:00:00 2001 From: LeeDr Date: Mon, 14 Mar 2016 14:40:53 -0500 Subject: [PATCH 1/4] Changes to methods for getting more specific chart data to cover integration testing. --- test/functional/apps/visualize/_area_chart.js | 2 +- test/functional/apps/visualize/_line_chart.js | 2 +- test/support/pages/visualize_page.js | 124 ++++++++++++------ 3 files changed, 84 insertions(+), 44 deletions(-) diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js index a456dfec3ed748..4770acd3d726a9 100644 --- a/test/functional/apps/visualize/_area_chart.js +++ b/test/functional/apps/visualize/_area_chart.js @@ -150,7 +150,7 @@ define(function (require) { expect(labels).to.eql(yAxisLabels); }) .then(function getAreaChartData() { - return visualizePage.getAreaChartData(); + return visualizePage.getAreaChartData('count'); }) .then(function (paths) { common.debug('expectedAreaChartData = ' + expectedAreaChartData); diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart.js index 539758e69bb6bb..823a34acc51fc5 100644 --- a/test/functional/apps/visualize/_line_chart.js +++ b/test/functional/apps/visualize/_line_chart.js @@ -122,7 +122,7 @@ define(function (require) { // sleep a bit before trying to get the chart data return common.sleep(3000) .then(function () { - return visualizePage.getLineChartData() + return visualizePage.getLineChartData('fill="#57c17b"') .then(function showData(data) { var tolerance = 10; // the y-axis scale is 10000 so 10 is 0.1% for (var x = 0; x < data.length; x++) { diff --git a/test/support/pages/visualize_page.js b/test/support/pages/visualize_page.js index 2ac4fbb2484d68..b7cea331c9588e 100644 --- a/test/support/pages/visualize_page.js +++ b/test/support/pages/visualize_page.js @@ -327,22 +327,71 @@ define(function (require) { }); }, - // saved visualizations are paginated 5 to a page! - loadSavedVisualization: function loadSavedVisualization(vizName) { - var self = this; + + clickLoadSavedVisButton: function clickLoadSavedVisButton() { return this.remote .setFindTimeout(defaultTimeout) .findByCssSelector('button.ng-scope[aria-label="Load Saved Visualization"]') - .click() - .then(function findVizByLinkedText() { - common.debug('Load Saved Vis button clicked'); + .click(); + }, + + filterVisByName: function filterVisByName(vizName) { + var self = this; + return this.remote + .findByCssSelector('input[name="filter"]') + .then(function (filter) { + return self.remote.moveMouseTo(filter); + }) + .then (function () { + return self.remote + .findByCssSelector('input[name="filter"]') + .click() + .type(vizName.replace('-',' ')); + }) + .then (function () { + common.sleep(3000); + }); + }, + + clickVisualizationByLinkText: function clickVisualizationByLinkText(vizName) { + var self = this; + common.debug('clickVisualizationByLinkText(' + vizName + ')'); + return this.remote + .setFindTimeout(defaultTimeout) + .findByLinkText(vizName) + .then(function (link) { + return self.remote.moveMouseTo(link); + }) + .then (function () { return self.remote - .setFindTimeout(defaultTimeout) .findByLinkText(vizName) .click(); }); }, + // this starts by clicking the Load Saved Viz button, not from the + // bottom half of the "Create a new visualization Step 1" page + loadSavedVisualization: function loadSavedVisualization(vizName) { + var self = this; + return this.clickLoadSavedVisButton() + .then(function filterVisualization() { + return self.filterVisByName(vizName); + }) + .then(function clickDashboardByLinkedText() { + return self.clickVisualizationByLinkText(vizName); + }); + }, + + // this starts on the + // bottom half of the "Create a new visualization Step 1" page + openSavedVisualization: function openSavedVisualization(vizName) { + var self = this; + return self.filterVisByName(vizName) + .then(function clickDashboardByLinkedText() { + return self.clickVisualizationByLinkText(vizName); + }); + }, + getXAxisLabels: function getXAxisLabels() { return this.remote .setFindTimeout(defaultTimeout) @@ -385,7 +434,7 @@ define(function (require) { ** This method gets the chart data and scales it based on chart height and label. ** Returns an array of height values */ - getAreaChartData: function getAreaChartData() { + getAreaChartData: function getAreaChartData(aggregateName) { var self = this.remote; var chartData = []; @@ -404,7 +453,7 @@ define(function (require) { return y.getVisibleText(); }) .then(function (yLabel) { - yAxisLabel = yLabel.replace(',', ''); + yAxisLabel = yLabel.replace(',', '').replace('%',''); common.debug('yAxisLabel = ' + yAxisLabel); return yLabel; }) @@ -423,43 +472,27 @@ define(function (require) { }) .then(function () { return self.setFindTimeout(defaultTimeout * 2) - .findAllByCssSelector('path') - .then(function (chartTypes) { - - function getChartType(chart) { - return chart - .getAttribute('data-label') - .then(function (chartString) { - //common.debug('data-label = ' + chartString); - if (chartString === 'Count') { - return chart.getAttribute('d') - .then(function (data) { - common.debug(data); - tempArray = data.split('L'); - chartSections = tempArray.length / 2; - common.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel); - chartData[0] = Math.round((yAxisHeight - tempArray[0].split(',')[1]) / yAxisHeight * yAxisLabel); - common.debug('chartData[0] =' + chartData[0]); - for (var i = 1; i < chartSections; i++) { - chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) / yAxisHeight * yAxisLabel); - common.debug('chartData[i] =' + chartData[i]); - } - return chartData; - }); - } - }); - } - var getChartTypesPromises = chartTypes.map(getChartType); - return Promise.all(getChartTypesPromises); - }); + .findByCssSelector('path[data-label="' + aggregateName + '"]'); + }) + .then(function (chart) { + return chart.getAttribute('d'); }) - .then(function (chartData) { - return chartData[1]; // MAGIC NUMBER - we find multiple 'path's and only one of them is the right one. + .then(function (data) { + common.debug(data); + tempArray = data.replace('M','').split('L'); + chartSections = tempArray.length / 2; + common.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel); + for (var i = 0; i < chartSections; i++) { + chartData[i] = Math.round((yAxisHeight - tempArray[i].split(',')[1]) / yAxisHeight * yAxisLabel); + common.debug('chartData[i] =' + chartData[i]); + } + return chartData; }); }, + // The current test shows dots, not a line. This function gets the dots and normalizes their height. - getLineChartData: function getLineChartData() { + getLineChartData: function getLineChartData(cssPart) { var self = this.remote; var yAxisLabel = 0; var yAxisHeight; @@ -502,7 +535,7 @@ define(function (require) { // 5). for each chart element, find the green circle, then the cy position function getChartType(chart) { return chart - .findByCssSelector('circle[fill="#57c17b"]') + .findByCssSelector('circle[' + cssPart + ']') .then(function (circleObject) { // common.debug('circleObject = ' + circleObject + ' yAxisHeight= ' + yAxisHeight + ' yAxisLabel= ' + yAxisLabel); return circleObject @@ -636,6 +669,13 @@ define(function (require) { .getVisibleText(); }, + getMarkdownData: function getMarkdownData() { + return this.remote + .setFindTimeout(defaultTimeout) + .findByCssSelector('visualize.ng-isolate-scope') + .getVisibleText(); + }, + clickColumns: function clickColumns() { return this.remote .setFindTimeout(defaultTimeout) From 78c2d07beee02d0b7d3fc45a5c93f126507f0628 Mon Sep 17 00:00:00 2001 From: LeeDr Date: Wed, 16 Mar 2016 12:18:38 -0500 Subject: [PATCH 2/4] use Count not count on area chart test. Remove moveMouseTo for now. --- test/functional/apps/visualize/_area_chart.js | 2 +- test/support/pages/visualize_page.js | 37 ++++++------------- 2 files changed, 12 insertions(+), 27 deletions(-) diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js index 4770acd3d726a9..b7c5617f406ccf 100644 --- a/test/functional/apps/visualize/_area_chart.js +++ b/test/functional/apps/visualize/_area_chart.js @@ -150,7 +150,7 @@ define(function (require) { expect(labels).to.eql(yAxisLabels); }) .then(function getAreaChartData() { - return visualizePage.getAreaChartData('count'); + return visualizePage.getAreaChartData('Count'); }) .then(function (paths) { common.debug('expectedAreaChartData = ' + expectedAreaChartData); diff --git a/test/support/pages/visualize_page.js b/test/support/pages/visualize_page.js index b7cea331c9588e..f39dc71a3ef613 100644 --- a/test/support/pages/visualize_page.js +++ b/test/support/pages/visualize_page.js @@ -336,21 +336,13 @@ define(function (require) { }, filterVisByName: function filterVisByName(vizName) { - var self = this; return this.remote .findByCssSelector('input[name="filter"]') - .then(function (filter) { - return self.remote.moveMouseTo(filter); - }) - .then (function () { - return self.remote - .findByCssSelector('input[name="filter"]') - .click() - .type(vizName.replace('-',' ')); - }) - .then (function () { - common.sleep(3000); - }); + .click() + // can't uses dashes in saved visualizations when filtering + // or extended character sets + // https://github.com/elastic/kibana/issues/6300 + .type(vizName.replace('-',' ')); }, clickVisualizationByLinkText: function clickVisualizationByLinkText(vizName) { @@ -359,14 +351,7 @@ define(function (require) { return this.remote .setFindTimeout(defaultTimeout) .findByLinkText(vizName) - .then(function (link) { - return self.remote.moveMouseTo(link); - }) - .then (function () { - return self.remote - .findByLinkText(vizName) - .click(); - }); + .click(); }, // this starts by clicking the Load Saved Viz button, not from the @@ -375,18 +360,18 @@ define(function (require) { var self = this; return this.clickLoadSavedVisButton() .then(function filterVisualization() { - return self.filterVisByName(vizName); - }) - .then(function clickDashboardByLinkedText() { - return self.clickVisualizationByLinkText(vizName); + return self.openSavedVisualization(vizName); }); }, - // this starts on the + // this is for starting on the // bottom half of the "Create a new visualization Step 1" page openSavedVisualization: function openSavedVisualization(vizName) { var self = this; return self.filterVisByName(vizName) + .then(function () { + return common.sleep(1000); + }) .then(function clickDashboardByLinkedText() { return self.clickVisualizationByLinkText(vizName); }); From d179da582010c6186ef65dbc491e91335d3aa13a Mon Sep 17 00:00:00 2001 From: LeeDr Date: Wed, 16 Mar 2016 14:55:48 -0500 Subject: [PATCH 3/4] Removed about 5 uneccessary promise chains. --- test/support/pages/visualize_page.js | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/test/support/pages/visualize_page.js b/test/support/pages/visualize_page.js index f39dc71a3ef613..76f006e8b183bf 100644 --- a/test/support/pages/visualize_page.js +++ b/test/support/pages/visualize_page.js @@ -434,9 +434,7 @@ define(function (require) { return this.remote .setFindTimeout(defaultTimeout) .findByCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type') - .then(function setYAxisLabel(y) { - return y.getVisibleText(); - }) + .getVisibleText() .then(function (yLabel) { yAxisLabel = yLabel.replace(',', '').replace('%',''); common.debug('yAxisLabel = ' + yAxisLabel); @@ -446,10 +444,8 @@ define(function (require) { .then(function () { return self .setFindTimeout(defaultTimeout) - .findByCssSelector('rect.background'); // different here - }) - .then(function (chartAreaObj) { - return chartAreaObj.getAttribute('height'); + .findByCssSelector('rect.background') // different here + .getAttribute('height'); }) .then(function (chartH) { yAxisHeight = chartH; @@ -457,10 +453,8 @@ define(function (require) { }) .then(function () { return self.setFindTimeout(defaultTimeout * 2) - .findByCssSelector('path[data-label="' + aggregateName + '"]'); - }) - .then(function (chart) { - return chart.getAttribute('d'); + .findByCssSelector('path[data-label="' + aggregateName + '"]') + .getAttribute('d'); }) .then(function (data) { common.debug(data); @@ -486,10 +480,7 @@ define(function (require) { return this.remote .setFindTimeout(defaultTimeout) .findByCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type') - .then(function setYAxisLabel(y) { - return y - .getVisibleText(); - }) + .getVisibleText() .then(function (yLabel) { yAxisLabel = yLabel.replace(',', ''); common.debug('yAxisLabel = ' + yAxisLabel); @@ -500,10 +491,7 @@ define(function (require) { return self .setFindTimeout(defaultTimeout) .findByCssSelector('clipPath rect') - .then(function getRectHeight(chartAreaObj) { - return chartAreaObj - .getAttribute('height'); - }) + .getAttribute('height') .then(function (theHeight) { yAxisHeight = theHeight - 5; // MAGIC NUMBER - clipPath extends a bit above the top of the y-axis and below x-axis common.debug('theHeight = ' + theHeight); From 91366a651abe2ead66a2e621c52bce2e7acaab06 Mon Sep 17 00:00:00 2001 From: LeeDr Date: Fri, 18 Mar 2016 11:30:19 -0500 Subject: [PATCH 4/4] Minor updates from code review. --- test/support/pages/visualize_page.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/test/support/pages/visualize_page.js b/test/support/pages/visualize_page.js index 76f006e8b183bf..0732b6796499ff 100644 --- a/test/support/pages/visualize_page.js +++ b/test/support/pages/visualize_page.js @@ -436,7 +436,9 @@ define(function (require) { .findByCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type') .getVisibleText() .then(function (yLabel) { - yAxisLabel = yLabel.replace(',', '').replace('%',''); + // since we're going to use the y-axis 'last' (top) label as a number to + // scale the chart pixel data, we need to clean out commas and % marks. + yAxisLabel = yLabel.replace(/(%|,)/g, ''); common.debug('yAxisLabel = ' + yAxisLabel); return yLabel; }) @@ -458,6 +460,10 @@ define(function (require) { }) .then(function (data) { common.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. tempArray = data.replace('M','').split('L'); chartSections = tempArray.length / 2; common.debug('chartSections = ' + chartSections + ' height = ' + yAxisHeight + ' yAxisLabel = ' + yAxisLabel);