driver: fix for react 16 no firing change events on inputs

- handle textarea’s too - TODO: check if <select> needs this as well
cypress-io · Oct 12, 2017 · 4a56ca8 · 4a56ca8
1 parent d9b1432
commit 4a56ca8
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 20 deletions.
diff --git a/packages/driver/src/cypress/keyboard.coffee b/packages/driver/src/cypress/keyboard.coffee
@@ -461,7 +461,6 @@ $Keyboard = {
       when "input"
         keys      = false
         otherKeys = false
-        simulated = true
 
     if otherKeys
       _.extend event, {
@@ -470,12 +469,6 @@ $Keyboard = {
       }
       @mixinModifiers(event)
 
-    ## fixes https://github.com/cypress-io/cypress/issues/536#issuecomment-308734118
-    if simulated
-      _.extend event, {
-        simulated: true
-      }
-
     if keys
       # special key like "{enter}" might have 'key = \n'
       # in which case the original intent will be in options.setKey

diff --git a/...s/driver/test/cypress/fixtures/react.html → ...river/test/cypress/fixtures/react-15.html b/...s/driver/test/cypress/fixtures/react.html → ...river/test/cypress/fixtures/react-15.html
@@ -5,10 +5,11 @@
 </head>
 <body>
   <div id="react-container"></div>
-  <script src="/node_modules/react/dist/react.js"></script>
-  <script src="/node_modules/react-dom/dist/react-dom.js"></script>
+  <script src="/node_modules/react@15.6.1/dist/react.js"></script>
+  <script src="/node_modules/react-dom@15.6.1/dist/react-dom.js"></script>
   <script>
       window.onChangeEvents = 0
+
       ReactDOM.render(React.createElement('div', {},
         React.createElement('input', { onChange (e) { window.onChangeEvents++ } })
       ), document.getElementById('react-container'))

diff --git a/packages/driver/test/cypress/fixtures/react-16.html b/packages/driver/test/cypress/fixtures/react-16.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>React</title>
+</head>
+<body>
+  <div id="react-container"></div>
+  <script src="/node_modules/react@16.0.0/umd/react.development.js"></script>
+  <script src="/node_modules/react-dom@16.0.0/umd/react-dom.development.js"></script>
+  <script>
+      window.onChangeEvents = 0
+
+      ReactDOM.render(React.createElement('div', {},
+        React.createElement('input', { onChange (e) { window.onChangeEvents++ } })
+      ), document.getElementById('react-container'))
+  </script>
+</body>
diff --git a/packages/driver/test/cypress/integration/e2e/react-15_spec.coffee b/packages/driver/test/cypress/integration/e2e/react-15_spec.coffee
@@ -0,0 +1,6 @@
+describe "react v15.6.0", ->
+  it "correctly fires onChange events", ->
+    cy
+      .visit("/fixtures/react-15.html")
+      .get("#react-container input").type("foo").blur()
+      .window().its("onChangeEvents").should("eq", 3)
diff --git a/packages/driver/test/cypress/integration/e2e/react-16_spec.coffee b/packages/driver/test/cypress/integration/e2e/react-16_spec.coffee
@@ -0,0 +1,6 @@
+describe "react v16.0.0", ->
+  it "correctly fires onChange events", ->
+    cy
+      .visit("/fixtures/react-16.html")
+      .get("#react-container input").type("foo").blur()
+      .window().its("onChangeEvents").should("eq", 3)
diff --git a/packages/driver/test/integration/react_spec.coffee b/packages/driver/test/integration/react_spec.coffee
diff --git a/packages/driver/vendor/bililiteRange.js b/packages/driver/vendor/bililiteRange.js
@@ -30,6 +30,20 @@
 // a bit of weirdness with IE11: using 'focus' is flaky, even if I'm not bubbling, as far as I can tell.
 var focusEvent = 'onfocusin' in document.createElement('input') ? 'focusin' : 'focus';
 
+// https://github.com/cypress-io/cypress/issues/647
+var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set
+
+var nativeTextareaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set
+
+function setValue (el, val) {
+  if (el.tagName.toLowerCase() === "input") {
+    return nativeInputValueSetter.call(el, val)
+  }
+
+  return nativeTextareaValueSetter.call(el, val)
+}
+
+
 // IE11 normalize is buggy (http://connect.microsoft.com/IE/feedback/details/809424/node-normalize-removes-text-if-dashes-are-present)
 var n = document.createElement('div');
 n.appendChild(document.createTextNode('x-'));
@@ -521,7 +535,7 @@ InputRange.prototype._nativeGetText = function(rng){
 };
 InputRange.prototype._nativeSetText = function(text, rng){
   var val = this._el.value;
-  this._el.value = val.substring(0, rng[0]) + text + val.substring(rng[1]);
+  setValue(this._el, val.substring(0, rng[0]) + text + val.substring(rng[1]));
 };
 InputRange.prototype._nativeEOL = function(){
   this.text('\n');
@@ -533,10 +547,10 @@ InputRange.prototype._nativeTop = function(rng){
   clone.style.position = 'absolute';
   this._el.parentNode.insertBefore(clone, this._el);
   clone.style.height = '1px';
-  clone.value = this._el.value.slice(0, rng[0]);
+  setValue(clone, this._el.value.slice(0, rng[0]));
   var top = clone.scrollHeight;
   // this gives the bottom of the text, so we have to subtract the height of a single line
-  clone.value = 'X';
+  setValue(clone, 'X');
   top -= clone.scrollHeight;
   clone.parentNode.removeChild(clone);
   return top;