Skip to content

Commit

Permalink
Added support for colour field (#258)
Browse files Browse the repository at this point in the history
  • Loading branch information
tannguyen04 committed Jul 31, 2024
1 parent 2237872 commit d0ec7ae
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
|   | |
| **[`FileDownloadTrait`](src/FileDownloadTrait.php) ([example](tests/behat/features/file-download.feature))** | |
| `Then I download file from :url` | Download a file from the specified URL. |
Expand Down
43 changes: 43 additions & 0 deletions src/FieldTrait.php
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

}
14 changes: 14 additions & 0 deletions tests/behat/features/field.feature
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions tests/behat/fixtures/relative.html
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down

0 comments on commit d0ec7ae

Please sign in to comment.