fix coverage and generate id

Author: SaidMarar

src/Circle/index.tsx

@@ -54,6 +54,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
   const isConicGradient = gradient && typeof gradient === 'object';
   const mergedStrokeLinecap = isConicGradient ? 'butt' : strokeLinecap;
   const { indeterminateStyleProps, indeterminateStyleAnimation } = getIndeterminateCircle({
+    id: mergedId,
     loading,
   });
 

src/Line.tsx

@@ -3,9 +3,11 @@ import classNames from 'classnames';
 import { useTransitionDuration, defaultProps } from './common';
 import type { ProgressProps } from './interface';
 import getIndeterminateLine from './utils/getIndeterminateLine';
+import useId from './hooks/useId';
 
 const Line: React.FC<ProgressProps> = (props) => {
   const {
+    id,
     className,
     percent,
     prefixCls,
@@ -23,6 +25,8 @@ const Line: React.FC<ProgressProps> = (props) => {
     ...props,
   };
 
+  const mergedId = useId(id);
+
   // eslint-disable-next-line no-param-reassign
   delete restProps.gapPosition;
   const percentList = Array.isArray(percent) ? percent : [percent];
@@ -37,6 +41,7 @@ const Line: React.FC<ProgressProps> = (props) => {
   const viewBoxString = `0 0 100 ${strokeWidth}`;
   let stackPtg = 0;
   const { indeterminateStyleProps, indeterminateStyleAnimation } = getIndeterminateLine({
+    id: mergedId,
     loading,
     percent: percentList[0],
     strokeLinecap,

src/common.ts

@@ -42,8 +42,3 @@ export const useTransitionDuration = (): SVGPathElement[] => {
 
   return pathsRef.current;
 };
-
-export const toArray = <T>(value: T | T[]): T[] => {
-  const mergedValue = value ?? [];
-  return Array.isArray(mergedValue) ? mergedValue : [mergedValue];
-};

src/utils/getIndeterminateCircle.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 
 interface IndeterminateOption {
+  id: string;
   loading: boolean;
 }
 
-export default (options: IndeterminateOption) => {
-  if (!options.loading) {
+export default ({ id, loading }: IndeterminateOption) => {
+  if (!loading) {
     return {
       indeterminateStyleProps: {},
       indeterminateStyleAnimation: null,
     };
   }
 
-  const animationName = 'circle-indeterminate-animate';
+  const animationName = `${id}-indeterminate-animate`;
 
   return {
     indeterminateStyleProps: {

src/utils/getIndeterminateLine.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
 
 interface IndeterminateOption {
+  id: string;
   loading: boolean;
   percent: number;
   strokeLinecap: string;
   strokeWidth: number;
 }
 
 export default (options: IndeterminateOption) => {
-  const { percent, strokeLinecap, strokeWidth, loading } = options;
+  const { id, percent, strokeLinecap, strokeWidth, loading } = options;
   if (!loading) {
     return {
       indeterminateStyleProps: {},
       indeterminateStyleAnimation: null,
     };
   }
-  const animationName = 'line-indeterminate-animate';
+  const animationName = `${id}-indeterminate-animate`;
   const strokeDashOffset = 100 - (percent + (strokeLinecap === 'round' ? strokeWidth : 0));
 
   return {

tests/__snapshots__/index.spec.js.snap

@@ -24,7 +24,7 @@ exports[` 1`] = `
       stroke="#2db7f5"
       stroke-linecap="butt"
       stroke-width="1"
-      style="stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;"
+      style="stroke-dasharray: 20px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;"
     />
   </svg>
   <br />
@@ -50,7 +50,7 @@ exports[` 1`] = `
       stroke="#2db7f5"
       stroke-linecap="round"
       stroke-width="1"
-      style="stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;"
+      style="stroke-dasharray: 19.8px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;"
     />
   </svg>
   <br />
@@ -76,7 +76,7 @@ exports[` 1`] = `
       stroke="#2db7f5"
       stroke-linecap="square"
       stroke-width="1"
-      style="stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: .3s, .3s, .3s, .06s;"
+      style="stroke-dasharray: 19.9px, 100px; stroke-dashoffset: -0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear; transition-duration: 0s, 0s;"
     />
   </svg>
 </div>

tests/index.spec.js

@@ -259,11 +259,11 @@ describe('Progress', () => {
     const line = wrapper.find(Line);
     expect(circle.find('style')).toBeDefined();
     expect(circle.find('.rc-progress-circle-path').at(0).getDOMNode().style.animation).toContain(
-      'circle-indeterminate-animate',
+      'indeterminate-animate',
     );
     expect(line.find('style')).toBeDefined();
     expect(line.find('.rc-progress-line-path').at(0).getDOMNode().style.animation).toContain(
-      'line-indeterminate-animate',
+      'indeterminate-animate',
     );
     wrapper.unmount();
   });