diff --git a/ajax_example/src/Form/DynamicFormSections.php b/ajax_example/src/Form/DynamicFormSections.php index 3ea8978..826edd7 100644 --- a/ajax_example/src/Form/DynamicFormSections.php +++ b/ajax_example/src/Form/DynamicFormSections.php @@ -17,7 +17,7 @@ use Drupal\Core\Link; * configured. * * The third $no_js_use argument is strictly for demonstrating operation - * without javascript, without making the user/developer turn off javascript. + * without JavaScript, without making the user/developer turn off JavaScript. */ class DynamicFormSections extends FormBase { @@ -81,21 +81,21 @@ class DynamicFormSections extends FormBase { $form['question_type_submit'] = [ '#type' => 'submit', '#value' => t('Choose'), - '#attributes' => ['class' => ['ajax-example-hide']], + '#attributes' => ['class' => ['ajax-example-inline']], // No need to validate when submitting this. '#limit_validation_errors' => [], '#validate' => [], ]; - // This simply allows us to demonstrate no-javascript use without - // actually turning off javascript in the browser. Removing the #ajax - // element turns off AJAX behaviors on that element and as a result - // ajax.js doesn't get loaded. - if ($nojs == 'nojs') { + // This section allows us to demonstrate no-AJAX use without turning off + // javascript in the browser. + if ($nojs != 'nojs') { + // Allow JavaScript to hide the choose button if we're using AJAX. + $form['question_type_submit']['#attributes']['class'][] = 'ajax-example-hide'; + } + else { // Remove #ajax from the above, so it won't perform AJAX behaviors. unset($form['question_type_select']['#ajax']); - // Make sure question_type_submit isn't hidden by our JavaScript. - unset($form['question_type_submit']['#attributes']); } // This fieldset just serves as a container for the part of the form @@ -113,12 +113,12 @@ class DynamicFormSections extends FormBase { // no JavaScript, the form state will tell us what the user has selected // from the dropdown. We can look at the value of the dropdown to determine // which secondary form to display. - if (!empty($form_state->getValue('question_type_select'))) { + $question_type = $form_state->getValue('question_type_select'); + if (!empty($question_type) && $question_type !== 'Choose question style') { $form['questions_fieldset']['question'] = [ '#markup' => t('Who was the first president of the U.S.?'), ]; - $question_type = $form_state->getValue('question_type_select'); // Build up a secondary form, based on the type of question the user // chose. @@ -184,7 +184,6 @@ class DynamicFormSections extends FormBase { if ($form_state->getValue('submit') == 'Submit your answer') { $form_state->setRebuild(FALSE); $answer = $form_state->getValue('question'); - print_r($answers); // Special handling for the checkbox. if ($answer == 1 && $form['questions_fieldset']['question']['#type'] == 'checkbox') { $answer = $form['questions_fieldset']['question']['#title']; diff --git a/ajax_example/tests/src/Functional/DependentDropdownTest.php b/ajax_example/tests/src/Functional/DependentDropdownTest.php index 0947aee..11c131d 100644 --- a/ajax_example/tests/src/Functional/DependentDropdownTest.php +++ b/ajax_example/tests/src/Functional/DependentDropdownTest.php @@ -12,6 +12,8 @@ use Drupal\Tests\BrowserTestBase; * @group examples * * @ingroup ajax_example + * + * @see \Drupal\Tests\ajax_example\FunctionalJavascript\DependentDropdownTest */ class DependentDropdownTest extends BrowserTestBase { diff --git a/ajax_example/tests/src/Functional/DynamicFormSectionsTest.php b/ajax_example/tests/src/Functional/DynamicFormSectionsTest.php new file mode 100644 index 0000000..6403aa0 --- /dev/null +++ b/ajax_example/tests/src/Functional/DynamicFormSectionsTest.php @@ -0,0 +1,70 @@ +assertSession(); + $page = $this->getSession()->getPage(); + + // Get a URL object for the form, specifying no JS. + $dropdown_url = Url::fromRoute('ajax_example.dynamic_form_sections', ['nojs' => 'nojs']); + + // Get the form. + $this->drupalGet($dropdown_url); + // Check for the initial state. + $detail_children = $page->findAll('css', 'div.details-wrapper *'); + $this->assertEmpty($detail_children); + + // Go through the dropdown options. First outlier is 'Choose question style' + // which should have an empty details section. + $this->drupalPostForm($dropdown_url, ['question_type_select' => 'Choose question style'], 'Choose'); + $detail_children = $page->findAll('css', 'div.details-wrapper *'); + $this->assertEmpty($detail_children); + + // Cycle through the other dropdown values. + $question_styles = [ + 'Multiple Choice', + 'True/False', + 'Fill-in-the-blanks', + ]; + // These all add stuff to the details wrapper. + foreach ($question_styles as $question_style) { + $this->drupalPostForm($dropdown_url, ['question_type_select' => $question_style], 'Choose'); + $detail_children = $page->findAll('css', 'div.details-wrapper *'); + $this->assertNotEmpty($detail_children); + $this->drupalPostForm(NULL, ['question' => 'George Washington'], 'Submit your answer'); + $assert->pageTextContains('You got the right answer: George Washington'); + } + // One wrong answer to exercise that code path. + $this->drupalPostForm($dropdown_url, ['question_type_select' => 'Multiple Choice'], 'Choose'); + $detail_children = $page->findAll('css', 'div.details-wrapper *'); + $this->assertNotEmpty($detail_children); + $this->drupalPostForm(NULL, ['question' => 'Abraham Lincoln'], 'Submit your answer'); + $assert->pageTextContains('Sorry, your answer (Abraham Lincoln) is wrong'); + } + +} diff --git a/ajax_example/tests/src/FunctionalJavascript/DependentDropdownTest.php b/ajax_example/tests/src/FunctionalJavascript/DependentDropdownTest.php index da71968..8ab6422 100644 --- a/ajax_example/tests/src/FunctionalJavascript/DependentDropdownTest.php +++ b/ajax_example/tests/src/FunctionalJavascript/DependentDropdownTest.php @@ -9,6 +9,8 @@ use Drupal\FunctionalJavascriptTests\JavascriptTestBase; * Functional test of dependent dropdown example. * * @group ajax_example + * + * @see \Drupal\Tests\ajax_example\FunctionalJavascript\DependentDropdownTest */ class DependentDropdownTest extends JavascriptTestBase { diff --git a/ajax_example/tests/src/FunctionalJavascript/DynamicFormSectionsTest.php b/ajax_example/tests/src/FunctionalJavascript/DynamicFormSectionsTest.php new file mode 100644 index 0000000..539e34e --- /dev/null +++ b/ajax_example/tests/src/FunctionalJavascript/DynamicFormSectionsTest.php @@ -0,0 +1,67 @@ +assertSession(); + $page = $this->getSession()->getPage(); + + // Get a URL object for the form, specifying no JS. + $dropdown_url = Url::fromRoute('ajax_example.dynamic_form_sections', ['nojs' => 'ajax']); + + // Get the form. + $this->drupalGet($dropdown_url); + // Check for the initial state. + $this->assertEmpty($page->findAll('css', 'div.details-wrapper *')); + + // Cycle through the other dropdown values. + $question_styles = [ + 'Multiple Choice', + 'True/False', + 'Fill-in-the-blanks', + ]; + + // Check expectations against the details wrapper. + $question_type_dropdown = $page->findField('question_type_select'); + foreach ($question_styles as $question_style) { + $question_type_dropdown->setValue($question_style); + $assert->assertWaitOnAjaxRequest(); + $this->assertNotEmpty($page->findAll('css', 'div.details-wrapper *')); + } + // Prompt to choose question should remove the question. + $question_type_dropdown->setValue('Choose question style'); + $assert->assertWaitOnAjaxRequest(); + $this->assertEmpty($page->findAll('css', 'div.details-wrapper *')); + + // Submit the correct answers. + foreach ($question_styles as $question_style) { + $this->drupalGet($dropdown_url); + $question_type_dropdown->setValue($question_style); + $assert->assertWaitOnAjaxRequest(); + $this->drupalPostForm(NULL, ['question' => 'George Washington'], 'Submit your answer'); + $assert->pageTextContains('You got the right answer: George Washington'); + } + } + +}