fixes #816 properly fire change events for react email + number inputs (

#846)
cypress-io · Oct 30, 2017 · bbaedcc · bbaedcc
1 parent ad50516
commit bbaedcc
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 13 deletions.
diff --git a/packages/driver/test/cypress/fixtures/react-15.html b/packages/driver/test/cypress/fixtures/react-15.html
@@ -11,7 +11,18 @@
       window.onChangeEvents = 0
 
       ReactDOM.render(React.createElement('div', {},
-        React.createElement('input', { onChange (e) { window.onChangeEvents++ } })
+        React.createElement('input', {
+          type: 'text',
+          onChange (e) { window.onChangeEvents++ }
+        }),
+        React.createElement('input', {
+          type: 'email',
+          onChange (e) { window.onChangeEvents++ }
+        }),
+        React.createElement('input', {
+          type: 'number',
+          onChange (e) { window.onChangeEvents++ }
+        })
       ), document.getElementById('react-container'))
   </script>
 </body>
diff --git a/packages/driver/test/cypress/fixtures/react-16.html b/packages/driver/test/cypress/fixtures/react-16.html
@@ -11,7 +11,18 @@
       window.onChangeEvents = 0
 
       ReactDOM.render(React.createElement('div', {},
-        React.createElement('input', { onChange (e) { window.onChangeEvents++ } })
+        React.createElement('input', {
+          type: 'text',
+          onChange (e) { window.onChangeEvents++ }
+        }),
+        React.createElement('input', {
+          type: 'email',
+          onChange (e) { window.onChangeEvents++ }
+        }),
+        React.createElement('input', {
+          type: 'number',
+          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
@@ -1,6 +1,19 @@
 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)
+  context "fires onChange events", ->
+    beforeEach ->
+      cy.visit("/fixtures/react-15.html")
+
+    it "input", ->
+      cy
+        .get("#react-container input[type=text]").type("foo").blur()
+        .window().its("onChangeEvents").should("eq", 3)
+
+    it "email", ->
+      cy
+        .get("#react-container input[type=email]").type("foo").blur()
+        .window().its("onChangeEvents").should("eq", 3)
+
+    it "number", ->
+      cy
+        .get("#react-container input[type=number]").type("123").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
@@ -1,6 +1,19 @@
 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)
+  context "fires onChange events", ->
+    beforeEach ->
+      cy.visit("/fixtures/react-16.html")
+
+    it "input", ->
+      cy
+        .get("#react-container input[type=text]").type("foo").blur()
+        .window().its("onChangeEvents").should("eq", 3)
+
+    it "email", ->
+      cy
+        .get("#react-container input[type=email]").type("foo").blur()
+        .window().its("onChangeEvents").should("eq", 3)
+
+    it "number", ->
+      cy
+        .get("#react-container input[type=number]").type("123").blur()
+        .window().its("onChangeEvents").should("eq", 3)
diff --git a/packages/driver/vendor/bililiteRange.js b/packages/driver/vendor/bililiteRange.js
@@ -702,7 +702,15 @@ NothingRange.prototype._nativeGetText = function (rng){
 };
 NothingRange.prototype._nativeSetText = function (text, rng){
   var val = this._el[this._textProp];
-  this._el[this._textProp] = val.substring(0, rng[0]) + text + val.substring(rng[1]);
+
+  var newVal = val.substring(0, rng[0]) + text + val.substring(rng[1])
+
+  if (this._textProp === "value") {
+    setValue(this._el, newVal)
+  } else {
+    this._el[this._textProp] = newVal
+  }
+
 };
 NothingRange.prototype._nativeEOL = function(){
   this.text('\n');