@samitouri / QOS-React-2 / commits / bfa269008a

Use only public api for ReactDOMEventListener-test.js (#11327)

* Use only public api for ReactDOMEventListener-test.js * Use less confusing naming There was no need to extract React elements into separate variables. * Replace the "disappearance" test I could not get it to fail on master so it was probably testing something specific to Stack implementation details. It was also already broken because it didn't look at the right argument and never actually called `unmountComponentAtNode`. Instead I replaced it with original repro case from https://github.com/facebook/react/issues/1105 which is when it was introduced. * Tweak naming and add comments * Missed this one

Iacami Gevaerd committed Nov 3, 2017 at 18:43 UTC bfa269008a8709a756c0c744e941e54936e34589
1 file changed +144 -144
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+144 -144
@@ -9,184 +9,183 @@
9
10 'use strict';
11
12 -var EVENT_TARGET_PARAM = 1;
13 -
12 describe('ReactDOMEventListener', () => {
13 var React;
14 var ReactDOM;
17 - var ReactDOMComponentTree;
18 - var ReactDOMEventListener;
19 - var ReactTestUtils;
20 - var handleTopLevel;
15
16 beforeEach(() => {
17 jest.resetModules();
18 React = require('react');
19 ReactDOM = require('react-dom');
26 - // TODO: can we express this test with only public API?
27 - ReactDOMComponentTree = require('../client/ReactDOMComponentTree').default;
28 - ReactDOMEventListener = require('../events/ReactDOMEventListener').default;
29 - ReactTestUtils = require('react-dom/test-utils');
30 -
31 - handleTopLevel = jest.fn();
32 - ReactDOMEventListener._handleTopLevel = handleTopLevel;
20 });
21
22 it('should dispatch events from outside React tree', () => {
23 + var mock = jest.fn();
24 +
25 + var container = document.createElement('div');
26 + var node = ReactDOM.render(<div onMouseEnter={mock} />, container);
27 var otherNode = document.createElement('h1');
37 - var component = ReactDOM.render(<div />, document.createElement('div'));
38 - expect(handleTopLevel.mock.calls.length).toBe(0);
39 - ReactDOMEventListener.dispatchEvent('topMouseOut', {
40 - type: 'mouseout',
41 - fromElement: otherNode,
42 - target: otherNode,
43 - srcElement: otherNode,
44 - toElement: ReactDOM.findDOMNode(component),
45 - relatedTarget: ReactDOM.findDOMNode(component),
46 - view: window,
47 - path: [otherNode, otherNode],
48 - });
49 - expect(handleTopLevel.mock.calls.length).toBe(1);
28 + document.body.appendChild(container);
29 + document.body.appendChild(otherNode);
30 +
31 + otherNode.dispatchEvent(
32 + new MouseEvent('mouseout', {
33 + bubbles: true,
34 + cancelable: true,
35 + relatedTarget: node,
36 + }),
37 + );
38 + expect(mock).toBeCalled();
39 });
40
41 describe('Propagation', () => {
42 it('should propagate events one level down', () => {
43 + var mouseOut = jest.fn();
44 + var onMouseOut = event => mouseOut(event.currentTarget);
45 +
46 var childContainer = document.createElement('div');
55 - var childControl = <div>Child</div>;
47 var parentContainer = document.createElement('div');
57 - var parentControl = <div>Parent</div>;
58 - childControl = ReactDOM.render(childControl, childContainer);
59 - parentControl = ReactDOM.render(parentControl, parentContainer);
60 - ReactDOM.findDOMNode(parentControl).appendChild(childContainer);
61 -
62 - var callback = ReactDOMEventListener.dispatchEvent.bind(null, 'test');
63 - callback({
64 - target: ReactDOM.findDOMNode(childControl),
65 - });
66 -
67 - var calls = handleTopLevel.mock.calls;
68 - expect(calls.length).toBe(2);
69 - expect(calls[0][EVENT_TARGET_PARAM]).toBe(
70 - ReactDOMComponentTree.getInstanceFromNode(childControl),
48 + var childNode = ReactDOM.render(
49 + <div onMouseOut={onMouseOut}>Child</div>,
50 + childContainer,
51 );
72 - expect(calls[1][EVENT_TARGET_PARAM]).toBe(
73 - ReactDOMComponentTree.getInstanceFromNode(parentControl),
52 + var parentNode = ReactDOM.render(
53 + <div onMouseOut={onMouseOut}>div</div>,
54 + parentContainer,
55 );
56 + parentNode.appendChild(childContainer);
57 + document.body.appendChild(parentContainer);
58 +
59 + var nativeEvent = document.createEvent('Event');
60 + nativeEvent.initEvent('mouseout', true, true);
61 + childNode.dispatchEvent(nativeEvent);
62 +
63 + expect(mouseOut).toBeCalled();
64 + expect(mouseOut.mock.calls.length).toBe(2);
65 + expect(mouseOut.mock.calls[0][0]).toEqual(childNode);
66 + expect(mouseOut.mock.calls[1][0]).toEqual(parentNode);
67 +
68 + document.body.removeChild(parentContainer);
69 });
70
71 it('should propagate events two levels down', () => {
72 + var mouseOut = jest.fn();
73 + var onMouseOut = event => mouseOut(event.currentTarget);
74 +
75 var childContainer = document.createElement('div');
79 - var childControl = <div>Child</div>;
76 var parentContainer = document.createElement('div');
81 - var parentControl = <div>Parent</div>;
77 var grandParentContainer = document.createElement('div');
83 - var grandParentControl = <div>Parent</div>;
84 - childControl = ReactDOM.render(childControl, childContainer);
85 - parentControl = ReactDOM.render(parentControl, parentContainer);
86 - grandParentControl = ReactDOM.render(
87 - grandParentControl,
88 - grandParentContainer,
89 - );
90 - ReactDOM.findDOMNode(parentControl).appendChild(childContainer);
91 - ReactDOM.findDOMNode(grandParentControl).appendChild(parentContainer);
92 -
93 - var callback = ReactDOMEventListener.dispatchEvent.bind(null, 'test');
94 - callback({
95 - target: ReactDOM.findDOMNode(childControl),
96 - });
97 -
98 - var calls = handleTopLevel.mock.calls;
99 - expect(calls.length).toBe(3);
100 - expect(calls[0][EVENT_TARGET_PARAM]).toBe(
101 - ReactDOMComponentTree.getInstanceFromNode(childControl),
78 + var childNode = ReactDOM.render(
79 + <div onMouseOut={onMouseOut}>Child</div>,
80 + childContainer,
81 );
103 - expect(calls[1][EVENT_TARGET_PARAM]).toBe(
104 - ReactDOMComponentTree.getInstanceFromNode(parentControl),
82 + var parentNode = ReactDOM.render(
83 + <div onMouseOut={onMouseOut}>Parent</div>,
84 + parentContainer,
85 );
106 - expect(calls[2][EVENT_TARGET_PARAM]).toBe(
107 - ReactDOMComponentTree.getInstanceFromNode(grandParentControl),
86 + var grandParentNode = ReactDOM.render(
87 + <div onMouseOut={onMouseOut}>Parent</div>,
88 + grandParentContainer,
89 );
90 + parentNode.appendChild(childContainer);
91 + grandParentNode.appendChild(parentContainer);
92 +
93 + document.body.appendChild(grandParentContainer);
94 +
95 + var nativeEvent = document.createEvent('Event');
96 + nativeEvent.initEvent('mouseout', true, true);
97 + childNode.dispatchEvent(nativeEvent);
98 +
99 + expect(mouseOut).toBeCalled();
100 + expect(mouseOut.mock.calls.length).toBe(3);
101 + expect(mouseOut.mock.calls[0][0]).toEqual(childNode);
102 + expect(mouseOut.mock.calls[1][0]).toEqual(parentNode);
103 + expect(mouseOut.mock.calls[2][0]).toEqual(grandParentNode);
104 +
105 + document.body.removeChild(grandParentContainer);
106 });
107
108 + // Regression test for https://github.com/facebook/react/issues/1105
109 it('should not get confused by disappearing elements', () => {
112 - var childContainer = document.createElement('div');
113 - var childControl = <div>Child</div>;
114 - var parentContainer = document.createElement('div');
115 - var parentControl = <div>Parent</div>;
116 - childControl = ReactDOM.render(childControl, childContainer);
117 - parentControl = ReactDOM.render(parentControl, parentContainer);
118 - ReactDOM.findDOMNode(parentControl).appendChild(childContainer);
119 -
120 - // ReactBrowserEventEmitter.handleTopLevel might remove the
121 - // target from the DOM. Here, we have handleTopLevel remove the
122 - // node when the first event handlers are called; we'll still
123 - // expect to receive a second call for the parent control.
124 - var childNode = ReactDOM.findDOMNode(childControl);
125 - handleTopLevel.mockImplementation(function(
126 - topLevelType,
127 - topLevelTarget,
128 - topLevelTargetID,
129 - nativeEvent,
130 - ) {
131 - if (topLevelTarget === childNode) {
132 - ReactDOM.unmountComponentAtNode(childContainer);
110 + var container = document.createElement('div');
111 + document.body.appendChild(container);
112 + class MyComponent extends React.Component {
113 + state = {clicked: false};
114 + handleClick = () => {
115 + this.setState({clicked: true});
116 + };
117 + componentDidMount() {
118 + expect(ReactDOM.findDOMNode(this)).toBe(container.firstChild);
119 }
134 - });
135 -
136 - var callback = ReactDOMEventListener.dispatchEvent.bind(null, 'test');
137 - callback({
138 - target: childNode,
139 - });
140 -
141 - var calls = handleTopLevel.mock.calls;
142 - expect(calls.length).toBe(2);
143 - expect(calls[0][EVENT_TARGET_PARAM]).toBe(
144 - ReactDOMComponentTree.getInstanceFromNode(childNode),
145 - );
146 - expect(calls[1][EVENT_TARGET_PARAM]).toBe(
147 - ReactDOMComponentTree.getInstanceFromNode(parentControl),
120 + componentDidUpdate() {
121 + expect(ReactDOM.findDOMNode(this)).toBe(container.firstChild);
122 + }
123 + render() {
124 + if (this.state.clicked) {
125 + return <span>clicked!</span>;
126 + } else {
127 + return <button onClick={this.handleClick}>not yet clicked</button>;
128 + }
129 + }
130 + }
131 + ReactDOM.render(<MyComponent />, container);
132 + container.firstChild.dispatchEvent(
133 + new MouseEvent('click', {
134 + bubbles: true,
135 + }),
136 );
137 + expect(container.firstChild.textContent).toBe('clicked!');
138 + document.body.removeChild(container);
139 });
140
141 it('should batch between handlers from different roots', () => {
142 + var mock = jest.fn();
143 +
144 var childContainer = document.createElement('div');
145 + var handleChildMouseOut = () => {
146 + ReactDOM.render(<div>1</div>, childContainer);
147 + mock(childNode.textContent);
148 + };
149 +
150 var parentContainer = document.createElement('div');
154 - var childControl = ReactDOM.render(<div>Child</div>, childContainer);
155 - var parentControl = ReactDOM.render(<div>Parent</div>, parentContainer);
156 - ReactDOM.findDOMNode(parentControl).appendChild(childContainer);
157 -
158 - // Suppose an event handler in each root enqueues an update to the
159 - // childControl element -- the two updates should get batched together.
160 - var childNode = ReactDOM.findDOMNode(childControl);
161 - handleTopLevel.mockImplementation(function(
162 - topLevelType,
163 - topLevelTarget,
164 - topLevelTargetID,
165 - nativeEvent,
166 - ) {
167 - ReactDOM.render(
168 - <div>{topLevelTarget === childNode ? '1' : '2'}</div>,
169 - childContainer,
170 - );
171 - // Since we're batching, neither update should yet have gone through.
172 - expect(childNode.textContent).toBe('Child');
173 - });
174 -
175 - var callback = ReactDOMEventListener.dispatchEvent.bind(
176 - ReactDOMEventListener,
177 - 'test',
178 - );
179 - callback({
180 - target: childNode,
181 - });
151 + var handleParentMouseOut = () => {
152 + ReactDOM.render(<div>2</div>, childContainer);
153 + mock(childNode.textContent);
154 + };
155
183 - var calls = handleTopLevel.mock.calls;
184 - expect(calls.length).toBe(2);
156 + var childNode = ReactDOM.render(
157 + <div onMouseOut={handleChildMouseOut}>Child</div>,
158 + childContainer,
159 + );
160 + var parentNode = ReactDOM.render(
161 + <div onMouseOut={handleParentMouseOut}>Parent</div>,
162 + parentContainer,
163 + );
164 + parentNode.appendChild(childContainer);
165 + document.body.appendChild(parentContainer);
166 +
167 + var nativeEvent = document.createEvent('Event');
168 + nativeEvent.initEvent('mouseout', true, true);
169 + childNode.dispatchEvent(nativeEvent);
170 +
171 + // Child and parent should both call from event handlers.
172 + expect(mock.mock.calls.length).toBe(2);
173 + // The first call schedules a render of '1' into the 'Child'.
174 + // However, we're batching so it isn't flushed yet.
175 + expect(mock.mock.calls[0][0]).toBe('Child');
176 + // The first call schedules a render of '2' into the 'Child'.
177 + // We're still batching so it isn't flushed yet either.
178 + expect(mock.mock.calls[1][0]).toBe('Child');
179 + // By the time we leave the handler, the second update is flushed.
180 expect(childNode.textContent).toBe('2');
181 + document.body.removeChild(parentContainer);
182 });
183 });
184
185 it('should not fire duplicate events for a React DOM tree', () => {
186 + var mouseOut = jest.fn();
187 + var onMouseOut = event => mouseOut(event.target);
188 +
189 class Wrapper extends React.Component {
190 getInner = () => {
191 return this.refs.inner;
@@ -194,21 +193,22 @@ describe('ReactDOMEventListener', () => {
193
194 render() {
195 var inner = <div ref="inner">Inner</div>;
197 - return <div><div id="outer">{inner}</div></div>;
196 + return <div><div onMouseOut={onMouseOut} id="outer">{inner}</div></div>;
197 }
198 }
199
201 - var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
200 + var container = document.createElement('div');
201 + var instance = ReactDOM.render(<Wrapper />, container);
202
203 - var callback = ReactDOMEventListener.dispatchEvent.bind(null, 'test');
204 - callback({
205 - target: ReactDOM.findDOMNode(instance.getInner()),
206 - });
203 + document.body.appendChild(container);
204
208 - var calls = handleTopLevel.mock.calls;
209 - expect(calls.length).toBe(1);
210 - expect(calls[0][EVENT_TARGET_PARAM]).toBe(
211 - ReactDOMComponentTree.getInstanceFromNode(instance.getInner()),
212 - );
205 + var nativeEvent = document.createEvent('Event');
206 + nativeEvent.initEvent('mouseout', true, true);
207 + instance.getInner().dispatchEvent(nativeEvent);
208 +
209 + expect(mouseOut).toBeCalled();
210 + expect(mouseOut.mock.calls.length).toBe(1);
211 + expect(mouseOut.mock.calls[0][0]).toEqual(instance.getInner());
212 + document.body.removeChild(container);
213 });
214 });