Add Behat tests

behat.yml

@@ -10,14 +10,17 @@ default:
       paths:
         - %paths.modules.silverstripe-elemental%/tests/Behat/features
       contexts:
-        - SilverStripe\Framework\Tests\Behaviour\FeatureContext
+        - DNADesign\Elemental\Tests\Behat\Context\FeatureContext
         - SilverStripe\Framework\Tests\Behaviour\CmsFormsContext
         - SilverStripe\Framework\Tests\Behaviour\CmsUiContext
         - SilverStripe\BehatExtension\Context\BasicContext
         - SilverStripe\BehatExtension\Context\LoginContext
         -
-          SilverStripe\BehatExtension\Context\FixtureContext:
-            - %paths.modules.silverstripe-elemental%/tests/Behat/files/
+          DNADesign\Elemental\Tests\Behat\Context\FixtureContext:
+            - %paths.modules.silverstripe-elemental%/tests/Behat
+        -
+          SilverStripe\Framework\Tests\Behaviour\ConfigContext:
+            - %paths.modules.silverstripe-elemental%/tests/Behat/config
   extensions:
     SilverStripe\BehatExtension\MinkExtension:
       default_session: facebook_web_driver

client/src/components/ElementEditor/AddNewButton.js

@@ -77,7 +77,12 @@ class AddNewButton extends Component {
   render() {
     return (
       <InputGroup className="elemental-editor__add-new-block-control">
-        <Input type="select" className="no-change-track" onChange={this.handleTypeChange}>
+        <Input
+          type="select"
+          id="elemental-editor_add-new-block-control_select-dropdown"
+          className="no-change-track"
+          onChange={this.handleTypeChange}
+        >
           <option>{i18n._t('AddNewButton.SELECT', '(Select type to create)')}</option>
           {this.renderOptions()}
         </Input>

src/Extensions/ElementalAreasExtension.php

@@ -162,6 +162,7 @@ public function updateCMSFields(FieldList $fields)
                 continue;
             }
 
+            // Example: $eaRelationship = 'ElementalArea';
             $area = $this->owner->$eaRelationship();
 
             // if area isn't in the database then force a write so the blocks have a parent ID.

tests/Behat/Context/FeatureContext.php

@@ -0,0 +1,150 @@
+<?php
+namespace DNADesign\Elemental\Tests\Behat\Context;
+
+use Behat\Mink\Element\NodeElement;
+use SilverStripe\BehatExtension\Context\SilverStripeContext;
+
+if (!class_exists(SilverStripeContext::class)) {
+    return;
+}
+class FeatureContext extends SilverStripeContext
+{
+    /**
+     * @Then I should see a list of blocks
+     */
+    public function iShouldSeeAListOfBlocks()
+    {
+        assertNotEmpty($this->getBlocks());
+    }
+
+    /**
+     * @Then I should see block :position
+     */
+    public function iShouldSeeBlock($position)
+    {
+        assertNotNull($this->getSpecificBlock($position));
+    }
+
+    /**
+     * @When I click on block :position
+     */
+    public function iClickOnBlock($position)
+    {
+        $block = $this->getSpecificBlock($position);
+        assertNotNull($block, 'Block ' . $position . ' was not found in the page.');
+        $block->click();
+    }
+
+    /**
+     * @When I click on the delete button for block :position
+     */
+    public function iClickOnTheDeleteButtonForBlock($position)
+    {
+        $this->getDeleteButton($position)->click();
+    }
+
+    /**
+     * @Then I should see :text as the title for block :position
+     */
+    public function iShouldSeeAsTheTitleForBlock($text, $position)
+    {
+        $block = $this->getSpecificBlock($position);
+        $title = $block->find('css', '.element-editor-header__title');
+        assertEquals($title->getText(), $text);
+    }
+
+    /**
+     * @Then I should see :text as the summary for block :position
+     */
+    public function iShouldSeeAsTheSummaryForBlock($text, $position)
+    {
+        $block = $this->getSpecificBlock($position);
+        $summary = $block->find('css', '.element-editor-content__content');
+        assertEquals($summary->getText(), $text);
+    }
+
+    /**
+     * @Then I should see the delete button for block :position
+     *
+     * @param int $position
+     */
+    public function iShouldSeeDeleteButtonForBlock($position)
+    {
+        $this->getDeleteButton($position);
+    }
+
+    /**
+     * @When I hover over block :position
+     *
+     * @param int $position
+     */
+    public function iHoverOverBlock($position)
+    {
+        $block = $this->getSpecificBlock($position);
+        assertNotNull($block, 'Block ' . $position . ' was not found in the page.');
+        $block->mouseOver();
+    }
+
+    /**
+     * @When I hover over the icon of block :position
+     *
+     * @param int $position
+     */
+    public function iHoverOverTheIconOfBlock($position)
+    {
+        $block = $this->getSpecificBlock($position);
+        assertNotNull($block, 'Block ' . $position . ' was not found in the page.');
+        $icon = $block->find(
+            'css',
+            '.element-editor-header .element-editor-header__info .element-editor-header__icon-container'
+        );
+        $icon->mouseOver();
+    }
+
+    /**
+     * Returns the blocks from the element editor
+     *
+     * @param string $modifier Optional CSS selector modifier
+     * @return NodeElement[]
+     */
+    protected function getBlocks($modifier = '')
+    {
+        // Wait for the list to be visible
+        $this->getSession()->wait(3000, 'window.jQuery(".element-editor .elemental-editor__list").length > 0');
+        $blocks = $this->getSession()
+            ->getPage()
+            ->findAll('css', '.elemental-editor__list .element-editor__element' . $modifier);
+        return $blocks;
+    }
+    /**
+     * Returns the selected element
+     *
+     * @param int $position
+     * @return NodeElement
+     */
+    protected function getSpecificBlock($position)
+    {
+        $blocks = $this->getBlocks();
+        /** @var NodeElement $block */
+        if ($blocks[$position - 1] !== false) {
+            return $blocks[$position - 1];
+        }
+    }
+
+    /**
+     * Returns the delete button for a specific block
+     *
+     * @param $position
+     * @return NodeElement
+     */
+    protected function getDeleteButton($position)
+    {
+        $block = $this->getSpecificBlock($position);
+        assertNotNull($block, 'Block ' . $position . ' was not found in the page.');
+
+        $button = $block->find('css', '.font-icon-trash-bin');
+        assertNotNull($button, 'Delete button not found');
+
+        return $button;
+    }
+}

tests/Behat/Context/FixtureContext.php

@@ -0,0 +1,33 @@
+<?php
+namespace DNADesign\Elemental\Tests\Behat\Context;
+
+use DNADesign\Elemental\Extensions\ElementalAreasExtension;
+use DNADesign\Elemental\Extensions\ElementalPageExtension;
+use DNADesign\Elemental\Models\BaseElement;
+use DNADesign\Elemental\Models\ElementContent;
+use SilverStripe\BehatExtension\Context\FixtureContext as BaseFixtureContext;
+use SilverStripe\BehatExtension\Utility\StepHelper;
+use SilverStripe\Core\ClassInfo;
+use SilverStripe\Core\Extensible;
+use SilverStripe\Core\Injector\Injector;
+use SilverStripe\Dev\FixtureBlueprint;
+use SilverStripe\ORM\DB;
+use SilverStripe\ORM\HasManyList;
+
+if (!class_exists(BaseFixtureContext::class)) {
+    return;
+}
+/**
+ * Context used to create fixtures in the SilverStripe ORM.
+ */
+class FixtureContext extends BaseFixtureContext
+{
+    /**
+     * @Given I add an extension :extension to the :class class
+     */
+    public function iAddAnExtensionToTheClass($extension, $class)
+    {
+        $targetClass = $this->convertTypeToClass($class);
+        $targetClass::add_extension(ElementalPageExtension::class);
+    }
+}

tests/Behat/config/enable-elemental.yml

@@ -0,0 +1,6 @@
+---
+Name: testonly-enable-elemental
+---
+Page:
+  extensions:
+    - DNADesign\Elemental\Extensions\ElementalPageExtension

tests/Behat/features/element-editor.feature

@@ -0,0 +1,92 @@
+@javascript
+Feature: View types of elements in a report
+  As a CMS user
+  I want to view a list of elements in the CMS
+  So that I can see which elements I have used on a page
+
+  Background:
+    Given I have a config file "enable-elemental.yml"
+    Given I am logged in with "ADMIN" permissions
+      And I add an extension "DNADesign\\Elemental\\Extensions\\ElementalPageExtension" to the "Page" class
+      And I go to "/dev/build?flush"
+      And a "page" "Blocks Page"
+      And I go to "/admin/pages"
+      And I wait until I see the ".cms-tree" element
+      And I click on "Blocks Page" in the tree
+      And I wait until I see the ".elemental-editor__list" element
+      # Workaround until the FixtureFactory applies ElementalArea relations correctly;
+      # See https://github.com/silverstripe/silverstripe-behat-extension/issues/180
+      And I select "Content" from "elemental-editor_add-new-block-control_select-dropdown"
+      And I click "Add" in the ".elemental-editor__add-new-block-control" element
+      And I fill in "My Sample Block" for "Title"
+      And I fill in "<p>My sample content</p>" for the "HTML" HTML field
+      And I click "Create" in the "#Form_ItemEditForm_action_doSave" element
+      # 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/edit/show/6"
+      And I wait until I see the ".element-editor__element" element
+    Then I should see "My Sample Block"
+
+  Scenario: I can see the title and summary of each element
+    Given I wait until I see the ".element-editor__element" element
+    Then I should see a list of blocks
+      And I should see "My Sample Block" as the title for block 1
+      And I should see "My sample content" as the summary for block 1
+
+
+  Scenario: I can add elements to the page
+    Given I wait until I see the ".element-editor__element" element
+    When I select "Content" from "elemental-editor_add-new-block-control_select-dropdown"
+      And I click "Add" in the ".elemental-editor__add-new-block-control" element
+      And I fill in "Additional Sample Block" for "Title"
+      And I fill in "<p>Additional sample content</p>" for the "HTML" HTML field
+      And I press the "Create" button
+    Then I should see a "Saved content block" message
+
+    When I go to "/admin/pages/edit/show/6"
+      And I wait until I see the ".element-editor__element" element
+      And I wait 1 second
+    Then I should see "Additional Sample Block"
+
+  Scenario: I can edit a block
+    Given I wait until I see the ".element-editor__element" element
+    Then I should see block 1
+
+    Given I click on block 1
+    Then I should see "My Sample Block"
+      And the "HTML" HTML field should contain "My sample content"
+
+    Given I fill in "New Block Title" for "Title"
+      And I fill in "<p>New sample content</p>" for the "HTML" HTML field
+      And I press the "Publish" button
+      And I go to "/admin/pages/edit/show/6"
+    Then I should see "New Block Title"
+      But I should not see "My Sample Block"
+
+  @modal
+  Scenario: I can delete a block
+    Given I wait until I see the ".element-editor__element" element
+    When I select "Content" from "elemental-editor_add-new-block-control_select-dropdown"
+      And I click "Add" in the ".elemental-editor__add-new-block-control" element
+      And I wait 1 second
+      And I fill in "Second Sample Block" for "Title"
+      And I fill in "<p>Additional sample content</p>" for the "HTML" HTML field
+      And I press the "Create" button
+      And I go to "/admin/pages/edit/show/6"
+      And I wait until I see the ".element-editor__element" element
+      And I wait 1 second
+      And I should see "Second Sample Block"
+      And I should see block 1
+      And I should see the delete button for block 1
+      And I click on the delete button for block 1
+      And I see the text "Are you sure you want to delete this block?" in the alert
+      And I confirm the dialog
+      And I wait until I see the ".element-editor__element" element
+    Then I should see "Second Sample Block"
+      But I should not see "My Sample Block Title"
+
+
+  Scenario: I can see the block type when I hover over an element's icon
+    Given I wait until I see the ".element-editor__element" element
+    When I hover over the icon of block 1
+    Then I should see text matching "Content"