FIX Behat test for badges

client/lang/en.js

@@ -22,7 +22,6 @@ if (typeof(ss) === 'undefined' || typeof(ss.i18n) === 'undefined') {
     "ElementHeader.STATE_MODIFIED": "Item has unpublished changes",
     "ElementHeader.BADGE_DRAFT": "Draft",
     "ElementHeader.BADGE_MODIFIED": "Modified",
-    "ElementHeader.BADGE_UNSAVED": "Unsaved",
     "ElementList.ADD_BLOCKS": "Add blocks to place your content",
     "ElementPublishAction.ERROR_NOTIFICATION": "Error publishing '{title}'",
     "ElementPublishAction.PUBLISH": "Publish",

client/src/components/ElementEditor/Header.js

@@ -92,21 +92,17 @@ class Header extends Component {
   renderVersionedStateMessage() {
     const {
       element: { isLiveVersion, isPublished },
-      formDirty,
     } = this.props;
 
     // No indication required for published elements
-    if (!formDirty && isPublished && isLiveVersion) {
+    if (isPublished && isLiveVersion) {
       return null;
     }
 
     let versionStateButtonTitle = '';
     const stateClassNames = ['element-editor-header__version-state'];
 
-    if (formDirty) {
-      versionStateButtonTitle = i18n._t('ElementHeader.STATE_UNSAVED', 'Item has unsaved changes');
-      stateClassNames.push('element-editor-header__version-state--unsaved');
-    } else if (!isPublished) {
+    if (!isPublished) {
       versionStateButtonTitle = i18n._t('ElementHeader.STATE_DRAFT', 'Item has not been published yet');
       stateClassNames.push('element-editor-header__version-state--draft');
     } else if (!isLiveVersion) {
@@ -125,23 +121,18 @@ class Header extends Component {
   renderStatusBadge() {
     const {
       element: { isLiveVersion, isPublished },
-      formDirty,
     } = this.props;
 
     // No indication required for published elements
-    if (!formDirty && isPublished && isLiveVersion) {
+    if (isPublished && isLiveVersion) {
       return null;
     }
 
     let versionStateTitle = '';
     let versionStateButtonTitle = '';
     const stateClassNames = ['badge'];
 
-    if (formDirty) {
-      versionStateTitle = i18n._t('ElementHeader.BADGE_UNSAVED', 'Unsaved');
-      versionStateButtonTitle = i18n._t('ElementHeader.STATE_UNSAVED', 'Item has unsaved changes');
-      stateClassNames.push('status-unsaved');
-    } else if (!isPublished) {
+    if (!isPublished) {
       versionStateTitle = i18n._t('ElementHeader.BADGE_DRAFT', 'Draft');
       versionStateButtonTitle = i18n._t('ElementHeader.STATE_DRAFT', 'Item has not been published yet');
       stateClassNames.push('status-addedtodraft');
@@ -258,7 +249,7 @@ Header.propTypes = {
   ElementActionsComponent: PropTypes.elementType,
   previewExpanded: PropTypes.bool,
   disableTooltip: PropTypes.bool,
-  formDirty: PropTypes.bool,
+  formDirty: PropTypes.bool, // eslint-disable-line
   connectDragSource: PropTypes.func.isRequired,
   connectDragPreview: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func, // eslint-disable-line react/no-unused-prop-types

client/src/components/ElementEditor/tests/Header-test.js

@@ -220,27 +220,8 @@ test('Header should not render a versioned state message when the element is pub
   expect(container.querySelectorAll('.element-editor-header__version-state')).toHaveLength(0);
 });
 
-test('Header should render a versioned unsaved badge when the element is new and is not saved', () => {
-  const { container } = render(<Header {...makeProps({
-    formDirty: true,
-    element: {
-      id: '14',
-      isPublished: false,
-      liveVersion: false
-    }
-  })}
-  />);
-  expect(
-    container
-      .querySelector('.element-editor-header__info')
-      .querySelector('.badge.status-unsaved')
-      .getAttribute('title')
-  ).toContain('Item has unsaved changes');
-});
-
 test('Header should render a versioned draft badge when the element is not published', () => {
   const { container } = render(<Header {...makeProps({
-    formDirty: false,
     element: {
       id: '14',
       isPublished: false,
@@ -258,7 +239,6 @@ test('Header should render a versioned draft badge when the element is not publi
 
 test('Header should render a versioned modified badge when the element is modified and not published', () => {
   const { container } = render(<Header {...makeProps({
-    formDirty: false,
     element: {
       id: '14',
       isPublished: true,

tests/Behat/features/validation-failure.feature

@@ -9,7 +9,7 @@ Feature: Don't lose content when page or block is invalid
       And a "page" "Blocks Page" with a "Alice's Block" content element with "original content" content
       And the "group" "EDITOR" has permissions "Access to 'Pages' section"
       And I am logged in as a member of "EDITOR" group
-
+@test
   # The "unsaved changes" dialog causes errors unless this is tagged with "@unsavedChanges"
   @unsavedChanges
   Scenario: If a page is invalid, changes aren't lost
@@ -18,18 +18,18 @@ Feature: Don't lose content when page or block is invalid
       And I left click on "Blocks Page" in the tree
     Then I should see a list of blocks
       And I should see "Alice's Block"
-      And I should not see the ".element-editor-header__version-state--unsaved" element
+      And I should see the ".element-editor-header__version-state--draft" element
     When I click on the caret button for block 1
       And I fill in "<p>New sample content</p>" for "Content" for block 1
       And I fill in "Charlie's Block" for "Title" for block 1
       And I press the "Save" button
     Then I should see a "Validation error" error toast
       And I should see "Page is invalid"
-      And I should see the ".element-editor-header__version-state--unsaved" element
+      And I should see the ".element-editor-header__version-state--draft" element
     When I click on the caret button for block 1
     Then the "Content" field for block 1 should contain "New sample content"
       And the "Title" field for block 1 should contain "Charlie's Block"
-      And I should see the ".element-editor-header__version-state--unsaved" element
+      And I should see the ".element-editor-header__version-state--draft" element
 
   @unsavedChanges
   Scenario: If a block is invalid, changes aren't lost
@@ -38,15 +38,15 @@ Feature: Don't lose content when page or block is invalid
       And I left click on "Blocks Page" in the tree
     Then I should see a list of blocks
       And I should see "Alice's Block"
-      And I should not see the ".element-editor-header__version-state--unsaved" element
+      And I should see the ".element-editor-header__version-state--draft" element
     When I click on the caret button for block 1
       And I fill in "<p>New sample content</p>" for "Content" for block 1
       And I fill in "Charlie's Block" for "Title" for block 1
       And I press the "Save" button
     Then I should see a "Validation error" error toast
       And I should see "ElementContent is invalid"
-      And I should see the ".element-editor-header__version-state--unsaved" element
+      And I should see the ".element-editor-header__version-state--draft" element
     When I click on the caret button for block 1
     Then the "Content" field for block 1 should contain "New sample content"
       And the "Title" field for block 1 should contain "Charlie's Block"
-      And I should see the ".element-editor-header__version-state--unsaved" element
+      And I should see the ".element-editor-header__version-state--draft" element

tests/Behat/features/versioned-status-block-element.feature

@@ -0,0 +1,45 @@
+@javascript
+Feature: Add elements in the CMS and see currunt status of elements
+  As a CMS user
+  I want to see versined status of Element blocks
+
+  Background:
+    Given I add an extension "DNADesign\Elemental\Extensions\ElementalPageExtension" to the "Page" class
+      And a "page" "Blocks Page"
+      And the "group" "EDITOR" has permissions "Access to 'Pages' section"
+      And I am logged in as a member of "EDITOR" group
+      # Remove with 'And I click "Blocks Page" in the ".breadcrumbs-wrapper" element' once the ElementalArea refreshes,
+      # See https://github.com/dnadesign/silverstripe-elemental/issues/320
+      And I go to "/admin/pages"
+      And I left click on "Blocks Page" in the tree
+
+  # Test that the versioned badge is shown when there are some changes in the block
+  Scenario: I can add elements to the page and see versioned badge
+    Then I press the "Add block" button
+    Then I press the "Content" button in the add block popover
+    Then I should see "Untitled Content block" as the title for block 1
+
+    # Block 1 is not published or saved yet, so it should be draft
+    And I should see "Draft" in the ".element-editor-header__info .badge" element
+    Then I click on block 1
+    Then I fill in "<p>New Content</p>" for "Content" for block 1
+    Then I press the "Publish" button
+    And I wait 1 second
+
+    # Block 1 is published, so it should not have a badge
+    Then I should not see a ".element-editor-header__info .badge" element
+    Then I click on block 1
+    Then I fill in "<p>Updated Content</p>" for "Content" for block 1
+
+    # Block 1 is modified and has unsaved changes, so it should not have a badge
+    And I should not see a ".element-editor-header__info .badge" element
+    Then I press the "Save" button
+    And I wait 1 second
+
+    # Block 1 is modified and has saved changes, so it should be modified
+    And I should see "Modified" in the ".element-editor-header__info .badge" element
+    And I wait 1 second
+    Then I press the "Publish" button
+
+    # Block 1 is published, so it should not have a badge
+    And I should not see a ".element-editor-header__info .badge" element