fix step-before and step-after with dedicated test (#2340) (#2385)

* fix step-before and step-after with dedicated test

* fix indentation

spec/shape.line-spec.js

@@ -20,7 +20,12 @@ describe('c3 chart shape line', function () {
                         ['data3', -150, 120, 110, 140, 115, 125]
                     ],
                     type: 'line'
-                }
+                },
+				line: {
+					step: {
+					  type: 'step'
+					}
+				}
             };
         });
 
@@ -51,6 +56,30 @@ describe('c3 chart shape line', function () {
                     expect(style).toBe('crispedges');
                 });
             });
+		});
+		
+		describe('should change to step chart with step-after', function () {
+			beforeAll(function(){
+				args.line.step.type = 'step-after';
+			});
+			it("should have shape-rendering = crispedges when it's step chart", function () {
+				d3.selectAll('.c3-line').each(function () {
+					var style = d3.select(this).style('shape-rendering').toLowerCase();
+					expect(style).toBe('crispedges');
+				});
+			});
+		});
+
+		describe('should change to step chart with step-before', function () {
+			beforeAll(function(){
+				args.line.step.type = 'step-before';
+			});
+			it("should have shape-rendering = crispedges when it's step chart", function () {
+				d3.selectAll('.c3-line').each(function () {
+					var style = d3.select(this).style('shape-rendering').toLowerCase();
+					expect(style).toBe('crispedges');
+				});
+			});
         });
 
         describe('should change to spline chart', function () {

src/shape.js

@@ -93,6 +93,8 @@ c3_chart_internal_fn.getInterpolate = function (d) {
             'cardinal-closed': d3.curveCardinalClosed,
             'monotone': d3.curveMonotoneX,
             'step': d3.curveStep,
+            'step-before': d3.curveStepBefore,
+            'step-after': d3.curveStepAfter
         },
         type;