From 171866923ca5f73bbb64a6209246b6c939d0b427 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Wed, 15 Jan 2020 13:30:46 +0100
Subject: [PATCH] Add acceptance test for creating a custom field

[MAILPOET-2463]
---
 .../add_custom_field_form.jsx                 |  5 +-
 .../custom_radio/custom_field_settings.jsx    |  3 +-
 .../blocks/custom_radio/settings_preview.jsx  |  2 +
 .../form_editor/blocks/custom_select/edit.jsx |  2 +-
 .../FormEditorCreateCustomFieldCest.php       | 68 +++++++++++++++++++
 5 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 tests/acceptance/FormEditorCreateCustomFieldCest.php

diff --git a/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx b/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
index 9dbcf27a8a..d140a6e2f2 100644
--- a/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
+++ b/assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
@@ -97,11 +97,12 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
   };
 
   return (
-    <div className="mailpoet_custom_field_add_form">
+    <div className="mailpoet_custom_field_add_form" data-automation-id="create_custom_field_form">
       <hr />
       <SelectControl
         label={MailPoet.I18n.t('selectCustomFieldType')}
         options={customFieldTypes}
+        data-automation-id="create_custom_field_type_select"
         onChange={(value) => {
           setFieldSettings(null);
           setFieldType(value);
@@ -110,6 +111,7 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
       <TextControl
         label={MailPoet.I18n.t('customFieldName')}
         onChange={setFieldName}
+        data-automation-id="create_custom_field_name_input"
       />
       <hr />
       {renderSettingsForType()}
@@ -117,6 +119,7 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
         isLarge
         isDefault
         disabled={!canSubmit()}
+        data-automation-id="create_custom_field_submit"
         onClick={() => {
           const data = {
             name: fieldName,
diff --git a/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx b/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx
index f93a740401..cfb4419de8 100644
--- a/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx
+++ b/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx
@@ -50,7 +50,7 @@ const CustomFieldSettings = ({
   }, [localData, onChange]);
 
   return (
-    <div className="custom-field-settings">
+    <div className="custom-field-settings" data-automation-id="custom_field_settings">
       {onSave ? (
         <Button
           isPrimary
@@ -101,6 +101,7 @@ const CustomFieldSettings = ({
           },
         ])}
         className="button-on-top"
+        data-automation-id="custom_field_values_add_item"
       >
         {MailPoet.I18n.t('customFieldAddItem')}
       </Button>
diff --git a/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx b/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
index 1a9b4dafe0..37da76624c 100644
--- a/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
+++ b/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
@@ -15,6 +15,7 @@ const PreviewItem = ({
 }) => (
   <div
     className="mailpoet-form-segments-settings-list"
+    data-automation-id="custom_field_value_settings"
     key={value.id}
   >
     <input
@@ -26,6 +27,7 @@ const PreviewItem = ({
     <input
       type="text"
       value={value.name}
+      data-automation-id="custom_field_value_settings_value"
       onChange={(event) => onUpdate(value.id, event.target.value)}
     />
     <Dashicon
diff --git a/assets/js/src/form_editor/blocks/custom_select/edit.jsx b/assets/js/src/form_editor/blocks/custom_select/edit.jsx
index a2fac5e549..066345c79e 100644
--- a/assets/js/src/form_editor/blocks/custom_select/edit.jsx
+++ b/assets/js/src/form_editor/blocks/custom_select/edit.jsx
@@ -105,7 +105,7 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
   return (
     <>
       {inspectorControls}
-      <div className="mailpoet_custom_select">
+      <div className="mailpoet_custom_select" data-automation-id="custom_select_block">
         {!attributes.labelWithinInput ? (
           <label className="mailpoet_select_label" htmlFor={clientId}>
             {formatLabel(attributes)}
diff --git a/tests/acceptance/FormEditorCreateCustomFieldCest.php b/tests/acceptance/FormEditorCreateCustomFieldCest.php
new file mode 100644
index 0000000000..03ec1ed6b6
--- /dev/null
+++ b/tests/acceptance/FormEditorCreateCustomFieldCest.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace MailPoet\Test\Acceptance;
+
+use MailPoet\Features\FeaturesController;
+use MailPoet\Test\DataFactories\Features;
+use MailPoet\Test\DataFactories\Form;
+use MailPoet\Test\DataFactories\Segment;
+
+class FormEditorCreateCustomFieldCest {
+
+  public function createCustomSelect(\AcceptanceTester $i) {
+    $segmentFactory = new Segment();
+    $segmentName = 'Fancy List';
+    $segment = $segmentFactory->withName($segmentName)->create();
+    $formName = 'My fancy form';
+    $form = new Form();
+    $form->withName($formName)->withSegments([$segment])->create();
+    $features = new Features();
+    $features->withFeatureEnabled(FeaturesController::NEW_FORM_EDITOR);
+    $i->wantTo('Add first and last name to the editor');
+    $i->login();
+    $i->amOnMailPoetPage('Forms');
+    $i->waitForText($formName);
+    $i->clickItemRowActionByItemName($formName, 'Edit');
+    $i->waitForElement('[data-automation-id="form_title_input"]');
+    // Insert create custom field block
+    $i->click('.block-list-appender button');// CLICK the big button that adds new blocks
+    $i->waitForElement('.editor-inserter__results .components-panel__body-toggle');
+    $i->click('.editor-inserter__results .components-panel__body:nth-child(1) .components-panel__body-toggle'); // toggle custom fields
+    $i->click('.editor-block-list-item-mailpoet-form-add-custom-field'); // add create custom field block
+    $i->waitForElement('[data-automation-id="create_custom_field_form"]');
+
+    // Configure custom select custom field
+    $i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Select');
+    $i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom select');
+    $i->waitForElement('[data-automation-id="custom_field_value_settings"]');
+    $i->fillField('[data-automation-id="custom_field_value_settings_value"]', 'First option'); // Configure first option
+    $i->click('[data-automation-id="custom_field_values_add_item"]'); // Add second option
+
+    // Save custom field
+    $i->click('[data-automation-id="create_custom_field_submit"]');
+    $i->waitForText('Custom field saved', 10, '.automation-dismissible-notices');
+    $i->seeNoJSErrors();
+    $i->click('.automation-dismissible-notices .components-notice__dismiss'); // Hide notice
+
+    // Check field was added correctly
+    $this->checkCustomSelectInForm($i);
+
+    // Save the form
+    $i->click('[data-automation-id="form_save_button"]');
+    $i->waitForText('Form saved', 10, '.automation-dismissible-notices');
+    $i->seeNoJSErrors();
+
+    // Reload page and check data were saved
+    $i->reloadPage();
+    $this->checkCustomSelectInForm($i);
+  }
+
+  private function checkCustomSelectInForm($i) {
+    $i->waitForElement('[data-automation-id="custom_select_block"]');
+    $i->click('[data-automation-id="custom_select_block"]');
+    $i->waitForElement('[data-automation-id="custom_field_settings"]');
+    $i->waitForElement('[data-automation-id="custom_field_value_settings_value"][value="First option"]');
+    $i->waitForElement('[data-automation-id="custom_field_value_settings_value"][value="Option 2"]');
+  }
+
+}