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

fix tests by replace props.percentage with value

Browse Source
This commit is contained in:
Kevin Qi 2019-05-11 14:49:45 -07:00
parent c628f1ed56
commit 397e623a2a
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
test/CircularProgressbar.test.tsx
View File

@ -18,31 +18,29 @@ function getExpectedStrokeDashoffset({
describe('<CircularProgressbar />', () => {
test('SVG rendered to DOM', () => {
const wrapper = shallow(<CircularProgressbar percentage={50} />);
const wrapper = shallow(<CircularProgressbar value={50} />);
expect(wrapper.find('svg').exists()).toBe(true);
});
describe('props.strokeWidth', () => {
test('Applies to path', () => {
const wrapper = shallow(<CircularProgressbar percentage={50} strokeWidth={2} />);
const wrapper = shallow(<CircularProgressbar value={50} strokeWidth={2} />);
expect(wrapper.find('.CircularProgressbar-path').prop('strokeWidth')).toEqual(2);
});
});
describe('props.className', () => {
test('Applies to SVG', () => {
const wrapper = shallow(<CircularProgressbar percentage={50} className="my-custom-class" />);
const wrapper = shallow(<CircularProgressbar value={50} className="my-custom-class" />);
expect(wrapper.find('svg').prop('className')).toContain('my-custom-class');
});
});
describe('props.text', () => {
test('Does not render when blank', () => {
const wrapper = shallow(<CircularProgressbar percentage={50} />);
const wrapper = shallow(<CircularProgressbar value={50} />);
expect(wrapper.find('.CircularProgressbar-text').exists()).toEqual(false);
});
test('Renders the correct string', () => {
const percentage = 50;
const wrapper = shallow(
<CircularProgressbar percentage={percentage} text={`${percentage}%`} />,
);
const wrapper = shallow(<CircularProgressbar value={percentage} text={`${percentage}%`} />);
expect(wrapper.find('.CircularProgressbar-text').text()).toEqual('50%');
});
});
@ -50,7 +48,7 @@ describe('<CircularProgressbar />', () => {
test('Renders correct path', () => {
const percentage = 30;
const wrapper = mount(
<CircularProgressbar percentage={percentage} strokeWidth={0} className="my-custom-class" />,
<CircularProgressbar value={percentage} strokeWidth={0} className="my-custom-class" />,
);
expect(
@ -72,8 +70,8 @@ describe('<CircularProgressbar />', () => {
});
describe('props.counterClockwise', () => {
test('Reverses dashoffset', () => {
const clockwise = mount(<CircularProgressbar percentage={50} />);
const counterClockwise = mount(<CircularProgressbar percentage={50} counterClockwise />);
const clockwise = mount(<CircularProgressbar value={50} />);
const counterClockwise = mount(<CircularProgressbar value={50} counterClockwise />);
// Counterclockwise should have the negative dashoffset of clockwise
expect(
@ -96,7 +94,7 @@ describe('<CircularProgressbar />', () => {
const percentage = 25;
const strokeWidth = 5;
const wrapper = mount(
<CircularProgressbar percentage={percentage} strokeWidth={strokeWidth} circleRatio={1} />,
<CircularProgressbar value={percentage} strokeWidth={strokeWidth} circleRatio={1} />,
);
expect(
@ -113,7 +111,7 @@ describe('<CircularProgressbar />', () => {
const circleRatio = 0.8;
const wrapper = mount(
<CircularProgressbar
percentage={percentage}
value={percentage}
strokeWidth={strokeWidth}
circleRatio={circleRatio}
/>,
@ -141,7 +139,7 @@ describe('<CircularProgressbar />', () => {
const percentage = 50;
const wrapper = shallow(
<CircularProgressbar
percentage={percentage}
value={percentage}
text={`${percentage}%`}
background
styles={{
@ -164,11 +162,11 @@ describe('<CircularProgressbar />', () => {
});
describe('props.background', () => {
test('Background does not render when prop is false', () => {
const wrapper = shallow(<CircularProgressbar percentage={50} background={false} />);
const wrapper = shallow(<CircularProgressbar value={50} background={false} />);
expect(wrapper.find('.CircularProgressbar-background').exists()).toEqual(false);
});
test('Renders a <circle> with correct radius', () => {
const wrapper = shallow(<CircularProgressbar percentage={50} background />);
const wrapper = shallow(<CircularProgressbar value={50} background />);
expect(wrapper.find('.CircularProgressbar-background').exists()).toBe(true);
expect(wrapper.find('.CircularProgressbar-background').type()).toEqual('circle');
expect(wrapper.find('.CircularProgressbar-background').prop('r')).toEqual(50);
@ -176,7 +174,7 @@ describe('<CircularProgressbar />', () => {
});
describe('props.classes', () => {
test('Has default values', () => {
const wrapper = mount(<CircularProgressbar percentage={50} text="50" />);
const wrapper = mount(<CircularProgressbar value={50} text="50" />);
expect(
wrapper
.find('.CircularProgressbar')
@ -205,7 +203,7 @@ describe('<CircularProgressbar />', () => {
test('Prop overrides work', () => {
const wrapper = mount(
<CircularProgressbar
percentage={50}
value={50}
text="50"
background
classes={{

10
test/CircularProgressbarWithChildren.test.tsx
View File

@ -5,7 +5,7 @@ import { CircularProgressbarWithChildren } from '../src/index';
describe('<CircularProgressbarWithChildren />', () => {
test('SVG rendered to DOM', () => {
const wrapper = mount(<CircularProgressbarWithChildren percentage={50} />);
const wrapper = mount(<CircularProgressbarWithChildren value={50} />);
expect(wrapper.find('svg').exists()).toEqual(true);
expect(wrapper.find('[data-test-id="CircularProgressbar"]').exists()).toEqual(true);
@ -26,7 +26,9 @@ describe('<CircularProgressbarWithChildren />', () => {
},
className: 'johnny',
counterClockwise: false,
percentage: 50,
minValue: 0,
maxValue: 100,
value: 50,
strokeWidth: 2,
styles: {},
text: '50%',
@ -42,7 +44,7 @@ describe('<CircularProgressbarWithChildren />', () => {
describe('props.children', () => {
test('No children', () => {
const wrapper = mount(<CircularProgressbarWithChildren percentage={50} />);
const wrapper = mount(<CircularProgressbarWithChildren value={50} />);
expect(
wrapper.find('[data-test-id="CircularProgressbarWithChildren__children"]').exists(),
@ -51,7 +53,7 @@ describe('<CircularProgressbarWithChildren />', () => {
test('Renders child content', () => {
const wrapper = mount(
<CircularProgressbarWithChildren percentage={50}>
<CircularProgressbarWithChildren value={50}>
<div id="hello">Hello</div>
</CircularProgressbarWithChildren>,
);