Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[test] Migrate CircularProgress and Collapse to testing-library #20789

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 99 additions & 69 deletions packages/material-ui/src/CircularProgress/CircularProgress.test.js
Original file line number Diff line number Diff line change
@@ -1,133 +1,163 @@
import * as React from 'react';
import { expect } from 'chai';
import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils';
import { createClientRender } from 'test/utils/createClientRender';
import { createMount, getClasses } from '@material-ui/core/test-utils';
import describeConformance from '../test-utils/describeConformance';
import CircularProgress from './CircularProgress';

describe('<CircularProgress />', () => {
let mount;
let shallow;
let classes;
const render = createClientRender();

before(() => {
mount = createMount({ strict: true });
shallow = createShallow({ dive: true });
classes = getClasses(<CircularProgress />);
});

after(() => {
mount.cleanUp();
});

describeConformance(<CircularProgress />, () => ({
classes,
inheritComponent: 'div',
mount,
refInstanceof: window.HTMLDivElement,
skip: ['componentProp'],
after: () => mount.cleanUp(),
}));

it('should render with the primary color by default', () => {
const wrapper = shallow(<CircularProgress />);
expect(wrapper.hasClass(classes.colorPrimary)).to.equal(true);
const { container } = render(<CircularProgress />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.colorPrimary);
});

it('should render with the primary color', () => {
const wrapper = shallow(<CircularProgress color="primary" />);
expect(wrapper.hasClass(classes.colorPrimary)).to.equal(true);
const { container } = render(<CircularProgress color="primary" />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.colorPrimary);
});

it('should render with the secondary color', () => {
const wrapper = shallow(<CircularProgress color="secondary" />);
expect(wrapper.hasClass(classes.colorSecondary)).to.equal(true);
const { container } = render(<CircularProgress color="secondary" />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.colorSecondary);
});

it('should contain an SVG with the svg class, and a circle with the circle class', () => {
const wrapper = shallow(<CircularProgress />);
const svg = wrapper.childAt(0);
expect(svg.name()).to.equal('svg');
expect(wrapper.hasClass(classes.indeterminate)).to.equal(true);
expect(svg.childAt(0).name()).to.equal('circle');
expect(svg.childAt(0).hasClass(classes.circle)).to.equal(true);
const { container } = render(<CircularProgress />);
const circularProgress = container.firstChild;
const svg = circularProgress.firstChild;
expect(svg.tagName).to.equal('svg');
expect(circularProgress).to.have.class(classes.indeterminate);
expect(svg.firstChild.tagName).to.equal('circle', 'should be a circle');
expect(svg.firstChild).to.have.class(classes.circle, 'should have the circle class');
});

it('should render intermediate variant by default', () => {
const wrapper = shallow(<CircularProgress />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
const svg = wrapper.childAt(0);
expect(svg.childAt(0).hasClass(classes.circleIndeterminate)).to.equal(true);
const { container } = render(<CircularProgress />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
const svg = circularProgress.firstChild;
expect(svg.firstChild).to.have.class(
classes.circleIndeterminate,
'should have the circleIndeterminate class',
);
});

it('should render with a different size', () => {
const wrapper = shallow(<CircularProgress size={60} />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
expect(wrapper.props().style.width).to.equal(60);
expect(wrapper.props().style.height).to.equal(60);
const svg = wrapper.childAt(0);
expect(svg.name()).to.equal('svg');
expect(svg.childAt(0).name()).to.equal('circle');
expect(svg.childAt(0).props().cx).to.equal(44);
expect(svg.childAt(0).props().cy).to.equal(44);
const { container } = render(<CircularProgress size={60} />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
expect(circularProgress.style.width).to.equal('60px', 'should have width correctly set');
expect(circularProgress.style.height).to.equal('60px', 'should have height correctly set');
const svg = circularProgress.firstChild;
expect(svg.tagName).to.equal('svg');
const circle = svg.firstChild;
expect(circle.tagName).to.equal('circle');
expect(circle).to.have.attribute('cx', '44');
expect(circle).to.have.attribute('cy', '44');
});

describe('prop: variant="static', () => {
it('should set strokeDasharray of circle', () => {
const wrapper = shallow(<CircularProgress variant="static" value={70} />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
const svg = wrapper.childAt(0);
const style = svg.childAt(0).props().style;
expect(style.strokeDasharray).to.equal('126.920');
expect(style.strokeDashoffset).to.equal('38.076px');
expect(wrapper.props()['aria-valuenow']).to.equal(70);
const { container } = render(<CircularProgress variant="static" value={70} />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
const svg = circularProgress.firstChild;
const circle = svg.firstChild;
expect(circle.style.strokeDasharray).to.match(
/126\.920?(px)?/gm,
'should have strokeDasharray set',
);
expect(circle.style.strokeDashoffset).to.equal(
'38.076px',
'should have strokeDashoffset set',
);
expect(circularProgress).to.have.attribute('aria-valuenow', '70');
});
});

describe('prop: variant="determinate"', () => {
it('should render with determinate classes', () => {
const wrapper = shallow(<CircularProgress variant="determinate" />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
const svg = wrapper.childAt(0);
expect(svg.name()).to.equal('svg');
expect(svg.hasClass(classes.svgIndeterminate)).to.equal(false);
const { container } = render(<CircularProgress variant="determinate" />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
const svg = circularProgress.firstChild;
expect(svg.tagName).to.equal('svg');
expect(svg).to.not.have.class(
classes.svgIndeterminate,
'should not have the svgIndeterminate class',
);
});

it('should set strokeDasharray of circle', () => {
const wrapper = shallow(<CircularProgress variant="determinate" value={70} />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
const svg = wrapper.childAt(0);
const style = svg.childAt(0).props().style;
expect(style.strokeDasharray).to.equal('126.920');
expect(style.strokeDashoffset).to.equal('11.423px');
expect(wrapper.props()['aria-valuenow']).to.equal(70);
const { container } = render(<CircularProgress variant="determinate" value={70} />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
const svg = circularProgress.firstChild;
const circle = svg.firstChild;
expect(circle.style.strokeDasharray).to.match(
/126\.920?(px)?/gm,
'should have strokeDasharray set',
);
expect(circle.style.strokeDashoffset).to.equal(
'11.423px',
'should have strokeDashoffset set',
);
expect(circularProgress).to.have.attribute('aria-valuenow', '70');
});
});

describe('prop: disableShrink ', () => {
it('should default to false', () => {
const wrapper = shallow(<CircularProgress variant="indeterminate" />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
const svg = wrapper.childAt(0);
const circle = svg.childAt(0);
expect(circle.name()).to.equal('circle');
expect(circle.hasClass(classes.circleDisableShrink)).to.equal(false);
const { container } = render(<CircularProgress variant="indeterminate" />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
const svg = circularProgress.firstChild;
const circle = svg.firstChild;
expect(circle.tagName).to.equal('circle');
expect(circle).to.not.have.class(classes.circleDisableShrink);
});

it('should render without disableShrink class when set to false', () => {
const wrapper = shallow(<CircularProgress variant="indeterminate" disableShrink={false} />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
const svg = wrapper.childAt(0);
const circle = svg.childAt(0);
expect(circle.name()).to.equal('circle');
expect(circle.hasClass(classes.circleDisableShrink)).to.equal(false);
const { container } = render(
<CircularProgress variant="indeterminate" disableShrink={false} />,
);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
const svg = circularProgress.firstChild;
const circle = svg.firstChild;
expect(circle.tagName).to.equal('circle');
expect(circle).to.not.have.class(classes.circleDisableShrink);
});

it('should render with disableShrink class when set to true', () => {
const wrapper = shallow(<CircularProgress variant="indeterminate" disableShrink />);
expect(wrapper.hasClass(classes.root)).to.equal(true);
const svg = wrapper.childAt(0);
const circle = svg.childAt(0);
expect(circle.name()).to.equal('circle');
expect(circle.hasClass(classes.circleDisableShrink)).to.equal(true);
const { container } = render(<CircularProgress variant="indeterminate" disableShrink />);
const circularProgress = container.firstChild;
expect(circularProgress).to.have.class(classes.root);
const svg = circularProgress.firstChild;
const circle = svg.firstChild;
expect(circle.tagName).to.equal('circle');
expect(circle).to.have.class(classes.circleDisableShrink);
});
});
});
184 changes: 71 additions & 113 deletions packages/material-ui/src/Collapse/Collapse.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy, stub, useFakeTimers } from 'sinon';
import { createClientRender } from 'test/utils/createClientRender';
import { createMount, getClasses } from '@material-ui/core/test-utils';
import describeConformance from '../test-utils/describeConformance';
import Collapse from './Collapse';
@@ -14,43 +15,46 @@ describe('<Collapse />', () => {
in: true,
children: <div />,
};
const render = createClientRender({ strict: false });

before(() => {
// StrictModeViolation: uses react-transition-group
mount = createMount({ strict: false });
classes = getClasses(<Collapse {...defaultProps} />);
});

after(() => {
mount.cleanUp();
});

describeConformance(<Collapse {...defaultProps} />, () => ({
classes,
inheritComponent: Transition,
mount,
refInstanceof: window.HTMLDivElement,
testComponentPropWith: 'span',
after: () => mount.cleanUp(),
}));

it('should render a container around the wrapper', () => {
const wrapper = mount(<Collapse {...defaultProps} classes={{ container: 'woofCollapse1' }} />);
const child = wrapper.find('Transition').childAt(0);
expect(child.name()).to.equal('div');
expect(child.hasClass(classes.container)).to.equal(true);
expect(child.hasClass('woofCollapse1')).to.equal(true);
const { container } = render(
<Collapse {...defaultProps} classes={{ container: 'woofCollapse1' }} />,
);
const collapse = container.firstChild;
expect(collapse.tagName).to.equal('DIV');
expect(collapse).to.have.class(classes.container);
expect(collapse).to.have.class('woofCollapse1');
});

it('should render a wrapper around the children', () => {
const children = <h1>Hello</h1>;
const wrapper = mount(<Collapse {...defaultProps}>{children}</Collapse>);
const child = wrapper.find('Transition').childAt(0);
expect(child.childAt(0).name()).to.equal('div');
expect(child.childAt(0).childAt(0).children().type()).to.equal('h1');
const { container } = render(<Collapse {...defaultProps}>{children}</Collapse>);
const collapse = container.firstChild;
const wrapper = collapse.firstChild;
const innerWrapper = wrapper.firstChild;
expect(wrapper.tagName).to.equal('DIV');
expect(innerWrapper.firstChild.tagName).to.equal('H1');
});

describe('transition lifecycle', () => {
let wrapper;
let setProps;
let collapse;
let container;
let clock;
let nodeEnterHeightStyle;
@@ -78,104 +82,58 @@ describe('<Collapse />', () => {
const handleExiting = spy();
const handleExited = spy();

before(() => {
wrapper = mount(
beforeEach(() => {
clock = useFakeTimers();
const renderProps = render(
<Collapse
onEnter={handleEnterWrapper}
onEntering={handleEnteringWrapper}
onEntered={handleEntered}
onExit={handleExitWrapper}
onExiting={handleExiting}
onExited={handleExited}
timeout={300}
>
<div />
</Collapse>,
);
container = wrapper.find('Transition').childAt(0);
stub(container.childAt(0).instance(), 'clientHeight').get(() => 666);
clock = useFakeTimers();
container = renderProps.container;
setProps = renderProps.setProps;
collapse = container.firstChild;
stub(collapse.firstChild, 'clientHeight').get(() => 666);
});

after(() => {
afterEach(() => {
clock.restore();
});

describe('in', () => {
before(() => {
wrapper.setProps({ in: true });
});

describe('handleEnter()', () => {
it('should set element height to 0 initially', () => {
expect(nodeEnterHeightStyle).to.equal('0px');
});

it('should call handleEnter', () => {
expect(handleEnter.args[0][0]).to.equal(container.instance());
expect(handleEnter.args[0][1]).to.equal(false);
});
});

describe('handleEntering()', () => {
it('should set height to the wrapper height', () => {
expect(nodeEnteringHeightStyle).to.equal('666px');
});

it('should call handleEntering', () => {
expect(handleEntering.callCount).to.equal(1);
expect(handleEntering.args[0][0]).to.equal(container.instance());
expect(handleEntering.args[0][1]).to.equal(false);
});
});

describe('handleEntered()', () => {
it('should set height to auto', () => {
clock.tick(1000);
expect(handleEntered.args[0][0].style.height).to.equal('auto');
expect(handleEntered.args[0][1]).to.equal(false);
});

it('should have called onEntered', () => {
expect(handleEntered.callCount).to.equal(1);
});
});
it('should run in', () => {
setProps({ in: true });
expect(nodeEnterHeightStyle).to.equal('0px');
expect(handleEnter.args[0][0]).to.equal(collapse);
expect(handleEnter.args[0][1]).to.equal(false);
expect(nodeEnteringHeightStyle).to.equal('666px');
expect(handleEntering.callCount).to.equal(1);
expect(handleEntering.args[0][0]).to.equal(collapse);
expect(handleEntering.args[0][1]).to.equal(false);
clock.tick(300);
expect(handleEntered.args[0][0].style.height).to.equal('auto');
expect(handleEntered.args[0][1]).to.equal(false);
expect(handleEntered.callCount).to.equal(1);
});

describe('out', () => {
before(() => {
wrapper.setProps({ in: true });
wrapper.setProps({ in: false });
});

describe('handleExit()', () => {
it('should set height to the wrapper height', () => {
expect(nodeExitHeightStyle).to.equal('666px');
});
});

describe('handleExiting()', () => {
it('should set height to the 0', () => {
expect(handleExiting.args[0][0].style.height).to.equal('0px');
});

it('should call onExiting', () => {
expect(handleExiting.callCount).to.equal(1);
expect(handleExiting.args[0][0]).to.equal(container.instance());
});
});

describe('handleExited()', () => {
it('should set height to the 0', () => {
clock.tick(1000);
expect(handleExited.args[0][0].style.height).to.equal('0px');
});

it('should call onExited', () => {
clock.tick(1000);
expect(handleExited.callCount).to.equal(1);
expect(handleExited.args[0][0]).to.equal(container.instance());
});
});
it('should run out', () => {
setProps({ in: true });
setProps({ in: false });
expect(nodeExitHeightStyle).to.equal('666px');
expect(handleExiting.args[0][0].style.height).to.equal('0px');
expect(handleExiting.callCount).to.equal(1);
expect(handleExiting.args[0][0]).to.equal(collapse);
clock.tick(300);
expect(handleExited.args[0][0].style.height).to.equal('0px');
clock.tick(300);
expect(handleExited.callCount).to.equal(1);
expect(handleExited.args[0][0]).to.equal(collapse);
});
});

@@ -205,14 +163,12 @@ describe('<Collapse />', () => {
</Collapse>
</ThemeProvider>
);
const wrapper = mount(<Test />);

const renderProps1 = render(<Test />);
const collapse = renderProps1.container.firstChild;
// Gets wrapper
stub(wrapper.find('Transition').childAt(0).childAt(0).instance(), 'clientHeight').get(
() => 10,
);
stub(collapse.firstChild, 'clientHeight').get(() => 10);

wrapper.setProps({
renderProps1.setProps({
in: true,
});

@@ -224,12 +180,12 @@ describe('<Collapse />', () => {
expect(next1.callCount).to.equal(1);

const next2 = spy();
const wrapper2 = mount(
const renderProps2 = render(
<Collapse timeout="auto" onEntered={next2}>
<div />
</Collapse>,
);
wrapper2.setProps({ in: true });
renderProps2.setProps({ in: true });

expect(next2.callCount).to.equal(0);
clock.tick(0);
@@ -239,13 +195,13 @@ describe('<Collapse />', () => {
it('should use timeout as delay when timeout is number', () => {
const timeout = 10;
const next = spy();
const wrapper = mount(
const { setProps } = render(
<Collapse timeout={timeout} onEntered={next}>
<div />
</Collapse>,
);

wrapper.setProps({ in: true });
setProps({ in: true });

expect(next.callCount).to.equal(0);
clock.tick(0);
@@ -257,7 +213,7 @@ describe('<Collapse />', () => {
it('should create proper easeOut animation onEntering', () => {
const handleEntering = spy();

const wrapper = mount(
const { setProps } = render(
<Collapse
onEntering={handleEntering}
timeout={{
@@ -268,14 +224,14 @@ describe('<Collapse />', () => {
</Collapse>,
);

wrapper.setProps({ in: true });
setProps({ in: true });
expect(handleEntering.args[0][0].style.transitionDuration).to.equal('556ms');
});

it('should create proper sharp animation onExiting', () => {
const handleExiting = spy();

const wrapper = mount(
const { setProps } = render(
<Collapse
{...defaultProps}
onExiting={handleExiting}
@@ -285,7 +241,7 @@ describe('<Collapse />', () => {
/>,
);

wrapper.setProps({
setProps({
in: false,
});
expect(handleExiting.args[0][0].style.transitionDuration).to.equal('446ms');
@@ -296,17 +252,19 @@ describe('<Collapse />', () => {
const collapsedHeight = '10px';

it('should work when closed', () => {
const wrapper = mount(<Collapse {...defaultProps} collapsedHeight={collapsedHeight} />);
const child = wrapper.find('Transition').childAt(0);
expect(child.props().style.minHeight).to.equal(collapsedHeight);
const { container } = render(
<Collapse {...defaultProps} collapsedHeight={collapsedHeight} />,
);
const collapse = container.firstChild;
expect(collapse.style.minHeight).to.equal(collapsedHeight);
});

it('should be taken into account in handleExiting', () => {
const handleExiting = spy();
const wrapper = mount(
const { setProps } = render(
<Collapse {...defaultProps} collapsedHeight={collapsedHeight} onExiting={handleExiting} />,
);
wrapper.setProps({ in: false });
setProps({ in: false });

expect(handleExiting.args[0][0].style.height).to.equal(collapsedHeight);
});