Add acceptance test for creating a custom field

[MAILPOET-2463]

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,

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>

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

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)}

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"]');
+  }
+
+}