test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Merge pull request #15951 from ant-design/fix-progress-status

Browse Source 
fix(Progress): 🐛 fix progress success UI when status is undefined
This commit is contained in:
偏右 2019-04-09 16:17:06 +08:00 committed by GitHub
commit 6bd76140a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -635,7 +635,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
<div>
<div
class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div>
<div

19
components/progress/__tests__/index.test.js
View File

@ -86,4 +86,23 @@ describe('Progress', () => {
'test10 10%, test20 20%, test30 30%',
);
});
it('should show success status when percent is 100', () => {
const wrapper = mount(<Progress percent={100} />);
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
});
// https://github.com/ant-design/ant-design/issues/15950
it('should show success status when percent is 100 and status is undefined', () => {
const wrapper = mount(<Progress percent={100} status={undefined} />);
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
});
// https://github.com/ant-design/ant-design/pull/15951#discussion_r273062969
it('should show success status when status is invalid', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const wrapper = mount(<Progress percent={100} status="invalid" />);
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
errorSpy.mockRestore();
});
});

1
components/progress/demo/gradient-line.md
View File

@ -24,7 +24,6 @@ const Demo = () => (
'100%': '#87d068',
}}
percent={99.9}
status="active"
/>
<Progress
strokeColor={{

26
components/progress/progress.tsx
View File

@ -61,6 +61,22 @@ export default class Progress extends React.Component<ProgressProps> {
default: PropTypes.oneOf(['default', 'small']),
};
getPercentNumber() {
const { successPercent, percent = 0 } = this.props;
return parseInt(
successPercent !== undefined ? successPercent.toString() : percent.toString(),
10,
);
}
getProgressStatus() {
const { status } = this.props;
if (ProgressStatuses.indexOf(status!) < 0 && this.getPercentNumber() >= 100) {
return 'success';
}
return status || 'normal';
}
renderProcessInfo(prefixCls: string, progressStatus: (typeof ProgressStatuses)[number]) {
const { showInfo, format, type, percent, successPercent } = this.props;
if (!showInfo) return null;
@ -104,15 +120,9 @@ export default class Progress extends React.Component<ProgressProps> {
...restProps
} = props;
const prefixCls = getPrefixCls('progress', customizePrefixCls);
const progressStatus =
parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >=
100 && !('status' in props)
? 'success'
: status || 'normal';
let progress;
const progressStatus = this.getProgressStatus();
const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
let progress;
// Render progress shape
if (type === 'line') {
progress = (