From 37021a90b2fba55cdc338d9b0654ad803c1c775c Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Mon, 14 Oct 2024 17:58:12 +0300 Subject: [PATCH] chore: add E2E test for Condition with select input --- tests/e2e/specs/conditions.spec.js | 82 ++++++++++++++++++++++++++++++ tests/e2e/utils.js | 75 +++++++++++++++++++++++++-- 2 files changed, 153 insertions(+), 4 deletions(-) create mode 100644 tests/e2e/specs/conditions.spec.js diff --git a/tests/e2e/specs/conditions.spec.js b/tests/e2e/specs/conditions.spec.js new file mode 100644 index 0000000..76b02be --- /dev/null +++ b/tests/e2e/specs/conditions.spec.js @@ -0,0 +1,82 @@ +/** + * WordPress dependencies + */ +import { test, expect } from '@wordpress/e2e-test-utils-playwright'; +import { addNewOptionInModal, enableConditionsInModal, fillFieldNameAndId, fillOptionNameAndValue, pickFieldTypeInModal, switchToConditionsModalTab } from '../utils'; + +test.describe( 'Conditions', () => { + + /*** + * Create two select fields (with two options each) and one text field. Display the text field if the second option of the second select is selected. + */ + test( 'conditions with Select input', async({ page, admin }) => { + + await admin.visitAdminPage('admin.php?page=ppom'); + + await page.getByRole('link', { name: 'Add New Group' }).click(); + await page.getByRole('textbox').fill('Test Group Field with Select Conditions'); + + const randomNumber = Math.floor(Math.random() * 1000); + const numOfInputFields = 2; + + for (let i = 1; i <= numOfInputFields; i++) { + await page.getByRole('button', { name: 'Add field' }).click(); + await pickFieldTypeInModal( page, 'select' ); + + await fillFieldNameAndId( page, i, `Select Input ${randomNumber + i - 1}`, `select_test_${randomNumber + i - 1}`); + + await page.locator(`#ppom_field_model_${i}`).getByText('Add Options', { exact: true }).click(); + + await fillOptionNameAndValue(page, i, 0, 'Option 1', 'option_1'); + await addNewOptionInModal(page, i); + await fillOptionNameAndValue(page, i, 1, 'Option 2', 'option_2'); + + await page.getByRole('button', { name: 'Add Field', exact: true }).click(); + } + + await page.getByRole('button', { name: 'Add field' }).click(); + await pickFieldTypeInModal( page, 'text' ); + await fillFieldNameAndId( page, numOfInputFields + 1, 'Output', 'output_test'); + + await page.getByRole('button', { name: 'Save Fields' }).click(); + await page.waitForLoadState('networkidle'); + await page.reload(); + + await page.locator(`#ppom_sort_id_${numOfInputFields + 1} .ppom-edit-field`).click(); + + await switchToConditionsModalTab( page, numOfInputFields + 1); + await enableConditionsInModal(page, numOfInputFields + 1); + + await page.locator(`select[name="ppom\\[${numOfInputFields + 1}\\]\\[conditions\\]\\[rules\\]\\[0\\]\\[elements\\]"]`).selectOption({ index: 1 }); + + await page.locator(`select[name="ppom\\[${numOfInputFields + 1}\\]\\[conditions\\]\\[rules\\]\\[0\\]\\[operators\\]"]`).selectOption({ index: 0 }); + + await page.locator(`select[name="ppom\\[${numOfInputFields + 1}\\]\\[conditions\\]\\[rules\\]\\[0\\]\\[element_values\\]"]`).selectOption({ index: 1 }); + + await page.getByRole('button', { name: 'Update Field', exact: true }).click(); + await page.getByRole('button', { name: 'Save Fields' }).click(); + + await page.waitForLoadState('networkidle'); + + await page.reload(); + await page.getByText('Attach to Products').click({ force: true }); + await page.waitForLoadState('networkidle'); + + const productSelector = page.locator('select[name="ppom-attach-to-products\\[\\]"]'); + await page.waitForLoadState('networkidle'); + + await productSelector.selectOption({ index: 0 }); + const selectedOption = await productSelector.inputValue(); + console.log('Selected option value:', selectedOption); + await page.getByRole('button', { name: 'Save', exact: true }).click(); + + await page.waitForLoadState('networkidle'); + await page.goto(`/?p=${selectedOption}`); + + await expect( page.getByLabel('Output') ).toBeHidden(); + + await page.locator(`select[name="ppom[fields][select_test_${randomNumber + 1 }]"]`).selectOption({ index: 1 }); + + await expect( page.getByLabel('Output') ).toBeVisible(); + }); +}); \ No newline at end of file diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index 677f66f..669f012 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -1,10 +1,20 @@ +/** + * Pick the field type in the inputs modal. + * + * @param {import("@playwright/test").Page} page - The page object to interact with the web page. + * @param {string} fieldType The field type. + */ +export async function pickFieldTypeInModal( page, fieldType ) { + await page.locator(`.ppom-fields-name-model .ppom-field-item[data-field-type="${fieldType}"]`).click(); +} + /** * Creates a simple group field in the admin panel. * - * @param {object} admin - The admin object to interact with the admin panel. - * @param {object} page - The page object to interact with the web page. - * @param {number} [fieldsNumber=2] - The number of fields to create in the group. - * @returns {Promise} - The base name of the created fields. + * @param {object} admin The admin object to interact with the admin panel. + * @param {import("@playwright/test").Page} page The page object to interact with the web page. + * @param {number} [fieldsNumber=2] The number of fields to create in the group. + * @returns {Promise} The base name of the created fields. */ export async function createSimpleGroupField(admin, page, fieldsNumber = 2) { @@ -28,4 +38,61 @@ export async function createSimpleGroupField(admin, page, fieldsNumber = 2) { await page.waitForTimeout(1000); return `test ${randomNumber}`; +} + +/** + * Fill the `Title` (fieldName) and `Data name` (fieldId) on field edit modal. + * + * @param {import("@playwright/test").Page} page The page. + * @param {string|number} modelId The model ID. + * @param {string} name The field display name. + * @param {string} id The field ID. + */ +export async function fillFieldNameAndId(page, modelId, name, id) { + await page.locator(`input[name="ppom\\[${modelId}\\]\\[title\\]"]`).fill(name); + await page.locator(`input[name="ppom\\[${modelId}\\]\\[data_name\\]"]`).fill(id); +} + +/** + * Fill the option name and id on field edit modal. + * + * @param {import("@playwright/test").Page} page The page. + * @param {string|number} modelId The model ID. + * @param {string|number} optionId The option ID. + * @param {string} name The option display name. + * @param {string|number} value The option value. + */ +export async function fillOptionNameAndValue(page, modelId, optionId, name, value) { + await page.locator(`input[name="ppom\\[${modelId}\\]\\[options\\]\\[${optionId}\\]\\[option\\]"]`).fill(name); + await page.locator(`input[name="ppom\\[${modelId}\\]\\[options\\]\\[${optionId}\\]\\[id\\]"]`).fill(value); +} + +/** + * Enable the condition in field edit modal. + * + * @param {import("@playwright/test").Page} page + * @param {string|number} modelId + */ +export async function enableConditionsInModal(page, modelId) { + await page.locator(`input[name="ppom[${modelId}][logic]"] + span`).click(); +} + +/** + * Open the field edit modal. + * + * @param {import("@playwright/test").Page} page The page. + * @param {string|number} modelId The model id. + */ +export async function switchToConditionsModalTab(page, modelId) { + await page.locator(`#ppom_field_model_${modelId} #condition_tab`).click(); +} + +/** + * Add a new option below the last option in the field edit modal. + * + * @param {import("@playwright/test").Page} page The page. + * @param {string|number} modelId The model id. + */ +export async function addNewOptionInModal(page, modelId) { + await page.locator(`#ppom_field_model_${modelId} button.ppom-add-option`).last().click(); } \ No newline at end of file