Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add acceptance test for creating a custom field

Browse Source 
[MAILPOET-2463]
This commit is contained in:
Rostislav Wolny
2020-01-15 13:30:46 +01:00
committed by Pavel Dohnal
parent 1d1cb3ec2b
commit 171866923c
5 changed files with 77 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
View File

@@ -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,

3
assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx
View File

@@ -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>

2
assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
View File

@@ -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

2
assets/js/src/form_editor/blocks/custom_select/edit.jsx
View File

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

68
tests/acceptance/FormEditorCreateCustomFieldCest.php Normal file
View File

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