Merge pull request #1038 from creative-commoners/pulls/5.8/second-page-intial-visibility-hide

FIX Visibility of subsequent form fields and step buttons

.editorconfig

@@ -10,7 +10,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json,*.js,*.scss}]
+[{*.yml,package.json,*.js,*.scss,*.feature}]
 indent_size = 2
 
 # The indent size used in the package.json file cannot be changed:

.travis.yml

@@ -29,6 +29,12 @@ jobs:
         - REQUIRE_INSTALLER="4.7.x-dev"
         - PHPUNIT_TEST=1
         - PHPCS_TEST=1
+    - php: 7.3
+      env:
+        - DB=MYSQL
+        - REQUIRE_INSTALLER="4.7.x-dev"
+        - BEHAT_TEST=1
+        - BEHAT_SUITE="userforms"
     - php: 7.4
       env:
         - DB=MYSQL

behat.yml

@@ -0,0 +1,34 @@
+# Run asset-admin behat tests with this command (installed with silverstripe/installer)
+# Note that asset-admin behat tests require CMS module
+# ========================================================================= #
+# vendor/bin/selenium-server-standalone -Dwebdriver.firefox.bin="/Applications/Firefox31.app/Contents/MacOS/firefox-bin"
+# vendor/bin/serve --bootstrap-file vendor/silverstripe/cms/tests/behat/serve-bootstrap.php
+# vendor/bin/behat @asset-admin
+# ========================================================================= #
+default:
+  suites:
+    userforms:
+      paths:
+        - "%paths.modules.userforms%/tests/behat/features"
+      contexts:
+        - SilverStripe\UserForms\Tests\Behat\Context\FeatureContext
+        - SilverStripe\Framework\Tests\Behaviour\CmsFormsContext
+        - SilverStripe\Framework\Tests\Behaviour\CmsUiContext
+        - SilverStripe\BehatExtension\Context\BasicContext
+        - SilverStripe\BehatExtension\Context\EmailContext
+        - SilverStripe\BehatExtension\Context\LoginContext
+        -
+          SilverStripe\UserForms\Tests\Behat\Context\FixtureContext:
+            - "%paths.modules.userforms%/tests/behat/files/"
+  extensions:
+    SilverStripe\BehatExtension\Extension:
+      bootstrap_file: vendor/silverstripe/cms/tests/behat/serve-bootstrap.php
+      screenshot_path: "%paths.base%/artifacts/screenshots"
+      retry_seconds: 4 # default is 2
+    SilverStripe\BehatExtension\MinkExtension:
+      default_session: facebook_web_driver
+      javascript_session: facebook_web_driver
+      facebook_web_driver:
+        browser: chrome
+        wd_host: "http://127.0.0.1:9515" #chromedriver port
+      browser_name: chrome

code/Control/UserDefinedFormController.php

@@ -548,6 +548,7 @@ JS
             $operations = implode(" {$conjunction} ", $rule['operations']);
             $target = $rule['targetFieldID'];
             $holder = $rule['holder'];
+            $isFormStep = strpos($target, 'EditableFormStep') !== false;
 
             $result .= <<<EOS
 \n
@@ -562,8 +563,26 @@ JS
             {$holder}.{$rule['opposite']}.trigger('{$rule['holder_event_opposite']}');
         }
     });
+EOS;
+            if ($isFormStep) {
+                // Hide the step jump button if the FormStep has is initially hidden.
+                // This is particularly important beacause the next/prev page buttons logic is controlled by
+                // the visibility of the FormStep buttons
+                // The HTML for the FormStep buttons is defined in UserFormProgress.ss
+                $id = str_replace('#', '', $target);
+                $result .= <<<EOS
+    $('.step-button-wrapper[data-for="{$id}"]').addClass('hide');
+EOS;
+            } else {
+                // If a field's initial state is set to be hidden, a '.hide' class will be added to the field as well
+                // as the fieldholder. Afterwards, JS only removes it from the fieldholder, thus the field stays hidden.
+                // We'll update update the JS so that the '.hide' class is removed from the field from the beginning,
+                // though we need to ensure we don't do this on FormSteps (page breaks) otherwise we'll mistakenly
+                // target fields contained within the formstep
+                $result .= <<<EOS
     $("{$target}").find('.hide').removeClass('hide');
 EOS;
+            }
         }
 
         return $result;

composer.json

