Initial line element tests. Did not test the skipNull functionality since it seems...

diff --git a/src/elements/element.line.js b/src/elements/element.line.js
index 62c316c959bebf546603cab4f612250fb9f21d48..88c2136992685c3337166973359bdf141311ade0 100644 (file)
--- a/src/elements/element.line.js
+++ b/src/elements/element.line.js
@@ -114,7 +114,7 @@
 
                        // Now draw the line between all the points with any borders
                        ctx.lineCap = vm.borderCapStyle || Chart.defaults.global.elements.line.borderCapStyle;
-                       
+
                        // IE 9 and 10 do not support line dash
                        if (ctx.setLineDash) {
                                ctx.setLineDash(vm.borderDash || Chart.defaults.global.elements.line.borderDash);
@@ -122,7 +122,7 @@
 
                        ctx.lineDashOffset = vm.borderDashOffset || Chart.defaults.global.elements.line.borderDashOffset;
                        ctx.lineJoin = vm.borderJoinStyle || Chart.defaults.global.elements.line.borderJoinStyle;
-                       ctx.lineWidth = vm.borderWidth || Chart.defaults.global.defaultColor;
+                       ctx.lineWidth = vm.borderWidth || Chart.defaults.global.elements.line.borderWidth;
                        ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
                        ctx.beginPath();
 
@@ -184,10 +184,9 @@
                                }
                        }
 
-
                        ctx.stroke();
                        ctx.restore();
                },
        });
 
-}).call(this);
+}).call(this);
\ No newline at end of file

