Fire input and change event on set for color input (#230)

* Fire input and change event on set for color input

Since a color input has to have its value set directly via javascript
(presumably because of the difficulty of interacting with the browser's
colour picker), the `change` and `input` events don't automatically
happen. This PR fires them manually.

Fixes #229

* chore: add changelog entry for color input events fix

---------

Co-authored-by: Dmitry Vorotilin <d.vorotilin@gmail.com>

Author: asilano

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Raise `ObsoleteNode` instead of silently acting on a node that got disconnected from the DOM between being found and being used [#239]
 - `Capybara::Cuprite::Node#send_keys` ignores empty or nil keys instead of raising, matching the Selenium and rack_test drivers [#313]
 - `switch_to_window` sends `Target.activateTarget` so Chrome reactivates the window's renderer immediately instead of leaving it backgrounded, which could stall the next input command for several seconds [#321]
+- `Node#set` fires `input` and `change` events for a `color` input, since its value can only be set via JavaScript and never gets them naturally [#229]
 
 ### Removed
 

lib/capybara/cuprite/node.rb

@@ -107,6 +107,8 @@ def set(value, options = {}) # rubocop:disable Metrics/CyclomaticComplexity, Met
             command(:select_file, files)
           when "color"
             node.evaluate("this.setAttribute('value', '#{value}')")
+            node.evaluate("this.dispatchEvent(new InputEvent('input'))")
+            node.evaluate("this.dispatchEvent(new Event('change', { bubbles: true }))")
           when "date"
             value = value.to_date.iso8601 if !value.is_a?(String) && value.respond_to?(:to_date)
             command(:set, value.to_s)

spec/features/session_spec.rb

@@ -270,6 +270,18 @@
           element.set("#ddeeff")
           expect(element.value).to eq("#ddeeff")
         end
+
+        it "fires the change event for a color input" do
+          element = @session.find(:css, "#change_me_color")
+          element.set("#ddeeff")
+          expect(@session.find(:css, "#changes").text).to eq("#ddeeff")
+        end
+
+        it "fires the input event for a color input" do
+          element = @session.find(:css, "#change_me_color")
+          element.set("#ddeeff")
+          expect(@session.find(:css, "#changes_on_input").text).to eq("#ddeeff")
+        end
       end
 
       # The time inputs are loading SVG icons as data: urls.

spec/support/public/test.js

@@ -34,6 +34,14 @@ $(function() {
       $("#changes_on_blur").text("Blur")
     })
 
+  $("#change_me_color")
+    .change(function(event) {
+      $("#changes").text($(this).val())
+    })
+    .bind("input", function(event) {
+      $("#changes_on_input").text($(this).val())
+    })
+
   $("#browser")
     .change(function(event) {
       $("#changes").text($(this).val())