Add acceptance test for text input styles settings in form editor

[MAILPOET-2599]

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

@@ -27,6 +27,7 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
             label={MailPoet.I18n.t('displayLabelWithinInput')}
             checked={attributes.labelWithinInput}
             onChange={(labelWithinInput) => (setAttributes({ labelWithinInput }))}
+            className="mailpoet-automation-label-within-input-toggle"
           />
           <ToggleControl
             label={MailPoet.I18n.t('blockMandatory')}

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

@@ -38,9 +38,9 @@ const InputStylesSettings = ({
     setStyles(updated);
   };
   return (
-    <Panel>
+    <Panel className="mailpoet-automation-input-styles-panel">
       <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} initialOpen={false}>
-        <div className="mailpoet-styles-settings">
+        <div className="mailpoet-styles-settings" data-automation-id="input_styles_settings">
           <ToggleControl
             label={MailPoet.I18n.t('formSettingsDisplayFullWidth')}
             checked={localStyles.fullWidth}
@@ -50,6 +50,7 @@ const InputStylesSettings = ({
             label={MailPoet.I18n.t('formSettingsInheritStyleFromTheme')}
             checked={localStyles.inheritFromTheme}
             onChange={partial(updateStyles, 'inheritFromTheme')}
+            className="mailpoet-automation-inherit-theme-toggle"
           />
           {!localStyles.inheritFromTheme ? (
             <>
@@ -75,6 +76,7 @@ const InputStylesSettings = ({
                 label={MailPoet.I18n.t('formSettingsBold')}
                 checked={localStyles.bold || false}
                 onChange={partial(updateStyles, 'bold')}
+                className="mailpoet-automation-styles-bold-toggle"
               />
               <RangeControl
                 label={MailPoet.I18n.t('formSettingsBorderSize')}
@@ -83,6 +85,7 @@ const InputStylesSettings = ({
                 max={10}
                 allowReset
                 onChange={partial(updateStyles, 'borderSize')}
+                className="mailpoet-automation-styles-border-size"
               />
               <RangeControl
                 label={MailPoet.I18n.t('formSettingsBorderRadius')}
@@ -113,7 +116,7 @@ const InputStylesSettings = ({
             </>
           ) : null}
           <div>
-            <Button isPrimary onClick={() => applyStylesToAllTextInputs(localStyles)}>
+            <Button isPrimary onClick={() => applyStylesToAllTextInputs(localStyles)} data-automation-id="styles_apply_to_all">
               {MailPoet.I18n.t('formSettingsApplyToAll')}
             </Button>
           </div>

lib/Form/Block/BlockRendererHelper.php

@@ -96,11 +96,16 @@ class BlockRendererHelper {
     ) {
       return $html;
     }
+    $automationId = null;
+    if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) {
+      $automationId = 'data-automation-id="form_' . $block['id'] . '_label" ';
+    }
     if (isset($block['params']['label'])
       && strlen(trim($block['params']['label'])) > 0) {
       $html .= '<label '
         . 'class="mailpoet_' . $block['type'] . '_label" '
         . $this->renderFontStyle($formSettings, $block['styles'] ?? [])
+        . ($automationId ?? '')
         . '>';
       $html .= htmlspecialchars($block['params']['label']);
 

lib/Form/Block/Text.php

@@ -23,6 +23,11 @@ class Text {
     if ($block['id'] === 'email') {
       $type = 'email';
     }
+
+    if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) {
+      $automationId = 'data-automation-id="form_' . $block['id'] . '" ';
+    }
+
     $styles = $this->inputStylesRenderer->render($block['styles'] ?? []);
 
     if (in_array($block['id'], ['email', 'last_name', 'first_name'], true)) {

tests/acceptance/FormEditorTextInputStylesCest.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace MailPoet\Test\Acceptance;
+
+use MailPoet\Test\DataFactories\Form;
+use MailPoet\Test\DataFactories\Segment;
+
+class FormEditorTextInputStylesCest {
+  public function changeTextInputStyles(\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])->withDisplayBelowPosts()->create();
+    $i->wantTo('Set text input styles');
+    $i->login();
+    $i->amOnMailPoetPage('Forms');
+    $i->waitForText($formName);
+    $i->clickItemRowActionByItemName($formName, 'Edit');
+    $i->waitForElement('[data-automation-id="form_title_input"]');
+
+    // Add first name
+    $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(2) .components-panel__body-toggle'); // toggle fields
+    $i->click('.editor-block-list-item-mailpoet-form-first-name-input'); // add first name block to the editor
+
+    // Apply some styles to first name
+    $i->click('.mailpoet-automation-input-styles-panel');
+    $i->waitForElement('[data-automation-id="input_styles_settings"]');
+    $i->click('.mailpoet-automation-inherit-theme-toggle input'); // Display custom settings
+    $i->click('.mailpoet-automation-styles-bold-toggle input'); // Toggle bold on
+    $i->fillField('.mailpoet-automation-styles-border-size input[type="number"]', 10); // Set border size
+    $i->click('.mailpoet-automation-label-within-input-toggle input'); // Toggle lable to be rendered outside the input
+
+    // Check element has styles
+    $i->assertAttributeContains('[data-automation-id="editor_first_name_input"]', 'style', 'border-width: 10px;');
+    $i->assertAttributeContains('[data-automation-id="editor_first_name_label"]', 'style', 'font-weight: bold;');
+    // Apply to all
+    $i->click('[data-automation-id="styles_apply_to_all"]');
+    // Check email block has styles too
+    $i->assertAttributeContains('[data-automation-id="editor_first_name_input"]', 'style', 'border-width: 10px;');
+    // Save 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();
+    $i->waitForElement('[data-automation-id="form_title_input"]');
+    $i->assertAttributeContains('[data-automation-id="editor_first_name_input"]', 'style', 'border-width: 10px;');
+    $i->assertAttributeContains('[data-automation-id="editor_first_name_label"]', 'style', 'font-weight: bold;');
+    $i->assertAttributeContains('[data-automation-id="editor_first_name_input"]', 'style', 'border-width: 10px;');
+
+    // Check styles are applied on frontend page
+    $postUrl = $i->createPost('Title', 'Content');
+    $i->amOnUrl($postUrl);
+    $i->assertAttributeContains('[data-automation-id="form_first_name"]', 'style', 'border-width: 10px;');
+    $i->assertAttributeContains('[data-automation-id="form_first_name_label"]', 'style', 'font-weight: bold;');
+    $i->assertAttributeContains('[data-automation-id="form_email"]', 'style', 'border-width: 10px;');
+  }
+}