adding selenium tests

docs/visualize/heatmap.asciidoc

@@ -65,15 +65,19 @@ Select the *Options* tab to change the following aspects of the chart:
 *Show Tooltips*:: Check this box to enable the display of tooltips.
 *Highlight*:: Check this box to enable highlighting of elements with same label
 *Legend Position*:: You can select where to display the legend (top, left, right, bottom)
-*Scale to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check
-this box to change both upper and lower bounds to match the values returned in the data.
+
 
 *Color Schema*:: You can select an existing color schema or go for custom and define your own colors in the legend
-*Number of Colors*:: Number of color buckets to create. 
-*Z Axis Scale*:: You can switch between linear, log and sqrt scales for color scale.
+*Reverse Color Schema*:: Checking this checkbox will reverse the color schema.
+*Color Scale*:: You can switch between linear, log and sqrt scales for color scale.
+*Scale to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check
+this box to change both upper and lower bounds to match the values returned in the data.
+*Number of Colors*:: Number of color buckets to create. Minimum is 2 and maximum is 10. 
+*Percentage Mode*:: Enabling this will show legend values as percentages.
 *Custom Range*:: You can define custom ranges for your color buckets. For each of the color bucket you need to specify
-the minimum value. All documents with value bigger than buckets value and smaller than next buckets value will fall 
-into same color bucket.
+the minimum value (inclusive) and the maximum value (exclusive) of a range. 
+*Show Label*:: Enables showing labels with cell values in each cell
+  *Rotate*:: Allows rotating the cell value label by 90 degrees.
 
 
 include::visualization-raw-data.asciidoc[]

test/functional/apps/visualize/_heatmap_chart.js

@@ -0,0 +1,122 @@
+
+import expect from 'expect.js';
+
+import {
+  bdd,
+  scenarioManager,
+} from '../../../support';
+
+import PageObjects from '../../../support/page_objects';
+
+bdd.describe('visualize app', function describeIndexTests() {
+  const fromTime = '2015-09-19 06:31:44.000';
+  const toTime = '2015-09-23 18:31:44.000';
+
+  bdd.before(function () {
+    PageObjects.common.debug('navigateToApp visualize');
+    return PageObjects.common.navigateToApp('visualize')
+    .then(function () {
+      PageObjects.common.debug('clickHeatmapChart');
+      return PageObjects.visualize.clickHeatmapChart();
+    })
+    .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 = X-Axis');
+      return PageObjects.visualize.clickBucket('X-Axis');
+    })
+    .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');
+    })
+    // leaving Interval set to Auto
+    .then(function clickGo() {
+      return PageObjects.visualize.clickGo();
+    })
+    .then(function () {
+      return PageObjects.header.isGlobalLoadingIndicatorHidden();
+    })
+    .then(function waitForVisualization() {
+      return PageObjects.visualize.waitForVisualization();
+    });
+  });
+
+  bdd.describe('heatmap chart', function indexPatternCreation() {
+    const vizName1 = 'Visualization HeatmapChart';
+
+    bdd.it('should save and load', function () {
+      return PageObjects.visualize.saveVisualization(vizName1)
+      .then(function (message) {
+        PageObjects.common.debug('Saved viz message = ' + message);
+        expect(message).to.be('Visualization Editor: Saved Visualization \"' + vizName1 + '\"');
+      })
+      .then(function testVisualizeWaitForToastMessageGone() {
+        return PageObjects.visualize.waitForToastMessageGone();
+      })
+      .then(function () {
+        return PageObjects.visualize.loadSavedVisualization(vizName1);
+      })
+      .then(function () {
+        return PageObjects.header.isGlobalLoadingIndicatorHidden();
+      })
+      .then(function waitForVisualization() {
+        return PageObjects.visualize.waitForVisualization();
+      });
+    });
+
+    bdd.it('should show correct chart, take screenshot', function () {
+      const expectedChartValues = ['0 - 400', '0 - 400', '400 - 800', '800 - 1200', '800 - 1200', '400 - 800',
+        '0 - 400', '0 - 400', '0 - 400', '0 - 400', '400 - 800', '800 - 1200', '800 - 1200', '400 - 800',
+        '0 - 400', '0 - 400', '0 - 400', '0 - 400', '400 - 800', '800 - 1200', '800 - 1200', '400 - 800',
+        '0 - 400', '0 - 400'];
+
+      // 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)
+      .then(function () {
+        return PageObjects.visualize.getHeatmapData();
+      })
+      .then(function showData(data) {
+        PageObjects.common.debug('data=' + data);
+        PageObjects.common.debug('data.length=' + data.length);
+        PageObjects.common.saveScreenshot('Visualize-heatmap-chart');
+        expect(data).to.eql(expectedChartValues);
+      });
+    });
+
+
+    bdd.it('should show correct data', function () {
+      // this is only the first page of the tabular data.
+      const expectedChartData =  [ 'September 20th 2015, 00:00:00.000 37',
+        'September 20th 2015, 03:00:00.000 202',
+        'September 20th 2015, 06:00:00.000 740',
+        'September 20th 2015, 09:00:00.000 1,437',
+        'September 20th 2015, 12:00:00.000 1,371',
+        'September 20th 2015, 15:00:00.000 751',
+        'September 20th 2015, 18:00:00.000 188',
+        'September 20th 2015, 21:00:00.000 31',
+        'September 21st 2015, 00:00:00.000 42',
+        'September 21st 2015, 03:00:00.000 202'
+      ];
+
+      return PageObjects.visualize.collapseChart()
+      .then(function showData(data) {
+        return PageObjects.visualize.getDataTableData();
+      })
+      .then(function showData(data) {
+        PageObjects.common.debug(data.split('\n'));
+        expect(data.trim().split('\n')).to.eql(expectedChartData);
+      });
+    });
+  });
+});

test/functional/apps/visualize/index.js

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

test/support/page_objects/visualize_page.js

@@ -67,6 +67,13 @@ export default class VisualizePage {
     .click();
   }
 
+  clickHeatmapChart() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByPartialLinkText('Heatmap chart')
+      .click();
+  }
+
   getChartTypeCount() {
     return this.remote
     .setFindTimeout(defaultFindTimeout)
@@ -606,6 +613,29 @@ export default class VisualizePage {
     });
   }
 
+  getHeatmapData() {
+    const self = this.remote;
+
+    // 1). get the maximim chart Y-Axis marker value
+    return this.remote
+      .setFindTimeout(defaultFindTimeout * 2)
+      // #kibana-body > div.content > div > div > div > div.vis-editor-canvas > visualize > div.visualize-chart > div > div.vis-col-wrapper > div.chart-wrapper > div > svg > g > g.series.\30 > rect:nth-child(1)
+      .findAllByCssSelector('svg > g > g.series rect') // rect
+      .then(function (chartTypes) {
+        PageObjects.common.debug('rects=' + chartTypes);
+        function getChartType(chart) {
+          return chart
+            .getAttribute('data-label');
+        }
+        const getChartTypesPromises = chartTypes.map(getChartType);
+        return Promise.all(getChartTypesPromises);
+      })
+      .then(function (labels) {
+        PageObjects.common.debug('labels=' + labels);
+        return labels;
+      });
+  }
+
   getPieChartData() {
     // 1). get the maximim chart Y-Axis marker value
     return this.remote