fix: extra space, type and coverage

Author: SaidMarar

src/utils/getIndeterminateCircle.tsx

@@ -23,7 +23,7 @@ export default ({ id, loading }: IndeterminateOption) => {
     indeterminateStyleAnimation: (
       <style>
         {`@keyframes ${animationName} {
-            0 % { transform: rotate(0deg);}
+            0% { transform: rotate(0deg);}
             100% {transform: rotate(360deg);}
           }`}
       </style>

src/utils/getIndeterminateLine.tsx

@@ -1,10 +1,11 @@
+import type { StrokeLinecapType } from '@/interface';
 import React from 'react';
 
 interface IndeterminateOption {
   id: string;
   loading: boolean;
   percent: number;
-  strokeLinecap: string;
+  strokeLinecap: StrokeLinecapType;
   strokeWidth: number;
 }
 

tests/indeterminate.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Circle, Line } from '../src';
+import { render, waitFor } from '@testing-library/react';
+
+describe('(Circle | Line).indeterminate', () => {
+  describe('Line', () => {
+    it('should render indeterminate style', () => {
+      const { container, rerender } = render(<Line loading />);
+      const line: HTMLElement = container.querySelector('.rc-progress-line-path');
+
+      expect(line.style.animation).toContain('indeterminate-animate');
+
+      rerender(<Line />);
+
+      expect(line.style.animation).not.toContain('indeterminate-animate');
+    });
+
+    it('should render indeterminate with percent and rerennder without it', () => {
+      const { container, rerender } = render(<Line percent={20} loading />);
+      const line: HTMLElement = container.querySelector('.rc-progress-line-path');
+
+      expect(line.style.animation).toContain('indeterminate-animate');
+      expect(line.style.strokeDasharray).toEqual('20 100');
+
+      rerender(<Line percent={20} />);
+
+      expect(line.style.animation).not.toContain('indeterminate-animate');
+      expect(line.style.strokeDasharray).not.toEqual('20 100');
+    });
+  });
+
+  describe('Circle', () => {
+    it('should render indeterminate style', () => {
+      const { container, rerender } = render(<Circle loading />);
+      const circle: HTMLElement = container.querySelector('.rc-progress-circle-path');
+
+      expect(circle.style.animation).toContain('indeterminate-animate');
+
+      rerender(<Circle />);
+
+      expect(circle.style.animation).not.toContain('indeterminate-animate');
+    });
+
+    it('should rerender indeterminate with percent Circle', () => {
+      const { container, rerender } = render(<Circle percent={20} loading />);
+      const circle: HTMLElement = container.querySelector('.rc-progress-circle-path');
+
+      expect(circle.style.animation).toContain('indeterminate-animate');
+      expect(circle.style.transform).toEqual('rotate(0deg)');
+
+      rerender(<Circle percent={20} />);
+
+      expect(circle.style.animation).not.toContain('indeterminate-animate');
+      expect(circle.style.transform).not.toEqual('rotate(0deg)');
+    });
+  });
+});

tests/index.spec.js

@@ -243,28 +243,4 @@ describe('Progress', () => {
     expect(circle.find(Circle).props().percent).toEqual([20, 20, 20, 20]);
     circle.unmount();
   });
-
-  it('should support indeterminate mode', () => {
-    const Loading = () => {
-      return (
-        <>
-          <Circle loading />
-          <Line loading />
-        </>
-      );
-    };
-
-    const wrapper = mount(<Loading />);
-    const circle = wrapper.find(Circle);
-    const line = wrapper.find(Line);
-    expect(circle.find('style')).toBeDefined();
-    expect(circle.find('.rc-progress-circle-path').at(0).getDOMNode().style.animation).toContain(
-      'indeterminate-animate',
-    );
-    expect(line.find('style')).toBeDefined();
-    expect(line.find('.rc-progress-line-path').at(0).getDOMNode().style.animation).toContain(
-      'indeterminate-animate',
-    );
-    wrapper.unmount();
-  });
 });