diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js index d4e5329a915b..bf3cf2709f6c 100644 --- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js +++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js @@ -9,11 +9,18 @@ 'use strict'; -var EnterLeaveEventPlugin; var React; var ReactDOM; -var ReactDOMComponentTree; -var ReactTestUtils; + +const simulateMouseEvent = (node, type, relatedTarget) => { + node.dispatchEvent( + new MouseEvent(type, { + bubbles: true, + cancelable: true, + relatedTarget, + }), + ); +}; describe('EnterLeaveEventPlugin', () => { beforeEach(() => { @@ -21,45 +28,58 @@ describe('EnterLeaveEventPlugin', () => { React = require('react'); ReactDOM = require('react-dom'); - ReactTestUtils = require('react-dom/test-utils'); - // TODO: can we express this test with only public API? - ReactDOMComponentTree = require('../../client/ReactDOMComponentTree') - .default; - EnterLeaveEventPlugin = require('../EnterLeaveEventPlugin').default; }); - it('should set relatedTarget properly in iframe', () => { - var iframe = document.createElement('iframe'); + it('should set onMouseLeave relatedTarget properly in iframe', () => { + const iframe = document.createElement('iframe'); document.body.appendChild(iframe); - - var iframeDocument = iframe.contentDocument; - + const iframeDocument = iframe.contentDocument; iframeDocument.write( '
', ); iframeDocument.close(); - var component = ReactDOM.render( -
, + let leaveEvents = []; + const node = ReactDOM.render( +
{ + e.persist(); + leaveEvents.push(e); + }} + />, iframeDocument.body.getElementsByTagName('div')[0], ); - var div = ReactDOM.findDOMNode(component); - var extracted = EnterLeaveEventPlugin.extractEvents( - 'topMouseOver', - ReactDOMComponentTree.getInstanceFromNode(div), - {target: div}, - div, + simulateMouseEvent(node, 'mouseout', iframe.contentWindow); + expect(leaveEvents.length).toBe(1); + expect(leaveEvents[0].target).toBe(node); + expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow); + }); + + it('should set onMouseEnter relatedTarget properly in iframe', () => { + const iframe = document.createElement('iframe'); + document.body.appendChild(iframe); + const iframeDocument = iframe.contentDocument; + iframeDocument.write( + '
', ); - expect(extracted.length).toBe(2); + iframeDocument.close(); - var leave = extracted[0]; - var enter = extracted[1]; + let enterEvents = []; + const node = ReactDOM.render( +
{ + e.persist(); + enterEvents.push(e); + }} + />, + iframeDocument.body.getElementsByTagName('div')[0], + ); - expect(leave.target).toBe(iframe.contentWindow); - expect(leave.relatedTarget).toBe(div); - expect(enter.target).toBe(div); - expect(enter.relatedTarget).toBe(iframe.contentWindow); + simulateMouseEvent(node, 'mouseover', null); + expect(enterEvents.length).toBe(1); + expect(enterEvents[0].target).toBe(node); + expect(enterEvents[0].relatedTarget).toBe(iframe.contentWindow); }); // Regression test for https://github.com/facebook/react/issues/10906. @@ -85,11 +105,10 @@ describe('EnterLeaveEventPlugin', () => { // The issue only reproduced on insertion during the first update. ReactDOM.render(, div); + document.body.appendChild(div); + // Enter from parent into the child. - ReactTestUtils.simulateNativeEventOnNode('topMouseOut', parent, { - target: parent, - relatedTarget: parent.firstChild, - }); + simulateMouseEvent(parent, 'mouseout', parent.firstChild); // Entering a child should fire on the child, not on the parent. expect(childEnterCalls).toBe(1);