[core] Keep fixing failing tests for react@16

package.json

@@ -113,7 +113,7 @@
     "clean-css": "^4.1.9",
     "cross-env": "^5.1.0",
     "doctrine": "^2.0.0",
-    "enzyme": "^2.9.0",
+    "enzyme": "^3.0.0",
     "enzyme-adapter-react-15": "^1.0.2",
     "eslint": "^4.9.0",
     "eslint-config-airbnb": "^16.1.0",

src/ButtonBase/ButtonBase.spec.js

@@ -483,7 +483,7 @@ describe('<ButtonBase />', () => {
       it('should work', () => {
         wrapper = mount(<ButtonBaseNaked classes={{}}>Hello</ButtonBaseNaked>);
         const onClickSpy = spy();
-        wrapper.setProps({ onClick: onClickSpy, component: 'woofButtonBase' });
+        wrapper.setProps({ onClick: onClickSpy, component: 'div' });
 
         const eventTargetMock = 'woofButtonBase';
         event = {

src/ButtonBase/Ripple.spec.js

@@ -73,6 +73,7 @@ describe('<Ripple />', () => {
     it('should start the ripple', () => {
       assert.strictEqual(wrapper.state().rippleVisible, false, 'should not be visible');
       wrapper.setProps({ in: true });
+      wrapper.update();
       assert.strictEqual(wrapper.state().rippleVisible, true, 'should be visible');
       const spanWrapper = wrapper.find('span').first();
       assert.strictEqual(
@@ -85,6 +86,7 @@ describe('<Ripple />', () => {
     it('should stop the ripple', () => {
       wrapper.setProps({ in: true });
       wrapper.setProps({ in: false });
+      wrapper.update();
       assert.strictEqual(wrapper.state().rippleLeaving, true, 'should be leaving');
       const spanWrapper = wrapper.find('span').first();
       assert.strictEqual(
@@ -128,6 +130,7 @@ describe('<Ripple />', () => {
     it('should start the ripple', () => {
       assert.strictEqual(wrapper.state().rippleVisible, false, 'should not be visible');
       wrapper.setProps({ in: true });
+      wrapper.update();
       assert.strictEqual(wrapper.state().rippleVisible, true, 'should be visible');
       const spanWrapper = wrapper.find('span').first();
       assert.strictEqual(
@@ -144,6 +147,7 @@ describe('<Ripple />', () => {
 
     it('should stop the ripple', () => {
       wrapper.setProps({ in: false });
+      wrapper.update();
       assert.strictEqual(wrapper.state().rippleLeaving, true, 'should be leaving');
       const spanWrapper = wrapper.find('span').first();
       assert.strictEqual(

src/ButtonBase/TouchRipple.js

@@ -141,7 +141,11 @@ class TouchRipple extends React.Component<ProvidedProps & Props, State> {
   };
 
   start = (event = {}, options = {}, cb) => {
-    const { pulsate = false, center = this.props.center || options.pulsate } = options;
+    const {
+      pulsate = false,
+      center = this.props.center || options.pulsate,
+      fakeElement = false, // For test purposes
+    } = options;
 
     if (event.type === 'mousedown' && this.ignoringMouseDown) {
       this.ignoringMouseDown = false;
@@ -152,7 +156,7 @@ class TouchRipple extends React.Component<ProvidedProps & Props, State> {
       this.ignoringMouseDown = true;
     }
 
-    const element = ReactDOM.findDOMNode(this);
+    const element = fakeElement ? null : ReactDOM.findDOMNode(this);
     const rect = element
       ? // $FlowFixMe
         element.getBoundingClientRect()

src/ButtonBase/TouchRipple.spec.js

@@ -3,18 +3,26 @@
 import React from 'react';
 import { useFakeTimers } from 'sinon';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { createShallow, createMount, getClasses, unwrap } from '../test-utils';
 import TouchRipple, { DELAY_RIPPLE } from './TouchRipple';
 
+const TouchRippleNaked = unwrap(TouchRipple);
+
 describe('<TouchRipple />', () => {
   let shallow;
+  let mount;
   let classes;
 
   before(() => {
     shallow = createShallow({ dive: true });
+    mount = createMount();
     classes = getClasses(<TouchRipple />);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('should render a <ReactTransitionGroup> component', () => {
     const wrapper = shallow(<TouchRipple />);
     assert.strictEqual(wrapper.name(), 'TransitionGroup');
@@ -31,14 +39,19 @@ describe('<TouchRipple />', () => {
     it('should should compute the right ripple dimensions', () => {
       const wrapper = shallow(<TouchRipple center />);
       const instance = wrapper.instance();
-      instance.start();
+      instance.start(
+        {},
+        {
+          fakeElement: true,
+        },
+      );
       wrapper.update();
       assert.strictEqual(wrapper.childAt(0).props().rippleSize, 1, 'should be odd');
     });
   });
 
   it('should create individual ripples', () => {
-    const wrapper = shallow(<TouchRipple />);
+    const wrapper = mount(<TouchRippleNaked classes={{}} />);
     const instance = wrapper.instance();
 
     assert.strictEqual(wrapper.state().ripples.length, 0, 'should start with no ripples');
@@ -66,7 +79,13 @@ describe('<TouchRipple />', () => {
     it('should create a ripple', () => {
       const wrapper = shallow(<TouchRipple />);
       const instance = wrapper.instance();
-      instance.pulsate();
+      instance.start(
+        {},
+        {
+          pulsate: true,
+          fakeElement: true,
+        },
+      );
       assert.strictEqual(wrapper.state().ripples.length, 1);
     });
 
@@ -82,7 +101,7 @@ describe('<TouchRipple />', () => {
       const wrapper = shallow(<TouchRipple />);
       const instance = wrapper.instance();
       assert.strictEqual(instance.ignoringMouseDown, false);
-      instance.start({ type: 'touchstart' });
+      instance.start({ type: 'touchstart' }, { fakeElement: true });
       assert.strictEqual(wrapper.state().ripples.length, 1);
       assert.strictEqual(instance.ignoringMouseDown, true);
     });
@@ -92,7 +111,7 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
       const clientX = 1;
       const clientY = 1;
-      instance.start({ clientX, clientY });
+      instance.start({ clientX, clientY }, { fakeElement: true });
       assert.strictEqual(wrapper.state().ripples.length, 1);
       assert.strictEqual(wrapper.state().ripples[0].props.rippleX, clientX);
       assert.strictEqual(wrapper.state().ripples[0].props.rippleY, clientY);
@@ -115,7 +134,7 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
 
       assert.strictEqual(wrapper.state().ripples.length, 0);
-      instance.start({ touches: [], clientX: 0, clientY: 0 });
+      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true });
       assert.strictEqual(wrapper.state().ripples.length, 0);
 
       clock.tick(DELAY_RIPPLE);
@@ -131,7 +150,7 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
 
       assert.strictEqual(wrapper.state().ripples.length, 0);
-      instance.start({ touches: [], clientX: 0, clientY: 0 });
+      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true });
       assert.strictEqual(wrapper.state().ripples.length, 0);
 
       clock.tick(DELAY_RIPPLE / 2);
@@ -148,7 +167,7 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
 
       assert.strictEqual(wrapper.state().ripples.length, 0);
-      instance.start({ touches: [], clientX: 0, clientY: 0 });
+      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true });
       assert.strictEqual(wrapper.state().ripples.length, 0);
 
       clock.tick(DELAY_RIPPLE / 2);

src/Form/FormHelperText.spec.js

@@ -34,7 +34,7 @@ describe('<FormHelperText />', () => {
 
     function setFormControlContext(muiFormControlContext) {
       muiFormControl = muiFormControlContext;
-      wrapper.setContext({ ...wrapper.context(), muiFormControl });
+      wrapper.setContext({ muiFormControl });
     }
 
     beforeEach(() => {

src/Form/FormLabel.spec.js

@@ -56,7 +56,7 @@ describe('<FormLabel />', () => {
 
     function setFormControlContext(muiFormControlContext) {
       muiFormControl = muiFormControlContext;
-      wrapper.setContext({ ...wrapper.context(), muiFormControl });
+      wrapper.setContext({ muiFormControl });
     }
 
     beforeEach(() => {

src/Input/InputLabel.spec.js

@@ -49,7 +49,7 @@ describe('<InputLabel />', () => {
 
     function setFormControlContext(muiFormControlContext) {
       muiFormControl = muiFormControlContext;
-      wrapper.setContext({ ...wrapper.context(), muiFormControl });
+      wrapper.setContext({ muiFormControl });
     }
 
     beforeEach(() => {

src/Select/SelectInput.spec.js

@@ -3,7 +3,6 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { ReactWrapper } from 'enzyme';
 import keycode from 'keycode';
 import { createShallow, createMount } from '../test-utils';
 import Menu, { MenuItem } from '../Menu';
@@ -122,10 +121,8 @@ describe('<SelectInput />', () => {
       it('should call onChange when clicking an item', () => {
         wrapper.find(`.${props.classes.select}`).simulate('click');
         assert.strictEqual(wrapper.state().open, true);
-        const portal = wrapper.find('Modal').node.mountNode.firstChild;
-        const portalWrapper = new ReactWrapper(portal, portal);
-        const menuItem = portalWrapper.find(MenuItem);
-        menuItem.at(1).simulate('click');
+        const portalLayer = wrapper.find('Portal').instance().layer;
+        portalLayer.querySelectorAll('li')[1].click();
         assert.strictEqual(wrapper.state().open, false);
         assert.strictEqual(handleChange.callCount, 1);
         assert.strictEqual(handleChange.args[0][0].target.value, 20);
@@ -157,11 +154,9 @@ describe('<SelectInput />', () => {
         wrapper.find(`.${props.classes.select}`).simulate('click');
         assert.strictEqual(wrapper.state().open, true);
 
-        const portal = wrapper.find('Modal').node.mountNode.firstChild;
-        const portalWrapper = new ReactWrapper(portal, portal);
-        const backdrop = portalWrapper.find('Backdrop');
-
-        backdrop.simulate('click');
+        const portalLayer = wrapper.find('Portal').instance().layer;
+        const backdrop = portalLayer.querySelector('[data-mui-test="Backdrop"]');
+        backdrop.click();
         assert.strictEqual(wrapper.state().open, false);
       });
     });
@@ -262,17 +257,15 @@ describe('<SelectInput />', () => {
       it('should call onChange when clicking an item', () => {
         wrapper.find(`.${props.classes.select}`).simulate('click');
         assert.strictEqual(wrapper.state().open, true);
-        const portal = wrapper.find('Modal').node.mountNode.firstChild;
-        const portalWrapper = new ReactWrapper(portal, portal);
-        const menuItem = portalWrapper.find(MenuItem);
+        const portalLayer = wrapper.find('Portal').instance().layer;
 
-        menuItem.at(1).simulate('click');
+        portalLayer.querySelectorAll('li')[1].click();
         assert.strictEqual(wrapper.state().open, true);
         assert.strictEqual(handleChange.callCount, 1);
         assert.deepEqual(handleChange.args[0][0].target.value, [30]);
         wrapper.setProps({ value: [30] });
 
-        menuItem.at(0).simulate('click');
+        portalLayer.querySelectorAll('li')[0].click();
         assert.strictEqual(wrapper.state().open, true);
         assert.strictEqual(handleChange.callCount, 2);
         assert.deepEqual(handleChange.args[1][0].target.value, [30, 10]);

src/internal/Modal.spec.js

@@ -216,7 +216,7 @@ describe('<Modal />', () => {
 
       it('should render the content into the portal', () => {
         wrapper.setProps({ show: true });
-        const portalLayer = wrapper.find('Portal').getNode().layer;
+        const portalLayer = wrapper.find('Portal').instance().layer;
         const container = document.getElementById('container');
         const heading = document.getElementById('heading');
 

src/internal/Portal.spec.js

@@ -6,7 +6,7 @@ import { assert } from 'chai';
 import { createMount, createRender } from '../test-utils';
 import Portal from './Portal';
 
-const versions = ['latets', 'next'];
+const versions = ['latest', 'next'];
 
 describe('<Portal />', () => {
   let mount;

src/internal/SwitchBase.spec.js

@@ -17,7 +17,7 @@ function assertIsChecked(wrapper) {
   );
 
   const input = wrapper.find('input');
-  assert.strictEqual(input.getNode().checked, true, 'the DOM node should be checked');
+  assert.strictEqual(input.instance().checked, true, 'the DOM node should be checked');
 
   const label = iconButton.childAt(0);
   const icon = label.childAt(0);
@@ -34,7 +34,7 @@ function assertIsNotChecked(wrapper) {
   );
 
   const input = wrapper.find('input');
-  assert.strictEqual(input.getNode().checked, false, 'the DOM node should not be checked');
+  assert.strictEqual(input.instance().checked, false, 'the DOM node should not be checked');
 
   const label = iconButton.childAt(0);
   const icon = label.childAt(0);
@@ -208,20 +208,22 @@ describe('<SwitchBase />', () => {
     it('should check the checkbox', () => {
       wrapper
         .find('input')
-        .getNode()
+        .instance()
         .click();
+      wrapper.update();
       assertIsChecked(wrapper);
     });
 
     it('should uncheck the checkbox', () => {
       wrapper
         .find('input')
-        .getNode()
+        .instance()
         .click();
       wrapper
         .find('input')
-        .getNode()
+        .instance()
         .click();
+      wrapper.update();
       assertIsNotChecked(wrapper);
     });
   });

src/styles/withStyles.spec.js

@@ -13,7 +13,12 @@ import createGenerateClassName from './createGenerateClassName';
 import { createShallow, createMount, getClasses } from '../test-utils';
 import consoleErrorMock from '../../test/utils/consoleErrorMock';
 
-const Empty = () => <div />;
+// eslint-disable-next-line react/prefer-stateless-function
+class Empty extends React.Component<{}> {
+  render() {
+    return <div />;
+  }
+}
 
 describe('withStyles', () => {
   let shallow;

src/test-utils/until.js

@@ -1,17 +1,13 @@
 // @flow weak
 
 function shallowRecursively(wrapper, selector, { context, ...other }) {
-  // enzyme@3
-  // if (wrapper.isEmptyRender() || typeof wrapper.getElement().type === 'string') {
-  if (wrapper.isEmptyRender() || typeof wrapper.node.type === 'string') {
+  if (wrapper.isEmptyRender() || typeof wrapper.getElement().type === 'string') {
     return wrapper;
   }
 
   let newContext = context;
 
-  // enzyme@3
-  // const instance = wrapper.root().instance();
-  const instance = wrapper.root.instance();
+  const instance = wrapper.root().instance();
   // The instance can be null with a stateless functional component and react >= 16.
   if (instance && instance.getChildContext) {
     newContext = {

src/utils/withWidth.js

@@ -126,14 +126,12 @@ const withWidth = (
         ...other,
       };
 
-      /**
-       * When rendering the component on the server,
-       * we have no idea about the client browser screen width.
-       * In order to prevent blinks and help the reconciliation of the React tree
-       * we are not rendering the child component.
-       *
-       * An alternative is to use the `initialWidth` property.
-       */
+      // When rendering the component on the server,
+      // we have no idea about the client browser screen width.
+      // In order to prevent blinks and help the reconciliation of the React tree
+      // we are not rendering the child component.
+      //
+      // An alternative is to use the `initialWidth` property.
       if (props.width === undefined) {
         return null;
       }