test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yuiai01 2023-02-26 10:28:30 +08:00
parent 1a4dc9eb36
commit bd3401f737
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/progress/__tests__/index.test.tsx
View File

@ -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', () => {

4
components/progress/progress.tsx
View File

@ -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),