Add acceptance test for form preview

[MAILPOET-2743]

assets/js/src/common/preview/preview.jsx

@@ -26,6 +26,7 @@ function Preview({
           }}
           title={MailPoet.I18n.t('formPreviewDesktop')}
           href="#"
+          data-automation-id="preview_type_desktop"
         >
           <DesktopIcon />
         </a>
@@ -37,6 +38,7 @@ function Preview({
           }}
           title={MailPoet.I18n.t('formPreviewMobile')}
           href="#"
+          data-automation-id="preview_type_mobile"
         >
           <MobileIcon />
         </a>

assets/js/src/form_editor/components/header.jsx

@@ -28,6 +28,7 @@ export default () => {
           onClick={showPreview}
           isPressed={isPreview}
           className="editor-post-preview"
+          data-automation-id="form_preview_button"
         >
           {__('Preview')}
         </Button>

assets/js/src/form_editor/components/preview.jsx

@@ -132,6 +132,7 @@ const FormPreview = () => {
               <select
                 onChange={onChange(setFormType)}
                 value={formType}
+                data-automation-id="form_type_selection"
               >
                 <option value="sidebar">{MailPoet.I18n.t('placeFormSidebar')}</option>
                 <option value="below_post">{MailPoet.I18n.t('placeFormBellowPages')}</option>
@@ -155,6 +156,7 @@ const FormPreview = () => {
               src={iframeSrc}
               title={MailPoet.I18n.t('formPreview')}
               onLoad={() => setIframeLoaded(true)}
+              data-automation-id="form_preview_iframe"
             />
           </Preview>
         </>

tests/acceptance/FormEditorFormPreviewCest.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace MailPoet\Test\Acceptance;
+
+use MailPoet\Test\DataFactories\Form;
+use MailPoet\Test\DataFactories\Segment;
+
+class FormEditorFormPreviewCest {
+  public function previewUnsavedChangesAndRememberPreviewSettings(\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();
+    $i->wantTo('Add first name to the editor and preview form without saving it');
+    $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(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
+
+    // Open preview
+    $i->click('[data-automation-id="form_preview_button"]');
+    $i->waitForElement('[data-automation-id="form_preview_iframe"]');
+
+    // Check first name was rendered in iframe
+    $i->switchToIFrame('[data-automation-id="form_preview_iframe"]');
+    $i->waitForElement('[data-automation-id="form_first_name"]');
+    $i->switchToIFrame();
+
+    // Change preview type and form type and check again
+    $i->click('[data-automation-id="preview_type_mobile"]');
+    $i->selectOption('[data-automation-id="form_type_selection"]', 'Fixed bar');
+    $i->switchToIFrame('[data-automation-id="form_preview_iframe"]');
+    $i->waitForElement('[data-automation-id="form_first_name"]');
+    $i->switchToIFrame();
+
+    // Reload page and check preview settings
+    $i->reloadPage();
+    $i->acceptPopup();
+    $i->waitForElement('[data-automation-id="form_preview_button"]');
+    $i->click('[data-automation-id="form_preview_button"]');
+    $i->waitForElement('[data-automation-id="form_preview_iframe"]');
+    $i->seeOptionIsSelected('[data-automation-id="form_type_selection"]', 'Fixed bar');
+    $i->seeOptionIsSelected('[data-automation-id="form_type_selection"]', 'Fixed bar');
+  }
+}