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 using mount instead of shallow, and by using wrapper.find.hostNodes (https://github.com/airbnb/enzyme/issues/1253)

Browse Source
This commit is contained in:
Kevin Qi 2019-04-28 09:46:04 -07:00
parent 760d566e31
commit fe5370c76d
1 changed files with 82 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
test/CircularProgressbar.test.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';
import CircularProgressbar from '../src/index';
@ -36,29 +36,47 @@ describe('<CircularProgressbar />', () => {
describe('props.percentage', () => {
test('Renders correct path', () => {
const percentage = 30;
const wrapper = shallow(
const wrapper = mount(
<CircularProgressbar percentage={percentage} strokeWidth={0} className="my-custom-class" />,
);
const dashoffset = wrapper.find('.CircularProgressbar-path').prop('style')!.strokeDashoffset;
const dashoffset = wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset;
const expectedRadius = 50;
const expectedDiameter = 2 * expectedRadius * Math.PI;
const expectedOffset = ((100 - percentage) / 100) * expectedDiameter;
expect(dashoffset).toEqual(`${expectedOffset}px`);
const expectedArcto = `a ${expectedRadius},${expectedRadius}`;
expect(wrapper.find('.CircularProgressbar-path').prop('d')).toContain(expectedArcto);
expect(
wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.prop('d'),
).toContain(expectedArcto);
});
});
describe('props.counterClockwise', () => {
test('Reverses dashoffset', () => {
const clockwise = shallow(<CircularProgressbar percentage={50} />);
const counterClockwise = shallow(<CircularProgressbar percentage={50} counterClockwise />);
const clockwise = mount(<CircularProgressbar percentage={50} />);
const counterClockwise = mount(<CircularProgressbar percentage={50} counterClockwise />);
// Counterclockwise should have the negative dashoffset of clockwise
expect(
`-${clockwise.find('.CircularProgressbar-path').prop('style')!.strokeDashoffset}`,
).toEqual(counterClockwise.find('.CircularProgressbar-path').prop('style')!.strokeDashoffset);
`-${
clockwise
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset
}`,
).toEqual(
counterClockwise
.find('.CircularProgressbar-path')
.hostNodes()
.prop('style')!.strokeDashoffset,
);
});
});
describe('props.styles', () => {
@ -101,14 +119,34 @@ describe('<CircularProgressbar />', () => {
});
describe('props.classes', () => {
test('Has default values', () => {
const wrapper = shallow(<CircularProgressbar percentage={50} text="50" />);
expect(wrapper.find('.CircularProgressbar').type()).toEqual('svg');
expect(wrapper.find('.CircularProgressbar-path').type()).toEqual('path');
expect(wrapper.find('.CircularProgressbar-trail').type()).toEqual('path');
expect(wrapper.find('.CircularProgressbar-text').type()).toEqual('text');
const wrapper = mount(<CircularProgressbar percentage={50} text="50" />);
expect(
wrapper
.find('.CircularProgressbar')
.hostNodes()
.type(),
).toEqual('svg');
expect(
wrapper
.find('.CircularProgressbar-path')
.hostNodes()
.type(),
).toEqual('path');
expect(
wrapper
.find('.CircularProgressbar-trail')
.hostNodes()
.type(),
).toEqual('path');
expect(
wrapper
.find('.CircularProgressbar-text')
.hostNodes()
.type(),
).toEqual('text');
});
test('Prop overrides work', () => {
const wrapper = shallow(
const wrapper = mount(
<CircularProgressbar
percentage={50}
text="50"
@ -131,11 +169,36 @@ describe('<CircularProgressbar />', () => {
expect(wrapper.find('.CircularProgressbar-background').exists()).toBe(false);
// Assert override classes do exist
expect(wrapper.find('.someRootClass').type()).toEqual('svg');
expect(wrapper.find('.somePathClass').type()).toEqual('path');
expect(wrapper.find('.someTrailClass').type()).toEqual('path');
expect(wrapper.find('.someTextClass').type()).toEqual('text');
expect(wrapper.find('.someBackgroundClass').type()).toEqual('circle');
expect(
wrapper
.find('.someRootClass')
.hostNodes()
.type(),
).toEqual('svg');
expect(
wrapper
.find('.somePathClass')
.hostNodes()
.type(),
).toEqual('path');
expect(
wrapper
.find('.someTrailClass')
.hostNodes()
.type(),
).toEqual('path');
expect(
wrapper
.find('.someTextClass')
.hostNodes()
.type(),
).toEqual('text');
expect(
wrapper
.find('.someBackgroundClass')
.hostNodes()
.type(),
).toEqual('circle');
});
});
});