[core] Add strict option to createMount (#15317)

* [test] Test with strict mode where possible * [chore] Use #StrictMode Makes code search easier * [InputBase] Fix onFilled/onEmpty being called too often * [test] Don't memoize mode - Interfers with other tests - also polishes createMount * [test] Fix failing tests styles were still applied. maybe an issue with ReactDOM? * [test] Revert test fix The actual issue is makeStyles * [test] Polish Mode docs * [useMediaQuery] Use proper effect hooks * [useMediaQuery] Use proper act instead of setTimeout * Update packages/material-ui/src/useMediaQuery/useMediaQuery.test.js Co-Authored-By: eps1lon <[email protected]> * no dedup
mui · Apr 15, 2019 · 701a61d · 701a61d
1 parent 33eb4e9
commit 701a61d
Show file tree

Hide file tree

Showing 104 changed files with 378 additions and 283 deletions.
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
@@ -423,7 +423,7 @@ class Slider extends React.Component {
   handleRef = ref => {
     setRef(this.props.innerRef, ref);
 
-    // StrictMode ready
+    // #StrictMode ready
     const nextContainer = ReactDOM.findDOMNode(ref);
     const prevContainer = this.container;
 

diff --git a/packages/material-ui-lab/src/Slider/Slider.test.js b/packages/material-ui-lab/src/Slider/Slider.test.js
@@ -20,7 +20,8 @@ describe('<Slider />', () => {
 
   before(() => {
     classes = getClasses(<Slider value={0} />);
-    mount = createMount();
+    // StrictMode violation: uses ButtonBase
+    mount = createMount({ strict: false });
   });
 
   after(() => {

diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js
@@ -32,7 +32,8 @@ describe('<SpeedDial />', () => {
   }
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     shallow = createShallow({ dive: true });
     classes = getClasses(
       <SpeedDial {...defaultProps} icon={icon}>
@@ -296,7 +297,7 @@ describe('<SpeedDial />', () => {
 
     it('displays the actions on focus gain', () => {
       resetDialToOpen();
-      assert.strictEqual(wrapper.props().open, true);
+      assert.strictEqual(wrapper.find('SpeedDial').props().open, true);
     });
 
     describe('first item selection', () => {

diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js
@@ -17,7 +17,8 @@ describe('<SpeedDialAction />', () => {
   };
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     classes = getClasses(<SpeedDialAction {...defaultProps} />);
   });
 

diff --git a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js
@@ -13,7 +13,7 @@ describe('<SpeedDialIcon />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true });
-    mount = createMount();
+    mount = createMount({ strict: true });
     classes = getClasses(<SpeedDialIcon />);
   });
 

diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js
@@ -17,7 +17,8 @@ describe('<ToggleButton />', () => {
   let classes;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     render = createRender();
     classes = getClasses(<ToggleButton value="classes">Hello World</ToggleButton>);
   });

diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
@@ -15,7 +15,8 @@ describe('<ToggleButtonGroup />', () => {
   let classes;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     classes = getClasses(
       <ToggleButtonGroup>
         <ToggleButton value="hello" />

diff --git a/packages/material-ui-styles/src/StylesProvider/StylesProvider.test.js b/packages/material-ui-styles/src/StylesProvider/StylesProvider.test.js
@@ -21,7 +21,7 @@ describe('StylesProvider', () => {
   let generateClassName;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: true });
   });
 
   beforeEach(() => {

diff --git a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js
@@ -9,59 +9,65 @@ describe('ThemeProvider', () => {
   let mount;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: true });
   });
 
   after(() => {
     mount.cleanUp();
   });
 
   it('should provide the theme', () => {
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
 
-      return <span>{theme.foo}</span>;
+      return <span ref={ref}>{theme.foo}</span>;
     }
 
-    const wrapper = mount(
+    mount(
       <ThemeProvider theme={{ foo: 'foo' }}>
         <Test />
       </ThemeProvider>,
     );
-    assert.strictEqual(wrapper.text(), 'foo');
+    assert.strictEqual(text(), 'foo');
   });
 
   it('should merge the themes', () => {
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
 
       return (
-        <span>
+        <span ref={ref}>
           {theme.foo}
           {theme.bar}
         </span>
       );
     }
 
-    const wrapper = mount(
+    mount(
       <ThemeProvider theme={{ bar: 'bar' }}>
         <ThemeProvider theme={{ foo: 'foo' }}>
           <Test />
         </ThemeProvider>
       </ThemeProvider>,
     );
-    assert.strictEqual(wrapper.text(), 'foobar');
+    assert.strictEqual(text(), 'foobar');
   });
 
   it('should memoize the merged output', () => {
     const themes = [];
 
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
       themes.push(theme);
 
       return (
-        <span>
+        <span ref={ref}>
           {theme.foo}
           {theme.bar}
         </span>
@@ -83,9 +89,9 @@ describe('ThemeProvider', () => {
     }
 
     const wrapper = mount(<Container />);
-    assert.strictEqual(wrapper.text(), 'foobar');
+    assert.strictEqual(text(), 'foobar');
     wrapper.setProps({});
-    assert.strictEqual(wrapper.text(), 'foobar');
+    assert.strictEqual(text(), 'foobar');
     assert.strictEqual(themes.length, 1);
   });
 
@@ -104,7 +110,7 @@ describe('ThemeProvider', () => {
           <div />
         </ThemeProvider>,
       );
-      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.strictEqual(consoleErrorMock.callCount(), 2); // twice in strict mode
       assert.include(consoleErrorMock.args()[0][0], 'However, no outer theme is present.');
     });
 
@@ -117,7 +123,7 @@ describe('ThemeProvider', () => {
           ,
         </ThemeProvider>,
       );
-      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.strictEqual(consoleErrorMock.callCount(), 2);
       assert.include(
         consoleErrorMock.args()[0][0],
         'you should return an object from your theme function',

diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js
@@ -39,7 +39,7 @@ describe('makeStyles', () => {
   let generateClassName;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: undefined });
   });
 
   beforeEach(() => {

diff --git a/packages/material-ui-styles/src/styled/styled.test.js b/packages/material-ui-styles/src/styled/styled.test.js
@@ -13,7 +13,8 @@ describe('styled', () => {
   let StyledButton;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses makeStyles
+    mount = createMount({ strict: false });
     StyledButton = styled('button')({
       background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
       borderRadius: 3,

diff --git a/packages/material-ui-styles/src/useTheme/useTheme.test.js b/packages/material-ui-styles/src/useTheme/useTheme.test.js
@@ -8,25 +8,27 @@ describe('useTheme', () => {
   let mount;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: true });
   });
 
   after(() => {
     mount.cleanUp();
   });
 
   it('should use the theme', () => {
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test() {
       const theme = useTheme();
 
-      return <span>{theme.foo}</span>;
+      return <span ref={ref}>{theme.foo}</span>;
     }
 
-    const wrapper = mount(
+    mount(
       <ThemeProvider theme={{ foo: 'foo' }}>
         <Test />
       </ThemeProvider>,
     );
-    assert.strictEqual(wrapper.text(), 'foo');
+    assert.strictEqual(text(), 'foo');
   });
 });
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.test.js b/packages/material-ui-styles/src/withStyles/withStyles.test.js
@@ -17,7 +17,8 @@ describe('withStyles', () => {
   let generateClassName;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses makeStyles
+    mount = createMount({ strict: false });
   });
 
   beforeEach(() => {

diff --git a/packages/material-ui-styles/src/withTheme/withTheme.test.js b/packages/material-ui-styles/src/withTheme/withTheme.test.js
@@ -12,16 +12,18 @@ describe('withTheme', () => {
   let mount;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: true });
   });
 
   after(() => {
     mount.cleanUp();
   });
 
   it('should inject the theme', () => {
+    const ref = React.createRef();
+    const text = () => ref.current.textContent;
     function Test(props) {
-      return <span>{props.theme.foo}</span>;
+      return <span ref={ref}>{props.theme.foo}</span>;
     }
 
     Test.propTypes = {
@@ -30,12 +32,12 @@ describe('withTheme', () => {
 
     const TestWithTheme = withTheme(Test);
 
-    const wrapper = mount(
+    mount(
       <ThemeProvider theme={{ foo: 'foo' }}>
         <TestWithTheme />
       </ThemeProvider>,
     );
-    assert.strictEqual(wrapper.text(), 'foo');
+    assert.strictEqual(text(), 'foo');
   });
 
   it('hoist statics', () => {

diff --git a/packages/material-ui/src/AppBar/AppBar.test.js b/packages/material-ui/src/AppBar/AppBar.test.js
@@ -15,7 +15,7 @@ describe('<AppBar />', () => {
   let classes;
 
   before(() => {
-    mount = createMount();
+    mount = createMount({ strict: true });
     shallow = createShallow({ dive: true });
     classes = getClasses(<AppBar>Hello World</AppBar>);
   });

diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js
@@ -15,7 +15,8 @@ describe('<Backdrop />', () => {
   let classes;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses Fade
+    mount = createMount({ strict: false });
     shallow = createShallow({ dive: true });
     classes = getClasses(<Backdrop open />);
   });

diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.test.js
@@ -24,7 +24,8 @@ describe('<BottomNavigation />', () => {
         <BottomNavigationAction icon={icon} />
       </BottomNavigation>,
     );
-    mount = createMount();
+    // StrictModeViolation: uses BottomNavigationAction
+    mount = createMount({ strict: false });
   });
 
   after(() => {

diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js
@@ -17,7 +17,8 @@ describe('<BottomNavigationAction />', () => {
   const icon = <Icon>restore</Icon>;
 
   before(() => {
-    mount = createMount();
+    // StrictModeViolation: uses ButtonBase
+    mount = createMount({ strict: false });
     classes = getClasses(<BottomNavigationAction />);
   });
 

diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.test.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.test.js
@@ -11,7 +11,7 @@ describe('<BreadcrumbCollapsed />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true });
-    mount = createMount();
+    mount = createMount({ strict: true });
     classes = getClasses(<BreadcrumbCollapsed />);
   });
 

diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
@@ -22,7 +22,8 @@ describe('<ButtonBase />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true, disableLifecycleMethods: true });
-    mount = createMount();
+    // StrictModeViolation: uses TouchRipple
+    mount = createMount({ strict: false });
     classes = getClasses(<ButtonBase />);
   });
 
@@ -43,7 +44,7 @@ describe('<ButtonBase />', () => {
       const wrapper = mount(<ButtonBase type="submit">Hello</ButtonBase>);
       const button = wrapper.find('button');
       assert.strictEqual(button.exists(), true);
-      assert.strictEqual(wrapper.props().type, 'submit');
+      assert.strictEqual(button.props().type, 'submit');
     });
 
     it('should change the button component and add accessibility requirements', () => {
@@ -679,9 +680,10 @@ describe('<ButtonBase />', () => {
       wrapper.setProps({
         children: 'bar',
       });
+
       assert.strictEqual(
         rerender.updates.filter(update => update.displayName !== 'NoSsr').length,
-        1,
+        2,
       );
     });
   });

diff --git a/packages/material-ui/src/ButtonBase/Ripple.test.js b/packages/material-ui/src/ButtonBase/Ripple.test.js
@@ -13,7 +13,7 @@ describe('<Ripple />', () => {
   before(() => {
     shallow = createShallow();
     classes = getClasses(<TouchRipple />);
-    mount = createMount();
+    mount = createMount({ strict: undefined });
   });
 
   after(() => {

diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.test.js b/packages/material-ui/src/ButtonBase/TouchRipple.test.js
@@ -21,7 +21,7 @@ describe('<TouchRipple />', () => {
 
   before(() => {
     shallow = createShallow({ dive: true });
-    mount = createMount();
+    mount = createMount({ strict: undefined });
     classes = getClasses(<TouchRipple />);
   });
 

diff --git a/packages/material-ui/src/Checkbox/Checkbox.test.js b/packages/material-ui/src/Checkbox/Checkbox.test.js
@@ -10,7 +10,8 @@ describe('<Checkbox />', () => {
 
   before(() => {
     classes = getClasses(<Checkbox />);
-    mount = createMount();
+    // StrictModeViolation: uses IconButton
+    mount = createMount({ strict: false });
   });
 
   after(() => {