diff --git a/spec/shape.line-spec.js b/spec/shape.line-spec.js index 0febecb..a3021ef 100644 --- a/spec/shape.line-spec.js +++ b/spec/shape.line-spec.js @@ -1,6 +1,8 @@ describe('c3 chart shape line', function () { 'use strict'; + + var chart, args; beforeEach(function (done) { @@ -21,6 +23,16 @@ describe('c3 chart shape line', function () { } }; expect(true).toBeTruthy(); + + }); + + it("Should render the lines correctly", function(done) { + setTimeout(function () { + var target = chart.internal.main.select('.c3-chart-line.c3-target-data1'); + var commands = parseSvgPath( target.select('.c3-line-data1').attr('d')); + expect(commands.length).toBe(6); + done(); + }, 500); }); it("should not have shape-rendering when it's line chart", function () { @@ -79,30 +91,43 @@ describe('c3 chart shape line', function () { }, 500); }); - it('should change args to include null data on scatter plot', function () { - args = { - data: { - columns: [ - ['data1', 30, null, 100, 400, -150, 250], - ['data2', 50, 20, 10, 40, 15, 25], - ['data3', -150, 120, 110, 140, 115, 125] - ], - type: 'scatter' - } - }; - expect(true).toBeTruthy(); - }); - - it('should not show the circle for null', function (done) { + it('should not draw a line segment for null data', function(done) { setTimeout(function () { var target = chart.internal.main.select('.c3-chart-line.c3-target-data1'); - expect(+target.select('.c3-circle-0').style('opacity')).toBe(0.5); - expect(+target.select('.c3-circle-1').style('opacity')).toBe(0); - expect(+target.select('.c3-circle-2').style('opacity')).toBe(0.5); + var commands = parseSvgPath( target.select('.c3-line-data1').attr('d')); + var segments = 0; + for(var i = 0; i < commands.length; i++) { + (commands[i].command == 'L') ? segments++ : null; + } + expect(segments).toBe(3); done(); }, 500); }); + // it('should change args to include null data on scatter plot', function () { + // args = { + // data: { + // columns: [ + // ['data1', 30, null, 100, 400, -150, 250], + // ['data2', 50, 20, 10, 40, 15, 25], + // ['data3', -150, 120, 110, 140, 115, 125] + // ], + // type: 'scatter' + // } + // }; + // expect(true).toBeTruthy(); + // }); + + // it('should not show the circle for null', function (done) { + // setTimeout(function () { + // var target = chart.internal.main.select('.c3-chart-line.c3-target-data1'); + // expect(+target.select('.c3-circle-0').style('opacity')).toBe(0.5); + // expect(+target.select('.c3-circle-1').style('opacity')).toBe(0); + // expect(+target.select('.c3-circle-2').style('opacity')).toBe(0.5); + // done(); + // }, 500); + // }); + }); describe('spline.interpolation option', function () { @@ -123,6 +148,7 @@ describe('c3 chart shape line', function () { } } }; + expect(true).toBeTruthy(); }); diff --git a/spec/svg-helper.js b/spec/svg-helper.js new file mode 100644 index 0000000..2033637 --- /dev/null +++ b/spec/svg-helper.js @@ -0,0 +1,48 @@ + +/** + * Parse the d property of an SVG path into an array of drawing commands. + * @param {String} d SvgPath d attribute.] + * @return {Array} an array of drawing commands. + */ +function parseSvgPath(d) { + var commands = []; + var commandTokens = ['M','L','I','H','V','C','S','Q','T','A']; + var command; + var in_x = false; + var in_y = false; + var x = ''; + var y = ''; + for(var i=0; i <= d.length; i++) { + if (commandTokens.indexOf(d[i]) !== -1) { + if (in_x || in_y) { + commands.push({command: command, x: x, y: y}); + x = ''; + y = ''; + } + command = d[i]; + in_x = true; + in_y = false; + } + else { + if (d[i] == ',') { + if (in_y) { + commands.push({command: command, x: x, y: y}); + x = ''; + y = ''; + } + in_x = !in_x; + in_y = !in_y; + } + else if (in_x) { + x += d[i]; + } + else if (in_y) { + y += d[i]; + } + } + } + if (d[i] != ',' && in_y) { + commands.push({command: command, x: x, y: y}); + } + return commands; +} \ No newline at end of file