[Modal] Refactor tests to remove internal accesses

docs/src/pages/components/modal/SimpleModal.js

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SimpleModal() {
+export default function SimpleModal() {
   const [open, setOpen] = React.useState(false);
   // getModalStyle is not a pure function, we roll the style only on the first render
   const [modalStyle] = React.useState(getModalStyle);
@@ -67,5 +67,3 @@ function SimpleModal() {
     </div>
   );
 }
-
-export default SimpleModal;

docs/src/pages/components/modal/SimpleModal.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Modal from '@material-ui/core/Modal';
+import Button from '@material-ui/core/Button';
+
+function rand() {
+  return Math.round(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+  const top = 50 + rand();
+  const left = 50 + rand();
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`,
+  };
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    paper: {
+      position: 'absolute',
+      width: 400,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[5],
+      padding: theme.spacing(4),
+      outline: 'none',
+    },
+  }),
+);
+
+export default function SimpleModal() {
+  const [open, setOpen] = React.useState(false);
+  // getModalStyle is not a pure function, we roll the style only on the first render
+  const [modalStyle] = React.useState(getModalStyle);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Typography gutterBottom>Click to get the full Modal experience!</Typography>
+      <Button onClick={handleOpen}>Open Modal</Button>
+      <Modal
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+        open={open}
+        onClose={handleClose}
+      >
+        <div style={modalStyle} className={classes.paper}>
+          <Typography variant="h6" id="modal-title">
+            Text in a modal
+          </Typography>
+          <Typography variant="subtitle1" id="simple-modal-description">
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+          <SimpleModal />
+        </div>
+      </Modal>
+    </div>
+  );
+}

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

@@ -110,7 +110,7 @@ describe('<Drawer />', () => {
         </Drawer>,
       );
 
-      const modal = wrapper.find('Modal');
+      const modal = wrapper.find(Modal);
 
       assert.strictEqual(modal.hasClass('woofDrawer'), true);
     });
@@ -133,7 +133,7 @@ describe('<Drawer />', () => {
         </Drawer>,
       );
 
-      const modal = wrapper.find('Modal');
+      const modal = wrapper.find(Modal);
 
       assert.strictEqual(modal.props().open, false);
     });
@@ -147,7 +147,7 @@ describe('<Drawer />', () => {
 
       it('should start closed', () => {
         const wrapper = mount(drawerElement);
-        assert.strictEqual(wrapper.find('Modal').props().open, false);
+        assert.strictEqual(wrapper.find(Modal).props().open, false);
       });
 
       it('should open and close', () => {

packages/material-ui/src/Fade/Fade.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { duration } from '../styles/transitions';
-import withTheme from '../styles/withTheme';
+import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { useForkRef } from '../utils/reactHelpers';
 
@@ -31,10 +31,10 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     onEnter,
     onExit,
     style,
-    theme,
     timeout = defaultTimeout,
     ...other
   } = props;
+  const theme = useTheme();
   const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
@@ -116,10 +116,6 @@ Fade.propTypes = {
    * @ignore
    */
   style: PropTypes.object,
-  /**
-   * @ignore
-   */
-  theme: PropTypes.object.isRequired,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -130,4 +126,4 @@ Fade.propTypes = {
   ]),
 };
 
-export default withTheme(Fade);
+export default Fade;

packages/material-ui/src/Grow/Grow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
-import withTheme from '../styles/withTheme';
+import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { useForkRef } from '../utils/reactHelpers';
 
@@ -27,10 +27,11 @@ const styles = {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Grow = React.forwardRef(function Grow(props, ref) {
-  const { children, in: inProp, onEnter, onExit, style, theme, timeout = 'auto', ...other } = props;
+  const { children, in: inProp, onEnter, onExit, style, timeout = 'auto', ...other } = props;
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const handleRef = useForkRef(children.ref, ref);
+  const theme = useTheme();
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
@@ -161,10 +162,6 @@ Grow.propTypes = {
    * @ignore
    */
   style: PropTypes.object,
-  /**
-   * @ignore
-   */
-  theme: PropTypes.object.isRequired,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -180,4 +177,4 @@ Grow.propTypes = {
 
 Grow.muiSupportAuto = true;
 
-export default withTheme(Grow);
+export default Grow;

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { assert } from 'chai';
-import { spy, stub, useFakeTimers } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import { createMount } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import Grow from './Grow';
 import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import { Transition } from 'react-transition-group';
+import { useForkRef } from '../utils/reactHelpers';
 
 describe('<Grow />', () => {
   let mount;
@@ -174,42 +176,64 @@ describe('<Grow />', () => {
 
       it('should delay based on height when timeout is auto', () => {
         const handleEntered = spy();
-
         const theme = createMuiTheme({
           transitions: {
             getAutoHeightDuration: n => n,
           },
         });
+        const autoTransitionDuration = 10;
+        const FakeDiv = React.forwardRef(function FakeDiv(props, ref) {
+          const divRef = React.useRef(null);
+          const handleRef = useForkRef(ref, divRef);
+
+          React.useEffect(() => {
+            // For jsdom
+            Object.defineProperty(divRef.current, 'clientHeight', {
+              value: autoTransitionDuration,
+            });
+          });
+
+          return (
+            <div
+              ref={handleRef}
+              style={{
+                height: autoTransitionDuration,
+              }}
+              {...props}
+            />
+          );
+        });
 
-        const wrapper = mount(
-          <Grow timeout="auto" onEntered={handleEntered} theme={theme}>
-            <div />
-          </Grow>,
-        );
-
-        stub(wrapper.find('div').instance(), 'clientHeight').get(() => 10);
+        function MyTest(props) {
+          return (
+            <ThemeProvider theme={theme}>
+              <Grow timeout="auto" onEntered={handleEntered} {...props}>
+                <FakeDiv />
+              </Grow>
+            </ThemeProvider>
+          );
+        }
 
+        const wrapper = mount(<MyTest />);
         wrapper.setProps({
           in: true,
         });
-
-        const autoTransitionDuration = 10;
         assert.strictEqual(handleEntered.callCount, 0);
         clock.tick(0);
         assert.strictEqual(handleEntered.callCount, 0);
         clock.tick(autoTransitionDuration);
         assert.strictEqual(handleEntered.callCount, 1);
 
-        const next2 = spy();
+        const handleEntered2 = spy();
         mount(
-          <Grow in timeout="auto" onEntered={next2}>
+          <Grow in timeout="auto" onEntered={handleEntered2}>
             <div />
           </Grow>,
         );
 
-        assert.strictEqual(next2.callCount, 0);
+        assert.strictEqual(handleEntered2.callCount, 0);
         clock.tick(0);
-        assert.strictEqual(next2.callCount, 1);
+        assert.strictEqual(handleEntered2.callCount, 1);
       });
 
       it('should use timeout as delay when timeout is number', () => {