[test][Ripple] No render in before()

mui · Feb 8, 2021 · ca27e16 · ca27e16
1 parent a6d6e2a
commit ca27e16
Showing 1 changed file with 63 additions and 52 deletions.
diff --git a/packages/material-ui/src/ButtonBase/Ripple.test.js b/packages/material-ui/src/ButtonBase/Ripple.test.js
@@ -18,108 +18,119 @@ describe('<Ripple />', () => {
   });
 
   describe('starting and stopping', () => {
-    let wrapper;
-
-    before(() => {
-      wrapper = render(
+    it('should start the ripple', () => {
+      const { container, setProps } = render(
         <Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} />,
       );
-    });
 
-    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(
+        <Ripple classes={classes} in timeout={0} rippleX={0} rippleY={0} rippleSize={11} />,
+      );
+
+      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(
-        <Ripple
-          classes={classes}
-          timeout={0}
-          in={false}
-          rippleX={0}
-          rippleY={0}
-          rippleSize={11}
-          pulsate
-        />,
+    it('should render the ripple inside a pulsating Ripple', () => {
+      const { container } = render(
+        <Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} pulsate />,
       );
-    });
 
-    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(
+        <Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} pulsate />,
+      );
+
+      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(
+        <Ripple classes={classes} timeout={0} rippleX={0} rippleY={0} rippleSize={11} pulsate />,
+      );
+
+      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(
         <Ripple
           classes={classes}
           timeout={550}
           in
-          onExited={callbackSpy}
+          onExited={handleExited}
           rippleX={0}
           rippleY={0}
           rippleSize={11}
           pulsate
         />,
       );
-      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(
+        <Ripple
+          classes={classes}
+          timeout={550}
+          in
+          onExited={handleExited}
+          rippleX={0}
+          rippleY={0}
+          rippleSize={11}
+          pulsate
+        />,
+      );
+
+      setProps({ in: false });
+      unmount();
       clock.tick(550);
-      expect(callbackSpy.callCount).to.equal(0);
+      expect(handleExited.callCount).to.equal(0);
     });
   });
 });