chore: add E2E test for Condition with select input

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();
+	});
+});

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<string>} - 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<string>} 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();
 }