Use only public API for EnterLeaveEventPlugin Tests (#11316)
* Use only public API for EnterLeaveEventPlugin Tests (#11299) * Trigger native event to test EnterLeaveEventPlugin (#11299) * Rewrite EnterLeaveEventPlugin tests to use dispatchEvent * Update EnterLeaveEventPlugin test to use OnMouseLeave event * Add coverage for onMouseEnter too
Alex Cordeiro committed
Nov 3, 2017 at 17:18 UTC
43a1e0d084ce4491e7c61bb2b6ae9c768a1f4fad
1 file changed
+51
-32
packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
+51
-32
@@ -9,11 +9,18 @@
9
10
'use strict';
11
12
-var EnterLeaveEventPlugin;
12
var React;
13
var ReactDOM;
15
-var ReactDOMComponentTree;
16
-var ReactTestUtils;
14
+
15
+const simulateMouseEvent = (node, type, relatedTarget) => {
16
+ node.dispatchEvent(
17
+ new MouseEvent(type, {
18
+ bubbles: true,
19
+ cancelable: true,
20
+ relatedTarget,
21
+ }),
22
+ );
23
+};
24
25
describe('EnterLeaveEventPlugin', () => {
26
beforeEach(() => {
@@ -21,45 +28,58 @@ describe('EnterLeaveEventPlugin', () => {
28
29
React = require('react');
30
ReactDOM = require('react-dom');
24
- ReactTestUtils = require('react-dom/test-utils');
25
- // TODO: can we express this test with only public API?
26
- ReactDOMComponentTree = require('../../client/ReactDOMComponentTree')
27
- .default;
28
- EnterLeaveEventPlugin = require('../EnterLeaveEventPlugin').default;
31
});
32
31
- it('should set relatedTarget properly in iframe', () => {
32
- var iframe = document.createElement('iframe');
33
+ it('should set onMouseLeave relatedTarget properly in iframe', () => {
34
+ const iframe = document.createElement('iframe');
35
document.body.appendChild(iframe);
34
-
35
- var iframeDocument = iframe.contentDocument;
36
-
36
+ const iframeDocument = iframe.contentDocument;
37
iframeDocument.write(
38
'<!DOCTYPE html><html><head></head><body><div></div></body></html>',
39
);
40
iframeDocument.close();
41
42
- var component = ReactDOM.render(
43
- <div />,
42
+ let leaveEvents = [];
43
+ const node = ReactDOM.render(
44
+ <div
45
+ onMouseLeave={e => {
46
+ e.persist();
47
+ leaveEvents.push(e);
48
+ }}
49
+ />,
50
iframeDocument.body.getElementsByTagName('div')[0],
51
);
46
- var div = ReactDOM.findDOMNode(component);
52
48
- var extracted = EnterLeaveEventPlugin.extractEvents(
49
- 'topMouseOver',
50
- ReactDOMComponentTree.getInstanceFromNode(div),
51
- {target: div},
52
- div,
53
+ simulateMouseEvent(node, 'mouseout', iframe.contentWindow);
54
+ expect(leaveEvents.length).toBe(1);
55
+ expect(leaveEvents[0].target).toBe(node);
56
+ expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow);
57
+ });
58
+
59
+ it('should set onMouseEnter relatedTarget properly in iframe', () => {
60
+ const iframe = document.createElement('iframe');
61
+ document.body.appendChild(iframe);
62
+ const iframeDocument = iframe.contentDocument;
63
+ iframeDocument.write(
64
+ '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
65
);
54
- expect(extracted.length).toBe(2);
66
+ iframeDocument.close();
67
56
- var leave = extracted[0];
57
- var enter = extracted[1];
68
+ let enterEvents = [];
69
+ const node = ReactDOM.render(
70
+ <div
71
+ onMouseEnter={e => {
72
+ e.persist();
73
+ enterEvents.push(e);
74
+ }}
75
+ />,
76
+ iframeDocument.body.getElementsByTagName('div')[0],
77
+ );
78
59
- expect(leave.target).toBe(iframe.contentWindow);
60
- expect(leave.relatedTarget).toBe(div);
61
- expect(enter.target).toBe(div);
62
- expect(enter.relatedTarget).toBe(iframe.contentWindow);
79
+ simulateMouseEvent(node, 'mouseover', null);
80
+ expect(enterEvents.length).toBe(1);
81
+ expect(enterEvents[0].target).toBe(node);
82
+ expect(enterEvents[0].relatedTarget).toBe(iframe.contentWindow);
83
});
84
85
// Regression test for https://github.com/facebook/react/issues/10906.
@@ -85,11 +105,10 @@ describe('EnterLeaveEventPlugin', () => {
105
// The issue only reproduced on insertion during the first update.
106
ReactDOM.render(<Parent showChild={true} />, div);
107
108
+ document.body.appendChild(div);
109
+
110
// Enter from parent into the child.
89
- ReactTestUtils.simulateNativeEventOnNode('topMouseOut', parent, {
90
- target: parent,
91
- relatedTarget: parent.firstChild,
92
- });
111
+ simulateMouseEvent(parent, 'mouseout', parent.firstChild);
112
113
// Entering a child should fire on the child, not on the parent.
114
expect(childEnterCalls).toBe(1);