Remove old IE polyfill code (#10238)
* Upgrade DOM Fixtures Upgrade to react-scripts v1 and include required polyfills for older browsers * Remove ChangeEvent polyfills for unsupported browsers
Jason Quense committed
Aug 3, 2017 at 08:45 UTC
0b220d0f04c9fea472c7cf8a7837322388728ca6
21 files changed
+191
-253
fixtures/dom/package.json
+3
-2
@@ -3,12 +3,13 @@
3
"version": "0.1.0",
4
"private": true,
5
"devDependencies": {
6
- "react-scripts": "0.9.5"
6
+ "react-scripts": "1.0.0"
7
},
8
"dependencies": {
9
"classnames": "^2.2.5",
10
- "query-string": "^4.2.3",
10
+ "core-js": "^2.4.1",
11
"prop-types": "^15.5.6",
12
+ "query-string": "^4.2.3",
13
"react": "^15.4.1",
14
"react-dom": "^15.4.1",
15
"semver": "^5.3.0"
fixtures/dom/public/index.html
-1
@@ -15,7 +15,6 @@
15
-->
16
<title>React App</title>
17
<script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
18
- <script src="react-loader.js"></script>
18
</head>
19
<body>
20
<div id="root"></div>
fixtures/dom/public/react-loader.js
deleted
-43
@@ -1,43 +0,0 @@
1
-/**
2
- * Take a version from the window query string and load a specific
3
- * version of React.
4
- *
5
- * @example
6
- * http://localhost:3000?version=15.4.1
7
- * (Loads React 15.4.1)
8
- */
9
-
10
-var REACT_PATH = 'react.development.js';
11
-var DOM_PATH = 'react-dom.development.js';
12
-
13
-function parseQuery(qstr) {
14
- var query = {};
15
-
16
- var a = qstr.substr(1).split('&');
17
-
18
- for (var i = 0; i < a.length; i++) {
19
- var b = a[i].split('=');
20
-
21
- query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
22
- }
23
-
24
- return query;
25
-}
26
-
27
-var query = parseQuery(window.location.search);
28
-var version = query.version || 'local';
29
-
30
-if (version !== 'local') {
31
- REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.js';
32
- DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
33
-}
34
-
35
-document.write('<script src="' + REACT_PATH + '"></script>');
36
-
37
-// Versions earlier than 14 do not use ReactDOM
38
-if (version === 'local' || parseFloat(version, 10) > 0.13) {
39
- document.write('<script src="' + DOM_PATH + '"></script>');
40
-} else {
41
- // Aliasing React to ReactDOM for compatibility.
42
- document.write('<script>ReactDOM = React</script>');
43
-}
fixtures/dom/src/components/App.js
+2
-2
@@ -1,9 +1,9 @@
1
-const React = window.React;
1
import Header from './Header';
2
import Fixtures from './fixtures';
4
-
3
import '../style.css';
4
5
+const React = window.React;
6
+
7
function App() {
8
return (
9
<div>
fixtures/dom/src/components/fixtures/buttons/index.js
+2
-2
@@ -1,8 +1,8 @@
1
-const React = window.React;
2
-
1
import FixtureSet from '../../FixtureSet';
2
import TestCase from '../../TestCase';
3
4
+const React = window.React;
5
+
6
function onButtonClick() {
7
window.alert(`This shouldn't have happened!`);
8
}
fixtures/dom/src/components/fixtures/error-handling/index.js
+2
-2
@@ -1,8 +1,8 @@
1
-const React = window.React;
2
-
1
import FixtureSet from '../../FixtureSet';
2
import TestCase from '../../TestCase';
3
4
+const React = window.React;
5
+
6
function BadRender(props) {
7
throw props.error;
8
}
fixtures/dom/src/components/fixtures/index.js
+3
-2
@@ -1,4 +1,3 @@
1
-const React = window.React;
1
import RangeInputFixtures from './range-inputs';
2
import TextInputFixtures from './text-inputs';
3
import SelectFixtures from './selects';
@@ -10,6 +9,8 @@ import ButtonFixtures from './buttons';
9
import DateInputFixtures from './date-inputs';
10
import ErrorHandling from './error-handling';
11
12
+const React = window.React;
13
+
14
/**
15
* A simple routing component that renders the appropriate
16
* fixture based on the location pathname.
@@ -41,4 +42,4 @@ function FixturesPage() {
42
}
43
}
44
44
-module.exports = FixturesPage;
45
+export default FixturesPage;
fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js
+2
-2
@@ -1,7 +1,7 @@
1
-const React = window.React;
2
-
1
import Fixture from '../../Fixture';
2
3
+const React = window.React;
4
+
5
class NumberInputDecimal extends React.Component {
6
state = {value: '.98'};
7
changeValue = () => {
fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js
+2
-2
@@ -1,7 +1,7 @@
1
-const React = window.React;
2
-
1
import Fixture from '../../Fixture';
2
3
+const React = window.React;
4
+
5
class NumberInputExtraZeroes extends React.Component {
6
state = {value: '3.0000'};
7
changeValue = () => {
fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
+2
-2
@@ -1,7 +1,7 @@
1
-const React = window.React;
2
-
1
import Fixture from '../../Fixture';
2
3
+const React = window.React;
4
+
5
class NumberTestCase extends React.Component {
6
state = {value: ''};
7
onChange = event => {
fixtures/dom/src/components/fixtures/number-inputs/index.js
+2
-2
@@ -1,11 +1,11 @@
1
-const React = window.React;
2
-
1
import FixtureSet from '../../FixtureSet';
2
import TestCase from '../../TestCase';
3
import NumberTestCase from './NumberTestCase';
4
import NumberInputDecimal from './NumberInputDecimal';
5
import NumberInputExtraZeroes from './NumberInputExtraZeroes';
6
7
+const React = window.React;
8
+
9
function NumberInputs() {
10
return (
11
<FixtureSet
fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
+2
-2
@@ -1,7 +1,7 @@
1
-const React = window.React;
2
-
1
import Fixture from '../../Fixture';
2
3
+const React = window.React;
4
+
5
class PasswordTestCase extends React.Component {
6
state = {value: ''};
7
onChange = event => {
fixtures/dom/src/components/fixtures/password-inputs/index.js
+2
-2
@@ -1,9 +1,9 @@
1
-const React = window.React;
2
-
1
import FixtureSet from '../../FixtureSet';
2
import TestCase from '../../TestCase';
3
import PasswordTestCase from './PasswordTestCase';
4
5
+const React = window.React;
6
+
7
function NumberInputs() {
8
return (
9
<FixtureSet title="Password inputs" description="">
fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js
+1
-2
@@ -1,6 +1,5 @@
1
-const React = window.React;
2
-
1
import Fixture from '../../Fixture';
2
+const React = window.React;
3
4
class InputTestCase extends React.Component {
5
static defaultProps = {
fixtures/dom/src/components/fixtures/text-inputs/index.js
+3
-3
@@ -1,10 +1,10 @@
1
-const React = window.React;
2
-
1
import Fixture from '../../Fixture';
2
import FixtureSet from '../../FixtureSet';
3
import TestCase from '../../TestCase';
4
import InputTestCase from './InputTestCase';
5
6
+const React = window.React;
7
+
8
class TextInputFixtures extends React.Component {
9
render() {
10
return (
@@ -93,4 +93,4 @@ class TextInputFixtures extends React.Component {
93
}
94
}
95
96
-module.exports = TextInputFixtures;
96
+export default TextInputFixtures;
fixtures/dom/src/index.js
+10
-4
@@ -1,5 +1,11 @@
1
-const React = window.React;
2
-const ReactDOM = window.ReactDOM;
3
-import App from './components/App';
1
+import './polyfills';
2
+import loadReact from './react-loader';
3
5
-ReactDOM.render(<App />, document.getElementById('root'));
4
+loadReact().then(() => import('./components/App')).then(App => {
5
+ const {React, ReactDOM} = window;
6
+
7
+ ReactDOM.render(
8
+ React.createElement(App.default),
9
+ document.getElementById('root')
10
+ );
11
+});
fixtures/dom/src/polyfills.js
new
+35
@@ -0,0 +1,35 @@
1
+import 'core-js/es6/promise';
2
+import 'core-js/es6/set';
3
+import 'core-js/es6/map';
4
+
5
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
6
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
7
+
8
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
9
+// MIT license
10
+(function() {
11
+ var lastTime = 0;
12
+ var vendors = ['ms', 'moz', 'webkit', 'o'];
13
+ for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
14
+ window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
15
+ window.cancelAnimationFrame =
16
+ window[vendors[x] + 'CancelAnimationFrame'] ||
17
+ window[vendors[x] + 'CancelRequestAnimationFrame'];
18
+ }
19
+
20
+ if (!window.requestAnimationFrame)
21
+ window.requestAnimationFrame = function(callback, element) {
22
+ var currTime = new Date().getTime();
23
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
24
+ var id = window.setTimeout(function() {
25
+ callback(currTime + timeToCall);
26
+ }, timeToCall);
27
+ lastTime = currTime + timeToCall;
28
+ return id;
29
+ };
30
+
31
+ if (!window.cancelAnimationFrame)
32
+ window.cancelAnimationFrame = function(id) {
33
+ clearTimeout(id);
34
+ };
35
+})();
fixtures/dom/src/react-loader.js
new
+63
@@ -0,0 +1,63 @@
1
+/**
2
+ * Take a version from the window query string and load a specific
3
+ * version of React.
4
+ *
5
+ * @example
6
+ * http://localhost:3000?version=15.4.1
7
+ * (Loads React 15.4.1)
8
+ */
9
+
10
+function parseQuery(qstr) {
11
+ var query = {};
12
+ var a = qstr.substr(1).split('&');
13
+
14
+ for (var i = 0; i < a.length; i++) {
15
+ var b = a[i].split('=');
16
+ query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
17
+ }
18
+ return query;
19
+}
20
+
21
+function loadScript(src) {
22
+ let firstScript = document.getElementsByTagName('script')[0];
23
+ let scriptNode;
24
+
25
+ return new Promise((resolve, reject) => {
26
+ scriptNode = document.createElement('script');
27
+ scriptNode.async = 1;
28
+ scriptNode.src = src;
29
+
30
+ scriptNode.onload = () => resolve();
31
+ scriptNode.onerror = () => reject(new Error(`failed to load: ${src}`));
32
+
33
+ firstScript.parentNode.insertBefore(scriptNode, firstScript);
34
+ });
35
+}
36
+
37
+export default function loadReact() {
38
+ let REACT_PATH = 'react.development.js';
39
+ let DOM_PATH = 'react-dom.development.js';
40
+
41
+ let query = parseQuery(window.location.search);
42
+ let version = query.version || 'local';
43
+
44
+ if (version !== 'local') {
45
+ REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.js';
46
+ DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
47
+ }
48
+
49
+ const needsReactDOM = version === 'local' || parseFloat(version, 10) > 0.13;
50
+
51
+ let request = loadScript(REACT_PATH);
52
+
53
+ if (needsReactDOM) {
54
+ request = request.then(() => loadScript(DOM_PATH));
55
+ } else {
56
+ // Aliasing React to ReactDOM for compatibility.
57
+ request = request.then(() => {
58
+ window.ReactDOM = window.React;
59
+ });
60
+ }
61
+
62
+ return request;
63
+}
fixtures/dom/yarn.lock
+1
-1
@@ -1472,7 +1472,7 @@ core-js@^1.0.0:
1472
version "1.2.7"
1473
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
1474
1475
-core-js@^2.4.0:
1475
+core-js@^2.4.0, core-js@^2.4.1:
1476
version "2.4.1"
1477
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
1478
src/renderers/dom/shared/eventPlugins/ChangeEventPlugin.js
+49
-167
@@ -11,17 +11,14 @@
11
12
'use strict';
13
14
-var EventPluginHub = require('EventPluginHub');
14
var EventPropagators = require('EventPropagators');
15
var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
16
var ReactControlledComponent = require('ReactControlledComponent');
17
var ReactDOMComponentTree = require('ReactDOMComponentTree');
19
-var ReactGenericBatching = require('ReactGenericBatching');
18
var SyntheticEvent = require('SyntheticEvent');
19
+var getActiveElement = require('fbjs/lib/getActiveElement');
20
21
var inputValueTracking = require('inputValueTracking');
23
-var getEventTarget = require('getEventTarget');
24
-var isEventSupported = require('isEventSupported');
22
var isTextInputElement = require('isTextInputElement');
23
24
var eventTypes = {
@@ -43,6 +40,13 @@ var eventTypes = {
40
},
41
};
42
43
+function shouldUseChangeEvent(elem) {
44
+ var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
45
+ return (
46
+ nodeName === 'select' || (nodeName === 'input' && elem.type === 'file')
47
+ );
48
+}
49
+
50
function createAndAccumulateChangeEvent(inst, nativeEvent, target) {
51
var event = SyntheticEvent.getPooled(
52
eventTypes.change,
@@ -56,174 +60,53 @@ function createAndAccumulateChangeEvent(inst, nativeEvent, target) {
60
EventPropagators.accumulateTwoPhaseDispatches(event);
61
return event;
62
}
59
-/**
60
- * For IE shims
61
- */
62
-var activeElement = null;
63
-var activeElementInst = null;
64
-
65
-/**
66
- * SECTION: handle `change` event
67
- */
68
-function shouldUseChangeEvent(elem) {
69
- var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
70
- return (
71
- nodeName === 'select' || (nodeName === 'input' && elem.type === 'file')
72
- );
73
-}
63
75
-function manualDispatchChangeEvent(nativeEvent) {
76
- var event = createAndAccumulateChangeEvent(
77
- activeElementInst,
78
- nativeEvent,
79
- getEventTarget(nativeEvent),
80
- );
81
-
82
- // If change and propertychange bubbled, we'd just bind to it like all the
83
- // other events and have it go through ReactBrowserEventEmitter. Since it
84
- // doesn't, we manually listen for the events and so we have to enqueue and
85
- // process the abstract event manually.
86
- //
87
- // Batching is necessary here in order to ensure that all event handlers run
88
- // before the next rerender (including event handlers attached to ancestor
89
- // elements instead of directly on the input). Without this, controlled
90
- // components don't work properly in conjunction with event bubbling because
91
- // the component is rerendered and the value reverted before all the event
92
- // handlers can run. See https://github.com/facebook/react/issues/708.
93
- ReactGenericBatching.batchedUpdates(runEventInBatch, event);
94
-}
95
-
96
-function runEventInBatch(event) {
97
- EventPluginHub.enqueueEvents(event);
98
- EventPluginHub.processEventQueue(false);
99
-}
100
-
101
-function getInstIfValueChanged(targetInst) {
102
- const targetNode = ReactDOMComponentTree.getNodeFromInstance(targetInst);
64
+function getInstIfValueChanged(targetInst, targetNode) {
65
if (inputValueTracking.updateValueIfChanged(targetNode)) {
66
return targetInst;
67
}
68
}
69
108
-function getTargetInstForChangeEvent(topLevelType, targetInst) {
109
- if (topLevelType === 'topChange') {
110
- return targetInst;
111
- }
112
-}
113
-
70
/**
71
* SECTION: handle `input` event
72
*/
117
-var isInputEventSupported = false;
118
-if (ExecutionEnvironment.canUseDOM) {
119
- // IE9 claims to support the input event but fails to trigger it when
120
- // deleting text, so we ignore its input events.
121
- isInputEventSupported =
122
- isEventSupported('input') &&
123
- (!document.documentMode || document.documentMode > 9);
124
-}
73
126
-/**
127
- * (For IE <=9) Starts tracking propertychange events on the passed-in element
128
- * and override the value property so that we can distinguish user events from
129
- * value changes in JS.
130
- */
131
-function startWatchingForValueChange(target, targetInst) {
132
- activeElement = target;
133
- activeElementInst = targetInst;
134
- activeElement.attachEvent('onpropertychange', handlePropertyChange);
135
-}
136
-
137
-/**
138
- * (For IE <=9) Removes the event listeners from the currently-tracked element,
139
- * if any exists.
140
- */
141
-function stopWatchingForValueChange() {
142
- if (!activeElement) {
143
- return;
144
- }
145
- activeElement.detachEvent('onpropertychange', handlePropertyChange);
146
- activeElement = null;
147
- activeElementInst = null;
148
-}
149
-
150
-/**
151
- * (For IE <=9) Handles a propertychange event, sending a `change` event if
152
- * the value of the active element has changed.
153
- */
154
-function handlePropertyChange(nativeEvent) {
155
- if (nativeEvent.propertyName !== 'value') {
156
- return;
157
- }
158
- if (getInstIfValueChanged(activeElementInst)) {
159
- manualDispatchChangeEvent(nativeEvent);
160
- }
161
-}
162
-
163
-function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
164
- if (topLevelType === 'topFocus') {
165
- // In IE9, propertychange fires for most input events but is buggy and
166
- // doesn't fire when text is deleted, but conveniently, selectionchange
167
- // appears to fire in all of the remaining cases so we catch those and
168
- // forward the event if the value has changed
169
- // In either case, we don't want to call the event handler if the value
170
- // is changed from JS so we redefine a setter for `.value` that updates
171
- // our activeElementValue variable, allowing us to ignore those changes
172
- //
173
- // stopWatching() should be a noop here but we call it just in case we
174
- // missed a blur event somehow.
175
- stopWatchingForValueChange();
176
- startWatchingForValueChange(target, targetInst);
177
- } else if (topLevelType === 'topBlur') {
178
- stopWatchingForValueChange();
179
- }
74
+var isTextInputEventSupported = false;
75
+if (ExecutionEnvironment.canUseDOM) {
76
+ isTextInputEventSupported =
77
+ !document.documentMode || document.documentMode > 9;
78
}
79
182
-// For IE8 and IE9.
183
-function getTargetInstForInputEventPolyfill(topLevelType, targetInst) {
80
+function getTargetInstForInputEventPolyfill(
81
+ topLevelType,
82
+ targetInst,
83
+ targetNode,
84
+) {
85
if (
86
+ topLevelType === 'topInput' ||
87
+ topLevelType === 'topChange' ||
88
+ // These events catch anything the IE9 onInput misses
89
topLevelType === 'topSelectionChange' ||
90
topLevelType === 'topKeyUp' ||
91
topLevelType === 'topKeyDown'
92
) {
189
- // On the selectionchange event, the target is just document which isn't
190
- // helpful for us so just check activeElement instead.
191
- //
192
- // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
193
- // propertychange on the first input event after setting `value` from a
194
- // script and fires only keydown, keypress, keyup. Catching keyup usually
195
- // gets it and catching keydown lets us fire an event for the first
196
- // keystroke if user does a key repeat (it'll be a little delayed: right
197
- // before the second keystroke). Other input methods (e.g., paste) seem to
198
- // fire selectionchange normally.
199
- return getInstIfValueChanged(activeElementInst);
93
+ return getInstIfValueChanged(targetInst, targetNode);
94
}
95
}
96
203
-/**
204
- * SECTION: handle `click` event
205
- */
206
-function shouldUseClickEvent(elem) {
207
- // Use the `click` event to detect changes to checkbox and radio inputs.
208
- // This approach works across all browsers, whereas `change` does not fire
209
- // until `blur` in IE8.
210
- var nodeName = elem.nodeName;
211
- return (
212
- nodeName &&
213
- nodeName.toLowerCase() === 'input' &&
214
- (elem.type === 'checkbox' || elem.type === 'radio')
215
- );
216
-}
217
-
218
-function getTargetInstForClickEvent(topLevelType, targetInst) {
219
- if (topLevelType === 'topClick') {
220
- return getInstIfValueChanged(targetInst);
97
+function getTargetInstForInputOrChangeEvent(
98
+ topLevelType,
99
+ targetInst,
100
+ targetNode,
101
+) {
102
+ if (topLevelType === 'topInput' || topLevelType === 'topChange') {
103
+ return getInstIfValueChanged(targetInst, targetNode);
104
}
105
}
106
224
-function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
225
- if (topLevelType === 'topInput' || topLevelType === 'topChange') {
226
- return getInstIfValueChanged(targetInst);
107
+function getTargetInstForChangeEvent(topLevelType, targetInst, targetNode) {
108
+ if (topLevelType === 'topChange') {
109
+ return getInstIfValueChanged(targetInst, targetNode);
110
}
111
}
112
@@ -260,34 +143,33 @@ function handleControlledInputBlur(inst, node) {
143
var ChangeEventPlugin = {
144
eventTypes: eventTypes,
145
263
- _isInputEventSupported: isInputEventSupported,
264
-
265
- extractEvents: function(
266
- topLevelType,
267
- targetInst,
268
- nativeEvent,
269
- nativeEventTarget,
270
- ) {
146
+ extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
147
var targetNode = targetInst
148
? ReactDOMComponentTree.getNodeFromInstance(targetInst)
149
: window;
150
151
+ // On the selectionchange event, the target is the document which isn't
152
+ // helpful becasue we need the input, so we use the activeElement instead.
153
+ if (!isTextInputEventSupported && topLevelType === 'topSelectionChange') {
154
+ nativeEventTarget = targetNode = getActiveElement();
155
+
156
+ if (targetNode) {
157
+ targetInst = ReactDOMComponentTree.getInstanceFromNode(targetNode);
158
+ }
159
+ }
160
+
161
var getTargetInstFunc, handleEventFunc;
162
+
163
if (shouldUseChangeEvent(targetNode)) {
164
getTargetInstFunc = getTargetInstForChangeEvent;
278
- } else if (isTextInputElement(targetNode)) {
279
- if (isInputEventSupported) {
280
- getTargetInstFunc = getTargetInstForInputOrChangeEvent;
281
- } else {
282
- getTargetInstFunc = getTargetInstForInputEventPolyfill;
283
- handleEventFunc = handleEventsForInputEventPolyfill;
284
- }
285
- } else if (shouldUseClickEvent(targetNode)) {
286
- getTargetInstFunc = getTargetInstForClickEvent;
165
+ } else if (isTextInputElement(targetNode) && !isTextInputEventSupported) {
166
+ getTargetInstFunc = getTargetInstForInputEventPolyfill;
167
+ } else {
168
+ getTargetInstFunc = getTargetInstForInputOrChangeEvent;
169
}
170
171
if (getTargetInstFunc) {
290
- var inst = getTargetInstFunc(topLevelType, targetInst);
172
+ var inst = getTargetInstFunc(topLevelType, targetInst, targetNode);
173
if (inst) {
174
var event = createAndAccumulateChangeEvent(
175
inst,
src/renderers/dom/shared/eventPlugins/__tests__/ChangeEventPlugin-test.js
+5
-10
@@ -15,7 +15,6 @@ var React = require('react');
15
var ReactDOM = require('react-dom');
16
var ReactTestUtils = require('react-dom/test-utils');
17
// TODO: can we express this test with only public API?
18
-var ChangeEventPlugin = require('ChangeEventPlugin');
18
var inputValueTracking = require('inputValueTracking');
19
20
function getTrackedValue(elem) {
@@ -54,7 +53,7 @@ describe('ChangeEventPlugin', () => {
53
);
54
55
setUntrackedValue(input, true);
57
- ReactTestUtils.SimulateNative.click(input);
56
+ ReactTestUtils.SimulateNative.change(input);
57
58
expect(called).toBe(1);
59
});
@@ -103,12 +102,12 @@ describe('ChangeEventPlugin', () => {
102
);
103
104
input.checked = true;
106
- ReactTestUtils.SimulateNative.click(input);
105
+ ReactTestUtils.SimulateNative.change(input);
106
expect(called).toBe(0);
107
108
input.checked = false;
109
setTrackedValue(input, undefined);
111
- ReactTestUtils.SimulateNative.click(input);
110
+ ReactTestUtils.SimulateNative.change(input);
111
112
expect(called).toBe(1);
113
});
@@ -131,8 +130,8 @@ describe('ChangeEventPlugin', () => {
130
<input type="radio" onChange={cb} />,
131
);
132
setUntrackedValue(input, true);
134
- ReactTestUtils.SimulateNative.click(input);
135
- ReactTestUtils.SimulateNative.click(input);
133
+ ReactTestUtils.SimulateNative.change(input);
134
+ ReactTestUtils.SimulateNative.input(input);
135
expect(called).toBe(1);
136
});
137
@@ -182,10 +181,6 @@ describe('ChangeEventPlugin', () => {
181
expect(e.type).toBe('change');
182
}
183
185
- if (!ChangeEventPlugin._isInputEventSupported) {
186
- return;
187
- }
188
-
184
var input = ReactTestUtils.renderIntoDocument(
185
<input type="range" onChange={cb} />,
186
);