Chart.js/test/core.legend.tests.js

// 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)
			reverse: false,

			// 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]
		}]);
	});
});