Refactor some event tests (#11517)
* Use dispatchEvent() directly Don't fear repetition in tests. It is clearer what's going on. * Clean up the container after tests * Add a comment to container code
Dan Abramov committed
Nov 10, 2017 at 16:58 UTC
13c491a8282cb102c40d4ed74738ebebe7901a5f
4 files changed
+54
-40
packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
+39
-20
@@ -12,27 +12,28 @@
12
var React;
13
var ReactDOM;
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
-
15
describe('EnterLeaveEventPlugin', () => {
16
+ var container;
17
+
18
beforeEach(() => {
19
jest.resetModules();
20
21
React = require('react');
22
ReactDOM = require('react-dom');
23
+
24
+ // The container has to be attached for events to fire.
25
+ container = document.createElement('div');
26
+ document.body.appendChild(container);
27
+ });
28
+
29
+ afterEach(() => {
30
+ document.body.removeChild(container);
31
+ container = null;
32
});
33
34
it('should set onMouseLeave relatedTarget properly in iframe', () => {
35
const iframe = document.createElement('iframe');
35
- document.body.appendChild(iframe);
36
+ container.appendChild(iframe);
37
const iframeDocument = iframe.contentDocument;
38
iframeDocument.write(
39
'<!DOCTYPE html><html><head></head><body><div></div></body></html>',
@@ -50,7 +51,14 @@ describe('EnterLeaveEventPlugin', () => {
51
iframeDocument.body.getElementsByTagName('div')[0],
52
);
53
53
- simulateMouseEvent(node, 'mouseout', iframe.contentWindow);
54
+ node.dispatchEvent(
55
+ new MouseEvent('mouseout', {
56
+ bubbles: true,
57
+ cancelable: true,
58
+ relatedTarget: iframe.contentWindow,
59
+ }),
60
+ );
61
+
62
expect(leaveEvents.length).toBe(1);
63
expect(leaveEvents[0].target).toBe(node);
64
expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow);
@@ -58,7 +66,7 @@ describe('EnterLeaveEventPlugin', () => {
66
67
it('should set onMouseEnter relatedTarget properly in iframe', () => {
68
const iframe = document.createElement('iframe');
61
- document.body.appendChild(iframe);
69
+ container.appendChild(iframe);
70
const iframeDocument = iframe.contentDocument;
71
iframeDocument.write(
72
'<!DOCTYPE html><html><head></head><body><div></div></body></html>',
@@ -76,7 +84,14 @@ describe('EnterLeaveEventPlugin', () => {
84
iframeDocument.body.getElementsByTagName('div')[0],
85
);
86
79
- simulateMouseEvent(node, 'mouseover', null);
87
+ node.dispatchEvent(
88
+ new MouseEvent('mouseover', {
89
+ bubbles: true,
90
+ cancelable: true,
91
+ relatedTarget: null,
92
+ }),
93
+ );
94
+
95
expect(enterEvents.length).toBe(1);
96
expect(enterEvents[0].target).toBe(node);
97
expect(enterEvents[0].relatedTarget).toBe(iframe.contentWindow);
@@ -87,6 +102,7 @@ describe('EnterLeaveEventPlugin', () => {
102
let parentEnterCalls = 0;
103
let childEnterCalls = 0;
104
let parent = null;
105
+
106
class Parent extends React.Component {
107
render() {
108
return (
@@ -101,15 +117,18 @@ describe('EnterLeaveEventPlugin', () => {
117
}
118
}
119
104
- const div = document.createElement('div');
105
- ReactDOM.render(<Parent />, div);
120
+ ReactDOM.render(<Parent />, container);
121
// The issue only reproduced on insertion during the first update.
107
- ReactDOM.render(<Parent showChild={true} />, div);
108
-
109
- document.body.appendChild(div);
122
+ ReactDOM.render(<Parent showChild={true} />, container);
123
124
// Enter from parent into the child.
112
- simulateMouseEvent(parent, 'mouseout', parent.firstChild);
125
+ parent.dispatchEvent(
126
+ new MouseEvent('mouseout', {
127
+ bubbles: true,
128
+ cancelable: true,
129
+ relatedTarget: parent.firstChild,
130
+ }),
131
+ );
132
133
// Entering a child should fire on the child, not on the parent.
134
expect(childEnterCalls).toBe(1);
packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js
+1
@@ -19,6 +19,7 @@ describe('SyntheticClipboardEvent', () => {
19
React = require('react');
20
ReactDOM = require('react-dom');
21
22
+ // The container has to be attached for events to fire.
23
container = document.createElement('div');
24
document.body.appendChild(container);
25
});
packages/react-dom/src/events/__tests__/SyntheticWheelEvent-test.js
+1
@@ -19,6 +19,7 @@ describe('SyntheticWheelEvent', () => {
19
React = require('react');
20
ReactDOM = require('react-dom');
21
22
+ // The container has to be attached for events to fire.
23
container = document.createElement('div');
24
document.body.appendChild(container);
25
});
packages/react-dom/src/events/__tests__/getEventKey-test.js
+13
-20
@@ -9,13 +9,24 @@
9
10
'use strict';
11
12
+var React;
13
+var ReactDOM;
14
+
15
describe('getEventKey', () => {
13
- var React;
14
- var ReactDOM;
16
+ var container;
17
18
beforeEach(() => {
19
React = require('react');
20
ReactDOM = require('react-dom');
21
+
22
+ // The container has to be attached for events to fire.
23
+ container = document.createElement('div');
24
+ document.body.appendChild(container);
25
+ });
26
+
27
+ afterEach(() => {
28
+ document.body.removeChild(container);
29
+ container = null;
30
});
31
32
describe('when key is implemented in a browser', () => {
@@ -28,9 +39,7 @@ describe('getEventKey', () => {
39
}
40
}
41
31
- var container = document.createElement('div');
42
ReactDOM.render(<Comp />, container);
33
- document.body.appendChild(container);
43
44
var nativeEvent = new KeyboardEvent('keydown', {
45
key: 'Del',
@@ -39,7 +48,6 @@ describe('getEventKey', () => {
48
});
49
container.firstChild.dispatchEvent(nativeEvent);
50
expect(key).toBe('Delete');
42
- document.body.removeChild(container);
51
});
52
});
53
@@ -52,9 +60,7 @@ describe('getEventKey', () => {
60
}
61
}
62
55
- var container = document.createElement('div');
63
ReactDOM.render(<Comp />, container);
57
- document.body.appendChild(container);
64
65
var nativeEvent = new KeyboardEvent('keydown', {
66
key: 'f',
@@ -63,7 +69,6 @@ describe('getEventKey', () => {
69
});
70
container.firstChild.dispatchEvent(nativeEvent);
71
expect(key).toBe('f');
66
- document.body.removeChild(container);
72
});
73
});
74
});
@@ -79,9 +84,7 @@ describe('getEventKey', () => {
84
}
85
}
86
82
- var container = document.createElement('div');
87
ReactDOM.render(<Comp />, container);
84
- document.body.appendChild(container);
88
89
var nativeEvent = new KeyboardEvent('keypress', {
90
charCode: 13,
@@ -90,7 +93,6 @@ describe('getEventKey', () => {
93
});
94
container.firstChild.dispatchEvent(nativeEvent);
95
expect(key).toBe('Enter');
93
- document.body.removeChild(container);
96
});
97
});
98
@@ -103,9 +105,7 @@ describe('getEventKey', () => {
105
}
106
}
107
106
- var container = document.createElement('div');
108
ReactDOM.render(<Comp />, container);
108
- document.body.appendChild(container);
109
110
var nativeEvent = new KeyboardEvent('keypress', {
111
charCode: 65,
@@ -114,7 +114,6 @@ describe('getEventKey', () => {
114
});
115
container.firstChild.dispatchEvent(nativeEvent);
116
expect(key).toBe('A');
117
- document.body.removeChild(container);
117
});
118
});
119
});
@@ -129,9 +128,7 @@ describe('getEventKey', () => {
128
}
129
}
130
132
- var container = document.createElement('div');
131
ReactDOM.render(<Comp />, container);
134
- document.body.appendChild(container);
132
133
var nativeEvent = new KeyboardEvent('keydown', {
134
keyCode: 45,
@@ -140,7 +137,6 @@ describe('getEventKey', () => {
137
});
138
container.firstChild.dispatchEvent(nativeEvent);
139
expect(key).toBe('Insert');
143
- document.body.removeChild(container);
140
});
141
});
142
@@ -153,9 +149,7 @@ describe('getEventKey', () => {
149
}
150
}
151
156
- var container = document.createElement('div');
152
ReactDOM.render(<Comp />, container);
158
- document.body.appendChild(container);
153
154
var nativeEvent = new KeyboardEvent('keydown', {
155
keyCode: 1337,
@@ -164,7 +158,6 @@ describe('getEventKey', () => {
158
});
159
container.firstChild.dispatchEvent(nativeEvent);
160
expect(key).toBe('Unidentified');
167
- document.body.removeChild(container);
161
});
162
});
163
});