diff --git a/test/element.line.tests.js b/test/element.line.tests.js index 2b4028fbe0d..a310772325e 100644 --- a/test/element.line.tests.js +++ b/test/element.line.tests.js @@ -22,6 +22,8 @@ describe('Line element tests', function() { _view: { x: 0, y: 10, + controlPointNextX: 0, + controlPointNextY: 10 } })); points.push(new Chart.elements.Point({ @@ -30,6 +32,10 @@ describe('Line element tests', function() { _view: { x: 5, y: 0, + controlPointPreviousX: 5, + controlPointPreviousY: 0, + controlPointNextX: 5, + controlPointNextY: 0 } })); points.push(new Chart.elements.Point({ @@ -38,6 +44,10 @@ describe('Line element tests', function() { _view: { x: 15, y: -10, + controlPointPreviousX: 15, + controlPointPreviousY: -10, + controlPointNextX: 15, + controlPointNextY: -10 } })); points.push(new Chart.elements.Point({ @@ -46,6 +56,10 @@ describe('Line element tests', function() { _view: { x: 19, y: -5, + controlPointPreviousX: 19, + controlPointPreviousY: -5, + controlPointNextX: 19, + controlPointNextY: -5 } })); @@ -68,21 +82,6 @@ describe('Line element tests', function() { expect(mockContext.getCalls()).toEqual([{ name: 'save', args: [], - }, { - name: 'moveTo', - args: [0, 0] - }, { - name: 'lineTo', - args: [0, 10] - }, { - name: 'lineTo', - args: [5, 0] - }, { - name: 'lineTo', - args: [15, -10] - }, { - name: 'lineTo', - args: [19, -5] }, { name: 'setLineCap', args: ['butt'] @@ -106,24 +105,18 @@ describe('Line element tests', function() { }, { name: 'beginPath', args: [] - }, { - name: 'moveTo', - args: [0, 0] }, { name: 'moveTo', args: [0, 10] }, { - name: 'lineTo', - args: [0, 10] - }, { - name: 'lineTo', - args: [5, 0] + name: 'bezierCurveTo', + args: [0, 10, 5, 0, 5, 0] }, { - name: 'lineTo', - args: [15, -10] + name: 'bezierCurveTo', + args: [5, 0, 15, -10, 15, -10] }, { - name: 'lineTo', - args: [19, -5] + name: 'bezierCurveTo', + args: [15, -10, 19, -5, 19, -5] }, { name: 'stroke', args: [], @@ -143,7 +136,9 @@ describe('Line element tests', function() { _index: 0, _view: { x: 0, - y: 10 + y: 10, + controlPointNextX: 0, + controlPointNextY: 10 } })); points.push(new Chart.elements.Point({ @@ -151,7 +146,11 @@ describe('Line element tests', function() { _index: 1, _view: { x: 5, - y: 0 + y: 0, + controlPointPreviousX: 5, + controlPointPreviousY: 0, + controlPointNextX: 5, + controlPointNextY: 0 } })); points.push(new Chart.elements.Point({ @@ -159,7 +158,11 @@ describe('Line element tests', function() { _index: 2, _view: { x: 15, - y: -10 + y: -10, + controlPointPreviousX: 15, + controlPointPreviousY: -10, + controlPointNextX: 15, + controlPointNextY: -10 } })); points.push(new Chart.elements.Point({ @@ -167,7 +170,11 @@ describe('Line element tests', function() { _index: 3, _view: { x: 19, - y: -5 + y: -5, + controlPointPreviousX: 19, + controlPointPreviousY: -5, + controlPointNextX: 19, + controlPointNextY: -5 } })); @@ -198,6 +205,9 @@ describe('Line element tests', function() { var expected = [{ name: 'save', args: [], + }, { + name: 'beginPath', + args: [] }, { name: 'moveTo', args: [0, 2] @@ -205,14 +215,14 @@ describe('Line element tests', function() { name: 'lineTo', args: [0, 10] }, { - name: 'lineTo', - args: [5, 0] + name: 'bezierCurveTo', + args: [0, 10, 5, 0, 5, 0] }, { - name: 'lineTo', - args: [15, -10] + name: 'bezierCurveTo', + args: [5, 0, 15, -10, 15, -10] }, { - name: 'lineTo', - args: [19, -5] + name: 'bezierCurveTo', + args: [15, -10, 19, -5, 19, -5] }, { name: 'lineTo', args: [19, 2] @@ -251,24 +261,18 @@ describe('Line element tests', function() { }, { name: 'beginPath', args: [] - }, { - name: 'moveTo', - args: [0, 2] }, { name: 'moveTo', args: [0, 10] }, { - name: 'lineTo', - args: [0, 10] - }, { - name: 'lineTo', - args: [5, 0] + name: 'bezierCurveTo', + args: [0, 10, 5, 0, 5, 0] }, { - name: 'lineTo', - args: [15, -10] + name: 'bezierCurveTo', + args: [5, 0, 15, -10, 15, -10] }, { - name: 'lineTo', - args: [19, -5] + name: 'bezierCurveTo', + args: [15, -10, 19, -5, 19, -5] }, { name: 'stroke', args: [], @@ -289,7 +293,11 @@ describe('Line element tests', function() { _index: 0, _view: { x: 0, - y: 10 + y: 10, + controlPointPreviousX: 0, + controlPointPreviousY: 10, + controlPointNextX: 0, + controlPointNextY: 10 } })); points.push(new Chart.elements.Point({ @@ -297,7 +305,11 @@ describe('Line element tests', function() { _index: 1, _view: { x: 5, - y: 0 + y: 0, + controlPointPreviousX: 5, + controlPointPreviousY: 0, + controlPointNextX: 5, + controlPointNextY: 0 } })); points.push(new Chart.elements.Point({ @@ -305,7 +317,11 @@ describe('Line element tests', function() { _index: 2, _view: { x: 15, - y: -10 + y: -10, + controlPointPreviousX: 15, + controlPointPreviousY: -10, + controlPointNextX: 15, + controlPointNextY: -10 } })); points.push(new Chart.elements.Point({ @@ -313,7 +329,11 @@ describe('Line element tests', function() { _index: 3, _view: { x: 19, - y: -5 + y: -5, + controlPointPreviousX: 19, + controlPointPreviousY: -5, + controlPointNextX: 19, + controlPointNextY: -5 } })); @@ -337,24 +357,6 @@ describe('Line element tests', function() { expect(mockContext.getCalls()).toEqual([{ name: 'save', args: [], - }, { - name: 'moveTo', - args: [0, 0] - }, { - name: 'lineTo', - 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'] @@ -380,193 +382,25 @@ describe('Line element tests', function() { args: [] }, { name: 'moveTo', - args: [0, 0] - }, { - name: 'moveTo', - args: [0, 10] - }, { - name: 'lineTo', - 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, 2] - }, { - name: 'lineTo', args: [0, 10] }, { name: 'bezierCurveTo', - args: [1, 1, 4, 3, 5, 0] + args: [0, 10, 5, 0, 5, 0] }, { name: 'bezierCurveTo', - args: [6, 7, 14, 13, 15, -10] + args: [5, 0, 15, -10, 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, 2] - }, { - name: 'moveTo', - args: [0, 10] - }, { - name: 'lineTo', - args: [0, 10] + args: [15, -10, 19, -5, 19, -5] }, { 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] + args: [19, -5, 0, 10, 0, 10] }, { name: 'stroke', args: [], }, { name: 'restore', args: [] - }]; - expect(mockContext.getCalls()).toEqual(expected); + }]); }); });