diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000000..771f020bff
--- /dev/null
+++ b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Progress render negetive progress 1`] = `
+
+`;
+
+exports[`Progress render negetive successPercent 1`] = `
+
+`;
+
+exports[`Progress render out-of-range progress 1`] = `
+
+`;
diff --git a/components/progress/__tests__/index.test.js b/components/progress/__tests__/index.test.js
index 3920bec2ba..5c82028bc3 100644
--- a/components/progress/__tests__/index.test.js
+++ b/components/progress/__tests__/index.test.js
@@ -10,4 +10,19 @@ describe('Progress', () => {
wrapper.setProps({ percent: 50, successPercent: 100 });
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
});
+
+ it('render out-of-range progress', async () => {
+ const wrapper = mount();
+ expect(wrapper.render()).toMatchSnapshot();
+ });
+
+ it('render negetive progress', async () => {
+ const wrapper = mount();
+ expect(wrapper.render()).toMatchSnapshot();
+ });
+
+ it('render negetive successPercent', async () => {
+ const wrapper = mount();
+ expect(wrapper.render()).toMatchSnapshot();
+ });
});
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index d205d9e683..998416ac67 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -31,6 +31,15 @@ export interface ProgressProps {
size?: ProgressSize;
}
+const validProgress = (progress: number | undefined) => {
+ if (!progress || progress < 0) {
+ return 0;
+ } else if (progress > 100) {
+ return 100;
+ }
+ return progress;
+};
+
export default class Progress extends React.Component {
static Line: any;
static Circle: any;
@@ -84,11 +93,11 @@ export default class Progress extends React.Component {
if (type === 'line') {
const percentStyle = {
- width: `${percent}%`,
+ width: `${validProgress(percent)}%`,
height: strokeWidth || (size === 'small' ? 6 : 8),
};
const successPercentStyle = {
- width: `${successPercent}%`,
+ width: `${validProgress(successPercent)}%`,
height: strokeWidth || (size === 'small' ? 6 : 8),
};
const successSegment = successPercent !== undefined
@@ -118,7 +127,7 @@ export default class Progress extends React.Component {
progress = (