Merge pull request #40922 from Yuiai01/fix-progress

fix(Progress): Fix percentage does not change with percent

components/progress/__tests__/index.test.tsx

@@ -1,16 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ProgressProps } from '..';
 import Progress from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render } from '../../../tests/utils';
+import { fireEvent, render } from '../../../tests/utils';
 import { handleGradient, sortGradient } from '../Line';
+import { ProgressTypes } from '../progress';
 import ProgressSteps from '../Steps';
 
 describe('Progress', () => {
   mountTest(Progress);
   rtlTest(Progress);
 
+  const Content = () => {
+    const [percent, setPercent] = useState(0);
+
+    return (
+      <>
+        {ProgressTypes.map((type) => (
+          <Progress key={type} type={type} percent={percent} success={{ percent: 30 }} />
+        ))}
+        <button type="button" onClick={() => setPercent(10)}>
+          Change Percent
+        </button>
+      </>
+    );
+  };
+
   it('successPercent should decide the progress status when it exists', () => {
     const { container: wrapper, rerender } = render(
       <Progress percent={100} success={{ percent: 50 }} />,
@@ -240,6 +256,14 @@ describe('Progress', () => {
     );
   });
 
+  it('should update the percentage based on the value of percent', () => {
+    const { container } = render(<Content />);
+    expect(container.querySelectorAll('[title="0%"]')).toHaveLength(ProgressTypes.length);
+    // Change Percent
+    fireEvent.click(container.querySelectorAll('button')[0]);
+    expect(container.querySelectorAll('[title="10%"]')).toHaveLength(ProgressTypes.length);
+  });
+
   describe('github issues', () => {
     // https://github.com/ant-design/ant-design/issues/30685
     it('Rendered more hooks than during the previous render', () => {

components/progress/progress.tsx

@@ -14,7 +14,7 @@ import Steps from './Steps';
 import useStyle from './style';
 import { getSuccessPercent, validProgress } from './utils';
 
-const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
+export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
 export type ProgressType = typeof ProgressTypes[number];
 const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
 export type ProgressSize = 'default' | 'small';
@@ -110,7 +110,7 @@ const Progress: React.FC<ProgressProps> = (props) => {
         {text}
       </span>
     );
-  }, [showInfo, percentNumber, progressStatus, type, prefixCls, format]);
+  }, [showInfo, percent, percentNumber, progressStatus, type, prefixCls, format]);
 
   warning(
     !('successPercent' in props),