diff --git a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php index 6816a95..7b166f8 100644 --- a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php +++ b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php @@ -58,6 +58,8 @@ public function buildForm(array $form, FormStateInterface $form_state) { 'value2' => 'Value 2', 'value3' => 'Value 3', ], + '#empty_value' => '_none', + '#empty_option' => '- None -', ]; $form['separator'] = [ diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php index c6d76c8..6e7b91d 100644 --- a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php +++ b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php @@ -2,6 +2,7 @@ namespace Drupal\FunctionalJavascriptTests\Core\Form; +use Behat\Mink\Element\DocumentElement; use Drupal\FunctionalJavascriptTests\JavascriptTestBase; /** @@ -23,186 +24,237 @@ public function testJavascriptStates() { $this->drupalGet('form-test/javascript-states-form'); $page = $this->getSession()->getPage(); - // Checkbox triggered states. - $this->assertTrue( - $page->findField('textfield_invisible_when_checkbox_trigger_checked')->isVisible(), - 'Field "textfield_invisible_when_checkbox_trigger_checked" is visible' - ); - $this->assertFalse( - $page->findField('textfield_in_details')->isVisible(), - 'Field "textfield_in_details" is not visible (details element collapsed)' - ); - - $page->checkField('checkbox_trigger'); - - $this->assertFalse( - $page->findField('textfield_invisible_when_checkbox_trigger_checked')->isVisible(), - 'Field "textfield_invisible_when_checkbox_trigger_checked" is not visible' - ); - $this->assertTrue( - $page->findField('textfield_in_details')->isVisible(), - 'Field "textfield_in_details" is visible (details element open)' - ); - - $page->uncheckField('checkbox_trigger'); - - // Textfield triggered states. - $this->assertTrue( - $page->findField('checkbox_unchecked_when_textfield_trigger_filled')->isChecked(), - 'Field "checkbox_unchecked_when_textfield_trigger_filled" is checked' - ); - - $page->fillField('textfield_trigger', 'filled'); - - $this->assertFalse( - $page->findField('checkbox_unchecked_when_textfield_trigger_filled')->isChecked(), - 'Field "checkbox_unchecked_when_textfield_trigger_filled" is not checked' - ); - - $page->fillField('textfield_trigger', ''); - - // Radios triggered states. - $this->assertFalse( - $page->findField('textfield_in_fieldset')->isVisible(), - 'Field "textfield_in_fieldset" is not visible (parent fieldset invisible)' - ); - - $page->selectFieldOption('radios_trigger', 'value2'); - - $this->assertTrue( - $page->findField('textfield_in_fieldset')->isVisible(), - 'Field "textfield_in_fieldset" is visible (parent fieldset visible)' - ); - - $page->selectFieldOption('radios_trigger', 'value1'); - - // Checkboxes triggered states. - $this->assertFalse( - $page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value2_checked" is not visible' - ); - $this->assertFalse( - $page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value3_checked" is not visible' - ); - - $page->checkField('checkboxes_trigger[value1]'); - - $this->assertFalse( - $page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value2_checked" is not visible' - ); - $this->assertFalse( - $page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value3_checked" is not visible' - ); - - $page->checkField('checkboxes_trigger[value2]'); - - $this->assertTrue( - $page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value2_checked" is visible' - ); - $this->assertFalse( - $page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value3_checked" is not visible' - ); - - $page->checkField('checkboxes_trigger[value3]'); - - $this->assertTrue( - $page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value2_checked" is visible' - ); - $this->assertTrue( - $page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value3_checked" is visible' - ); - - $page->uncheckField('checkboxes_trigger[value2]'); - - $this->assertFalse( - $page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value2_checked" is not visible' - ); - $this->assertTrue( - $page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible(), - 'Field "textfield_visible_when_checkboxes_trigger_value3_checked" is visible' - ); - - $page->uncheckField('checkboxes_trigger[value1]'); - $page->uncheckField('checkboxes_trigger[value2]'); - $page->uncheckField('checkboxes_trigger[value3]'); - - // Select triggered states. - $this->assertFalse( - $page->find('css', '#edit-item-visible-when-select-trigger-has-given-value')->isVisible(), - 'Field "edit-item-visible-when-select-trigger-has-given-value" is not visible' - ); - $this->assertFalse( - $page->findField('textfield_visible_when_select_trigger_has_given_value')->isVisible(), - 'Field "textfield_visible_when_select_trigger_has_given_value" is not visible' - ); - $this->assertFalse( - $page->findField('textfield_visible_when_select_trigger_has_given_value_or_another')->isVisible(), - 'Field "textfield_visible_when_select_trigger_has_given_value_or_another" is not visible' - ); - - $page->selectFieldOption('select_trigger', 'value2'); - - $this->assertTrue( - $page->find('css', '#edit-item-visible-when-select-trigger-has-given-value')->isVisible(), - 'Field "#edit-item-visible-when-select-trigger-has-given-value" is visible' - ); - $this->assertFalse( - $page->findField('textfield_visible_when_select_trigger_has_given_value')->isVisible(), - 'Field "textfield_visible_when_select_trigger_has_given_value" is not visible' - ); - $this->assertTrue( - $page->findField('textfield_visible_when_select_trigger_has_given_value_or_another')->isVisible(), - 'Field "textfield_visible_when_select_trigger_has_given_value_or_another" is visible' - ); - - $page->selectFieldOption('select_trigger', 'value3'); - - $this->assertFalse( - $page->find('css', '#edit-item-visible-when-select-trigger-has-given-value')->isVisible(), - 'Field "#edit-item-visible-when-select-trigger-has-given-value" is not visible' - ); - $this->assertTrue( - $page->findField('textfield_visible_when_select_trigger_has_given_value')->isVisible(), - 'Field "textfield_visible_when_select_trigger_has_given_value" is visible' - ); - $this->assertTrue( - $page->findField('textfield_visible_when_select_trigger_has_given_value_or_another')->isVisible(), - 'Field "textfield_visible_when_select_trigger_has_given_value_or_another" is visible' - ); - - $page->selectFieldOption('select_trigger', 'value1'); - - // Select + textfield triggered states. - // @todo Figure out why it's not working - $this->assertFalse( - $page->find('css', '#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled')->isVisible(), - 'Field "#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled" is not visible' - ); - - $page->selectFieldOption('select_trigger', 'value2'); - - $this->assertFalse( - $page->find('css', '#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled')->isVisible(), - 'Field "#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled" is not visible' - ); - - $page->fillField('textfield_trigger', 'filled'); - - $this->assertTrue( - $page->find('css', '#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled')->isVisible(), - 'Field "#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled" is visible' - ); - - $page->selectFieldOption('select_trigger', 'value1'); - $page->fillField('textfield_trigger', ''); + $this->_testCheckboxTriggeredElements($page); + $this->_testTextfieldTriggeredElements($page); + $this->_testRadiosTriggeredElements($page); + $this->_testCheckboxesTriggeredElements($page); + $this->_testSelectTriggeredElements($page); + $this->_testMultipleTriggeredElements($page); + } + + /** + * Test states of elements triggered by a checkbox element. + * + * @param \Behat\Mink\Element\DocumentElement $page + * @throws \Behat\Mink\Exception\ElementNotFoundException + */ + protected function _testCheckboxTriggeredElements(DocumentElement $page) { + $trigger = $page->findField('checkbox_trigger'); + + // Initial state: before the checkbox trigger is checked. + + // Test that the textfield is visible. + $this->assertTrue($page->findField('textfield_invisible_when_checkbox_trigger_checked')->isVisible()); + // Test that the details element is collapsed so the textfield inside is not + // visible. + $this->assertFalse($page->findField('textfield_in_details')->isVisible()); + + // Change state: check the checkbox. + $trigger->check(); + + // Test that the textfield is not visible anymore. + $this->assertFalse($page->findField('textfield_invisible_when_checkbox_trigger_checked')->isVisible()); + // Test that the details element is now open so the textfield inside is now + // visible. + $this->assertTrue($page->findField('textfield_in_details')->isVisible()); + + // Change back to the initial state to avoid issues running the next tests. + $trigger->uncheck(); + } + + /** + * Test states of elements triggered by a textfield element. + * + * @param \Behat\Mink\Element\DocumentElement $page + * @throws \Behat\Mink\Exception\ElementNotFoundException + */ + protected function _testTextfieldTriggeredElements(DocumentElement $page) { + $trigger = $page->findField('textfield_trigger'); + + // Initial state: before the textfield is filled. + + // Test that the checkbox is checked. + $this->assertTrue($page->findField('checkbox_unchecked_when_textfield_trigger_filled') + ->isChecked()); + + // Change state: fill the textfield. + $trigger->setValue('filled'); + + // Test that the checkbox is not checked anymore. + $this->assertFalse($page->findField('checkbox_unchecked_when_textfield_trigger_filled') + ->isChecked()); + + // Change back to the initial state to avoid issues running the next tests. + $trigger->setValue(''); + // We need to send a backspace hit to trigger JS events. + $trigger->keyUp(8); + } + + /** + * Test states of elements triggered by a radios element. + * + * @param \Behat\Mink\Element\DocumentElement $page + * @throws \Behat\Mink\Exception\ElementNotFoundException + */ + protected function _testRadiosTriggeredElements(DocumentElement $page) { + $trigger = $page->findField('radios_trigger'); + + // Initial state: before the radios is checked. + + // Test that the fieldset element is not visible so the textfield inside is + // not visible either. + $this->assertFalse($page->findField('textfield_in_fieldset')->isVisible()); + + // Change state: check the 'Value 2' radio. + $trigger->selectOption('value2'); + + // Test that the fieldset element is now visible so the textfield inside is + // also visible. + $this->assertTrue($page->findField('textfield_in_fieldset')->isVisible()); + + // Change back to the initial state to avoid issues running the next tests. + $trigger->selectOption('value1'); + } + + /** + * Test states of elements triggered by a checkboxes element. + * + * @param \Behat\Mink\Element\DocumentElement $page + * @throws \Behat\Mink\Exception\ElementNotFoundException + */ + protected function _testCheckboxesTriggeredElements(DocumentElement $page) { + $trigger1 = $page->findField('checkboxes_trigger[value1]'); + $trigger2 = $page->findField('checkboxes_trigger[value2]'); + $trigger3 = $page->findField('checkboxes_trigger[value3]'); + + // Initial state: before any of the checkboxes is checked. + + // Test that textfield dependant on checkbox 'value2' is not visible. + $this->assertFalse($page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible()); + // Test that textfield dependant on checkbox 'value3' is not visible. + $this->assertFalse($page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible()); + + // Change state: check the 'Value 1' checkbox. + $trigger1->check(); + + // Test that textfield dependant on checkbox 'value2' is still not visible. + $this->assertFalse($page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible()); + // Test that textfield dependant on checkbox 'value3' is still not visible. + $this->assertFalse($page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible()); + + // Change state: check the 'Value 2' checkbox. + $trigger2->check(); + + // Test that textfield dependant on checkbox 'value2' is now visible. + $this->assertTrue($page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible()); + // Test that textfield dependant on checkbox 'value3' is still not visible. + $this->assertFalse($page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible()); + + // Change state: check the 'Value 3' checkbox. + $trigger3->check(); + + // Test that textfield dependant on checkbox 'value2' is still visible. + $this->assertTrue($page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible()); + // Test that textfield dependant on checkbox 'value3' is now visible. + $this->assertTrue($page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible()); + + // Change state: uncheck the 'Value 2' checkbox. + $trigger2->uncheck(); + + // Test that textfield dependant on checkbox 'value2' is now invisible. + $this->assertFalse($page->findField('textfield_visible_when_checkboxes_trigger_value2_checked')->isVisible()); + // Test that textfield dependant on checkbox 'value3' is still visible. + $this->assertTrue($page->findField('textfield_visible_when_checkboxes_trigger_value3_checked')->isVisible()); + + // Change back to the initial state to avoid issues running the next tests. + $trigger1->uncheck(); + $trigger2->uncheck(); + $trigger3->uncheck(); + } + + /** + * Test states of elements triggered by a select element. + * + * @param \Behat\Mink\Element\DocumentElement $page + * @throws \Behat\Mink\Exception\ElementNotFoundException + */ + protected function _testSelectTriggeredElements(DocumentElement $page) { + $trigger = $page->findField('select_trigger'); + + // Initial state: before any option of the select box is selected. + + // Test that item element dependant on select 'Value 2' option is not + // visible. + $this->assertFalse($page->find('css', '#edit-item-visible-when-select-trigger-has-given-value')->isVisible()); + // Test that textfield dependant on select 'Value 3' option is not visible. + $this->assertFalse($page->findField('textfield_visible_when_select_trigger_has_given_value')->isVisible()); + // Test that textfield dependant on select 'Value 2' or 'Value 3' options is + // not visible. + $this->assertFalse($page->findField('textfield_visible_when_select_trigger_has_given_value_or_another')->isVisible()); + + // Change state: select the 'Value 2' option. + $trigger->setValue('value2'); + + // Test that item element dependant on select 'Value 2' option is now + // visible. + $this->assertTrue($page->find('css', '#edit-item-visible-when-select-trigger-has-given-value')->isVisible()); + // Test that textfield dependant on select 'Value 3' option is not visible. + $this->assertFalse($page->findField('textfield_visible_when_select_trigger_has_given_value')->isVisible()); + // Test that textfield dependant on select 'Value 2' or 'Value 3' options is + // now visible. + $this->assertTrue($page->findField('textfield_visible_when_select_trigger_has_given_value_or_another')->isVisible()); + + // Change state: select the 'Value 3' option. + $trigger->setValue('value3'); + + // Test that item element dependant on select 'Value 2' option is not + // visible anymore. + $this->assertFalse($page->find('css', '#edit-item-visible-when-select-trigger-has-given-value')->isVisible()); + // Test that textfield dependant on select 'Value 3' option is now visible. + $this->assertTrue($page->findField('textfield_visible_when_select_trigger_has_given_value')->isVisible()); + // Test that textfield dependant on select 'Value 2' or 'Value 3' options is + // still visible. + $this->assertTrue($page->findField('textfield_visible_when_select_trigger_has_given_value_or_another')->isVisible()); + + // Change back to the initial state to avoid issues running the next tests. + $trigger->setValue('_none'); + } + + /** + * Test states of elements triggered by a more than one element. + * + * @param \Behat\Mink\Element\DocumentElement $page + * @throws \Behat\Mink\Exception\ElementNotFoundException + */ + protected function _testMultipleTriggeredElements(DocumentElement $page) { + $selectTrigger = $page->findField('select_trigger'); + $textfieldTrigger = $page->findField('textfield_trigger'); + + // Initial state: before any option of the select box is selected. + + // Test that item element dependant on select 'Value 2' option and textfield + // is not visible. + $this->assertFalse($page->find('css', '#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled')->isVisible()); + + // Change state: select the 'Value 2' option. + $selectTrigger->setValue('value2'); + + // Test that item element dependant on select 'Value 2' option and textfield + // is still not visible. + $this->assertFalse($page->find('css', '#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled')->isVisible()); + + // Change state: fill the textfield. + $textfieldTrigger->setValue('filled'); + + // Test that item element dependant on select 'Value 2' option and textfield + // is now visible. + $this->assertTrue($page->find('css', '#edit-item-visible-when-select-trigger-has-given-value-and-textfield-trigger-filled')->isVisible()); + + // Change back to the initial state to avoid issues running the next tests. + $selectTrigger->setValue('_none'); + $textfieldTrigger->setValue(''); + // We need to send a backspace hit to trigger JS events. + $textfieldTrigger->keyUp(8); } }