diff --git a/packages/material-ui/src/ButtonBase/Ripple.test.js b/packages/material-ui/src/ButtonBase/Ripple.test.js
index 023f19dc704185..8a1ba50a2d2466 100644
--- a/packages/material-ui/src/ButtonBase/Ripple.test.js
+++ b/packages/material-ui/src/ButtonBase/Ripple.test.js
@@ -18,108 +18,119 @@ describe('', () => {
});
describe('starting and stopping', () => {
- let wrapper;
-
- before(() => {
- wrapper = render(
+ it('should start the ripple', () => {
+ const { container, setProps } = render(
,
);
- });
- it('should start the ripple', () => {
- wrapper.setProps({ in: true });
- const ripple = wrapper.container.querySelector('span');
+ setProps({ in: true });
+
+ const ripple = container.querySelector('span');
expect(ripple).to.have.class(classes.rippleVisible);
});
it('should stop the ripple', () => {
- wrapper.setProps({ in: true });
- wrapper.setProps({ in: false });
- const child = wrapper.container.querySelector('span > span');
+ const { container, setProps } = render(
+ ,
+ );
+
+ setProps({ in: false });
+
+ const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childLeaving);
});
});
describe('pulsating and stopping 1', () => {
- let wrapper;
-
- before(() => {
- wrapper = render(
- ,
+ it('should render the ripple inside a pulsating Ripple', () => {
+ const { container } = render(
+ ,
);
- });
- it('should render the ripple inside a pulsating Ripple', () => {
- const ripple = wrapper.container.querySelector('span');
+ const ripple = container.querySelector('span');
expect(ripple).to.have.class(classes.ripple);
expect(ripple).to.have.class(classes.ripplePulsate);
- const child = wrapper.container.querySelector('span > span');
+ const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childPulsate);
});
it('should start the ripple', () => {
- wrapper.setProps({ in: true });
- const ripple = wrapper.container.querySelector('span');
+ const { container, setProps } = render(
+ ,
+ );
+
+ setProps({ in: true });
+
+ const ripple = container.querySelector('span');
expect(ripple).to.have.class(classes.rippleVisible);
- const child = wrapper.container.querySelector('span > span');
+ const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childPulsate);
});
it('should stop the ripple', () => {
- wrapper.setProps({ in: true });
- wrapper.setProps({ in: false });
- const child = wrapper.container.querySelector('span > span');
+ const { container, setProps } = render(
+ ,
+ );
+
+ setProps({ in: true });
+ setProps({ in: false });
+ const child = container.querySelector('span > span');
expect(child).to.have.class(classes.childLeaving);
});
});
describe('pulsating and stopping 2', () => {
- let wrapper;
let clock;
- let callbackSpy;
beforeEach(() => {
- callbackSpy = spy();
- wrapper = render(
+ clock = useFakeTimers();
+ });
+
+ afterEach(() => {
+ clock.restore();
+ });
+
+ it('handleExit should trigger a timer', () => {
+ const handleExited = spy();
+ const { setProps } = render(
,
);
- clock = useFakeTimers();
- });
-
- afterEach(() => {
- clock.restore();
- });
- it('handleExit should trigger a timer', () => {
- wrapper.setProps({ in: false });
+ setProps({ in: false });
clock.tick(549);
- expect(callbackSpy.callCount).to.equal(0);
+ expect(handleExited.callCount).to.equal(0);
clock.tick(1);
- expect(callbackSpy.callCount).to.equal(1);
+ expect(handleExited.callCount).to.equal(1);
});
it('unmount should defuse the handleExit timer', () => {
- wrapper.setProps({ in: false });
- wrapper.unmount();
+ const handleExited = spy();
+ const { setProps, unmount } = render(
+ ,
+ );
+
+ setProps({ in: false });
+ unmount();
clock.tick(550);
- expect(callbackSpy.callCount).to.equal(0);
+ expect(handleExited.callCount).to.equal(0);
});
});
});