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); }); }); });