Legend tests + fix minor bug where padding was not taken into account when going...

diff --git a/src/core/core.legend.js b/src/core/core.legend.js
index bfb83c67ed5de53e312c5d13acf351347cbf8097..e42db5825b6fac4aa2f1e9b2858fd4c03def8e84 100644 (file)
--- a/src/core/core.legend.js
+++ b/src/core/core.legend.js
@@ -186,7 +186,7 @@ module.exports = function(Chart) {
 
                                        helpers.each(this.legendItems, function(legendItem, i) {
                                                var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + ctx.measureText(legendItem.text).width;
-                                               if (this.lineWidths[this.lineWidths.length - 1] + width >= this.width) {
+                                               if (this.lineWidths[this.lineWidths.length - 1] + width + this.options.labels.padding >= this.width) {
                                                        totalHeight += this.options.labels.fontSize + (this.options.labels.padding);
                                                        this.lineWidths[this.lineWidths.length] = this.left;
                                                }

diff --git a/test/core.legend.tests.js b/test/core.legend.tests.js
new file mode 100644 (file)
index 0000000..fc83e63
--- /dev/null
+++ b/test/core.legend.tests.js
@@ -0,0 +1,308 @@
+// Test the rectangle element
+
+describe('Legend block tests', function() {
+       it('Should be constructed', function() {
+               var legend = new Chart.Legend({});
+               expect(legend).not.toBe(undefined);
+       });
+
+       it('should have the correct default config', function() {
+               expect(Chart.defaults.global.legend).toEqual({
+                       display: true,
+                       position: 'top',
+                       fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
+
+                       // a callback that will handle
+                       onClick: jasmine.any(Function),
+
+                       labels: {
+                               boxWidth: 40,
+                               fontSize: Chart.defaults.global.defaultFontSize,
+                               fontStyle: Chart.defaults.global.defaultFontStyle,
+                               fontColor: Chart.defaults.global.defaultFontColor,
+                               fontFamily: Chart.defaults.global.defaultFontFamily,
+                               padding: 10,
+                               generateLabels: jasmine.any(Function)
+                       }
+               });
+       });
+
+       it('should update correctly', function() {
+               var chart = {
+                       data: {
+                               datasets: [{
+                                       label: 'dataset1',
+                                       backgroundColor: '#f31',
+                                       borderCapStyle: 'butt',
+                                       borderDash: [2, 2],
+                                       borderDashOffset: 5.5
+                               }, {
+                                       label: 'dataset2',
+                                       hidden: true,
+                                       borderJoinStyle: 'miter',
+                               }, {
+                                       label: 'dataset3',
+                                       borderWidth: 10,
+                                       borderColor: 'green'
+                               }]
+                       }
+               };
+               var context = window.createMockContext();
+               var options = Chart.helpers.clone(Chart.defaults.global.legend);
+               var legend = new Chart.Legend({
+                       chart: chart,
+                       ctx: context,
+                       options: options
+               });
+
+               var minSize = legend.update(400, 200);
+               expect(minSize).toEqual({
+                       width: 400,
+                       height: 54
+               });
+               expect(legend.legendItems).toEqual([{
+                       text: 'dataset1',
+                       fillStyle: '#f31',
+                       hidden: undefined,
+                       lineCap: 'butt',
+                       lineDash: [2, 2],
+                       lineDashOffset: 5.5,
+                       lineJoin: undefined,
+                       lineWidth: undefined,
+                       strokeStyle: undefined,
+                       datasetIndex: 0
+               }, {
+                       text: 'dataset2',
+                       fillStyle: undefined,
+                       hidden: true,
+                       lineCap: undefined,
+                       lineDash: undefined,
+                       lineDashOffset: undefined,
+                       lineJoin: 'miter',
+                       lineWidth: undefined,
+                       strokeStyle: undefined,
+                       datasetIndex: 1
+               }, {
+                       text: 'dataset3',
+                       fillStyle: undefined,
+                       hidden: undefined,
+                       lineCap: undefined,
+                       lineDash: undefined,
+                       lineDashOffset: undefined,
+                       lineJoin: undefined,
+                       lineWidth: 10,
+                       strokeStyle: 'green',
+                       datasetIndex: 2
+               }]);
+       });
+
+       it('should draw correctly', function() {
+               var chart = {
+                       data: {
+                               datasets: [{
+                                       label: 'dataset1',
+                                       backgroundColor: '#f31',
+                                       borderCapStyle: 'butt',
+                                       borderDash: [2, 2],
+                                       borderDashOffset: 5.5
+                               }, {
+                                       label: 'dataset2',
+                                       hidden: true,
+                                       borderJoinStyle: 'miter',
+                               }, {
+                                       label: 'dataset3',
+                                       borderWidth: 10,
+                                       borderColor: 'green'
+                               }]
+                       }
+               };
+               var context = window.createMockContext();
+               var options = Chart.helpers.clone(Chart.defaults.global.legend);
+               var legend = new Chart.Legend({
+                       chart: chart,
+                       ctx: context,
+                       options: options
+               });
+
+               var minSize = legend.update(400, 200);
+               legend.left = 50;
+               legend.top = 100;
+               legend.right = legend.left + minSize.width;
+               legend.bottom = legend.top + minSize.height;
+
+               legend.draw();
+               expect(legend.legendHitBoxes).toEqual([{
+                       left: 114,
+                       top: 110,
+                       width: 126,
+                       height: 12
+               }, {
+                       left: 250,
+                       top: 110,
+                       width: 126,
+                       height: 12
+               }, {
+                       left: 182,
+                       top: 132,
+                       width: 126,
+                       height: 12
+               }]);
+               expect(context.getCalls()).toEqual([{
+                       "name": "measureText",
+                       "args": ["dataset1"]
+               }, {
+                       "name": "measureText",
+                       "args": ["dataset2"]
+               }, {
+                       "name": "measureText",
+                       "args": ["dataset3"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [0.5]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["#666"]
+               }, {
+                       "name": "setFillStyle",
+                       "args": ["#666"]
+               }, {
+                       "name": "measureText",
+                       "args": ["dataset1"]
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "setFillStyle",
+                       "args": ["#f31"]
+               }, {
+                       "name": "setLineCap",
+                       "args": ["butt"]
+               }, {
+                       "name": "setLineDashOffset",
+                       "args": [5.5]
+               }, {
+                       "name": "setLineJoin",
+                       "args": ["miter"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [3]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0,0,0,0.1)"]
+               }, {
+                       "name": "setLineDash",
+                       "args": [
+                               [2, 2]
+                       ]
+               }, {
+                       "name": "strokeRect",
+                       "args": [114, 110, 40, 12]
+               }, {
+                       "name": "fillRect",
+                       "args": [114, 110, 40, 12]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "fillText",
+                       "args": ["dataset1", 160, 110]
+               }, {
+                       "name": "measureText",
+                       "args": ["dataset2"]
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "setFillStyle",
+                       "args": ["rgba(0,0,0,0.1)"]
+               }, {
+                       "name": "setLineCap",
+                       "args": ["butt"]
+               }, {
+                       "name": "setLineDashOffset",
+                       "args": [0]
+               }, {
+                       "name": "setLineJoin",
+                       "args": ["miter"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [3]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0,0,0,0.1)"]
+               }, {
+                       "name": "setLineDash",
+                       "args": [
+                               []
+                       ]
+               }, {
+                       "name": "strokeRect",
+                       "args": [250, 110, 40, 12]
+               }, {
+                       "name": "fillRect",
+                       "args": [250, 110, 40, 12]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "fillText",
+                       "args": ["dataset2", 296, 110]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [2]
+               }, {
+                       "name": "moveTo",
+                       "args": [296, 116]
+               }, {
+                       "name": "lineTo",
+                       "args": [376, 116]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "measureText",
+                       "args": ["dataset3"]
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "setFillStyle",
+                       "args": ["rgba(0,0,0,0.1)"]
+               }, {
+                       "name": "setLineCap",
+                       "args": ["butt"]
+               }, {
+                       "name": "setLineDashOffset",
+                       "args": [0]
+               }, {
+                       "name": "setLineJoin",
+                       "args": ["miter"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [10]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["green"]
+               }, {
+                       "name": "setLineDash",
+                       "args": [
+                               []
+                       ]
+               }, {
+                       "name": "strokeRect",
+                       "args": [182, 132, 40, 12]
+               }, {
+                       "name": "fillRect",
+                       "args": [182, 132, 40, 12]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "fillText",
+                       "args": ["dataset3", 228, 132]
+               }]);
+       });
+});
\ No newline at end of file