Rewrite ReactDOMInput-test depending on internal API (#11299) (#11309)
* Rewrite tests depending on internal API * Remove focus being called when there was no blur event function before * Remove triggering function and just let ReactTestUtils take care * Use native events * Remove duplicate * Simulate native event when changing value on reentrant * Change wasn't being called * Use Simulate only * Use React event handlers on test * Move commentary * Lint commit * Use native event * Comment native event dispatching * Prettier * add setUntrackedValue * Prettier-all * Use dispatchEvent instead of ReactTestUtils Simulates; * Prettier * Fix lint * Remove useless arg * Wrap event dispatcher into function * Remove deprecated Event * Remove unused change event dispatcher * Fix merge * Prettier * Add missing focus/blur calls They are necessary to cover for the fix in #8240.
Lucas Lentz committed
Oct 26, 2017 at 16:22 UTC
55b3172f1de0b89ac02c761af954ee78b9cb16dd
1 file changed
+25
-39
packages/react-dom/src/__tests__/ReactDOMInput-test.js
+25
-39
@@ -16,27 +16,28 @@ describe('ReactDOMInput', () => {
16
var ReactDOM;
17
var ReactDOMServer;
18
var ReactTestUtils;
19
- var inputValueTracking;
19
+ var setUntrackedValue;
20
21
function normalizeCodeLocInfo(str) {
22
return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
23
}
24
25
- function setUntrackedValue(elem, value) {
26
- var tracker = inputValueTracking._getTrackerFromNode(elem);
27
- var current = tracker.getValue();
28
- elem.value = value;
29
- tracker.setValue(current);
25
+ function dispatchEventOnNode(node, type) {
26
+ node.dispatchEvent(new Event(type, {bubbles: true, cancelable: true}));
27
}
28
29
beforeEach(() => {
30
jest.resetModules();
31
+
32
+ setUntrackedValue = Object.getOwnPropertyDescriptor(
33
+ HTMLInputElement.prototype,
34
+ 'value',
35
+ ).set;
36
+
37
React = require('react');
38
ReactDOM = require('react-dom');
39
ReactDOMServer = require('react-dom/server');
40
ReactTestUtils = require('react-dom/test-utils');
38
- // TODO: can we express this test with only public API?
39
- inputValueTracking = require('../client/inputValueTracking');
41
spyOn(console, 'error');
42
});
43
@@ -49,14 +50,11 @@ describe('ReactDOMInput', () => {
50
var node = ReactDOM.findDOMNode(stub);
51
expectDev(console.error.calls.count()).toBe(1);
52
52
- // Simulate a native change event
53
- setUntrackedValue(node, 'giraffe');
53
+ setUntrackedValue.call(node, 'giraffe');
54
55
// This must use the native event dispatching. If we simulate, we will
56
// bypass the lazy event attachment system so we won't actually test this.
57
- var nativeEvent = document.createEvent('Event');
58
- nativeEvent.initEvent('change', true, true);
59
- node.dispatchEvent(nativeEvent);
57
+ dispatchEventOnNode(node, 'change');
58
59
expect(node.value).toBe('lion');
60
@@ -64,15 +62,6 @@ describe('ReactDOMInput', () => {
62
});
63
64
it('should control a value in reentrant events', () => {
67
- // This must use the native event dispatching. If we simulate, we will
68
- // bypass the lazy event attachment system so we won't actually test this.
69
- var inputEvent = document.createEvent('Event');
70
- inputEvent.initEvent('input', true, true);
71
- // This must use the native event dispatching. If we simulate, we will
72
- // bypass the lazy event attachment system so we won't actually test this.
73
- var changeEvent = document.createEvent('Event');
74
- changeEvent.initEvent('change', true, true);
75
-
65
class ControlledInputs extends React.Component {
66
state = {value: 'lion'};
67
a = null;
@@ -82,8 +71,8 @@ describe('ReactDOMInput', () => {
71
this.setState({value: newValue});
72
// Calling focus here will blur the text box which causes a native
73
// change event. Ideally we shouldn't have to fire this ourselves.
85
- // I don't know how to simulate a change event on a text box.
86
- this.a.dispatchEvent(changeEvent);
74
+ // Don't remove unless you've verified the fix in #8240 is still covered.
75
+ dispatchEventOnNode(this.a, 'change');
76
this.b.focus();
77
}
78
blur(currentValue) {
@@ -114,11 +103,14 @@ describe('ReactDOMInput', () => {
103
// We need it to be in the body to test native event dispatching.
104
document.body.appendChild(container);
105
106
+ // Focus the field so we can later blur it.
107
+ // Don't remove unless you've verified the fix in #8240 is still covered.
108
instance.a.focus();
118
- // Simulate a native keyup event
119
- setUntrackedValue(instance.a, 'giraffe');
120
-
121
- instance.a.dispatchEvent(inputEvent);
109
+ setUntrackedValue.call(instance.a, 'giraffe');
110
+ // This must use the native event dispatching. If we simulate, we will
111
+ // bypass the lazy event attachment system so we won't actually test this.
112
+ dispatchEventOnNode(instance.a, 'change');
113
+ dispatchEventOnNode(instance.a, 'blur');
114
115
expect(instance.a.value).toBe('giraffe');
116
expect(instance.switchedFocus).toBe(true);
@@ -127,11 +119,6 @@ describe('ReactDOMInput', () => {
119
});
120
121
it('should control values in reentrant events with different targets', () => {
130
- // This must use the native event dispatching. If we simulate, we will
131
- // bypass the lazy event attachment system so we won't actually test this.
132
- var inputEvent = document.createEvent('Event');
133
- inputEvent.initEvent('input', true, true);
134
-
122
class ControlledInputs extends React.Component {
123
state = {value: 'lion'};
124
a = null;
@@ -164,11 +151,10 @@ describe('ReactDOMInput', () => {
151
// We need it to be in the body to test native event dispatching.
152
document.body.appendChild(container);
153
167
- // Simulate a native keyup event
168
- setUntrackedValue(instance.a, 'giraffe');
169
- instance.a.dispatchEvent(inputEvent);
170
-
171
- // These should now both have been restored to their controlled value.
154
+ setUntrackedValue.call(instance.a, 'giraffe');
155
+ // This must use the native event dispatching. If we simulate, we will
156
+ // bypass the lazy event attachment system so we won't actually test this.
157
+ dispatchEventOnNode(instance.a, 'input');
158
159
expect(instance.a.value).toBe('lion');
160
expect(instance.b.checked).toBe(true);
@@ -604,7 +590,7 @@ describe('ReactDOMInput', () => {
590
var container = document.createElement('div');
591
var node = ReactDOM.render(stub, container);
592
607
- setUntrackedValue(node, 'giraffe');
593
+ setUntrackedValue.call(node, 'giraffe');
594
595
var fakeNativeEvent = function() {};
596
fakeNativeEvent.target = node;