PR #1572 -- Add tests for path rendering instructions.

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 () {
+        it('should not draw a line segment for null data', function(done) {
-            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);
+                var commands = parseSvgPath( target.select('.c3-line-data1').attr('d'));
-                expect(+target.select('.c3-circle-1').style('opacity')).toBe(0);
+                var segments = 0;
-                expect(+target.select('.c3-circle-2').style('opacity')).toBe(0.5);
+                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();
         });
 

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;
+}