Merge pull request #342 from w33ble/fix-tests

No objections - time to 

TODOS.md

@@ -457,4 +457,6 @@
  - **[test/unit/specs/directives/timepicker.js](https://github.com/elasticsearch/kibana4/blob/master/test/unit/specs/directives/timepicker.js)**
    - This should not be needed, timefilter is only included here, it should move
  - **[test/unit/specs/directives/typeahead.js](https://github.com/elasticsearch/kibana4/blob/master/test/unit/specs/directives/typeahead.js)**
-   - This should not be needed, timefilter is only included here, it should move
+   - This should not be needed, timefilter is only included here, it should move
+ - **[test/unit/specs/vislib/vis.js](https://github.com/elasticsearch/kibana4/blob/master/test/unit/specs/vislib/vis.js)**
+   - fix this test instead of just skipping it

src/kibana/components/errors.js

@@ -167,5 +167,17 @@ define(function (require) {
   };
   inherits(errors.NoDefaultIndexPattern, KbnError);
 
+
+  /**
+   * user with the vislib, when the container is too small
+   * @param {String} message - the message to provide with the error
+   */
+  errors.ContainerTooSmall = function ContainerTooSmall() {
+    KbnError.call(this,
+    'This container is too small to render the visualization',
+    errors.ContainerTooSmall);
+  };
+  inherits(errors.ContainerTooSmall, KbnError);
+
   return errors;
 });

src/kibana/components/vislib/lib/_error_handler.js

@@ -1,17 +1,20 @@
 define(function (require) {
-  return function ErrorHandlerFactory(Private) {
-    var _ = require('lodash');
+  var _ = require('lodash');
+  var errors = require('errors');
 
+  return function ErrorHandlerFactory(Private) {
     // Common errors shared between constructors
     function ErrorHandler() {}
 
-    // Validate that the height and width are not 0 or NaN
+    // Validate the height and width are > 0
     ErrorHandler.prototype.validateWidthandHeight = function (width, height) {
-      if (_.isNaN(height) || height <= 0 || _.isNaN(width) || width <= 0) {
-        throw new Error('The height and/or width of this container is too ' +
-          'small for this chart. w:' + width + ', h:' + height);
+      // min size must be at least 1px
+      var badWidth = _.isNaN(width) || width <= 0;
+      var badHeight = _.isNaN(height) || height <= 0;
+
+      if (badWidth || badHeight) {
+        throw new errors.ContainerTooSmall();
       }
-      return;
     };
 
     return ErrorHandler;

src/kibana/components/vislib/lib/axis_title.js

@@ -39,9 +39,9 @@ define(function (require) {
           self.validateWidthandHeight(width, height);
 
           div.append('svg')
-            .attr('width', width)
-            .attr('height', height)
-            .append('text')
+          .attr('width', width)
+          .attr('height', height)
+          .append('text')
             .attr('transform', function () {
               if (div.attr('class') === 'x-axis-title') {
                 return 'translate(' + width / 2 + ',11)';

src/kibana/components/vislib/lib/x_axis.js

@@ -65,7 +65,7 @@ define(function (require) {
 
     // Return a nominal(d3 ordinal) domain
     XAxis.prototype.getOrdinalDomain = function (scale, xValues) {
-      
+
       return scale.domain(xValues);
     };
 
@@ -117,7 +117,6 @@ define(function (require) {
       this._attr.isRotated = false;
 
       return function (selection) {
-
         selection.each(function () {
           div = d3.select(this);
           width = $(this).width();
@@ -144,7 +143,7 @@ define(function (require) {
       };
     };
 
-    // Returns a function that evaluates scale type and applies 
+    // Returns a function that evaluates scale type and applies
     // filters tick labels on time scales
     // rotates and truncates labels on nominal/ordinal scales
     XAxis.prototype.filterOrRotate = function () {
@@ -157,7 +156,7 @@ define(function (require) {
         selection.each(function () {
           axis = d3.select(this);
           labels = axis.selectAll('.tick text');
-          
+
           if (!self.ordered) {
             // nominal/ordinal scale
             axis.call(self.rotateAxisLabels());
@@ -199,7 +198,7 @@ define(function (require) {
       var endChar;
 
       return function (selection) {
-        
+
         // get label maxWidth
         labels = selection.selectAll('.tick text');
         maxWidth = 0;
@@ -250,7 +249,7 @@ define(function (require) {
             myWidth = par.getBBox().width;
             halfWidth = par.getBBox().width / 2;
             maxW = $('.x-axis-div').width();
-            // trims labels that would overlap each other 
+            // trims labels that would overlap each other
             // or extend past left or right edges
             // if prev label pos (or 0) + half of label width is < label pos
             // and label pos + half width  is not > width of axis

src/kibana/components/vislib/lib/y_axis.js

@@ -55,7 +55,7 @@ define(function (require) {
       if (self.yScale.domain()[1] <= 10) {
         this.yAxis.tickFormat(d3.format('n'));
       }
-      
+
       return this.yAxis;
     };
 
@@ -82,7 +82,7 @@ define(function (require) {
       var svg;
 
       return function (selection) {
-        
+
         selection.each(function () {
           div = d3.select(this);
           width = $(this).width();

src/kibana/components/vislib/vis.js

@@ -7,6 +7,7 @@ define(function (require) {
     var ResizeChecker = Private(require('components/vislib/lib/resize_checker'));
     var Events = Private(require('factories/events'));
     var chartTypes = Private(require('components/vislib/vis_types'));
+    var errors = require('errors');
     require('css!components/vislib/components/styles/main.css');
 
     /*
@@ -50,8 +51,7 @@ define(function (require) {
         // if involving height and width of the container, log error to screen
         // Because we have to wait for the DOM element to initialize, we do not
         // want to throw an error when the DOM `el` is zero
-        if ($(this.el).height() > 0 &&
-          error.message === 'The height and/or width of this container is too small for this chart.') {
+        if (error instanceof errors.ContainerTooSmall) {
           this.handler.error(error.message);
         } else {
           console.error(error.message);

src/kibana/components/vislib/visualizations/column_chart.js

@@ -5,6 +5,7 @@ define(function (require) {
 
     var Chart = Private(require('components/vislib/visualizations/_chart'));
     var Legend = Private(require('components/vislib/lib/legend'));
+    var errors = require('errors');
 
     // Dynamically adds css file
     require('css!components/vislib/components/styles/main');
@@ -46,18 +47,18 @@ define(function (require) {
       }
 
       return {
-        value     : this._attr.yValue(d, i),
-        point     : d,
-        label     : d.label,
-        color     : this.vis.data.getColorFunc()(d.label),
+        value: this._attr.yValue(d, i),
+        point: d,
+        label: d.label,
+        color: this.vis.data.getColorFunc()(d.label),
         pointIndex: i,
-        series    : this.chartData.series,
-        config    : this._attr,
-        data      : this.chartData,
-        e         : d3.event,
-        field     : field,
-        aggConfig : aggConfig,
-        vis       : this.vis
+        series: this.chartData.series,
+        config: this._attr,
+        data: this.chartData,
+        e: d3.event,
+        field: field,
+        aggConfig: aggConfig,
+        vis: this.vis
       };
     };
 
@@ -71,8 +72,8 @@ define(function (require) {
         return d.values.map(function (e, i) {
           return {
             label: label,
-            x    : self._attr.xValue.call(d.values, e, i),
-            y    : self._attr.yValue.call(d.values, e, i)
+            x: self._attr.xValue.call(d.values, e, i),
+            y: self._attr.yValue.call(d.values, e, i)
           };
         });
       }));
@@ -98,10 +99,10 @@ define(function (require) {
       // if `addBrushing` is true, add brush canvas
       if (self._attr.addBrushing) {
         svg.append('g')
-          .attr('class', 'brush')
-          .call(brush)
-          .selectAll('rect')
-          .attr('height', this._attr.height - this._attr.margin.top - this._attr.margin.bottom);
+        .attr('class', 'brush')
+        .call(brush)
+        .selectAll('rect')
+        .attr('height', this._attr.height - this._attr.margin.top - this._attr.margin.bottom);
       }
     };
 
@@ -115,61 +116,55 @@ define(function (require) {
 
       // Data layers
       layer = svg.selectAll('.layer')
-        .data(layers)
-        .enter().append('g')
-        .attr('class', function (d, i) {
-          return i;
-        });
+      .data(layers)
+      .enter().append('g')
+      .attr('class', function (d, i) {
+        return i;
+      });
 
       // Append the bars
       bars = layer.selectAll('rect')
-        .data(function (d) {
-          return d;
-        });
+      .data(function (d) {
+        return d;
+      });
 
       // exit
       bars.exit().remove();
 
       // enter
       bars.enter()
-        .append('rect')
-        .attr('class', function (d) {
-          return 'color ' + Legend.prototype.colorToClass.call(this, color(d.label));
-        })
-        .attr('fill', function (d) {
-          return color(d.label);
-        });
+      .append('rect')
+      .attr('class', function (d) {
+        return 'color ' + Legend.prototype.colorToClass.call(this, color(d.label));
+      })
+      .attr('fill', function (d) {
+        return color(d.label);
+      });
 
       // update
       bars
-        .attr('x', function (d) {
-          return xScale(d.x);
-        })
-        .attr('width', function () {
-          var barWidth;
-          var barSpacing;
-
-          if (data.ordered && data.ordered.date) {
-            barWidth = xScale(data.ordered.min + data.ordered.interval) - xScale(data.ordered.min);
-            barSpacing = barWidth * 0.25;
-
-//            if (barWidth <= 1) {
-//              throw new Error('The height and/or width of this container is too small for this chart.');
-//            }
-            return barWidth - barSpacing;
-          }
+      .attr('x', function (d) {
+        return xScale(d.x);
+      })
+      .attr('width', function () {
+        var barWidth;
+        var barSpacing;
+
+        if (data.ordered && data.ordered.date) {
+          barWidth = xScale(data.ordered.min + data.ordered.interval) - xScale(data.ordered.min);
+          barSpacing = barWidth * 0.25;
+
+          return barWidth - barSpacing;
+        }
 
-//          if (xScale.rangeBand() <= 1) {
-//            throw new Error('The height and/or width of this container is too small for this chart.');
-//          }
-          return xScale.rangeBand();
-        })
-        .attr('y', function (d) {
-          return yScale(d.y0 + d.y);
-        })
-        .attr('height', function (d) {
-          return yScale(d.y0) - yScale(d.y0 + d.y);
-        });
+        return xScale.rangeBand();
+      })
+      .attr('y', function (d) {
+        return yScale(d.y0 + d.y);
+      })
+      .attr('height', function (d) {
+        return yScale(d.y0) - yScale(d.y0 + d.y);
+      });
 
       return bars;
     };
@@ -181,23 +176,23 @@ define(function (require) {
       var dispatch = this._attr.dispatch;
 
       bars
-        .on('mouseover.bar', function (d, i) {
-          d3.select(this)
-            .classed('hover', true)
-            .style('stroke', '#333')
-            .style('cursor', 'pointer');
-
-          dispatch.hover(self.eventResponse(d, i));
-          d3.event.stopPropagation();
-        })
-        .on('click.bar', function (d, i) {
-          dispatch.click(self.eventResponse(d, i));
-          d3.event.stopPropagation();
-        })
-        .on('mouseout.bar', function () {
-          d3.select(this).classed('hover', false)
-            .style('stroke', null);
-        });
+      .on('mouseover.bar', function (d, i) {
+        d3.select(this)
+          .classed('hover', true)
+          .style('stroke', '#333')
+          .style('cursor', 'pointer');
+
+        dispatch.hover(self.eventResponse(d, i));
+        d3.event.stopPropagation();
+      })
+      .on('click.bar', function (d, i) {
+        dispatch.click(self.eventResponse(d, i));
+        d3.event.stopPropagation();
+      })
+      .on('mouseout.bar', function () {
+        d3.select(this).classed('hover', false)
+          .style('stroke', null);
+      });
 
       // Add tooltip
       if (isTooltip) {
@@ -213,6 +208,8 @@ define(function (require) {
       var margin = this._attr.margin;
       var elWidth = this._attr.width = $elem.width();
       var elHeight = this._attr.height = $elem.height();
+      var minWidth = 20;
+      var minHeight = 20;
       var div;
       var svg;
       var width;
@@ -229,21 +226,19 @@ define(function (require) {
           width = elWidth;
           height = elHeight - margin.top - margin.bottom;
 
-          // if height or width < 20 or NaN, throw error
-          if (_.isNaN(width) || width < 20 || _.isNaN(height) || height < 20) {
-            throw new Error('The height and/or width of this container is too ' +
-              'small for this chart.');
+          if (width < minWidth || height < minHeight) {
+            throw new errors.ContainerTooSmall();
           }
 
           // Select the current DOM element
           div = d3.select(this);
 
           // Create the canvas for the visualization
           svg = div.append('svg')
-            .attr('width', width)
-            .attr('height', height + margin.top + margin.bottom)
-            .append('g')
-            .attr('transform', 'translate(0,' + margin.top + ')');
+          .attr('width', width)
+          .attr('height', height + margin.top + margin.bottom)
+          .append('g')
+          .attr('transform', 'translate(0,' + margin.top + ')');
 
           // addBrush canvas
           self.addBrush(xScale, svg);