[MQ-183] tests adding header block to editor

2019-04-11 15:55:56 -04:00
parent 8f734a538a
commit 02e8a8eb15
5 changed files with 430 additions and 2 deletions
--- a/assets/js/src/newsletter_editor/blocks/header.js
+++ b/assets/js/src/newsletter_editor/blocks/header.js
@ -98,6 +98,7 @@ Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
 });

 Module.HeaderWidgetView = base.WidgetView.extend({
+  id: 'automation_editor_block_header',
  getTemplate: function getTemplate() { return window.templates.headerInsertion; },
  behaviors: {
    DraggableBehavior: {
--- a/tests/_data/newsletterWithTextNoHeader.json
+++ b/tests/_data/newsletterWithTextNoHeader.json
@ -0,0 +1,391 @@
+{
+  "content": {
+    "type": "container",
+    "columnLayout": false,
+    "orientation": "vertical",
+    "image": {
+      "src": null,
+      "display": "scale"
+    },
+    "styles": {
+      "block": {
+        "backgroundColor": "transparent"
+      }
+    },
+    "blocks": [
+      {
+        "type": "container",
+        "columnLayout": false,
+        "orientation": "horizontal",
+        "image": {
+          "src": null,
+          "display": "scale"
+        },
+        "styles": {
+          "block": {
+            "backgroundColor": "#f8f8f8"
+          }
+        },
+        "blocks": [
+          {
+            "type": "container",
+            "columnLayout": false,
+            "orientation": "vertical",
+            "image": {
+              "src": null,
+              "display": "scale"
+            },
+            "styles": {
+              "block": {
+                "backgroundColor": "transparent"
+              }
+            },
+            "blocks": [
+              {
+                "type": "text",
+                "text": "<h1 style=\"text-align: center;\">Heading 1</h1>\n<h2 style=\"text-align: center;\">Heading 2</h2>\n<h3 style=\"text-align: center;\">Heading 3</h3>\n<p style=\"text-align: center;\">Paragraph.</p>"
+              },
+              {
+                "type": "footer",
+                "text": "<p><a href=\"[link:subscription_unsubscribe_url]\">Unsubscribe</a> | <a href=\"[link:subscription_manage_url]\">Manage your subscription</a><br />Add your postal address here!</p>",
+                "styles": {
+                  "block": {
+                    "backgroundColor": "transparent"
+                  },
+                  "text": {
+                    "fontColor": "#222222",
+                    "fontFamily": "Arial",
+                    "fontSize": "12px",
+                    "textAlign": "center"
+                  },
+                  "link": {
+                    "fontColor": "#6cb7d4",
+                    "textDecoration": "none"
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "globalStyles": {
+    "text": {
+      "fontColor": "#000000",
+      "fontFamily": "Arial",
+      "fontSize": "16px",
+      "lineHeight": "1.6"
+    },
+    "h1": {
+      "fontColor": "#111111",
+      "fontFamily": "Trebuchet MS",
+      "fontSize": "30px",
+      "lineHeight": "1.6"
+    },
+    "h2": {
+      "fontColor": "#222222",
+      "fontFamily": "Trebuchet MS",
+      "fontSize": "24px",
+      "lineHeight": "1.6"
+    },
+    "h3": {
+      "fontColor": "#333333",
+      "fontFamily": "Trebuchet MS",
+      "fontSize": "22px",
+      "lineHeight": "1.6"
+    },
+    "link": {
+      "fontColor": "#21759B",
+      "textDecoration": "underline"
+    },
+    "wrapper": {
+      "backgroundColor": "#ffffff"
+    },
+    "body": {
+      "backgroundColor": "#eeeeee"
+    }
+  },
+  "blockDefaults": {
+    "automatedLatestContent": {
+      "amount": "5",
+      "withLayout": false,
+      "contentType": "post",
+      "inclusionType": "include",
+      "displayType": "excerpt",
+      "titleFormat": "h1",
+      "titleAlignment": "left",
+      "titleIsLink": false,
+      "imageFullWidth": false,
+      "featuredImagePosition": "belowTitle",
+      "showAuthor": "no",
+      "authorPrecededBy": "Author:",
+      "showCategories": "no",
+      "categoriesPrecededBy": "Categories:",
+      "readMoreType": "button",
+      "readMoreText": "Read more",
+      "readMoreButton": {
+        "text": "Read more",
+        "url": "[postLink]",
+        "context": "automatedLatestContent.readMoreButton",
+        "styles": {
+          "block": {
+            "backgroundColor": "#2ea1cd",
+            "borderColor": "#0074a2",
+            "borderWidth": "1px",
+            "borderRadius": "5px",
+            "borderStyle": "solid",
+            "width": "180px",
+            "lineHeight": "40px",
+            "fontColor": "#ffffff",
+            "fontFamily": "Verdana",
+            "fontSize": "18px",
+            "fontWeight": "normal",
+            "textAlign": "center"
+          }
+        }
+      },
+      "sortBy": "newest",
+      "showDivider": true,
+      "divider": {
+        "context": "automatedLatestContent.divider",
+        "styles": {
+          "block": {
+            "backgroundColor": "transparent",
+            "padding": "13px",
+            "borderStyle": "solid",
+            "borderWidth": "3px",
+            "borderColor": "#aaaaaa"
+          }
+        }
+      },
+      "backgroundColor": "#ffffff",
+      "backgroundColorAlternate": "#eeeeee"
+    },
+    "automatedLatestContentLayout": {
+      "amount": "5",
+      "withLayout": true,
+      "contentType": "post",
+      "inclusionType": "include",
+      "displayType": "excerpt",
+      "titleFormat": "h1",
+      "titleAlignment": "left",
+      "titleIsLink": false,
+      "imageFullWidth": false,
+      "featuredImagePosition": "alternate",
+      "showAuthor": "no",
+      "authorPrecededBy": "Author:",
+      "showCategories": "no",
+      "categoriesPrecededBy": "Categories:",
+      "readMoreType": "button",
+      "readMoreText": "Read more",
+      "readMoreButton": {
+        "text": "Read more",
+        "url": "[postLink]",
+        "context": "automatedLatestContentLayout.readMoreButton",
+        "styles": {
+          "block": {
+            "backgroundColor": "#2ea1cd",
+            "borderColor": "#0074a2",
+            "borderWidth": "1px",
+            "borderRadius": "5px",
+            "borderStyle": "solid",
+            "width": "180px",
+            "lineHeight": "40px",
+            "fontColor": "#ffffff",
+            "fontFamily": "Verdana",
+            "fontSize": "18px",
+            "fontWeight": "normal",
+            "textAlign": "center"
+          }
+        }
+      },
+      "sortBy": "newest",
+      "showDivider": true,
+      "divider": {
+        "context": "automatedLatestContentLayout.divider",
+        "styles": {
+          "block": {
+            "backgroundColor": "transparent",
+            "padding": "13px",
+            "borderStyle": "solid",
+            "borderWidth": "3px",
+            "borderColor": "#aaaaaa"
+          }
+        }
+      },
+      "backgroundColor": "#ffffff",
+      "backgroundColorAlternate": "#eeeeee"
+    },
+    "button": {
+      "text": "Button",
+      "url": "",
+      "styles": {
+        "block": {
+          "backgroundColor": "#2ea1cd",
+          "borderColor": "#0074a2",
+          "borderWidth": "1px",
+          "borderRadius": "5px",
+          "borderStyle": "solid",
+          "width": "180px",
+          "lineHeight": "40px",
+          "fontColor": "#ffffff",
+          "fontFamily": "Verdana",
+          "fontSize": "18px",
+          "fontWeight": "normal",
+          "textAlign": "center"
+        }
+      }
+    },
+    "container": {
+      "image": {
+        "src": null,
+        "display": "scale"
+      },
+      "styles": {
+        "block": {
+          "backgroundColor": "transparent"
+        }
+      }
+    },
+    "divider": {
+      "styles": {
+        "block": {
+          "backgroundColor": "transparent",
+          "padding": "13px",
+          "borderStyle": "solid",
+          "borderWidth": "3px",
+          "borderColor": "#aaaaaa"
+        }
+      }
+    },
+    "footer": {
+      "text": "<p><a href=\"[link:subscription_unsubscribe_url]\">Unsubscribe</a> | <a href=\"[link:subscription_manage_url]\">Manage subscription</a><br />Add your postal address here!</p>",
+      "styles": {
+        "block": {
+          "backgroundColor": "transparent"
+        },
+        "text": {
+          "fontColor": "#222222",
+          "fontFamily": "Arial",
+          "fontSize": "12px",
+          "textAlign": "center"
+        },
+        "link": {
+          "fontColor": "#6cb7d4",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "posts": {
+      "amount": "10",
+      "withLayout": true,
+      "contentType": "post",
+      "postStatus": "publish",
+      "inclusionType": "include",
+      "displayType": "excerpt",
+      "titleFormat": "h1",
+      "titleAlignment": "left",
+      "titleIsLink": false,
+      "imageFullWidth": false,
+      "featuredImagePosition": "alternate",
+      "showAuthor": "no",
+      "authorPrecededBy": "Author:",
+      "showCategories": "no",
+      "categoriesPrecededBy": "Categories:",
+      "readMoreType": "link",
+      "readMoreText": "Read more",
+      "readMoreButton": {
+        "text": "Read more",
+        "url": "[postLink]",
+        "context": "posts.readMoreButton",
+        "styles": {
+          "block": {
+            "backgroundColor": "#2ea1cd",
+            "borderColor": "#0074a2",
+            "borderWidth": "1px",
+            "borderRadius": "5px",
+            "borderStyle": "solid",
+            "width": "180px",
+            "lineHeight": "40px",
+            "fontColor": "#ffffff",
+            "fontFamily": "Verdana",
+            "fontSize": "18px",
+            "fontWeight": "normal",
+            "textAlign": "center"
+          }
+        }
+      },
+      "sortBy": "newest",
+      "showDivider": true,
+      "divider": {
+        "context": "posts.divider",
+        "styles": {
+          "block": {
+            "backgroundColor": "transparent",
+            "padding": "13px",
+            "borderStyle": "solid",
+            "borderWidth": "3px",
+            "borderColor": "#aaaaaa"
+          }
+        }
+      },
+      "backgroundColor": "#ffffff",
+      "backgroundColorAlternate": "#eeeeee"
+    },
+    "social": {
+      "iconSet": "default",
+      "styles": {
+        "block": {
+          "textAlign": "center"
+        }
+      },
+      "icons": [
+        {
+          "type": "socialIcon",
+          "iconType": "facebook",
+          "link": "http://www.facebook.com",
+          "image": "http://localhost:8002/wp-content/plugins/mailpoet/assets/img/newsletter_editor/social-icons/01-social/Facebook.png?mailpoet_version=3.19.2",
+          "height": "32px",
+          "width": "32px",
+          "text": "Facebook"
+        },
+        {
+          "type": "socialIcon",
+          "iconType": "twitter",
+          "link": "http://www.twitter.com",
+          "image": "http://localhost:8002/wp-content/plugins/mailpoet/assets/img/newsletter_editor/social-icons/01-social/Twitter.png?mailpoet_version=3.19.2",
+          "height": "32px",
+          "width": "32px",
+          "text": "Twitter"
+        }
+      ]
+    },
+    "spacer": {
+      "styles": {
+        "block": {
+          "backgroundColor": "transparent",
+          "height": "40px"
+        }
+      }
+    },
+    "header": {
+      "text": "Display problems?&nbsp;<a href=\"[link:newsletter_view_in_browser_url]\">Open this email in your web browser.</a>",
+      "styles": {
+        "block": {
+          "backgroundColor": "transparent"
+        },
+        "text": {
+          "fontColor": "#222222",
+          "fontFamily": "Arial",
+          "fontSize": "12px",
+          "textAlign": "center"
+        },
+        "link": {
+          "fontColor": "#6cb7d4",
+          "textDecoration": "underline"
+        }
+      }
+    }
+  }
+}
--- a/tests/acceptance/EditorHeaderBlockCest.php
+++ b/tests/acceptance/EditorHeaderBlockCest.php
@ -0,0 +1,36 @@
+<?php
+
+namespace MailPoet\Test\Acceptance;
+
+use MailPoet\Test\DataFactories\Newsletter;
+
+require_once __DIR__ . '/../DataFactories/Newsletter.php';
+
+class EditorHeaderBlockCest {
+  function addHeader(\AcceptanceTester $I) {
+    $I->wantTo('add header block to newsletter');
+    $newsletterTitle = 'Header Block Newsletter';
+    $headerInEditor = ('[data-automation-id="header"]');
+    $headerSettingsIcon = ('[data-automation-id="settings_tool"]');
+    $headerSettingsAssertion = ('[data-automation-id="header_done_button"]');
+    (new Newsletter())
+      ->withSubject($newsletterTitle)
+      ->loadBodyFrom('newsletterWithTextNoHeader.json')
+      ->create();
+    $I->login();
+    $I->amOnMailpoetPage('Emails');
+    $I->waitForText($newsletterTitle);
+    $I->clickItemRowActionByItemName($newsletterTitle, 'Edit');
+    // Create header block
+    $I->waitForText('Header');
+    $I->wait(1); // just to be sure
+    $I->dragAndDrop('#automation_editor_block_header', '#mce_0');
+    //Open settings by clicking on block
+    $I->moveMouseOver($headerInEditor, 3, 2);
+    $I->waitForText('Display problems?');
+    $I->click($headerSettingsIcon);
+    $I->waitForElementVisible($headerSettingsAssertion);
+    $I->click($headerSettingsAssertion);
+  }
+
+}
--- a/views/newsletter/templates/blocks/header/block.hbs
+++ b/views/newsletter/templates/blocks/header/block.hbs
@ -16,5 +16,5 @@
        text-decoration: {{ model.styles.link.textDecoration }};
    }
 </style>
-<div class="mailpoet_content mailpoet_text_content">{{{ model.text }}}</div>
+<div class="mailpoet_content mailpoet_text_content" data-automation-id="header">{{{ model.text }}}</div>
 <div class="mailpoet_block_highlight"></div>
--- a/views/newsletter/templates/blocks/header/settings.hbs
+++ b/views/newsletter/templates/blocks/header/settings.hbs
@ -64,7 +64,7 @@
 </div>

 <div class="mailpoet_form_field">
-    <input type="button" class="button button-primary mailpoet_done_editing" value="<%= __('Done') | escape('html_attr') %>" />
+    <input type="button" class="button button-primary mailpoet_done_editing" data-automation-id="header_done_button" value="<%= __('Done') | escape('html_attr') %>" />
 </div>

 <p class="mailpoet_settings_notice"><%= __('If an email client [link]does not support a custom web font[/link], a similar standard font will be used instead.')|replaceLinkTags('https://beta.docs.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet#custom-web-fonts', {'target' : '_blank'})|raw %></p>