selenium tests

src/ui/public/vislib/visualizations/point_series/column_chart.js

@@ -34,7 +34,7 @@ export default function ColumnChartFactory(Private) {
       const isTooltip = this.handler.visConfig.get('tooltip.show');
 
       const layer = svg.append('g')
-      .attr('class', 'series')
+      .attr('class', 'series histogram')
       .attr('clip-path', 'url(#' + this.baseChart.clipPathId + ')');
 
       const bars = layer.selectAll('rect')

test/functional/apps/visualize/_area_chart.js

@@ -29,7 +29,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     })
     .then(function clickBucket() {
       PageObjects.common.debug('Click X-Axis');
-      return PageObjects.visualize.clickBucket('X-Axis');
+      return PageObjects.visualize.clickBucket(PageObjects.visualize.xAxisBucket);
     })
     .then(function selectAggregation() {
       PageObjects.common.debug('Click Date Histogram');

test/functional/apps/visualize/_metric_chart.js

@@ -52,7 +52,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       })
       .then(function selectField() {
         PageObjects.common.debug('Field = machine.ram');
-        return PageObjects.visualize.selectField('machine.ram');
+        return PageObjects.visualize.selectField('machine.ram', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -73,7 +73,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Sum')
       .then(function selectField() {
         PageObjects.common.debug('Field = phpmemory');
-        return PageObjects.visualize.selectField('phpmemory');
+        return PageObjects.visualize.selectField('phpmemory', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -95,7 +95,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Median')
       .then(function selectField() {
         PageObjects.common.debug('Field = bytes');
-        return PageObjects.visualize.selectField('bytes');
+        return PageObjects.visualize.selectField('bytes', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -117,7 +117,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Min')
       .then(function selectField() {
         PageObjects.common.debug('Field = @timestamp');
-        return PageObjects.visualize.selectField('@timestamp');
+        return PageObjects.visualize.selectField('@timestamp', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -138,7 +138,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Max')
       .then(function selectField() {
         PageObjects.common.debug('Field = relatedContent.article:modified_time');
-        return PageObjects.visualize.selectField('relatedContent.article:modified_time');
+        return PageObjects.visualize.selectField('relatedContent.article:modified_time', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -162,7 +162,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Standard Deviation')
       .then(function selectField() {
         PageObjects.common.debug('Field = bytes');
-        return PageObjects.visualize.selectField('bytes');
+        return PageObjects.visualize.selectField('bytes', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -183,7 +183,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Unique Count')
       .then(function selectField() {
         PageObjects.common.debug('Field = clientip');
-        return PageObjects.visualize.selectField('clientip');
+        return PageObjects.visualize.selectField('clientip', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -220,7 +220,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Percentiles')
       .then(function selectField() {
         PageObjects.common.debug('Field =  machine.ram');
-        return PageObjects.visualize.selectField('machine.ram');
+        return PageObjects.visualize.selectField('machine.ram', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -241,7 +241,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Percentile Ranks')
       .then(function selectField() {
         PageObjects.common.debug('Field =  bytes');
-        return PageObjects.visualize.selectField('memory');
+        return PageObjects.visualize.selectField('memory', 'metrics');
       })
       .then(function selectField() {
         PageObjects.common.debug('Values =  99');

test/functional/apps/visualize/_point_series_options.js

@@ -0,0 +1,205 @@
+import expect from 'expect.js';
+
+import {
+  bdd,
+} from '../../../support';
+
+import PageObjects from '../../../support/page_objects';
+
+bdd.describe('visualize app', function describeIndexTests() {
+  bdd.before(function () {
+    const fromTime = '2015-09-19 06:31:44.000';
+    const toTime = '2015-09-23 18:31:44.000';
+
+    PageObjects.common.debug('navigateToApp visualize');
+    return PageObjects.common.navigateToApp('visualize')
+    .then(function () {
+      PageObjects.common.debug('clickLineChart');
+      return PageObjects.visualize.clickLineChart();
+    })
+    .then(function clickNewSearch() {
+      return PageObjects.visualize.clickNewSearch();
+    })
+    .then(function setAbsoluteRange() {
+      PageObjects.common.debug('Set absolute time range from \"' + fromTime + '\" to \"' + toTime + '\"');
+      return PageObjects.header.setAbsoluteRange(fromTime, toTime);
+    })
+    .then(function clickBucket() {
+      PageObjects.common.debug('Bucket = Split Chart');
+      return PageObjects.visualize.clickBucket(PageObjects.visualize.xAxisBucket);
+    })
+    .then(function selectAggregation() {
+      PageObjects.common.debug('Aggregation = Date Histogram');
+      return PageObjects.visualize.selectAggregation('Date Histogram');
+    })
+    .then(function selectField() {
+      PageObjects.common.debug('Field = @timestamp');
+      return PageObjects.visualize.selectField('@timestamp');
+    })
+    // add another metrics
+    .then(function clickAddMetrics() {
+      PageObjects.common.debug('Add Metric');
+      return PageObjects.visualize.clickAddMetric();
+    })
+    .then(function () {
+      PageObjects.common.debug('Metric = Value Axis');
+      return PageObjects.visualize.clickBucket(PageObjects.visualize.yAxisBucket);
+    })
+    .then(function selectAggregation() {
+      PageObjects.common.debug('Aggregation = Average');
+      return PageObjects.visualize.selectAggregation('Average');
+    })
+    .then(function selectField() {
+      PageObjects.common.debug('Field = memory');
+      return PageObjects.visualize.selectField('machine.ram', 'metrics');
+    })
+    // go to options page
+    .then(function gotoOptions() {
+      PageObjects.common.debug('Going to options');
+      return PageObjects.visualizeOptions.clickOptions();
+    })
+    // add another value axis
+    .then(function addAxis() {
+      PageObjects.common.debug('adding axis');
+      return PageObjects.visualizeOptions.clickAddAxis();
+    })
+    // set average count to use second value axis
+    .then(function setAxis() {
+      return PageObjects.visualizeOptions.toggleCollapsibleTitle('Average machine.ram')
+        .then(function () {
+          PageObjects.common.debug('Average memory value axis - ValueAxis-2');
+          return PageObjects.visualizeOptions.setSeriesAxis(1, 'ValueAxis-2');
+        });
+    })
+    .then(function clickGo() {
+      return PageObjects.visualize.clickGo();
+    })
+    .then(function () {
+      return PageObjects.header.isGlobalLoadingIndicatorHidden();
+    });
+  });
+
+  bdd.describe('secondary value axis', function () {
+
+    bdd.it('should show correct chart, take screenshot', function () {
+      const expectedChartValues = [
+        [ 37, 202, 740, 1437, 1371, 751, 188, 31, 42, 202, 683,
+          1361, 1415, 707, 177, 27, 32, 175, 707, 1408, 1355, 726, 201, 29 ],
+        [ 14018296036, 13284815935, 13198764883, 13093365683, 13067752146, 12976598848,
+          13561826081, 14339648875, 14011021362, 12775336396, 13304506791, 12988890398,
+          13143466970, 13244378772, 12154757448, 15907286281, 13757317120, 13022240959,
+          12807319386, 13375732998, 13190755620, 12627508458, 12731510199, 13153337344  ],
+      ];
+
+      // Most recent failure on Jenkins usually indicates the bar chart is still being drawn?
+      // 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
+      return PageObjects.common.sleep(2000)
+        .then(function () {
+          return PageObjects.visualize.getLineChartData('fill="#6eadc1"');
+        })
+        .then(function showData(data) {
+          PageObjects.common.debug('count data=' + data);
+          PageObjects.common.debug('data.length=' + data.length);
+          PageObjects.common.saveScreenshot('Visualize-secondary-value-axis');
+          expect(data).to.eql(expectedChartValues[0]);
+        })
+        .then(function () {
+          return PageObjects.visualize.getLineChartData('fill="#57c17b"', 'ValueAxis-2');
+        })
+        .then(function showData(data) {
+          PageObjects.common.debug('average memory data=' + data);
+          PageObjects.common.debug('data.length=' + data.length);
+          expect(data).to.eql(expectedChartValues[1]);
+        });
+    });
+
+    bdd.it('should put secondary axis on the right', function () {
+      return PageObjects.visualizeOptions.toggleCollapsibleTitle('ValueAxis-2')
+        .then(function () {
+          return PageObjects.visualizeOptions.setValueAxisPosition(1, 'right');
+        })
+        .then(function () {
+          return PageObjects.visualize.clickGo();
+        })
+        .then(function () {
+          return PageObjects.common.sleep(2000);
+        })
+        .then(function checkAxisPosition() {
+          PageObjects.visualizeOptions.getRightValueAxes().then(length => {
+            expect(length).to.be(1);
+          });
+        });
+    });
+
+  });
+
+  bdd.describe('multiple chart types', function () {
+    bdd.it('should change average series type to histogram', function () {
+      return PageObjects.visualizeOptions.toggleCollapsibleTitle('ValueAxis-2')
+        .then(function () {
+          return PageObjects.visualizeOptions.setSeriesType(1, 'histogram');
+        })
+        .then(function () {
+          return PageObjects.visualize.clickGo();
+        })
+        .then(function () {
+          return PageObjects.common.sleep(2000);
+        })
+        .then(function checkSeriesTypes() {
+          PageObjects.visualizeOptions.getHistogramSeries().then(length => {
+            expect(length).to.be(1);
+          });
+        });
+    });
+  });
+
+  bdd.describe('grid lines', function () {
+    bdd.before(function () {
+      return PageObjects.visualizeOptions.toggleCollapsibleTitle('Grid');
+    });
+
+    bdd.it('should show category grid lines', function () {
+      return PageObjects.visualizeOptions.toggleGridCategoryLines()
+        .then(function () {
+          return PageObjects.visualize.clickGo();
+        })
+        .then(function () {
+          return PageObjects.common.sleep(2000);
+        })
+        .then(function () {
+          return PageObjects.visualizeOptions.getGridLines();
+        })
+        .then(function checkGridLines(gridLines) {
+          expect(gridLines.length).to.be(9);
+          gridLines.forEach(gridLine => {
+            expect(gridLine.y).to.be(0);
+          });
+
+        });
+    });
+
+    bdd.it('should show value axis grid lines', function () {
+      return PageObjects.visualizeOptions.setGridValueAxis('ValueAxis-2')
+        .then(function () {
+          return PageObjects.visualizeOptions.toggleGridCategoryLines();
+        })
+        .then(function () {
+          return PageObjects.visualize.clickGo();
+        })
+        .then(function () {
+          return PageObjects.common.sleep(5000);
+        })
+        .then(function () {
+          return PageObjects.visualizeOptions.getGridLines();
+        })
+        .then(function checkGridLines(gridLines) {
+          expect(gridLines.length).to.be(9);
+          gridLines.forEach(gridLine => {
+            expect(gridLine.x).to.be(0);
+          });
+        });
+    });
+  });
+
+});

test/functional/apps/visualize/_vertical_bar_chart.js

@@ -28,7 +28,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     })
     .then(function clickBucket() {
       PageObjects.common.debug('Bucket = X-Axis');
-      return PageObjects.visualize.clickBucket('X-Axis');
+      return PageObjects.visualize.clickBucket('Category Axis');
     })
     .then(function selectAggregation() {
       PageObjects.common.debug('Aggregation = Date Histogram');
@@ -81,7 +81,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       // Most recent failure on Jenkins usually indicates the bar chart is still being drawn?
       // 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
-      return PageObjects.common.sleep(5000)
+      return PageObjects.common.sleep(50000)
       .then(function () {
         return PageObjects.visualize.getBarChartData();
       })

test/functional/apps/visualize/index.js

@@ -41,4 +41,5 @@ bdd.describe('visualize app', function () {
   require('./_tile_map');
   require('./_vertical_bar_chart');
   require('./_heatmap_chart');
+  require('./_point_series_options');
 });

test/support/page_objects/index.js

@@ -7,6 +7,7 @@ import HeaderPage from './header_page';
 import SettingsPage from './settings_page';
 import ShieldPage from './shield_page';
 import VisualizePage from './visualize_page';
+import VisualizePointSeriesOptions from './visualize_point_series_options';
 import MonitoringPage from './monitoring_page';
 
 const common = new Common();
@@ -17,6 +18,7 @@ const headerPage = new HeaderPage();
 const settingsPage = new SettingsPage();
 const shieldPage = new ShieldPage();
 const visualizePage = new VisualizePage();
+const visualizePointSeriesOptions = new VisualizePointSeriesOptions();
 const monitoringPage = new MonitoringPage();
 
 class PageObjects {
@@ -37,6 +39,7 @@ class PageObjects {
     settingsPage.init(remote);
     shieldPage.init(remote);
     visualizePage.init(remote);
+    visualizePointSeriesOptions.init(remote);
     monitoringPage.init(remote);
   }
 
@@ -79,6 +82,10 @@ class PageObjects {
     return this.assertInitialized() && visualizePage;
   }
 
+  get visualizeOptions() {
+    return this.assertInitialized() && visualizePointSeriesOptions;
+  }
+
   get monitoring() {
     return this.assertInitialized() && monitoringPage;
   }

test/support/page_objects/visualize_page.js

@@ -9,6 +9,8 @@ export default class VisualizePage {
 
   init(remote) {
     this.remote = remote;
+    this.xAxisBucket = 'Category Axis';
+    this.yAxisBucket = 'Value Axis';
   }
 
   clickAreaChart() {
@@ -39,6 +41,13 @@ export default class VisualizePage {
     .click();
   }
 
+  clickAddMetric() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('[group-name="metrics"] .vis-editor-agg-add .vis-editor-agg-wide-btn div.btn')
+      .click();
+  }
+
   clickMetric() {
     return this.remote
     .setFindTimeout(defaultFindTimeout)
@@ -220,7 +229,7 @@ export default class VisualizePage {
   selectAggregation(myString) {
     return this.remote
     .setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('option[label="' + myString + '"]')
+    .findByCssSelector('vis-editor-agg-params:not(.ng-hide) option[label="' + myString + '"]')
     .click();
   }
 
@@ -231,13 +240,13 @@ export default class VisualizePage {
     .getVisibleText();
   }
 
-  selectField(fieldValue) {
+  selectField(fieldValue, groupName = 'buckets') {
     const self = this;
     return PageObjects.common.try(function tryingForTime() {
       return self.remote
       .setFindTimeout(defaultFindTimeout)
       // the css below should be more selective
-      .findByCssSelector('option[label="' + fieldValue + '"]')
+      .findByCssSelector(`[group-name="${groupName}"] option[label="${fieldValue}"]`)
       .click();
     });
   }
@@ -474,7 +483,7 @@ export default class VisualizePage {
 
 
   // The current test shows dots, not a line.  This function gets the dots and normalizes their height.
-  getLineChartData(cssPart) {
+  getLineChartData(cssPart, axis = 'ValueAxis-1') {
     const self = this.remote;
     let yAxisLabel = 0;
     let yAxisHeight;
@@ -482,10 +491,10 @@ export default class VisualizePage {
     // 1). get the maximim chart Y-Axis marker value
     return this.remote
       .setFindTimeout(defaultFindTimeout)
-      .findByCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type')
+      .findByCssSelector(`div.y-axis-div-wrapper > div > svg > g.${axis} > g:last-of-type`)
       .getVisibleText()
       .then(function (yLabel) {
-        yAxisLabel = yLabel.replace(',', '');
+        yAxisLabel = yLabel.replace(/,/g, '');
         PageObjects.common.debug('yAxisLabel = ' + yAxisLabel);
         return yLabel;
       })
@@ -505,18 +514,13 @@ export default class VisualizePage {
       .then(function getChartWrapper() {
         return self
         .setFindTimeout(defaultFindTimeout * 2)
-        .findAllByCssSelector('.chart-wrapper')
+        .findAllByCssSelector(`.chart-wrapper circle[${cssPart}]`)
         .then(function (chartTypes) {
 
           // 5). for each chart element, find the green circle, then the cy position
           function getChartType(chart) {
             return chart
-            .findByCssSelector(`circle[${cssPart}]`)
-            .then(function (circleObject) {
-              // PageObjects.common.debug('circleObject = ' + circleObject + ' yAxisHeight= ' + yAxisHeight + ' yAxisLabel= ' + yAxisLabel);
-              return circleObject
-              .getAttribute('cy');
-            })
+            .getAttribute('cy')
             .then(function (cy) {
               // PageObjects.common.debug(' yAxisHeight=' + yAxisHeight + ' yAxisLabel=' + yAxisLabel + '  cy=' + cy +
               //   ' ((yAxisHeight - cy)/yAxisHeight * yAxisLabel)=' + ((yAxisHeight - cy) / yAxisHeight * yAxisLabel));

test/support/page_objects/visualize_point_series_options.js

@@ -0,0 +1,164 @@
+
+import {
+  defaultFindTimeout,
+} from '../';
+
+import PageObjects from './';
+
+export default class VisualizePointSeriesOptions {
+
+  init(remote) {
+    this.remote = remote;
+  }
+
+  clickOptions() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByPartialLinkText('Options')
+      .click();
+  }
+
+  clickAddAxis() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('button[aria-label="Add value axis"]')
+      .click();
+  }
+
+  getValueAxesCount() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.kuiSideBarSection:contains("Value Axes") > .kuiSideBarSection')
+      .length;
+  }
+
+  getSeriesCount() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.kuiSideBarSection:contains("Series") > .kuiSideBarSection')
+      .length;
+  }
+
+  getRightValueAxes() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.axis-wrapper-right g.axis')
+      .then(function (data) {
+        return Promise.all([function () { return data.length; }]);
+      });
+  }
+
+  getHistogramSeries() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.series.histogram')
+      .then(function (data) {
+        return Promise.all([function () { return data.length; }]);
+      });
+  }
+
+  getGridLines() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('g.grid > path')
+      .then(function (data) {
+        function getGridLine(gridLine) {
+          return gridLine
+            .getAttribute('d')
+            .then(dAttribute => {
+              const firstPoint = dAttribute.split('L')[0].replace('M', '').split(',');
+              return { x: parseFloat(firstPoint[0]), y: parseFloat(firstPoint[1]) };
+            });
+        }
+        const promises = data.map(getGridLine);
+        return Promise.all(promises);
+      })
+      .then(function (gridLines) {
+        return gridLines;
+      });
+  }
+
+  toggleGridCategoryLines() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('#showCategoryLines')
+      .click();
+  }
+
+  setGridValueAxis(axis) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#gridAxis option[label="${axis}"]`)
+      .click();
+  }
+
+  toggleCollapsibleTitle(title) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.kuiSideBarCollapsibleTitle .kuiSideBarCollapsibleTitle__text')
+      .then(sidebarTitles => {
+        PageObjects.common.debug('found sidebar titles ' + sidebarTitles.length);
+        function getTitle(titleDiv) {
+          return titleDiv
+            .getVisibleText()
+            .then(titleString => {
+              PageObjects.common.debug('sidebar title ' + titleString);
+              if (titleString === title) {
+                PageObjects.common.debug('clicking sidebar title ' + titleString);
+                return titleDiv.click();
+              }
+            });
+        }
+        const sidebarTitlePromises = sidebarTitles.map(getTitle);
+        return Promise.all(sidebarTitlePromises);
+      });
+  }
+
+  setValue(newValue) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout * 2)
+      .findByCssSelector('button[ng-click="numberListCntr.add()"]')
+      .click()
+      .then(() => {
+        return this.remote
+          .setFindTimeout(defaultFindTimeout)
+          .findByCssSelector('input[ng-model="numberListCntr.getList()[$index]"]')
+          .clearValue();
+      })
+      .then(() => {
+        return this.remote
+          .setFindTimeout(defaultFindTimeout)
+          .findByCssSelector('input[ng-model="numberListCntr.getList()[$index]"]')
+          .type(newValue);
+      });
+  }
+
+  setValueAxisPosition(axis, position) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#valueAxisPosition${axis} option[label="${position}"]`)
+      .click();
+  }
+
+  setCategoryAxisPosition(newValue) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#categoryAxisPosition option[label="${newValue}"]`)
+      .click();
+  }
+
+  setSeriesAxis(series, axis) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#seriesValueAxis${series} option[label="${axis}"]`)
+      .click();
+  }
+
+  setSeriesType(series, type) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#seriesType${series} option[label="${type}"]`)
+      .click();
+  }
+
+}