Re-enable columns and acceptance test

[MAILPOET-2754]

assets/js/src/form_editor/blocks/blocks.jsx

@@ -12,8 +12,8 @@ import * as lastName from './last_name/last_name.jsx';
 import * as segmentSelect from './segment_select/segment_select.jsx';
 import * as html from './html/html.jsx';
 import * as addCustomField from './add_custom_field/add_custom_field.jsx';
-// import * as columns from './columns/columns.jsx';
+import * as columns from './columns/columns.jsx';
-// import * as column from './columns/column.jsx';
+import * as column from './columns/column.jsx';
 
 export const registerCustomFieldBlock = (customField) => {
   const namesMap = getCustomFieldBlocksSettings(customField);
@@ -45,10 +45,8 @@ export const initBlocks = () => {
   registerBlockType(segmentSelect.name, segmentSelect.settings);
   registerBlockType(html.name, html.settings);
   registerBlockType(addCustomField.name, addCustomField.settings);
-
+  registerBlockType(columns.name, columns.settings);
-  // Temporarily disabled util we fix issues found in https://mailpoet.atlassian.net/browse/MAILPOET-2754
+  registerBlockType(column.name, column.settings);
-  // registerBlockType(columns.name, columns.settings);
-  // registerBlockType(column.name, column.settings);
 
   if (Array.isArray(customFields)) {
     customFields.forEach(registerCustomFieldBlock);

tests/acceptance/FormWithColumnsCest.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace MailPoet\Test\Acceptance;
+
+use MailPoet\Test\DataFactories\Form;
+use MailPoet\Test\DataFactories\Segment;
+
+class FormWithColumnsCest {
+  public function createAndTestFormWithColumns(\AcceptanceTester $i) {
+    $segmentFactory = new Segment();
+    $segmentName = 'Fancy List';
+    $segment = $segmentFactory->withName($segmentName)->create();
+    $formName = 'My fancy form with columns';
+    $form = new Form();
+    $form->withName($formName)
+      ->withSegments([$segment])
+      ->withDisplayBelowPosts()
+      ->create();
+    $i->wantTo('Add columns with firs and last name');
+    $i->login();
+    $i->amOnMailPoetPage('Forms');
+    $i->waitForText($formName);
+    $i->clickItemRowActionByItemName($formName, 'Edit');
+    $i->waitForElement('[data-automation-id="form_title_input"]');
+
+    $i->click('.block-list-appender button');// CLICK the big button that adds new blocks
+    $i->waitForElement('.block-editor-inserter__results .components-panel__body-toggle');
+    $i->click('.block-editor-inserter__results .components-panel__body:nth-child(1) .components-panel__body-toggle'); // toggle layout
+    $i->click('.editor-block-list-item-columns'); // columns block
+    $i->waitForElement('.block-editor-block-variation-picker__variations');
+    $i->click('.block-editor-block-variation-picker__variations li:first-child button');
+    $i->waitForElement('.block-editor-inner-blocks');
+    $i->click('.block-editor-inner-blocks .block-list-appender button'); // CLICK the big button in column that adds new blocks
+    $i->click('.block-editor-inserter__results .components-panel__body:nth-child(3) .components-panel__body-toggle'); // toggle fields
+    $i->click('.editor-block-list-item-mailpoet-form-first-name-input'); // add first name block to the editor
+    $i->click('.block-editor-inner-blocks .block-list-appender button');// CLICK the big button in column that adds new blocks
+    $i->waitForElement('.block-editor-inserter__results .components-panel__body-toggle');
+    $i->click('.block-editor-inserter__results .components-panel__body:nth-child(3) .components-panel__body-toggle'); // toggle fields, get the second field, first one is now "Most Used"
+    $i->click('.editor-block-list-item-mailpoet-form-last-name-input'); // add last name block to the editor
+    $i->seeNoJSErrors();
+    $i->click('[data-automation-id="form_save_button"]');
+    $i->waitForText('Form saved', 10, '.automation-dismissible-notices');
+    // Reload page and check data were saved
+    $i->reloadPage();
+    $i->waitForElement('[data-automation-id="form_title_input"]');
+    $i->seeElement('[data-automation-id="editor_first_name_input"]');
+    $i->seeElement('[data-automation-id="editor_last_name_input"]');
+
+    // Go to post page
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+
+    // Subscribe using the form
+    $subscriberEmail = "subscriber_columns@example.com";
+    $subscriberFirstName = "subscriber_columns_first_name";
+    $subscriberLastName = "subscriber_columns_last_name";
+    $i->fillField('[data-automation-id="form_email"]', $subscriberEmail);
+    $i->fillField('[data-automation-id="form_first_name"]', $subscriberFirstName);
+    $i->fillField('[data-automation-id="form_last_name"]', $subscriberLastName);
+    $i->click('[data-automation-id="subscribe-submit-button"]');
+    $i->waitForText('Check your inbox or spam folder to confirm your subscription');
+
+    // Check subscriber data were saved
+    $i->amOnMailpoetPage('Subscribers');
+    $i->waitForText($subscriberEmail);
+    $i->waitForText($subscriberFirstName);
+    $i->waitForText($subscriberLastName);
+  }
+}