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`] = ` +
+
+
+
+
+
+
+ + -20% + +
+
+`; + +exports[`Progress render negetive successPercent 1`] = ` +
+
+
+
+
+
+
+
+ + 50% + +
+
+`; + +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 = (