diff --git a/test/element.line.tests.js b/test/element.line.tests.js
new file mode 100644 (file)
index 0000000..5e41d7f
--- /dev/null
+++ b/test/element.line.tests.js
@@ -0,0 +1,526 @@
+// Tests for the line element
+describe('Line element tests', function() {
+       it ('should be constructed', function() {
+               var line = new Chart.elements.Line({
+                       _datasetindex: 2,
+                       _points: [1, 2, 3, 4]
+               });
+
+               expect(line).not.toBe(undefined);
+               expect(line._datasetindex).toBe(2);
+               expect(line._points).toEqual([1, 2, 3, 4]);
+       });
+
+       it ('should draw with default settings', function() {
+               var mockContext = window.createMockContext();
+
+               // Create our points
+               var points = [];
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 0,
+                       _view: {
+                               x: 0,
+                               y: 10
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 1,
+                       _view: {
+                               x: 5,
+                               y: 0
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 2,
+                       _view: {
+                               x: 15,
+                               y: -10
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 3,
+                       _view: {
+                               x: 19,
+                               y: -5
+                       }
+               }));
+
+               var line = new Chart.elements.Line({
+                       _datasetindex: 2,
+                       _chart: {
+                               ctx: mockContext,
+                       },
+                       _children: points,
+                       // Need to provide some settings
+                       _view: {
+                               fill: false, // don't want to fill
+                               tension: 0.0, // no bezier curve for now
+                       }
+               })
+
+               line.draw();
+
+               expect(mockContext.getCalls()).toEqual([{
+                       name: 'save',
+                       args: [],
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'lineTo',
+                       args: [5, 0]
+               }, {
+                       name: 'lineTo',
+                       args: [15, -10]
+               }, {
+                       name: 'lineTo',
+                       args: [19, -5]
+               }, {
+                       name: 'setLineCap',
+                       args: ['butt']
+               }, {
+                       name: 'setLineDash',
+                       args: [[]]
+               }, {
+                       name: 'setLineDashOffset',
+                       args: [0.0]
+               }, {
+                       name: 'setLineJoin',
+                       args: ['miter']
+               }, {
+                       name: 'setLineWidth',
+                       args: [3]
+               }, {
+                       name: 'setStrokeStyle',
+                       args: ['rgba(0,0,0,0.1)']
+               }, {
+                       name: 'beginPath',
+                       args: []
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'lineTo',
+                       args: [5, 0]
+               }, {
+                       name: 'lineTo',
+                       args: [15, -10]
+               }, {
+                       name: 'lineTo',
+                       args: [19, -5]
+               }, {
+                       name: 'stroke',
+                       args: [],
+               }, {
+                       name: 'restore',
+                       args: []
+               }])
+       });
+
+       it ('should draw with custom settings', function() {
+               var mockContext = window.createMockContext();
+
+               // Create our points
+               var points = [];
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 0,
+                       _view: {
+                               x: 0,
+                               y: 10
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 1,
+                       _view: {
+                               x: 5,
+                               y: 0
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 2,
+                       _view: {
+                               x: 15,
+                               y: -10
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 3,
+                       _view: {
+                               x: 19,
+                               y: -5
+                       }
+               }));
+
+               var line = new Chart.elements.Line({
+                       _datasetindex: 2,
+                       _chart: {
+                               ctx: mockContext,
+                       },
+                       _children: points,
+                       // Need to provide some settings
+                       _view: {
+                               fill: true, 
+                               scaleZero: 2, // for filling lines
+                               tension: 0.0, // no bezier curve for now
+
+                               borderCapStyle: 'round',
+                               borderColor: 'rgb(255, 255, 0)',
+                               borderDash: [2, 2],
+                               borderDashOffset: 1.5,
+                               borderJoinStyle: 'bevel',
+                               borderWidth: 4,
+                               backgroundColor: 'rgb(0, 0, 0)'
+                       }
+               })
+
+               line.draw();
+
+               var expected = [{
+                       name: 'save',
+                       args: [],
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'lineTo',
+                       args: [5, 0]
+               }, {
+                       name: 'lineTo',
+                       args: [15, -10]
+               }, {
+                       name: 'lineTo',
+                       args: [19, -5]
+               }, {
+                       name: 'lineTo',
+                       args: [19, 2]
+               }, {
+                       name: 'lineTo',
+                       args: [0, 2]
+               }, {
+                       name: 'setFillStyle',
+                       args: ['rgb(0, 0, 0)']
+               }, {
+                       name: 'closePath',
+                       args: []
+               }, {
+                       name: 'fill',
+                       args: []
+               }, {
+                       name: 'setLineCap',
+                       args: ['round']
+               }, {
+                       name: 'setLineDash',
+                       args: [[2, 2]]
+               }, {
+                       name: 'setLineDashOffset',
+                       args: [1.5]
+               }, {
+                       name: 'setLineJoin',
+                       args: ['bevel']
+               }, {
+                       name: 'setLineWidth',
+                       args: [4]
+               }, {
+                       name: 'setStrokeStyle',
+                       args: ['rgb(255, 255, 0)']
+               }, {
+                       name: 'beginPath',
+                       args: []
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'lineTo',
+                       args: [5, 0]
+               }, {
+                       name: 'lineTo',
+                       args: [15, -10]
+               }, {
+                       name: 'lineTo',
+                       args: [19, -5]
+               }, {
+                       name: 'stroke',
+                       args: [],
+               }, {
+                       name: 'restore',
+                       args: []
+               }];
+               expect(mockContext.getCalls()).toEqual(expected)
+       });
+
+       it ('should be able to draw with a loop back to the beginning point', function() {
+               var mockContext = window.createMockContext();
+
+               // Create our points
+               var points = [];
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 0,
+                       _view: {
+                               x: 0,
+                               y: 10
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 1,
+                       _view: {
+                               x: 5,
+                               y: 0
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 2,
+                       _view: {
+                               x: 15,
+                               y: -10
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 3,
+                       _view: {
+                               x: 19,
+                               y: -5
+                       }
+               }));
+
+               var line = new Chart.elements.Line({
+                       _datasetindex: 2,
+                       _chart: {
+                               ctx: mockContext,
+                       },
+                       _children: points,
+                       _loop: true, // want the line to loop back to the first point
+                       // Need to provide some settings
+                       _view: {
+                               fill: false, // don't want to fill
+                               tension: 0.0, // no bezier curve for now
+                       }
+               })
+
+               line.draw();
+
+               expect(mockContext.getCalls()).toEqual([{
+                       name: 'save',
+                       args: [],
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'lineTo',
+                       args: [5, 0]
+               }, {
+                       name: 'lineTo',
+                       args: [15, -10]
+               }, {
+                       name: 'lineTo',
+                       args: [19, -5]
+               }, {
+                       name: 'lineTo',
+                       args: [0, 10]
+               }, {
+                       name: 'setLineCap',
+                       args: ['butt']
+               }, {
+                       name: 'setLineDash',
+                       args: [[]]
+               }, {
+                       name: 'setLineDashOffset',
+                       args: [0.0]
+               }, {
+                       name: 'setLineJoin',
+                       args: ['miter']
+               }, {
+                       name: 'setLineWidth',
+                       args: [3]
+               }, {
+                       name: 'setStrokeStyle',
+                       args: ['rgba(0,0,0,0.1)']
+               }, {
+                       name: 'beginPath',
+                       args: []
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'lineTo',
+                       args: [5, 0]
+               }, {
+                       name: 'lineTo',
+                       args: [15, -10]
+               }, {
+                       name: 'lineTo',
+                       args: [19, -5]
+               }, {
+                       name: 'lineTo',
+                       args: [0, 10]
+               }, {
+                       name: 'stroke',
+                       args: [],
+               }, {
+                       name: 'restore',
+                       args: []
+               }])
+       });
+
+       it ('should draw with bezier curves if tension > 0', function() {
+               var mockContext = window.createMockContext();
+
+               // Create our points
+               var points = [];
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 0,
+                       _view: {
+                               x: 0,
+                               y: 10,
+                               controlPointNextX: 1,
+                               controlPointNextY: 1,
+                               controlPointPreviousX: 0,
+                               controlPointPreviousY: 0,
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 1,
+                       _view: {
+                               x: 5,
+                               y: 0,
+                               controlPointNextX: 6,
+                               controlPointNextY: 7,
+                               controlPointPreviousX: 4,
+                               controlPointPreviousY: 3,
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 2,
+                       _view: {
+                               x: 15,
+                               y: -10,
+                               controlPointNextX: 16,
+                               controlPointNextY: 17,
+                               controlPointPreviousX: 14,
+                               controlPointPreviousY: 13,
+                       }
+               }));
+               points.push(new Chart.elements.Point({
+                       _datasetindex: 2,
+                       _index: 3,
+                       _view: {
+                               x: 19,
+                               y: -5,
+                               controlPointNextX: 20,
+                               controlPointNextY: 21,
+                               controlPointPreviousX: 18,
+                               controlPointPreviousY: 17,
+                       }
+               }));
+
+               var line = new Chart.elements.Line({
+                       _datasetindex: 2,
+                       _chart: {
+                               ctx: mockContext,
+                       },
+                       _children: points,
+                       // Need to provide some settings
+                       _view: {
+                               fill: true, 
+                               scaleZero: 2, // for filling lines
+                               tension: 0.5, // have bezier curves
+
+                               borderCapStyle: 'round',
+                               borderColor: 'rgb(255, 255, 0)',
+                               borderDash: [2, 2],
+                               borderDashOffset: 1.5,
+                               borderJoinStyle: 'bevel',
+                               borderWidth: 4,
+                               backgroundColor: 'rgb(0, 0, 0)'
+                       }
+               })
+
+               line.draw();
+
+               var expected = [{
+                       name: 'save',
+                       args: [],
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'bezierCurveTo',
+                       args: [1, 1, 4, 3, 5, 0]
+               }, {
+                       name: 'bezierCurveTo',
+                       args: [6, 7, 14, 13, 15, -10]
+               }, {
+                       name: 'bezierCurveTo',
+                       args: [16, 17, 18, 17, 19, -5]
+               }, {
+                       name: 'lineTo',
+                       args: [19, 2]
+               }, {
+                       name: 'lineTo',
+                       args: [0, 2]
+               }, {
+                       name: 'setFillStyle',
+                       args: ['rgb(0, 0, 0)']
+               }, {
+                       name: 'closePath',
+                       args: []
+               }, {
+                       name: 'fill',
+                       args: []
+               }, {
+                       name: 'setLineCap',
+                       args: ['round']
+               }, {
+                       name: 'setLineDash',
+                       args: [[2, 2]]
+               }, {
+                       name: 'setLineDashOffset',
+                       args: [1.5]
+               }, {
+                       name: 'setLineJoin',
+                       args: ['bevel']
+               }, {
+                       name: 'setLineWidth',
+                       args: [4]
+               }, {
+                       name: 'setStrokeStyle',
+                       args: ['rgb(255, 255, 0)']
+               }, {
+                       name: 'beginPath',
+                       args: []
+               }, {
+                       name: 'moveTo',
+                       args: [0, 10]
+               }, {
+                       name: 'bezierCurveTo',
+                       args: [1, 1, 4, 3, 5, 0]
+               }, {
+                       name: 'bezierCurveTo',
+                       args: [6, 7, 14, 13, 15, -10]
+               }, {
+                       name: 'bezierCurveTo',
+                       args: [16, 17, 18, 17, 19, -5]
+               }, {
+                       name: 'stroke',
+                       args: [],
+               }, {
+                       name: 'restore',
+                       args: []
+               }];
+               expect(mockContext.getCalls()).toEqual(expected)
+       });
+});
\ No newline at end of file

