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

Update form tests to have front end checks [MAILPOET-3334]

Browse Source 
[MAILPOET-3334](https://mailpoet.atlassian.net/browse/MAILPOET-3334)
This commit is contained in:
Veljko V
2020-12-02 17:19:15 +01:00
parent f3df805bb3
commit 7d88f3eaea
11 changed files with 118 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/Form/Block/Date.php
View File

@ -63,7 +63,7 @@ class Date {
$html .= $this->getDays($block);
$html .= '</select>';
} else if ($dateSelector === 'MM') {
$html .= '<select class="mailpoet_select mailpoet_date_month" ';
$html .= '<select class="mailpoet_select mailpoet_date_month" data-automation-id="form_date_month" ';
$html .= ' style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"';
$html .= $this->rendererHelper->getInputValidation($block, [
'required-message' => __('Please select a month', 'mailpoet'),
@ -72,7 +72,7 @@ class Date {
$html .= $this->getMonths($block);
$html .= '</select>';
} else if ($dateSelector === 'YYYY') {
$html .= '<select class="mailpoet_date_year" ';
$html .= '<select class="mailpoet_date_year" data-automation-id="form_date_year" ';
$html .= ' style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"';
$html .= $this->rendererHelper->getInputValidation($block, [
'required-message' => __('Please select a year', 'mailpoet'),

2
lib/Form/Block/Divider.php
View File

@ -44,6 +44,6 @@ class Divider {
"width: $width%",
];
$style = implode(";", $dividerStyles);
return "<div class='mailpoet_divider' style='$style'></div>";
return "<div class='mailpoet_divider' data-automation-id='form_divider' style='$style'></div>";
}
}

1
lib/Form/Block/Select.php
View File

@ -41,6 +41,7 @@ class Select {
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
$html .= '<select
class="mailpoet_select"
data-automation-id="form_custom_select"
name="' . $fieldName . '" '
. $automationId
. 'style="' . $this->blockStylesRenderer->renderForSelect([], $formSettings) . '"'

2
lib/Form/Block/Text.php
View File

@ -48,7 +48,7 @@ class Text {
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
$html .= '<input type="' . $type . '" class="mailpoet_text" ';
$html .= '<input type="' . $type . '" class="mailpoet_text" data-automation-id="form_custom_text" ';
$html .= 'name="data[' . $name . ']" ';

2
lib/Form/Block/Textarea.php
View File

@ -35,7 +35,7 @@ class Textarea {
$lines = (isset($block['params']['lines']) ? (int)$block['params']['lines'] : 1);
$html .= $this->inputStylesRenderer->renderPlaceholderStyles($block, 'textarea[name="data[' . $name . ']"]');
$html .= '<textarea class="mailpoet_textarea" rows="' . $lines . '" ';
$html .= '<textarea class="mailpoet_textarea" data-automation-id="form_custom_text_area" rows="' . $lines . '" ';
$html .= 'name="data[' . $name . ']"';

9
tests/acceptance/FormEditorAddDividerCest.php
View File

@ -13,7 +13,7 @@ class FormEditorAddDividerCest {
$segment = $segmentFactory->withName($segmentName)->create();
$formName = 'My fancy form';
$form = new Form();
$form->withName($formName)->withSegments([$segment])->create();
$form->withName($formName)->withSegments([$segment])->withDisplayBelowPosts()->create();
$i->login();
$i->amOnMailPoetPage('Forms');
@ -49,5 +49,12 @@ class FormEditorAddDividerCest {
$i->seeInField('.mailpoet-automation-spacer-height-size input[type="number"]', 50);
$i->seeInField('.mailpoet-automation-styles-divider-height input[type="number"]', 10);
$i->seeInField('.mailpoet-automation-styles-divider-width input[type="number"]', 10);
$i->wantTo('Check divider on front end');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->assertAttributeContains('[data-automation-id="form_divider"]', 'style', 'height: 10px;');
$i->assertAttributeContains('[data-automation-id="form_divider"]', 'style', 'width: 10%;');
$i->assertAttributeContains('[data-automation-id="form_divider"]', 'style', 'border-top: 10px dotted black;');
}
}

20
tests/acceptance/FormEditorAddListSelectionCest.php
View File

@ -13,7 +13,7 @@ class FormEditorAddListSelectionCest {
$formSegment = $segmentFactory->withName($firstSegmentName)->create();
$formName = 'My fancy form';
$form = new Form();
$form->withName($formName)->withSegments([$formSegment])->create();
$form->withName($formName)->withSegments([$formSegment])->withDisplayBelowPosts()->create();
$secondSegmentName = 'Second fancy list';
$segmentFactory->withName($secondSegmentName)->create();
@ -23,14 +23,14 @@ class FormEditorAddListSelectionCest {
$i->clickItemRowActionByItemName($formName, 'Edit');
$i->waitForElement('[data-automation-id="form_title_input"]');
// Insert list selection block
$i->wantTo('Insert list selection block');
$i->addFromBlockInEditor('List selection');
// Verify that user must choose a list
$i->wantTo('Verify that user must choose a list');
$i->click('[data-automation-id="form_save_button"]');
$i->waitForText('Please select a list');
// Configure list selection block
$i->wantTo('Configure list selection block');
$i->waitForElement('[data-automation-id="mailpoet_list_selection_block"]');
$i->click('[data-automation-id="mailpoet_list_selection_block"]');
$i->click('[data-automation-id="mailpoet_block_settings_tab"]');
@ -38,20 +38,26 @@ class FormEditorAddListSelectionCest {
$i->selectOption('[data-automation-id="select_list_selections_list"]', $secondSegmentName);
$i->seeNoJSErrors();
// Save the form
$i->wantTo('Save the form');
$i->saveFormInEditor();
// Reload the page and check that data were saved
$i->wantTo('Reload the page and check that data were saved');
$i->reloadPage();
$i->waitForElement('[data-automation-id="mailpoet_list_selection_block"]');
$i->click('[data-automation-id="mailpoet_list_selection_block"]');
$i->seeInField('[data-automation-id="settings_first_name_label_input"]', 'Choose your list:');
$i->waitForText($secondSegmentName);
// Go back to the forms list and verify the attached list
$i->wantTo('Go back to the forms list and verify the attached list');
$i->amOnMailpoetPage('Forms');
$i->waitForText($formName);
$i->waitForText('User choice:');
$i->waitForText($secondSegmentName);
$i->wantTo('Check list selection on front end');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->waitForText('Choose your list:');
$i->waitForText($secondSegmentName);
}
}

18
tests/acceptance/FormEditorAddNamesCest.php
View File

@ -12,30 +12,40 @@ class FormEditorAddNamesCest {
$segment = $segmentFactory->withName($segmentName)->create();
$formName = 'My fancy form';
$form = new Form();
$form->withName($formName)->withSegments([$segment])->create();
$form->withName($formName)->withSegments([$segment])->withDisplayBelowPosts()->create();
$firstNameLabelModified = 'Your First Name';
$lastNameLabelModified = 'Your Last Name';
$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"]');
// Add First & Last name blocks
$i->wantTo('Add First & Last name blocks');
$i->addFromBlockInEditor('First name');
$i->addFromBlockInEditor('Last name');
// Modify First & Last name blocks
$i->wantTo('Modify First & Last name blocks');
$i->click('[data-automation-id="editor_first_name_input"]');
$i->fillField('[data-automation-id="settings_first_name_label_input"]', $firstNameLabelModified);
$i->click('[data-automation-id="editor_last_name_input"]');
$i->fillField('[data-automation-id="settings_last_name_label_input"]', $lastNameLabelModified);
$i->saveFormInEditor();
// Reload page and check data were saved
$i->wantTo('Reload page and check data were saved');
$i->reloadPage();
$i->waitForElement('[data-automation-id="form_title_input"]');
$i->click('[data-automation-id="editor_first_name_input"]');
$i->seeInField('[data-automation-id="settings_first_name_label_input"]', $firstNameLabelModified);
$i->click('[data-automation-id="editor_last_name_input"]');
$i->seeInField('[data-automation-id="settings_last_name_label_input"]', $lastNameLabelModified);
$i->wantTo('Check first & last names on front end');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->assertAttributeContains('[data-automation-id="form_first_name"]', 'placeholder', $firstNameLabelModified);
$i->assertAttributeContains('[data-automation-id="form_last_name"]', 'placeholder', $lastNameLabelModified);
}
}

14
tests/acceptance/FormEditorButtonStylesCest.php
View File

@ -20,9 +20,10 @@ class FormEditorButtonStylesCest {
$i->clickItemRowActionByItemName($formName, 'Edit');
$i->waitForElement('[data-automation-id="form_title_input"]');
// Apply some styles to submit button
$i->wantTo('Apply some styles to submit button');
$i->click('[data-automation-id="editor_submit_input"]');
$i->waitForElement('.mailpoet-automation-input-styles-panel');
$i->fillField('[data-automation-id="settings_submit_label_input"]', 'Join Now');
$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
@ -30,21 +31,24 @@ class FormEditorButtonStylesCest {
$i->clearFormField('.mailpoet-automation-styles-border-size input[type="number"]');
$i->fillField('.mailpoet-automation-styles-border-size input[type="number"]', 10); // Set border size
// Check element has styles
$i->wantTo('Check element has styles');
$i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'border-width: 10px;');
$i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'font-weight: bold;');
// Save form
$i->wantTo('Save form');
$i->saveFormInEditor();
// Reload page and check data were saved
$i->wantTo('Reload page and check data were saved');
$i->reloadPage();
$i->waitForElement('[data-automation-id="form_title_input"]');
$i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'border-width: 10px;');
$i->assertAttributeContains('[data-automation-id="editor_submit_input"]', 'style', 'font-weight: bold;');
// Check styles are applied on frontend page
$i->wantTo('Check styles are applied on frontend page');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->assertAttributeContains('[data-automation-id="subscribe-submit-button"]', 'style', 'border-width: 10px;');
$i->assertAttributeContains('[data-automation-id="subscribe-submit-button"]', 'style', 'font-weight: bold;');
$i->seeInField('[data-automation-id="subscribe-submit-button"]', 'Join Now');
}
}

95
tests/acceptance/FormEditorCreateCustomFieldCest.php
View File

@ -12,7 +12,7 @@ class FormEditorCreateCustomFieldCest {
$segment = $segmentFactory->withName($segmentName)->create();
$formName = 'My fancy form';
$form = new Form();
$form->withName($formName)->withSegments([$segment])->create();
$form->withName($formName)->withSegments([$segment])->withDisplayBelowPosts()->create();
}
private function openFormInEditor($i) {
@ -35,7 +35,7 @@ class FormEditorCreateCustomFieldCest {
public function createCustomSelect(\AcceptanceTester $i) {
$i->wantTo('Create custom field: select');
// Configure, check and save the custom field block
$i->wantTo('Configure, check and save the custom field block');
$i->waitForElement('[data-automation-id="create_custom_field_form"]');
$i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Select');
$i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom select');
@ -45,78 +45,95 @@ class FormEditorCreateCustomFieldCest {
$this->saveCustomFieldBlock($i);
$this->checkCustomSelectInForm($i);
// Save, reload and check data were saved
$i->wantTo('Save, reload and check data were saved');
$i->saveFormInEditor();
$i->reloadPage();
$this->checkCustomSelectInForm($i);
$i->wantTo('Check custom select on frontend page');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->selectOption('[data-automation-id="form_custom_select"]', 'First option');
$i->selectOption('[data-automation-id="form_custom_select"]', 'Option 2');
}
public function createCustomTextInput(\AcceptanceTester $i) {
$i->wantTo('Create custom field: text input');
// Configure, check and save the custom field block
$i->wantTo('Configure, check and save the custom field block');
$i->waitForElement('[data-automation-id="create_custom_field_form"]');
$i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Text Input');
$i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom text input');
$i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Numbers only');
$this->saveCustomFieldBlock($i);
// Save, reload and check data were saved
$i->wantTo('Save, reload and check data were saved');
$i->saveFormInEditor();
$i->reloadPage();
$this->checkCustomTextInputInForm($i);
// Change text input validation
$i->wantTo('Change text input validation');
$i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Alphanumerical');
$i->click('Update custom field');
$i->waitForText('Custom field saved.');
// Update label and save the form
$i->wantTo('Update label and save the form');
$i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom text input');
$i->saveFormInEditor();
// Reload page and check data were saved
$i->wantTo('Reload page and check data were saved');
$i->reloadPage();
$i->waitForElement('[data-automation-id="editor_custom_text_input"]');
$i->assertAttributeContains('[data-automation-id="editor_custom_text_input"]', 'placeholder', 'My updated custom text input');
$i->wantTo('Check custom text input on frontend page');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->fillField('[data-automation-id="form_custom_text"]', 'Lorem ipsum dolor');
}
public function createCustomTextArea(\AcceptanceTester $i) {
$i->wantTo('Create custom field: text area');
// Configure, check and save the custom field block
$i->wantTo('Configure, check and save the custom field block');
$i->waitForElement('[data-automation-id="create_custom_field_form"]');
$i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Text Area');
$i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom text area');
$i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Numbers only');
$this->saveCustomFieldBlock($i);
// Save, reload and check data were saved
$i->wantTo('Save, reload and check data were saved');
$i->saveFormInEditor();
$i->reloadPage();
$this->checkCustomTextAreaInForm($i);
// Change text input validation
$i->wantTo('Change text input validation');
$i->selectOption('[data-automation-id="settings_custom_text_input_validation_type"]', 'Alphanumerical');
$i->click('Update custom field');
$i->waitForText('Custom field saved.');
// Change text area to 3 lines
$i->wantTo('Change text area to 3 lines');
$i->selectOption('[data-automation-id="settings_custom_text_area_number_of_lines"]', '3 lines');
// Update label and save the form
$i->wantTo('Update label and save the form');
$i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom text area');
$i->saveFormInEditor();
// Reload page and check data were saved
$i->wantTo('Reload page and check data were saved');
$i->reloadPage();
$i->waitForElement('[data-automation-id="editor_custom_textarea_input"]');
$i->assertAttributeContains('[data-automation-id="editor_custom_textarea_input"]', 'placeholder', 'My updated custom text area');
$i->click('[data-automation-id="editor_custom_textarea_input"]');
$i->seeOptionIsSelected('[data-automation-id="settings_custom_text_area_number_of_lines"]', '3 lines');
$i->wantTo('Check custom text area on frontend page');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->assertAttributeContains('[data-automation-id="form_custom_text_area"]', 'placeholder', 'My updated custom text area');
$i->fillField('[data-automation-id="form_custom_text_area"]', 'Lorem ipsum dolor sit amet');
}
public function createCustomRadioButtons(\AcceptanceTester $i) {
$i->wantTo('Create custom field: radio buttons');
// Configure, check and save the custom field block
$i->wantTo('Configure, check and save the custom field block');
$i->waitForElement('[data-automation-id="create_custom_field_form"]');
$i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Radio buttons');
$i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom radio buttons');
@ -124,56 +141,69 @@ class FormEditorCreateCustomFieldCest {
$i->click('[data-automation-id="custom_field_values_add_item"]');
$this->saveCustomFieldBlock($i);
// Save, reload and check data were saved
$i->wantTo('Save, reload and check data were saved');
$i->saveFormInEditor();
$i->reloadPage();
$this->checkCustomRadioButtonsInForm($i, 'Option 1');
// Change text input validation
$i->wantTo('Change text input validation');
$i->fillField('[data-automation-id="custom_field_value_settings_value"][value="Option 1"]', 'New option');
$i->click('Update custom field');
$i->waitForText('Custom field saved.');
// Update label and save the form
$i->wantTo('Update label and save the form');
$i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom radio buttons');
$i->saveFormInEditor();
// Reload page and check data were saved
$i->wantTo('Reload page and check data were saved');
$i->reloadPage();
$this->checkCustomRadioButtonsInForm($i, 'New option');
$i->wantTo('Check radio buttons on frontend page');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->waitForText('My updated custom radio buttons');
$i->waitForText('New option');
$i->waitForText('Option 2');
}
public function createCustomCheckbox(\AcceptanceTester $i) {
$i->wantTo('Create custom field: checkbox');
// Configure, check and save the custom field block
$i->wantTo('Configure, check and save the custom field block');
$i->waitForElement('[data-automation-id="create_custom_field_form"]');
$i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Checkbox');
$i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom checkbox');
$i->fillField('[data-automation-id="settings_custom_checkbox_value"]', 'Option 1');
$this->saveCustomFieldBlock($i);
// Save, reload and check data were saved
$i->wantTo('Save, reload and check data were saved');
$i->saveFormInEditor();
$i->reloadPage();
$this->checkCustomCheckboxInForm($i, 'Option 1');
// Change text input validation
$i->wantTo('Change text input validation');
$i->fillField('[data-automation-id="settings_custom_checkbox_value"][value="Option 1"]', 'New option');
$i->click('Update custom field');
$i->waitForText('Custom field saved.');
// Update label and save the form
$i->wantTo('Update label and save the form');
$i->fillField('[data-automation-id="settings_custom_text_label_input"]', 'My updated custom checkbox');
$i->saveFormInEditor();
// Reload page and check data were saved
$i->wantTo('Reload page and check data were saved');
$i->reloadPage();
$this->checkCustomCheckboxInForm($i, 'New option');
$i->wantTo('Check checkbox on frontend page');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->waitForText('My updated custom checkbox');
$i->waitForText('New option');
}
public function createCustomDate(\AcceptanceTester $i) {
$i->wantTo('Create custom field: date');
// Configure, check and save the custom field block
$i->wantTo('Configure, check and save the custom field block');
$i->waitForElement('[data-automation-id="create_custom_field_form"]');
$i->selectOption('[data-automation-id="create_custom_field_type_select"]', 'Date');
$i->fillField('[data-automation-id="create_custom_field_name_input"]', 'My custom date');
@ -181,24 +211,31 @@ class FormEditorCreateCustomFieldCest {
$i->selectOption('[data-automation-id="settings_custom_date_format"]', 'YYYY/MM');
$this->saveCustomFieldBlock($i);
// Save, reload and check data were saved
$i->wantTo('Save, reload and check data were saved');
$i->saveFormInEditor();
$i->reloadPage();
$this->checkCustomDateInForm($i);
// Change date type and verify you don't see format anymore
$i->wantTo('Change date type and verify you do not see format anymore');
$i->selectOption('[data-automation-id="settings_custom_date_type"]', 'Year');
$i->dontSee('[data-automation-id="settings_custom_date_format"]');
// Update label and save the form
$i->wantTo('Update label and save the form');
$i->fillField('[data-automation-id="settings_custom_date_label_input"]', 'My updated custom date');
$i->saveFormInEditor();
// Reload page and check data were saved
$i->wantTo('Reload page and check data were saved');
$i->reloadPage();
$i->waitForElement('[data-automation-id="editor_custom_date_label"]');
$i->click('[data-automation-id="editor_custom_date_label"]');
$i->seeInField('[data-automation-id="settings_custom_date_label_input"]', 'My updated custom date');
$i->wantTo('Check custom date on frontend page');
$postUrl = $i->createPost('Title', 'Content');
$i->amOnUrl($postUrl);
$i->waitForText('My updated custom date');
$i->assertAttributeContains('[data-automation-id="form_date_year"]', 'placeholder', 'Year');
$i->assertAttributeContains('[data-automation-id="form_date_month"]', 'placeholder', 'Month');
}
private function checkCustomDateInForm($i) {

2
tests/acceptance/FormEditorTextInputStylesCest.php
View File

@ -68,5 +68,7 @@ class FormEditorTextInputStylesCest {
$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;');
$i->see('Heading Lorem');
$i->see('Paragraph ipsum dolor');
}
}