diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index 2c28f0ed1a8d5c..0cd386b2487d61 100644 --- 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 ( { - this.mountNode = ref ? ref.getMountNode() : ref; - }} + ref={this.handlePortalRef} container={container} disablePortal={disablePortal} onRendered={this.handleRendered} >
{ - 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 index b5a7505bf5f3fa..c18b2e594e8574 100644 --- 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(' integration', () => { let mount; @@ -52,27 +43,27 @@ describe(' 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(' integration', () => { describe('closing', () => { let wrapper; - let list; - let backdrop; + let portalLayer; beforeEach(() => { wrapper = mount(); 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(' 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(' 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); }); });