From: Evert Timberg Date: Mon, 15 Feb 2016 14:23:31 +0000 (-0500) Subject: Legend tests + fix minor bug where padding was not taken into account when going... X-Git-Tag: v2.0.0~41 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=37b3fb5d6c3e7844d876402b6e831f5ad0dffdde;p=thirdparty%2FChart.js.git Legend tests + fix minor bug where padding was not taken into account when going down to the next line --- diff --git a/src/core/core.legend.js b/src/core/core.legend.js index bfb83c67e..e42db5825 100644 --- 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 index 000000000..fc83e63ce --- /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