archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2026-01-18 15:55:06 +00:00
Code Issues Projects Releases Wiki Activity

fix bug in pathRatio calculation for negative numbers, add tests

Browse Source
This commit is contained in:
Kevin Qi 2019-05-11 15:18:00 -07:00
parent af4775625e
commit a828c52ae4
2 changed files with 73 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/CircularProgressbar.tsx
View File

@ -56,23 +56,26 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();
}
// Ratio of path length to trail length, as a value between 0 and 1
getPathRatio() {
const { value, minValue, maxValue } = this.props;
const boundedValue = Math.min(Math.max(value, minValue), maxValue);
return (boundedValue - minValue) / (maxValue - minValue);
}
render() {
const {
circleRatio,
className,
classes,
counterClockwise,
maxValue,
minValue,
styles,
strokeWidth,
text,
value,
} = this.props;
const pathRadius = this.getPathRadius();
const boundedValue = Math.min(Math.max(value, minValue), maxValue);
const pathRatio = boundedValue / (maxValue - minValue);
const pathRatio = this.getPathRatio();
return (
<svg

68
test/CircularProgressbar.test.tsx
View File

@ -47,9 +47,7 @@ describe('<CircularProgressbar />', () => {
describe('props.value', () => {
test('Renders correct path', () => {
const percentage = 30;
const wrapper = mount(
<CircularProgressbar value={percentage} strokeWidth={0} className="my-custom-class" />,
);
const wrapper = mount(<CircularProgressbar value={percentage} strokeWidth={0} />);
expect(
wrapper
@ -67,6 +65,70 @@ describe('<CircularProgressbar />', () => {
.prop('d'),
).toContain(expectedArcto);
});
test('Value is bounded by minValue', () => {
const percentage = -30;
const wrapper = mount(
<CircularProgressbar value={percentage} minValue={0} maxValue={100} strokeWidth={0} />,
);
expect(
wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset,
).toEqual(getExpectedStrokeDashoffset({ percentage: 0, strokeWidth: 0 }));
});
test('Value is bounded by maxValue', () => {
const percentage = 130;
const wrapper = mount(
<CircularProgressbar value={percentage} minValue={0} maxValue={100} strokeWidth={0} />,
);
expect(
wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset,
).toEqual(getExpectedStrokeDashoffset({ percentage: 100, strokeWidth: 0 }));
});
});
describe('props.minValue, props.maxValue', () => {
test('Positive min/max', () => {
const wrapper = mount(
<CircularProgressbar minValue={1} value={2} maxValue={5} strokeWidth={0} />,
);
expect(
wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset,
).toEqual(getExpectedStrokeDashoffset({ percentage: 25, strokeWidth: 0 }));
});
test('Negative to positive min/max', () => {
const wrapper = mount(
<CircularProgressbar minValue={-15} value={-5} maxValue={5} strokeWidth={0} />,
);
expect(
wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset,
).toEqual(getExpectedStrokeDashoffset({ percentage: 50, strokeWidth: 0 }));
});
test('Negative min/max', () => {
const wrapper = mount(
<CircularProgressbar minValue={-30} value={-20} maxValue={-10} strokeWidth={0} />,
);
expect(
wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset,
).toEqual(getExpectedStrokeDashoffset({ percentage: 50, strokeWidth: 0 }));
});
});
describe('props.counterClockwise', () => {
test('Reverses dashoffset', () => {