From a828c52ae4d7f212471df3c72cdbb155bb30df2f Mon Sep 17 00:00:00 2001
From: Kevin Qi <kqi@amino.com>
Date: Sat, 11 May 2019 15:18:00 -0700
Subject: [PATCH] fix bug in pathRatio calculation for negative numbers, add
 tests

---
 src/CircularProgressbar.tsx       | 13 +++---
 test/CircularProgressbar.test.tsx | 68 +++++++++++++++++++++++++++++--
 2 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/CircularProgressbar.tsx b/src/CircularProgressbar.tsx
index 93fd46d..2adf25f 100644
--- a/src/CircularProgressbar.tsx
+++ b/src/CircularProgressbar.tsx
@@ -56,23 +56,26 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
     return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();
   }
 
+  // Ratio of path length to trail length, as a value between 0 and 1
+  getPathRatio() {
+    const { value, minValue, maxValue } = this.props;
+    const boundedValue = Math.min(Math.max(value, minValue), maxValue);
+    return (boundedValue - minValue) / (maxValue - minValue);
+  }
+
   render() {
     const {
       circleRatio,
       className,
       classes,
       counterClockwise,
-      maxValue,
-      minValue,
       styles,
       strokeWidth,
       text,
-      value,
     } = this.props;
 
     const pathRadius = this.getPathRadius();
-    const boundedValue = Math.min(Math.max(value, minValue), maxValue);
-    const pathRatio = boundedValue / (maxValue - minValue);
+    const pathRatio = this.getPathRatio();
 
     return (
       <svg
diff --git a/test/CircularProgressbar.test.tsx b/test/CircularProgressbar.test.tsx
index e2db339..f27be61 100644
--- a/test/CircularProgressbar.test.tsx
+++ b/test/CircularProgressbar.test.tsx
@@ -47,9 +47,7 @@ describe('<CircularProgressbar />', () => {
   describe('props.value', () => {
     test('Renders correct path', () => {
       const percentage = 30;
-      const wrapper = mount(
-        <CircularProgressbar value={percentage} strokeWidth={0} className="my-custom-class" />,
-      );
+      const wrapper = mount(<CircularProgressbar value={percentage} strokeWidth={0} />);
 
       expect(
         wrapper
@@ -67,6 +65,70 @@ describe('<CircularProgressbar />', () => {
           .prop('d'),
       ).toContain(expectedArcto);
     });
+    test('Value is bounded by minValue', () => {
+      const percentage = -30;
+      const wrapper = mount(
+        <CircularProgressbar value={percentage} minValue={0} maxValue={100} strokeWidth={0} />,
+      );
+
+      expect(
+        wrapper
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .prop('style')!.strokeDashoffset,
+      ).toEqual(getExpectedStrokeDashoffset({ percentage: 0, strokeWidth: 0 }));
+    });
+    test('Value is bounded by maxValue', () => {
+      const percentage = 130;
+      const wrapper = mount(
+        <CircularProgressbar value={percentage} minValue={0} maxValue={100} strokeWidth={0} />,
+      );
+
+      expect(
+        wrapper
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .prop('style')!.strokeDashoffset,
+      ).toEqual(getExpectedStrokeDashoffset({ percentage: 100, strokeWidth: 0 }));
+    });
+  });
+  describe('props.minValue, props.maxValue', () => {
+    test('Positive min/max', () => {
+      const wrapper = mount(
+        <CircularProgressbar minValue={1} value={2} maxValue={5} strokeWidth={0} />,
+      );
+
+      expect(
+        wrapper
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .prop('style')!.strokeDashoffset,
+      ).toEqual(getExpectedStrokeDashoffset({ percentage: 25, strokeWidth: 0 }));
+    });
+    test('Negative to positive min/max', () => {
+      const wrapper = mount(
+        <CircularProgressbar minValue={-15} value={-5} maxValue={5} strokeWidth={0} />,
+      );
+
+      expect(
+        wrapper
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .prop('style')!.strokeDashoffset,
+      ).toEqual(getExpectedStrokeDashoffset({ percentage: 50, strokeWidth: 0 }));
+    });
+    test('Negative min/max', () => {
+      const wrapper = mount(
+        <CircularProgressbar minValue={-30} value={-20} maxValue={-10} strokeWidth={0} />,
+      );
+
+      expect(
+        wrapper
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .prop('style')!.strokeDashoffset,
+      ).toEqual(getExpectedStrokeDashoffset({ percentage: 50, strokeWidth: 0 }));
+    });
   });
   describe('props.counterClockwise', () => {
     test('Reverses dashoffset', () => {