Title block tests

diff --git a/src/core/core.title.js b/src/core/core.title.js
index b2ae003f2621dbc2e2647f6ff49182d7d3d52849..6aa16d2d2b880484314bfaf15991563b8aa18909 100644 (file)
--- a/src/core/core.title.js
+++ b/src/core/core.title.js
@@ -131,7 +131,9 @@ module.exports = function(Chart) {
                                        this.minSize.height += this.options.fontSize + (this.options.padding * 2);
                                }
                        } else {
-                               // TODO vertical
+                               if (this.options.display) {
+                                       this.minSize.width += this.options.fontSize + (this.options.padding * 2);
+                               }
                        }
 
                        this.width = this.minSize.width;

diff --git a/test/core.title.tests.js b/test/core.title.tests.js
new file mode 100644 (file)
index 0000000..6ddb3d1
--- /dev/null
+++ b/test/core.title.tests.js
@@ -0,0 +1,201 @@
+// 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,
+                       fontColor: Chart.defaults.global.defaultFontColor,
+                       fontFamily: Chart.defaults.global.defaultFontFamily,
+                       fontSize: Chart.defaults.global.defaultFontSize,
+                       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: 'fillText',
+                       args: ['My title', 300, 66]
+               }]);
+       });
+
+       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: 'save',
+                       args: []
+               }, {
+                       name: 'translate',
+                       args: [106, 250]
+               }, {
+                       name: 'rotate',
+                       args: [-0.5 * Math.PI]
+               }, {
+                       name: 'setFillStyle',
+                       args: ['#666']
+               }, {
+                       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: 'save',
+                       args: []
+               }, {
+                       name: 'translate',
+                       args: [126, 250]
+               }, {
+                       name: 'rotate',
+                       args: [0.5 * Math.PI]
+               }, {
+                       name: 'setFillStyle',
+                       args: ['#666']
+               }, {
+                       name: 'fillText',
+                       args: ['My title', 0, 0]
+               }, {
+                       name: 'restore',
+                       args: []
+               }]);
+       });
+});
\ No newline at end of file