[MQ-111] Test add divider to editor

assets/js/src/newsletter_editor/blocks/divider.js

@@ -126,6 +126,7 @@ Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
 });
 
 Module.DividerWidgetView = base.WidgetView.extend({
+  id: 'automation_editor_block_divider',
   getTemplate: function getTemplate() { return window.templates.dividerInsertion; },
   behaviors: {
     DraggableBehavior: {

tests/acceptance/EditorDividerBlockCest.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace MailPoet\Test\Acceptance;
+
+use MailPoet\Test\DataFactories\Newsletter;
+
+require_once __DIR__ . '/../DataFactories/Newsletter.php';
+
+class EditorDividerBlockCest {
+  function addDivider(\AcceptanceTester $I) {
+    $I->wantTo('add divider block to newsletter');
+    $newsletterTitle = 'Divider Block Newsletter';
+    $dividerSettings = ('[data-automation-id="settings_tool"]');
+    $dividerResizeHandle = ('[data-automation-id="divider_resize_handle"]');
+    $dividerInEditor = ('[data-automation-id="divider"]');
+    $dividerSettingsAssertion = ('[data-automation-id="divider_selector"]');
+    (new Newsletter())
+      ->withSubject($newsletterTitle)
+      ->loadBodyFrom('newsletterWithText.json')
+      ->create();
+    $I->login();
+    $I->amOnMailpoetPage('Emails');
+    $I->waitForText($newsletterTitle);
+    $I->clickItemRowActionByItemName($newsletterTitle, 'Edit');
+    // Create divider block
+    $I->waitForText('Divider');
+    $I->wait(1); // just to be sure
+    $I->dragAndDrop('#automation_editor_block_divider', '#mce_0');
+    //Open settings
+    $I->moveMouseOver($dividerInEditor);
+    $I->waitForElementVisible($dividerResizeHandle);
+    $I->waitForElementVisible($dividerSettings);
+    $I->click($dividerSettings);
+    $I->waitForElementVisible($dividerSettingsAssertion);
+    $I->click('Done');
+  }
+
+}

views/newsletter/templates/blocks/divider/block.hbs

@@ -1,8 +1,8 @@
 <div class="mailpoet_tools"></div>
-<div class="mailpoet_content" style="padding: {{ model.styles.block.padding }} 0; background-color: {{ model.styles.block.backgroundColor }};">
+<div class="mailpoet_content" data-automation-id="divider" style="padding: {{ model.styles.block.padding }} 0; background-color: {{ model.styles.block.backgroundColor }};">
     <div class="mailpoet_divider" style="border-top-width: {{ model.styles.block.borderWidth }}; border-top-style: {{ model.styles.block.borderStyle }}; border-top-color: {{ model.styles.block.borderColor }};"></div>
     <div class="mailpoet_resize_handle_container">
-        <div class="mailpoet_resize_handle">
+        <div class="mailpoet_resize_handle" data-automation-id="divider_resize_handle">
             <span class="mailpoet_resize_handle_text">{{ totalHeight }}</span>
             <span class="mailpoet_resize_handle_icon"><%= source('newsletter/templates/svg/block-icons/spacer.svg') %></span>
         </div>

views/newsletter/templates/blocks/divider/settings.hbs

@@ -1,5 +1,5 @@
 <h3><%= __('Dividers') %></h3>
-<div class="mailpoet_divider_selector">
+<div class="mailpoet_divider_selector" data-automation-id="divider_selector">
 {{#each availableStyles.dividers}}
     <div class="mailpoet_field_divider_style{{#ifCond this '==' ../model.styles.block.borderStyle}} mailpoet_active_divider_style{{/ifCond}}" data-style="{{ this }}">
         <div style="border-top-width: 5px; border-top-style: {{ this }}; border-top-color: {{ ../model.styles.block.borderColor }};"></div>