[Modal] Fix modalRef is null (#13351)

* fixes #13341 * prettier and lint * Circle-CI green
mui · Oct 23, 2018 · 6ddd5ed · 6ddd5ed
1 parent 1023e96
commit 6ddd5ed
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 29 deletions.
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -188,6 +188,14 @@ class Modal extends React.Component {
     }
   };
 
+  handlePortalRef = ref => {
+    this.mountNode = ref ? ref.getMountNode() : ref;
+  };
+
+  handleModalRef = ref => {
+    this.modalRef = ref;
+  };
+
   autoFocus() {
     // We might render an empty child.
     if (this.props.disableAutoFocus || !this.dialogRef) {
@@ -281,18 +289,14 @@ class Modal extends React.Component {
 
     return (
       <Portal
-        ref={ref => {
-          this.mountNode = ref ? ref.getMountNode() : ref;
-        }}
+        ref={this.handlePortalRef}
         container={container}
         disablePortal={disablePortal}
         onRendered={this.handleRendered}
       >
         <div
           data-mui-test="Modal"
-          ref={ref => {
-            this.modalRef = ref;
-          }}
+          ref={this.handleModalRef}
           className={classNames(classes.root, className, {
             [classes.hidden]: exited,
           })}

diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js
@@ -1,21 +1,12 @@
 import React from 'react';
 import keycode from 'keycode';
 import { assert } from 'chai';
-import { ReactWrapper } from 'enzyme';
 import TestUtils from 'react-dom/test-utils';
 import { createMount } from 'packages/material-ui/src/test-utils';
 import Popover from 'packages/material-ui/src/Popover';
 import Portal from 'packages/material-ui/src/Portal';
 import SimpleMenu from './fixtures/menus/SimpleMenu';
 
-function simulateEvent(node, event, mock) {
-  const eventFn = TestUtils.Simulate[event];
-  if (!eventFn) {
-    throw new TypeError(`simulateEvent: event '${event}' does not exist`);
-  }
-  eventFn(node, mock);
-}
-
 describe('<Menu> integration', () => {
   let mount;
 
@@ -52,27 +43,27 @@ describe('<Menu> integration', () => {
     });
 
     it('should change focus to the 2nd item when down arrow is pressed', () => {
-      simulateEvent(portalLayer.querySelector('ul'), 'keyDown', { which: keycode('down') });
+      TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('down') });
       assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[1]);
     });
 
     it('should change focus to the 3rd item when down arrow is pressed', () => {
-      simulateEvent(portalLayer.querySelector('ul'), 'keyDown', { which: keycode('down') });
+      TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('down') });
       assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[2]);
     });
 
     it('should keep focus on the 3rd item (last item) when down arrow is pressed', () => {
-      simulateEvent(portalLayer.querySelector('ul'), 'keyDown', { which: keycode('down') });
+      TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('down') });
       assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[2]);
     });
 
     it('should keep focus on the last item when a key with no associated action is pressed', () => {
-      simulateEvent(portalLayer.querySelector('ul'), 'keyDown', { which: keycode('right') });
+      TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('right') });
       assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[2]);
     });
 
     it('should change focus to the 2nd item when up arrow is pressed', () => {
-      simulateEvent(portalLayer.querySelector('ul'), 'keyDown', { which: keycode('up') });
+      TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('up') });
       assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[1]);
     });
 
@@ -130,17 +121,15 @@ describe('<Menu> integration', () => {
 
   describe('closing', () => {
     let wrapper;
-    let list;
-    let backdrop;
+    let portalLayer;
 
     beforeEach(() => {
       wrapper = mount(<SimpleMenu transitionDuration={0} />);
       wrapper.setState({ open: true });
-      const portal = wrapper.find(Portal).props().children;
-      const portalWrapper = new ReactWrapper(portal);
-      list = portalWrapper.find('List');
-      backdrop = portalWrapper.find('Backdrop');
-      assert.strictEqual(backdrop.length, 1);
+      portalLayer = wrapper
+        .find(Portal)
+        .instance()
+        .getMountNode();
     });
 
     it('should close the menu with tab', done => {
@@ -151,7 +140,10 @@ describe('<Menu> integration', () => {
         },
       });
       assert.strictEqual(wrapper.state().open, true);
-      list.simulate('keyDown', { which: keycode('tab') });
+      const list = portalLayer.querySelector('ul');
+      TestUtils.Simulate.keyDown(list, {
+        which: keycode('tab'),
+      });
       assert.strictEqual(wrapper.state().open, false);
     });
 
@@ -163,7 +155,9 @@ describe('<Menu> integration', () => {
         },
       });
       assert.strictEqual(wrapper.state().open, true);
-      backdrop.simulate('click');
+      const backdrop = portalLayer.querySelector('[data-mui-test="Backdrop"]');
+      assert.strictEqual(typeof backdrop !== 'undefined', true);
+      backdrop.click();
       assert.strictEqual(wrapper.state().open, false);
     });
   });