Rewrite SelectEventPlugin-test to test behavior using Public API (#11299) (#11676)
* Rewrite SelectEventPlugin-test to test behavior using Public API * Minor refactor * Make sure that we test that "focus" event is ignored Use newer API when creating events * Rewrote the other test to use Public API as well * Tweak the test * Remove -internal suffix * Oops
Sotiris Kiritsis committed
Nov 30, 2017 at 00:17 UTC
d83916e4aaebc96f7820e178331680d4def6b7e3
2 files changed
+111
-91
packages/react-dom/src/events/__tests__/SelectEventPlugin-test.internal.js
deleted
-91
@@ -1,91 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-var React;
13
-var ReactDOM;
14
-var ReactDOMComponentTree;
15
-var ReactTestUtils;
16
-var SelectEventPlugin;
17
-
18
-describe('SelectEventPlugin', () => {
19
- function extract(node, topLevelEvent) {
20
- return SelectEventPlugin.extractEvents(
21
- topLevelEvent,
22
- ReactDOMComponentTree.getInstanceFromNode(node),
23
- {target: node},
24
- node,
25
- );
26
- }
27
-
28
- beforeEach(() => {
29
- React = require('react');
30
- ReactDOM = require('react-dom');
31
- ReactTestUtils = require('react-dom/test-utils');
32
- // TODO: can we express this test with only public API?
33
- ReactDOMComponentTree = require('../../client/ReactDOMComponentTree');
34
- SelectEventPlugin = require('../SelectEventPlugin').default;
35
- });
36
-
37
- it('should skip extraction if no listeners are present', () => {
38
- class WithoutSelect extends React.Component {
39
- render() {
40
- return <input type="text" />;
41
- }
42
- }
43
-
44
- var rendered = ReactTestUtils.renderIntoDocument(<WithoutSelect />);
45
- var node = ReactDOM.findDOMNode(rendered);
46
- node.focus();
47
-
48
- // It seems that .focus() isn't triggering this event in our test
49
- // environment so we need to ensure it gets set for this test to be valid.
50
- var fakeNativeEvent = function() {};
51
- fakeNativeEvent.target = node;
52
- ReactTestUtils.simulateNativeEventOnNode('topFocus', node, fakeNativeEvent);
53
-
54
- var mousedown = extract(node, 'topMouseDown');
55
- expect(mousedown).toBe(null);
56
-
57
- var mouseup = extract(node, 'topMouseUp');
58
- expect(mouseup).toBe(null);
59
- });
60
-
61
- it('should extract if an `onSelect` listener is present', () => {
62
- class WithSelect extends React.Component {
63
- render() {
64
- return <input type="text" onSelect={this.props.onSelect} />;
65
- }
66
- }
67
-
68
- var cb = jest.fn();
69
-
70
- var rendered = ReactTestUtils.renderIntoDocument(
71
- <WithSelect onSelect={cb} />,
72
- );
73
- var node = ReactDOM.findDOMNode(rendered);
74
-
75
- node.selectionStart = 0;
76
- node.selectionEnd = 0;
77
- node.focus();
78
-
79
- var focus = extract(node, 'topFocus');
80
- expect(focus).toBe(null);
81
-
82
- var mousedown = extract(node, 'topMouseDown');
83
- expect(mousedown).toBe(null);
84
-
85
- var mouseup = extract(node, 'topMouseUp');
86
- expect(mouseup).not.toBe(null);
87
- expect(typeof mouseup).toBe('object');
88
- expect(mouseup.type).toBe('select');
89
- expect(mouseup.target).toBe(node);
90
- });
91
-});
packages/react-dom/src/events/__tests__/SelectEventPlugin-test.js
new
+111
@@ -0,0 +1,111 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+var React;
13
+var ReactDOM;
14
+
15
+describe('SelectEventPlugin', () => {
16
+ var container;
17
+
18
+ beforeEach(() => {
19
+ React = require('react');
20
+ ReactDOM = require('react-dom');
21
+
22
+ container = document.createElement('div');
23
+ document.body.appendChild(container);
24
+ });
25
+
26
+ afterEach(() => {
27
+ document.body.removeChild(container);
28
+ container = null;
29
+ });
30
+
31
+ // See https://github.com/facebook/react/pull/3639 for details.
32
+ it('does not get confused when dependent events are registered independently', () => {
33
+ var select = jest.fn();
34
+ var onSelect = event => {
35
+ expect(typeof event).toBe('object');
36
+ expect(event.type).toBe('select');
37
+ expect(event.target).toBe(node);
38
+ select(event.currentTarget);
39
+ };
40
+
41
+ // Pass `onMouseDown` so React registers a top-level listener.
42
+ var node = ReactDOM.render(
43
+ <input type="text" onMouseDown={function() {}} />,
44
+ container,
45
+ );
46
+ node.focus();
47
+
48
+ // Trigger `mousedown` and `mouseup`. Note that
49
+ // React is not currently listening to `mouseup`.
50
+ node.dispatchEvent(
51
+ new MouseEvent('mousedown', {
52
+ bubbles: true,
53
+ cancelable: true,
54
+ }),
55
+ );
56
+ node.dispatchEvent(
57
+ new MouseEvent('mouseup', {
58
+ bubbles: true,
59
+ cancelable: true,
60
+ }),
61
+ );
62
+
63
+ // Now subscribe to `onSelect`.
64
+ ReactDOM.render(<input type="text" onSelect={onSelect} />, container);
65
+ node.focus();
66
+
67
+ // This triggers a `select` event in our polyfill.
68
+ node.dispatchEvent(
69
+ new KeyboardEvent('keydown', {bubbles: true, cancelable: true}),
70
+ );
71
+
72
+ // Verify that it doesn't get "stuck" waiting for
73
+ // a `mouseup` event that it has "missed" because
74
+ // a top-level listener didn't exist yet.
75
+ expect(select.mock.calls.length).toBe(1);
76
+ });
77
+
78
+ it('should fire `onSelect` when a listener is present', () => {
79
+ var select = jest.fn();
80
+ var onSelect = event => {
81
+ expect(typeof event).toBe('object');
82
+ expect(event.type).toBe('select');
83
+ expect(event.target).toBe(node);
84
+ select(event.currentTarget);
85
+ };
86
+
87
+ var node = ReactDOM.render(
88
+ <input type="text" onSelect={onSelect} />,
89
+ container,
90
+ );
91
+ node.focus();
92
+
93
+ var nativeEvent = new MouseEvent('focus', {
94
+ bubbles: true,
95
+ cancelable: true,
96
+ });
97
+ node.dispatchEvent(nativeEvent);
98
+ expect(select.mock.calls.length).toBe(0);
99
+
100
+ nativeEvent = new MouseEvent('mousedown', {
101
+ bubbles: true,
102
+ cancelable: true,
103
+ });
104
+ node.dispatchEvent(nativeEvent);
105
+ expect(select.mock.calls.length).toBe(0);
106
+
107
+ nativeEvent = new MouseEvent('mouseup', {bubbles: true, cancelable: true});
108
+ node.dispatchEvent(nativeEvent);
109
+ expect(select.mock.calls.length).toBe(1);
110
+ });
111
+});