diff --git a/test/mockContext.js b/test/mockContext.js
index f357715f1756d7cb6b2faf0c618e2132d543876a..239a0a3e48e545c957c211f8bac3a1b15d82b8fa 100644 (file)
--- a/test/mockContext.js
+++ b/test/mockContext.js
@@ -5,6 +5,8 @@
                this._initMethods();
 
                this._fillStyle = null;
+               this._lineCap = null;
+               this._lineDashOffset = null;
                this._lineJoin = null;
                this._lineWidth = null;
                this._strokeStyle = null;
@@ -18,6 +20,20 @@
                                        this.record('setFillStyle', [style]);
                                }
                        },
+                       'lineCap': {
+                               'get': function() { return this._lineCap; },
+                               'set': function(cap) {
+                                       this._lineCap = cap;
+                                       this.record('setLineCap', [cap]);
+                               }
+                       },
+                       'lineDashOffset': {
+                               'get': function() { return this._lineDashOffset; },
+                               'set': function(offset) {
+                                       this._lineDashOffset = offset;
+                                       this.record('setLineDashOffset', [offset]);
+                               }
+                       },
                        'lineJoin': {
                                'get': function() { return this._lineJoin; },
                                'set': function(join) {
@@ -48,10 +64,14 @@
                var methods = {
                        arc: function() {},
                        beginPath: function() {},
+                       bezierCurveTo: function() {},
                        closePath: function() {},
                        fill: function() {},
                        lineTo: function(x, y) {},
                        moveTo: function(x, y) {},
+                       restore: function() {},
+                       save: function() {},
+                       setLineDash: function() {},
                        stroke: function() {}
                };