From e11fef5a72181b43f9a7450195fa607102c00204 Mon Sep 17 00:00:00 2001 From: Alexandre Cordeiro Date: Sat, 21 Oct 2017 20:30:21 -0200 Subject: [PATCH 1/5] Use only public API for EnterLeaveEventPlugin Tests (#11299) --- .../__tests__/EnterLeaveEventPlugin-test.js | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js index c9bb7863a93c..378a35d17c52 100644 --- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js +++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js @@ -9,10 +9,8 @@ 'use strict'; -var EnterLeaveEventPlugin; var React; var ReactDOM; -var ReactDOMComponentTree; var ReactTestUtils; describe('EnterLeaveEventPlugin', () => { @@ -22,9 +20,6 @@ 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('ReactDOMComponentTree'); - EnterLeaveEventPlugin = require('EnterLeaveEventPlugin'); }); it('should set relatedTarget properly in iframe', () => { @@ -43,22 +38,10 @@ describe('EnterLeaveEventPlugin', () => { iframeDocument.body.getElementsByTagName('div')[0], ); var div = ReactDOM.findDOMNode(component); + var doc = div.ownerDocument; + var mouseEnterRelatedTarget = doc.defaultView || doc.parentWindow; - var extracted = EnterLeaveEventPlugin.extractEvents( - 'topMouseOver', - ReactDOMComponentTree.getInstanceFromNode(div), - {target: div}, - div, - ); - expect(extracted.length).toBe(2); - - var leave = extracted[0]; - var enter = extracted[1]; - - expect(leave.target).toBe(iframe.contentWindow); - expect(leave.relatedTarget).toBe(div); - expect(enter.target).toBe(div); - expect(enter.relatedTarget).toBe(iframe.contentWindow); + expect(mouseEnterRelatedTarget).toBe(iframe.contentWindow); }); // Regression test for https://github.com/facebook/react/issues/10906. From 09f45f236414ce2184b29794d496c53dcf27a162 Mon Sep 17 00:00:00 2001 From: Alexandre Cordeiro Date: Sun, 22 Oct 2017 19:22:41 -0200 Subject: [PATCH 2/5] Trigger native event to test EnterLeaveEventPlugin (#11299) --- .../__tests__/EnterLeaveEventPlugin-test.js | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js index 378a35d17c52..569124321357 100644 --- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js +++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js @@ -23,25 +23,32 @@ describe('EnterLeaveEventPlugin', () => { }); it('should set relatedTarget properly in iframe', () => { - var iframe = document.createElement('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 events = []; + const component = ReactDOM.render( +
{ + e.persist(); + events.push(e); + }} + />, iframeDocument.body.getElementsByTagName('div')[0], ); - var div = ReactDOM.findDOMNode(component); - var doc = div.ownerDocument; - var mouseEnterRelatedTarget = doc.defaultView || doc.parentWindow; + ReactTestUtils.SimulateNative.mouseOver(component, { + relatedTarget: iframe.contentWindow, + }); - expect(mouseEnterRelatedTarget).toBe(iframe.contentWindow); + expect(events.length).toBe(1); + expect(events[0].target).toBe(component); + expect(events[0].relatedTarget).toBe(iframe.contentWindow); }); // Regression test for https://github.com/facebook/react/issues/10906. From 20e8a09cc37b6f39719e3f0b3ce02f4891bda751 Mon Sep 17 00:00:00 2001 From: Alexandre Cordeiro Date: Thu, 26 Oct 2017 20:21:11 -0200 Subject: [PATCH 3/5] Rewrite EnterLeaveEventPlugin tests to use dispatchEvent --- .../__tests__/EnterLeaveEventPlugin-test.js | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js index 569124321357..62de06488ba5 100644 --- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js +++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js @@ -11,7 +11,16 @@ var React; var ReactDOM; -var ReactTestUtils; + +const simulateMouseEvent = (node, type, relatedTarget) => { + node.dispatchEvent( + new MouseEvent(type, { + bubbles: true, + cancelable: true, + relatedTarget, + }), + ); +}; describe('EnterLeaveEventPlugin', () => { beforeEach(() => { @@ -19,7 +28,6 @@ describe('EnterLeaveEventPlugin', () => { React = require('react'); ReactDOM = require('react-dom'); - ReactTestUtils = require('react-dom/test-utils'); }); it('should set relatedTarget properly in iframe', () => { @@ -42,9 +50,8 @@ describe('EnterLeaveEventPlugin', () => { />, iframeDocument.body.getElementsByTagName('div')[0], ); - ReactTestUtils.SimulateNative.mouseOver(component, { - relatedTarget: iframe.contentWindow, - }); + + simulateMouseEvent(component, 'mouseover', iframe.contentWindow); expect(events.length).toBe(1); expect(events[0].target).toBe(component); @@ -74,11 +81,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); From c8b0b9c09b3ed3f5cce867caf648513a3cc34607 Mon Sep 17 00:00:00 2001 From: Alexandre Cordeiro Date: Tue, 31 Oct 2017 20:51:17 -0200 Subject: [PATCH 4/5] Update EnterLeaveEventPlugin test to use OnMouseLeave event --- .../__tests__/EnterLeaveEventPlugin-test.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js index 62de06488ba5..5abd6e30a5a1 100644 --- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js +++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js @@ -40,22 +40,24 @@ describe('EnterLeaveEventPlugin', () => { ); iframeDocument.close(); - let events = []; - const component = ReactDOM.render( + let leaveEvents = []; + + const node = ReactDOM.render(
{ + onMouseLeave={e => { e.persist(); - events.push(e); + leaveEvents.push(e); }} />, iframeDocument.body.getElementsByTagName('div')[0], ); - simulateMouseEvent(component, 'mouseover', iframe.contentWindow); + // Test onMouseLeave + simulateMouseEvent(node, 'mouseout', iframe.contentWindow); - expect(events.length).toBe(1); - expect(events[0].target).toBe(component); - expect(events[0].relatedTarget).toBe(iframe.contentWindow); + expect(leaveEvents.length).toBe(1); + expect(leaveEvents[0].target).toBe(node); + expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow); }); // Regression test for https://github.com/facebook/react/issues/10906. From 2aca0d13ca3f01c2f595a1cb4edf988be418e682 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 3 Nov 2017 19:17:09 +0000 Subject: [PATCH 5/5] Add coverage for onMouseEnter too --- .../__tests__/EnterLeaveEventPlugin-test.js | 32 ++++++++++++++++--- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js index 5abd6e30a5a1..bf3cf2709f6c 100644 --- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js +++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js @@ -30,18 +30,16 @@ describe('EnterLeaveEventPlugin', () => { ReactDOM = require('react-dom'); }); - it('should set relatedTarget properly in iframe', () => { + it('should set onMouseLeave relatedTarget properly in iframe', () => { const iframe = document.createElement('iframe'); document.body.appendChild(iframe); const iframeDocument = iframe.contentDocument; - iframeDocument.write( '
', ); iframeDocument.close(); let leaveEvents = []; - const node = ReactDOM.render(
{ @@ -52,14 +50,38 @@ describe('EnterLeaveEventPlugin', () => { iframeDocument.body.getElementsByTagName('div')[0], ); - // Test onMouseLeave 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( + '
', + ); + iframeDocument.close(); + + let enterEvents = []; + const node = ReactDOM.render( +
{ + e.persist(); + enterEvents.push(e); + }} + />, + iframeDocument.body.getElementsByTagName('div')[0], + ); + + 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. it('should find the common parent after updates', () => { let parentEnterCalls = 0;