@@ -44,7 +44,8 @@
     "autoload": {
         "psr-4": {
             "SilverStripe\\UserForms\\": "code/",
-            "SilverStripe\\UserForms\\Tests\\": "tests/"
+            "SilverStripe\\UserForms\\Tests\\": "tests/php/",
+            "SilverStripe\\UserForms\\Tests\\Behat\\Context\\": "tests/behat/src/"
         }
     },
     "suggest": {

tests/behat/README.md

@@ -0,0 +1 @@
+See https://github.com/silverstripe-labs/silverstripe-behat-extension

tests/behat/features/next-form-step.feature

@@ -0,0 +1,21 @@
+@assets @retry
+Feature: Next form step for userforms
+  As a website user
+  I want to click to the next form step button to see the next form step
+
+  Background:
+    Given a userform with a hidden form step "My userform"
+
+  Scenario: Next step button does not navigate to hidden form steps
+    When I go to "/my-userform"
+      And I wait for 2 seconds
+      And the ".progress-title" element should contain "EditableFormStep_01"
+    When I click the ".step-button-next" element
+    Then the ".progress-title" element should contain "EditableFormStep_03"
+    When I click the ".step-button-prev" element
+      And I fill in "abc" for "EditableTextField_01"
+      And I click the ".step-button-next" element
+    Then the ".progress-title" element should contain "EditableFormStep_02"
+    # prevent the 'form has unsaved changes' alrt
+    When I click the ".step-button-prev" element
+      And I fill in "" for "EditableTextField_01"

tests/behat/files/testfile.txt

@@ -0,0 +1 @@
+abc

tests/behat/src/FeatureContext.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace SilverStripe\UserForms\Tests\Behat\Context;
+
+use SilverStripe\BehatExtension\Context\SilverStripeContext;
+
+class FeatureContext extends SilverStripeContext
+{
+}

tests/behat/src/FixtureContext.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace SilverStripe\UserForms\Tests\Behat\Context;
+
+use SilverStripe\BehatExtension\Context\FixtureContext as BaseFixtureContext;
+use SilverStripe\ORM\DataObject;
+use SilverStripe\UserForms\Model\EditableCustomRule;
+use SilverStripe\UserForms\Model\EditableFormField\EditableFormStep;
+use SilverStripe\UserForms\Model\EditableFormField\EditableTextField;
+use SilverStripe\UserForms\Model\UserDefinedForm;
+use SilverStripe\Versioned\Versioned;
+
+/**
+ * Context used to create fixtures in the SilverStripe ORM.
+ */
+class FixtureContext extends BaseFixtureContext
+{
+    /**
+     * @When /^I click the "([^"]+)" element$/
+     * @param $selector
+     */
+    public function iClickTheElement(string $selector): void
+    {
+        $page = $this->getMainContext()->getSession()->getPage();
+        $element = $page->find('css', $selector);
+        assertNotNull($element, sprintf('Element %s not found', $selector));
+        $element->click();
+    }
+
+    /**
+     * Example: Given a userform with a hidden form step "My userform"
+     *
+     * @Given /^a userform with a hidden form step "([^"]+)"$/
+     * @param string $udfTitle
+     */
+    public function stepCreateUserFormWithHiddenFormStep(string $udfTitle): void
+    {
+        /** @var UserDefinedForm|Versioned $udf */
+        /** @var EditableTextField $tf01 */
+        /** @var EditableFormStep $fs02 */
+        $udf = $this->getFixtureFactory()->createObject(UserDefinedForm::class, $udfTitle);
+        $this->createEditableFormField(EditableFormStep::class, 'EditableFormStep_01', $udf);
+        $tf01 = $this->createEditableFormField(EditableTextField::class, 'EditableTextField_01', $udf);
+        $fs02 = $this->createEditableFormField(EditableFormStep::class, 'EditableFormStep_02', $udf);
+        $this->createEditableFormField(EditableTextField::class, 'EditableTextField_02', $udf);
+        $fs02->ShowOnLoad = 0;
+        $fs02->write();
+        $this->createCustomRule('cr1', $fs02, $tf01);
+        $this->createEditableFormField(EditableFormStep::class, 'EditableFormStep_03', $udf);
+        $this->createEditableFormField(EditableTextField::class, 'EditableTextField_03', $udf);
+        $udf->publishRecursive();
+    }
+
+    private function createEditableFormField(string $class, string $id, UserDefinedForm $udf): DataObject
+    {
+        $field = $this->getFixtureFactory()->createObject($class, $id);
+        $field->Title = $id;
+        $field->Parent = $udf;
+        $field->write();
+        return $field;
+    }
+
+    private function createCustomRule(string $id, EditableFormStep $fs, EditableTextField $tf): EditableCustomRule
+    {
+        /** @var EditableCustomRule $rule */
+        $rule = $this->getFixtureFactory()->createObject(EditableCustomRule::class, $id);
+        $rule->Parent = $fs;
+        $rule->ConditionField = $tf;
+        $rule->Display = 'Show';
+        $rule->ConditionOption = 'IsNotBlank';
+        $rule->write();
+        return $rule;
+    }
+}