From d0ec7ae37b9b25918ff0ec1e77534f664236687c Mon Sep 17 00:00:00 2001
From: Tan Nguyen <raucaixanh04@gmail.com>
Date: Wed, 31 Jul 2024 17:21:46 +0700
Subject: [PATCH] Added support for colour field (#258)

---
 README.md                          |  2 ++
 src/FieldTrait.php                 | 43 ++++++++++++++++++++++++++++++
 tests/behat/features/field.feature | 14 ++++++++++
 tests/behat/fixtures/relative.html |  4 +++
 4 files changed, 63 insertions(+)

diff --git a/README.md b/README.md
index 66e3855..5d7a521 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,8 @@ Modification of `behat.yml` configuration is not required.
 | `Then field :name :exists on the page`                                                                                       | Assert whether the field exists on the page using its id, name, label, or value.         |
 | `Then field :name is :disabled on the page`                                                                                  | Assert whether the field is disabled on the page.                                        |
 | `Then field :name should be :presence on the page and have state :state`                                                     | Assert whether the field exists on the page and has a specified state.                   |
+| `Then I fill color in :field for :value`                                                                                     | Fills value for color field.                                                             |
+| `Then color field :field value is :value`                                                                                    | Asserts that a color field has a value.                                                  |
 | &nbsp;                                                                                                                       |                                                                                          |
 | **[`FileDownloadTrait`](src/FileDownloadTrait.php) ([example](tests/behat/features/file-download.feature))**                 |                                                                                          |
 | `Then I download file from :url`                                                                                             | Download a file from the specified URL.                                                  |
diff --git a/src/FieldTrait.php b/src/FieldTrait.php
index 6c10f6f..6be2803 100644
--- a/src/FieldTrait.php
+++ b/src/FieldTrait.php
@@ -127,4 +127,47 @@ public function fieldAssertExistsState(string $field_name, string $presence, str
     }
   }
 
+  /**
+   * Fills value for color field.
+   *
+   * @When /^(?:|I )fill color in "(?P<field>(?:[^"]|\\")*)" with "(?P<value>(?:[^"]|\\")*)"$/
+   * @When /^(?:|I )fill color in "(?P<value>(?:[^"]|\\")*)" for "(?P<field>(?:[^"]|\\")*)"$/
+   */
+  public function fillColorField(string $field, string $value = NULL): mixed {
+    $js = <<<JS
+        (function() {
+            var element = document.querySelector('$field');
+            if (!element) {
+                throw new Error('Element not found: $field');
+            }
+            element.value = '$value';
+            var event = new Event('change', { bubbles: true });
+            element.dispatchEvent(event);
+        })();
+JS;
+    return $this->getSession()->evaluateScript($js);
+  }
+
+  /**
+   * Asserts that a color field has a value.
+   *
+   * @Then /^color field "(?P<field>(?:[^"]|\\")*)" value is "(?P<value>(?:[^"]|\\")*)"$/
+   */
+  public function assertColorFieldHasValue(string $field, string $value): void {
+    $js = <<<JS
+        (function() {
+            var element = document.querySelector('$field');
+            if (!element) {
+                throw new Error('Element not found: $field');
+            }
+            return element.value;
+        })();
+JS;
+    $actual = $this->getSession()->evaluateScript($js);
+
+    if ($actual != $value) {
+      throw new \Exception(sprintf('Color field "%s" expected a value "%s" but has a value "%s".', $field, $value, $actual));
+    }
+  }
+
 }
diff --git a/tests/behat/features/field.feature b/tests/behat/features/field.feature
index 39b5711..0734a7f 100644
--- a/tests/behat/features/field.feature
+++ b/tests/behat/features/field.feature
@@ -52,6 +52,20 @@ Feature: Check that FieldTrait works
       | field_random   | not present | active   |
       | field_random   | not present |          |
 
+  @api @javascript
+  Scenario: Assert fills in form color field with specified id|name|label|value.
+    Given I visit "/sites/default/files/relative.html#edit-color-input"
+    Then color field "#edit-color-input" value is "#000000"
+    And I fill color in "#edit-color-input" with "#ffffff"
+    Then color field "#edit-color-input" value is "#ffffff"
+
+  @api @javascript
+  Scenario: Assert fills in form color field with specified id|name|label|value.
+    Given I visit "/sites/default/files/relative.html#edit-color-input"
+    Then color field "#edit-color-input" value is "#000000"
+    And I fill color in "#ffffff" for "#edit-color-input"
+    Then color field "#edit-color-input" value is "#ffffff"
+
   @trait:FieldTrait
   Scenario: Assert that field exists on the page using id,name,label or value.
     Given some behat configuration
diff --git a/tests/behat/fixtures/relative.html b/tests/behat/fixtures/relative.html
index cd2ef53..a8c51ac 100644
--- a/tests/behat/fixtures/relative.html
+++ b/tests/behat/fixtures/relative.html
@@ -494,6 +494,10 @@
 </div>
 
 <button id="trigger-confirm" onclick="testConfirm()">Test confirm</button>
+<div>
+  <input type="color" id="edit-color-input" name="color_input" value="#000000" />
+  <label for="edit-color-input">Color</label>
+</div>
 
 <script>
   function testConfirm() {