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