HOME

// Test the rectangle element

describe('Title block tests', function() {
	it('Should be constructed', function() {
		var title = new Chart.Title({});
		expect(title).not.toBe(undefined);
	});

	it('Should have the correct default config', function() {
		expect(Chart.defaults.global.title).toEqual({
			display: false,
			position: 'top',
			fullWidth: true,
			fontStyle: 'bold',
			padding: 10,
			text: ''
		})
	});

	it('should update correctly', function() {
		var chart = {};

		var options = Chart.helpers.clone(Chart.defaults.global.title);
		options.text = "My title";

		var title = new Chart.Title({
			chart: chart,
			options: options
		});

		var minSize = title.update(400, 200);

		expect(minSize).toEqual({
			width: 400,
			height: 0
		});

		// Now we have a height since we display
		title.options.display = true;

		minSize = title.update(400, 200);

		expect(minSize).toEqual({
			width: 400,
			height: 32
		});
	});

	it('should update correctly when vertical', function() {
		var chart = {};

		var options = Chart.helpers.clone(Chart.defaults.global.title);
		options.text = "My title";
		options.position = 'left';

		var title = new Chart.Title({
			chart: chart,
			options: options
		});

		var minSize = title.update(200, 400);

		expect(minSize).toEqual({
			width: 0,
			height: 400
		});

		// Now we have a height since we display
		title.options.display = true;

		minSize = title.update(200, 400);

		expect(minSize).toEqual({
			width: 32,
			height: 400
		});
	});

	it('should draw correctly horizontally', function() {
		var chart = {};
		var context = window.createMockContext();

		var options = Chart.helpers.clone(Chart.defaults.global.title);
		options.text = "My title";

		var title = new Chart.Title({
			chart: chart,
			options: options,
			ctx: context
		});

		title.update(400, 200);
		title.draw();

		expect(context.getCalls()).toEqual([]);

		// Now we have a height since we display
		title.options.display = true;

		var minSize = title.update(400, 200);
		title.top = 50;
		title.left = 100;
		title.bottom = title.top + minSize.height;
		title.right = title.left + minSize.width;
		title.draw();

		expect(context.getCalls()).toEqual([{
			name: 'setFillStyle',
			args: ['#666']
		}, {
			name: 'save',
			args: []
		}, {
			name: 'translate',
			args: [300, 66]
		}, {
			name: 'rotate',
			args: [0]
		}, {
			name: 'fillText',
			args: ['My title', 0, 0]
		}, {
			name: 'restore',
			args: []
		}]);
	});

	it ('should draw correctly vertically', function() {
		var chart = {};
		var context = window.createMockContext();

		var options = Chart.helpers.clone(Chart.defaults.global.title);
		options.text = "My title";
		options.position = 'left';

		var title = new Chart.Title({
			chart: chart,
			options: options,
			ctx: context
		});

		title.update(200, 400);
		title.draw();

		expect(context.getCalls()).toEqual([]);

		// Now we have a height since we display
		title.options.display = true;

		var minSize = title.update(200, 400);
		title.top = 50;
		title.left = 100;
		title.bottom = title.top + minSize.height;
		title.right = title.left + minSize.width;
		title.draw();

		expect(context.getCalls()).toEqual([{
			name: 'setFillStyle',
			args: ['#666']
		}, {
			name: 'save',
			args: []
		}, {
			name: 'translate',
			args: [106, 250]
		}, {
			name: 'rotate',
			args: [-0.5 * Math.PI]
		}, {
			name: 'fillText',
			args: ['My title', 0, 0]
		}, {
			name: 'restore',
			args: []
		}]);

		// Rotation is other way on right side
		title.options.position = 'right';

		// Reset call tracker
		context.resetCalls();

		minSize = title.update(200, 400);
		title.top = 50;
		title.left = 100;
		title.bottom = title.top + minSize.height;
		title.right = title.left + minSize.width;
		title.draw();

		expect(context.getCalls()).toEqual([{
			name: 'setFillStyle',
			args: ['#666']
		}, {
			name: 'save',
			args: []
		}, {
			name: 'translate',
			args: [126, 250]
		}, {
			name: 'rotate',
			args: [0.5 * Math.PI]
		}, {
			name: 'fillText',
			args: ['My title', 0, 0]
		}, {
			name: 'restore',
			args: []
		}]);
	});
});