[test] Convert Modal tests to testing-library

packages/material-ui/src/Backdrop/Backdrop.test.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
+import { spy, useFakeTimers } from 'sinon';
+import { createMount, createClientRender, describeConformanceV5, act } from 'test/utils';
 import Backdrop, { backdropClasses as classes } from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 
@@ -32,4 +33,34 @@ describe('<Backdrop />', () => {
     );
     expect(container.querySelector('h1')).to.have.text('Hello World');
   });
+
+  describe('prop: transitionDuration', () => {
+    /**
+     * @type {ReturnType<typeof useFakeTimers>}
+     */
+    let clock;
+    beforeEach(() => {
+      clock = useFakeTimers();
+    });
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('delays appearance of its children', () => {
+      const handleEntered = spy();
+      render(
+        <Backdrop open transitionDuration={1954} onEntered={handleEntered}>
+          <div />
+        </Backdrop>,
+      );
+
+      expect(handleEntered.callCount).to.equal(0);
+
+      act(() => {
+        clock.tick(1954);
+      });
+
+      expect(handleEntered.callCount).to.equal(1);
+    });
+  });
 });

packages/material-ui/src/Modal/Modal.test.js

@@ -10,10 +10,10 @@ import {
   within,
   createMount,
   describeConformanceV5,
+  screen,
 } from 'test/utils';
 import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 import Fade from '@material-ui/core/Fade';
-import Backdrop from '@material-ui/core/Backdrop';
 import Modal, { modalClasses as classes } from '@material-ui/core/Modal';
 
 describe('<Modal />', () => {
@@ -111,18 +111,23 @@ describe('<Modal />', () => {
   });
 
   describe('backdrop', () => {
-    it('should render a backdrop with a fade transition', () => {
-      const wrapper = mount(
-        <Modal open BackdropComponent={Backdrop}>
+    it('can render a custom backdrop component', () => {
+      function TestBackdrop(props) {
+        const { open } = props;
+        if (!open) {
+          return null;
+        }
+
+        return <div data-testid="backdrop" />;
+      }
+
+      render(
+        <Modal open BackdropComponent={TestBackdrop}>
           <div />
         </Modal>,
       );
 
-      const backdrop = wrapper.find(Backdrop);
-      expect(backdrop.exists()).to.equal(true);
-
-      const transition = backdrop.find(Fade);
-      expect(transition.props()).to.have.property('in', true);
+      expect(screen.getByTestId('backdrop')).not.to.equal(null);
     });
 
     it('should render a backdrop component into the portal before the modal content', () => {
@@ -141,14 +146,21 @@ describe('<Modal />', () => {
     });
 
     it('should pass prop to the transition component', () => {
-      const wrapper = mount(
-        <Modal open BackdropComponent={Backdrop} BackdropProps={{ transitionDuration: 200 }}>
+      function TestBackdrop(props) {
+        const { open, transitionDuration } = props;
+        if (!open) {
+          return null;
+        }
+
+        return <div data-testid="backdrop" data-timeout={transitionDuration} />;
+      }
+      render(
+        <Modal open BackdropComponent={TestBackdrop} BackdropProps={{ transitionDuration: 200 }}>
           <div />
         </Modal>,
       );
 
-      const transition = wrapper.find(Fade);
-      expect(transition.props()).to.have.property('timeout', 200);
+      expect(screen.getByTestId('backdrop')).to.have.attribute('data-timeout', '200');
     });
 
     it('should attach a handler to the backdrop that fires onClose', () => {