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,6 +20,11 @@ describe('c3 chart shape line', function () {
                         ['data3', -150, 120, 110, 140, 115, 125]
                     ],
                     type: 'line'
+                },
+				line: {
+					step: {
+					  type: 'step'
+					}
 				}
             };
         });
@@ -53,6 +58,30 @@ describe('c3 chart shape line', function () {
             });
 		});
 		
+		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 () {
             beforeAll(function(){
                 args.data.type = 'spline';

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;