FIX Reinstate tab validation icons

.editorconfig

@@ -13,7 +13,7 @@ trim_trailing_whitespace = true
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{yml,js,json,css,scss,eslintrc}]
+[*.{yml,js,json,css,scss,eslintrc,feature}]
 indent_size = 2
 indent_style = space
 

.travis.yml

@@ -7,6 +7,7 @@ env:
   global:
     - COMPOSER_ROOT_VERSION="1.7.x-dev"
     - REQUIRE_RECIPE="4.7.x-dev"
+    - REQUIRE_FRAMEWORKTEST="0.4.0"
 
 # Using a manual jobs matrix in addition to jobs-fixed because there are:
 # - two different behat suites

behat.yml

@@ -11,6 +11,7 @@ default:
       paths:
         - '%paths.modules.admin%/tests/behat/features'
       contexts:
+        - SilverStripe\Admin\Tests\Behat\Context\AdminContext
         - SilverStripe\Framework\Tests\Behaviour\FeatureContext
         - SilverStripe\Framework\Tests\Behaviour\CmsFormsContext
         - SilverStripe\Framework\Tests\Behaviour\CmsUiContext

client/src/legacy/LeftAndMain.EditForm.js

@@ -168,7 +168,7 @@ $.entwine('ss', function($){
         }
 
         // Find tab-pane's with decedent validation .alert's
-        const $invalidTabPanes = this.find('.tab-pane .alert.error').closest('.tab-pane');
+        const $invalidTabPanes = this.find('.tab-pane .alert-danger, .tab-pane .alert.error').closest('.tab-pane');
         if (!$invalidTabPanes.length) {
           // If we are at this point it's probably a failed DataObject::validate()
           // where there was a general (non-field) error added via ValidationResult::addError()

composer.json

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

tests/behat/features/multitab-validation.feature

@@ -0,0 +1,55 @@
+Feature: Multi-tab page validation icons
+  As a content author
+  I want to see which tabs have form fields that failed validation
+  So that I know what I need to fix before saving
+
+  Background:
+    Given a "multi tab page" "My MultiTab Page"
+    And a "single tab page" "My SingleTab Page"
+
+  Scenario: I can see tab validation icons on mutli-tab pages
+    Given I am logged in with "ADMIN" permissions
+    And I go to "/admin/pages"
+    And I should see "My MultiTab Page" in the tree
+    And I click on "My MultiTab Page" in the tree
+    When I press the "Save" button
+    Then I can see the form validation error message
+    Then I should not see an invalid tab icon on the "Second" tab
+    Then I should see an invalid tab icon on the "Third" tab
+    Then I should see an invalid tab icon on the "Fourth" tab
+    When I click the "#tab-Root_Third" element
+    And I fill in "Third tab first field" with "abc"
+    When I press the "Save" button
+    Then I can see the form validation error message
+    Then I should not see an invalid tab icon on the "Second" tab
+    Then I should not see an invalid tab icon on the "Third" tab
+    Then I should see an invalid tab icon on the "Fourth" tab
+    When I click the "#tab-Root_Fourth" element
+    And I fill in "Fourth tab first field" with "def"
+    When I press the "Save" button
+    Then I can not see the form validation error message
+    Then I should not see an invalid tab icon on the "Second" tab
+    Then I should not see an invalid tab icon on the "Third" tab
+    Then I should not see an invalid tab icon on the "Fourth" tab
+    When I click the "#tab-Root_Second" element
+    And I fill in "Second tab first field" with "wrong value"
+    When I press the "Save" button
+    Then I can see the form validation error message
+    Then I should see an invalid tab icon on the "Second" tab
+    Then I should not see an invalid tab icon on the "Third" tab
+    Then I should not see an invalid tab icon on the "Fourth" tab
+    When I fill in "Second tab first field" with "222"
+    When I press the "Save" button
+    Then I can not see the form validation error message
+    Then I should not see an invalid tab icon on the "Second" tab
+    Then I should not see an invalid tab icon on the "Third" tab
+    Then I should not see an invalid tab icon on the "Fourth" tab
+
+  Scenario: Tab validation icons dont appear on pages with a single tab
+    Given I am logged in with "ADMIN" permissions
+    And I go to "/admin/pages"
+    And I should see "My SingleTab Page" in the tree
+    And I click on "My SingleTab Page" in the tree
+    When I press the "Save" button
+    Then I can see the form validation error message
+    And I should not see an invalid tab icon on the "Main Content" tab

tests/behat/src/AdminContext.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace SilverStripe\Admin\Tests\Behat\Context;
+
+use Behat\Behat\Context\Context;
+use SilverStripe\BehatExtension\Context\MainContextAwareTrait;
+
+class AdminContext implements Context
+{
+    use MainContextAwareTrait;
+
+    /**
+     * Example: I should see an invalid tab icon on the "Third" tab
+     * Example: I should not see an invalid tab icon on the "Second" tab
+     *
+     * @Then /^I should (not |)see an invalid tab icon on the "(.+?)" tab/
+     * @param string $not
+     * @param string $tabLabel
+     */
+    public function iShouldSeeAnInvalidTabIcon(string $not, string $tabLabel)
+    {
+        $id = str_replace('Main Content', 'Main', $tabLabel);
+        $id = str_replace(' ', '_', $id);
+        $id = "tab-Root_$id";
+        $selector = "[aria-labelledby=$id] .font-icon-attention-1";
+        $hiddenSelector = ".ss-tabset-tabshidden $selector";
+        $page = $this->getMainContext()->getSession()->getPage();
+        if ($not) {
+            $element = $page->find('css', $selector);
+            $hiddenElement = $page->find('css', $hiddenSelector);
+            $message = "Tab validation icon for $id is visible when it should not be";
+            assertTrue(is_null($element) || $hiddenElement, $message);
+        } else {
+            $element = $page->find('css', $selector);
+            assertNotNull($element, "Tab validation icon for $id was not found");
+        }
+    }
+
+    /**
+     * @When /^I can (not |)see the form validation error message$/
+     * @param $not
+     */
+    public function iCanSeeTheFormValidationErrorMessage($not)
+    {
+        $selector = '#Form_EditForm_error';
+        $text = 'There are validation errors on this page';
+        $page = $this->getMainContext()->getSession()->getPage();
+        $element = $page->find('css', $selector);
+        if ($not) {
+            if (is_null($element)) {
+                assertTrue(true);
+            } else {
+                $message = 'Form validation error message is present when it should not be';
+                assertFalse(strpos($element->getText(), $text), $message);
+            }
+        } else {
+            $message = sprintf('Element %s not found', $selector);
+            assertNotNull($element, $message);
+            assertTrue(strpos($element->getText(), $text) !== false, $message);
+        }
+    }
+
+    /**
+     * @When /^I click the "([^"]+)" element$/
+     * @param $selector
+     */
+    public function iClickTheElement($selector)
+    {
+        $page = $this->getMainContext()->getSession()->getPage();
+        $element = $page->find('css', $selector);
+        assertNotNull($element, sprintf('Element %s not found', $selector));
+        $element->click();
+    }
+}