update test cases of dot and snap of jest

Author: lingengyan

README.md

@@ -140,7 +140,7 @@ export default () => (
       <td>dot</td>
       <td>Boolean | Object</td>
       <td>false</td>
-      <td>within dot or not, value: true, false, { size: Number }</td>
+      <td>within dot or not, value: true, false, { size: Number }, if the size is not a number, it will be the strokeWidth as default</td>
     </tr>
   </tbody>
 </table>

docs/examples/gap.tsx

@@ -41,6 +41,7 @@ class Example extends React.Component<ProgressProps, any> {
             Change State [{percent}]
           </button>
         </p>
+        <h3>within dot</h3>
         <div style={circleContainerStyle}>
           <Circle
             percent={percent}
@@ -65,6 +66,7 @@ class Example extends React.Component<ProgressProps, any> {
           />
         </div>
 
+        <h3>without dot</h3>
         <div style={circleContainerStyle}>
           <Circle
             percent={percent}
@@ -73,7 +75,6 @@ class Example extends React.Component<ProgressProps, any> {
             strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
-            dot={{ size: 'p' }}
           />
         </div>
         <div style={circleContainerStyle}>
@@ -84,7 +85,6 @@ class Example extends React.Component<ProgressProps, any> {
             strokeWidth={6}
             strokeLinecap="square"
             strokeColor={color}
-            dot={{ size: [] }}
           />
         </div>
       </div>

docs/examples/gradient-circle.tsx

@@ -10,7 +10,7 @@ const Example = () => {
 
   return (
     <div>
-      <h3>Circle Progress {90}%</h3>
+      <h3>Circle Progress {90}% (within dot)</h3>
       <div style={circleContainerStyle}>
         <Circle
           percent={90}
@@ -20,7 +20,7 @@ const Example = () => {
             '0%': '#108ee9',
             '100%': '#87d068',
           }}
-          dot={{ size: '10' }}
+          dot={true}
         />
       </div>
       <h3>Circle Progress {100}%</h3>
@@ -33,7 +33,6 @@ const Example = () => {
             '100%': '#108ee9',
             '0%': '#87d068',
           }}
-          dot={{}}
         />
       </div>
       <h3>Circle With Success Percent {65}%</h3>

src/Circle.tsx

@@ -115,13 +115,18 @@ const Circle: React.FC<ProgressProps> = ({
 
         path.setAttribute('d', pathDom.props.d);
         const dotPoint = path.getPointAtLength(strokeLength);
+
         return (
           <circle
             key={index + 10}
             className={`${prefixCls}-circle-dot`}
             cx={dotPoint.x}
             cy={dotPoint.y}
-            r={typeof dot === 'object' ? dot.size : strokeWidth}
+            r={
+              typeof dot === 'object' && dot.size && typeof dot.size === 'number'
+                ? dot.size
+                : strokeWidth
+            }
             fill={pathDom.props.stroke ? pathDom.props.stroke : pathDom.props.style.stroke}
           />
         );

tests/__snapshots__/index.spec.js.snap

@@ -153,13 +153,21 @@ Array [
     strokeColor="#2db7f5"
     strokeLinecap="square"
     strokeWidth="6"
-    style={Object {}}
+    style={
+      Object {
+        "overflow": "visible",
+      }
+    }
     trailColor="#D9D9D9"
     trailWidth={1}
   >
     <svg
       className="rc-progress-circle"
-      style={Object {}}
+      style={
+        Object {
+          "overflow": "visible",
+        }
+      }
       viewBox="0 0 100 100"
     >
       <path
@@ -211,13 +219,21 @@ Array [
     strokeColor="#2db7f5"
     strokeLinecap="square"
     strokeWidth="6"
-    style={Object {}}
+    style={
+      Object {
+        "overflow": "visible",
+      }
+    }
     trailColor="#D9D9D9"
     trailWidth={1}
   >
     <svg
       className="rc-progress-circle"
-      style={Object {}}
+      style={
+        Object {
+          "overflow": "visible",
+        }
+      }
       viewBox="0 0 100 100"
     >
       <path
@@ -269,13 +285,21 @@ Array [
     strokeColor="#2db7f5"
     strokeLinecap="square"
     strokeWidth="6"
-    style={Object {}}
+    style={
+      Object {
+        "overflow": "visible",
+      }
+    }
     trailColor="#D9D9D9"
     trailWidth={1}
   >
     <svg
       className="rc-progress-circle"
-      style={Object {}}
+      style={
+        Object {
+          "overflow": "visible",
+        }
+      }
       viewBox="0 0 100 100"
     >
       <path
@@ -327,13 +351,21 @@ Array [
     strokeColor="#2db7f5"
     strokeLinecap="square"
     strokeWidth="6"
-    style={Object {}}
+    style={
+      Object {
+        "overflow": "visible",
+      }
+    }
     trailColor="#D9D9D9"
     trailWidth={1}
   >
     <svg
       className="rc-progress-circle"
-      style={Object {}}
+      style={
+        Object {
+          "overflow": "visible",
+        }
+      }
       viewBox="0 0 100 100"
     >
       <path
@@ -385,13 +417,21 @@ Array [
     strokeColor="#2db7f5"
     strokeLinecap="round"
     strokeWidth="6"
-    style={Object {}}
+    style={
+      Object {
+        "overflow": "visible",
+      }
+    }
     trailColor="#D9D9D9"
     trailWidth={1}
   >
     <svg
       className="rc-progress-circle"
-      style={Object {}}
+      style={
+        Object {
+          "overflow": "visible",
+        }
+      }
       viewBox="0 0 100 100"
     >
       <path
@@ -443,13 +483,21 @@ Array [
     strokeColor="#2db7f5"
     strokeLinecap="round"
     strokeWidth="6"
-    style={Object {}}
+    style={
+      Object {
+        "overflow": "visible",
+      }
+    }
     trailColor="#D9D9D9"
     trailWidth={1}
   >
     <svg
       className="rc-progress-circle"
-      style={Object {}}
+      style={
+        Object {
+          "overflow": "visible",
+        }
+      }
       viewBox="0 0 100 100"
     >
       <path

tests/index.spec.js

@@ -156,4 +156,30 @@ describe('Progress', () => {
       );
     });
   });
+
+  describe('dot', () => {
+    it('the size of dot must be a number', () => {
+      const wrapper = mount(
+        <Circle
+          percent={70}
+          gapDegree={70}
+          gapPosition="top"
+          strokeWidth={6}
+          strokeLinecap="square"
+          strokeColor="#3FC7FA"
+          dot={{ size: '10' }}
+        />,
+      );
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe('6');
+
+      wrapper.setProps({ dot: { size: 10 } });
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe('10');
+
+      wrapper.setProps({ dot: true });
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe('6');
+
+      wrapper.setProps({ dot: [] });
+      expect(wrapper.find('.rc-progress-circle-dot').getDOMNode().r).toBe('6');
+    });
+  });
 });