Skip to content

Commit c6e6300

Browse files
Soare-Robert-DanielSoare-Robert-Daniel
committed
chore: add E2E for select options position on saving
1 parent 8344d90 commit c6e6300

File tree

3 files changed

+179
-42
lines changed

3 files changed

+179
-42
lines changed

‎tests/e2e/specs/conditions.spec.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* WordPress dependencies
33
*/
44
import { test, expect } from "@wordpress/e2e-test-utils-playwright";
5+
56
import {
67
addNewField,
78
addNewOptionInModal,

‎tests/e2e/specs/group-field-edit.spec.js

Lines changed: 83 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,22 @@
22
* WordPress dependencies
33
*/
44
import { test, expect } from "@wordpress/e2e-test-utils-playwright";
5-
import { createSimpleGroupField } from "../utils";
5+
6+
import {
7+
addNewField,
8+
addNewOptionInModal,
9+
createSimpleGroupField,
10+
fillFieldNameAndId,
11+
fillOptionNameAndValue,
12+
openFieldEditModal,
13+
pickFieldTypeInModal,
14+
saveFieldInModal,
15+
saveFields,
16+
switchToOptionsModalTab,
17+
} from "../utils";
618

719
test.describe("Group Fields Edit", () => {
8-
test("change fields order", async ({ page, admin }) => {
20+
test("change fields order on saving", async ({ page, admin }) => {
921
await createSimpleGroupField(admin, page);
1022
await page.waitForTimeout(500);
1123
await admin.visitAdminPage("admin.php?page=ppom");
@@ -33,7 +45,7 @@ test.describe("Group Fields Edit", () => {
3345
}
3446
});
3547

36-
await page.getByRole("button", { name: "Save Fields" }).click();
48+
await saveFields(page);
3749

3850
const newOrderFieldIds = await page.$$eval(
3951
"td.ppom_meta_field_id",
@@ -42,4 +54,72 @@ test.describe("Group Fields Edit", () => {
4254

4355
expect(newOrderFieldIds).not.toEqual(fieldIds);
4456
});
57+
58+
test("change select option order on saving", async ({ page, admin }) => {
59+
await admin.visitAdminPage("admin.php?page=ppom");
60+
61+
await page.getByRole("link", { name: "Add New Group" }).click();
62+
await page
63+
.getByRole("textbox")
64+
.fill("Change Select Option order");
65+
66+
await addNewField(page);
67+
await pickFieldTypeInModal(page, "select");
68+
69+
const modelId = 1;
70+
71+
await fillFieldNameAndId(
72+
page,
73+
modelId,
74+
`Select Input`,
75+
`select_test`,
76+
);
77+
78+
await switchToOptionsModalTab(page, modelId);
79+
80+
await fillOptionNameAndValue(page, modelId, 0, "Option 1", "option_1");
81+
await addNewOptionInModal(page, modelId);
82+
await fillOptionNameAndValue(page, modelId, 1, "Option 2", "option_2");
83+
84+
const initialOrderOptionsIds = await page.$$eval(
85+
`#ppom_field_model_${modelId} ul.ppom-options-sortable li.ui-sortable-handle input[data-metatype="id"]`,
86+
(inputId) => inputId.map((i) => i.value),
87+
);
88+
89+
await saveFieldInModal(page, modelId);
90+
await saveFields(page);
91+
92+
await page.waitForLoadState("networkidle");
93+
await page.reload();
94+
95+
await openFieldEditModal(page, modelId);
96+
await switchToOptionsModalTab(page, modelId);
97+
98+
// Move the last row into the first position using HTML manipulation.
99+
await page.evaluate((modelId) => {
100+
const tbody = document.querySelector(`#ppom_field_model_${modelId} ul.ppom-options-sortable`);
101+
102+
const rows = Array.from(tbody.querySelectorAll("li.ui-sortable-handle"));
103+
if (rows.length > 1) {
104+
const lastRow = rows[rows.length - 1];
105+
tbody.insertBefore(lastRow, rows[0]);
106+
}
107+
}, modelId);
108+
109+
await saveFieldInModal(page, modelId);
110+
await saveFields(page);
111+
112+
await page.waitForLoadState("networkidle");
113+
await page.reload();
114+
115+
await openFieldEditModal(page, modelId);
116+
await switchToOptionsModalTab(page, modelId);
117+
118+
const newOrderOptionsIds = await page.$$eval(
119+
`#ppom_field_model_${modelId} ul.ppom-options-sortable li.ui-sortable-handle input[data-metatype="id"]`,
120+
(inputId) => inputId.map((i) => i.value),
121+
);
122+
123+
expect(newOrderOptionsIds).not.toEqual(initialOrderOptionsIds);
124+
});
45125
});

‎tests/e2e/utils.js

Lines changed: 95 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
/**
22
* Pick the field type in the inputs modal.
3-
*
3+
*
44
* @param {import("@playwright/test").Page} page - The page object to interact with the web page.
55
* @param {string} fieldType The field type.
66
*/
7-
export async function pickFieldTypeInModal( page, fieldType ) {
8-
await page.locator(`.ppom-fields-name-model .ppom-field-item[data-field-type="${fieldType}"]`).click();
7+
export async function pickFieldTypeInModal(page, fieldType) {
8+
await page
9+
.locator(
10+
`.ppom-fields-name-model .ppom-field-item[data-field-type="${fieldType}"]`,
11+
)
12+
.click();
13+
}
14+
15+
/**
16+
* Open the Field Edit Modal.
17+
*
18+
* @param {import("@playwright/test").Page} page
19+
* @param {string|number} modelId
20+
*/
21+
export async function openFieldEditModal(page, modelId) {
22+
await page.locator(`#ppom_sort_id_${modelId} .ppom-edit-field`).click();
923
}
1024

1125
/**
@@ -17,106 +31,148 @@ export async function pickFieldTypeInModal( page, fieldType ) {
1731
* @returns {Promise<string>} The base name of the created fields.
1832
*/
1933
export async function createSimpleGroupField(admin, page, fieldsNumber = 2) {
20-
21-
await admin.visitAdminPage('admin.php?page=ppom');
34+
await admin.visitAdminPage("admin.php?page=ppom");
2235

23-
await page.getByRole('link', { name: 'Add New Group' }).click();
24-
await page.getByRole('textbox').fill('Test Group Field');
36+
await page.getByRole("link", { name: "Add New Group" }).click();
37+
await page.getByRole("textbox").fill("Test Group Field");
2538

26-
const randomNumber = Math.floor(Math.random() * 1000);
39+
const randomNumber = Math.floor(Math.random() * 1000);
2740

28-
for (let i = 1; i <= fieldsNumber; i++) {
29-
await addNewField(page);
30-
await pickFieldTypeInModal(page, 'text');
31-
await fillFieldNameAndId(page, i, `test ${randomNumber + i - 1}`, `test_${randomNumber + i - 1}`)
32-
await saveFieldInModal(page, i);
33-
}
41+
for (let i = 1; i <= fieldsNumber; i++) {
42+
await addNewField(page);
43+
await pickFieldTypeInModal(page, "text");
44+
await fillFieldNameAndId(
45+
page,
46+
i,
47+
`test ${randomNumber + i - 1}`,
48+
`test_${randomNumber + i - 1}`,
49+
);
50+
await saveFieldInModal(page, i);
51+
}
3452

35-
await saveFields(page);
36-
return `test ${randomNumber}`;
53+
await saveFields(page);
54+
return `test ${randomNumber}`;
3755
}
3856

3957
/**
4058
* Fill the `Title` (fieldName) and `Data name` (fieldId) on field edit modal.
41-
*
59+
*
4260
* @param {import("@playwright/test").Page} page The page.
4361
* @param {string|number} modelId The input field model id.
4462
* @param {string} name The field display name.
4563
* @param {string} id The field ID.
4664
*/
4765
export async function fillFieldNameAndId(page, modelId, name, id) {
48-
await page.locator(`input[name="ppom\\[${modelId}\\]\\[title\\]"]`).fill(name);
49-
await page.locator(`input[name="ppom\\[${modelId}\\]\\[data_name\\]"]`).fill(id);
66+
await page
67+
.locator(`input[name="ppom\\[${modelId}\\]\\[title\\]"]`)
68+
.fill(name);
69+
await page
70+
.locator(`input[name="ppom\\[${modelId}\\]\\[data_name\\]"]`)
71+
.fill(id);
5072
}
5173

5274
/**
5375
* Fill the option name and id on field edit modal.
54-
*
76+
*
5577
* @param {import("@playwright/test").Page} page The page.
5678
* @param {string|number} modelId The model ID.
5779
* @param {string|number} optionId The option ID.
5880
* @param {string} name The option display name.
5981
* @param {string|number} value The option value.
6082
*/
61-
export async function fillOptionNameAndValue(page, modelId, optionId, name, value) {
62-
await page.locator(`input[name="ppom\\[${modelId}\\]\\[options\\]\\[${optionId}\\]\\[option\\]"]`).fill(name);
63-
await page.locator(`input[name="ppom\\[${modelId}\\]\\[options\\]\\[${optionId}\\]\\[id\\]"]`).fill(value);
83+
export async function fillOptionNameAndValue(
84+
page,
85+
modelId,
86+
optionId,
87+
name,
88+
value,
89+
) {
90+
await page
91+
.locator(
92+
`input[name="ppom\\[${modelId}\\]\\[options\\]\\[${optionId}\\]\\[option\\]"]`,
93+
)
94+
.fill(name);
95+
await page
96+
.locator(
97+
`input[name="ppom\\[${modelId}\\]\\[options\\]\\[${optionId}\\]\\[id\\]"]`,
98+
)
99+
.fill(value);
64100
}
65101

66102
/**
67103
* Enable the condition in field edit modal.
68-
*
104+
*
69105
* @param {import("@playwright/test").Page} page The page.
70106
* @param {string|number} The input field model id.
71107
*/
72108
export async function enableConditionsInModal(page, modelId) {
73-
await page.locator(`input[name="ppom[${modelId}][logic]"] + span`).click();
109+
await page.locator(`input[name="ppom[${modelId}][logic]"] + span`).click();
74110
}
75111

76112
/**
77-
* Open the field edit modal.
78-
*
113+
* Switch to Conditions tab in field edit modal.
114+
*
79115
* @param {import("@playwright/test").Page} page The page.
80116
* @param {string|number} modelId The input field model id.
81117
*/
82118
export async function switchToConditionsModalTab(page, modelId) {
83-
await page.locator(`#ppom_field_model_${modelId} #condition_tab`).click();
119+
await page.locator(`#ppom_field_model_${modelId} #condition_tab`).click();
120+
}
121+
122+
/**
123+
* Switch to Options tab in field edit modal.
124+
*
125+
* @param {import("@playwright/test").Page} page The page.
126+
* @param {string|number} modelId The input field model id.
127+
*/
128+
export async function switchToOptionsModalTab(page, modelId) {
129+
await page
130+
.locator(`#ppom_field_model_${modelId}`)
131+
.getByText("Add Options", { exact: true })
132+
.click();
84133
}
85134

86135
/**
87136
* Add a new option below the last option in the field edit modal.
88-
*
137+
*
89138
* @param {import("@playwright/test").Page} page The page.
90139
* @param {string|number} modelId The input field model id.
91140
*/
92141
export async function addNewOptionInModal(page, modelId) {
93-
await page.locator(`#ppom_field_model_${modelId} button.ppom-add-option`).last().click();
142+
await page
143+
.locator(`#ppom_field_model_${modelId} button.ppom-add-option`)
144+
.last()
145+
.click();
94146
}
95147

96148
/**
97149
* Save the fields of group input fields.
98-
*
99-
* @param {import("@playwright/test").Page} page The page.
150+
*
151+
* @param {import("@playwright/test").Page} page The page.
100152
*/
101153
export async function saveFields(page) {
102-
await page.getByRole('button', { name: 'Save Fields' }).click();
154+
await page.getByRole("button", { name: "Save Fields" }).click();
103155
}
104156

105157
/**
106158
* Open the modal for adding a new input field.
107-
*
108-
* @param {import("@playwright/test").Page} page The page.
159+
*
160+
* @param {import("@playwright/test").Page} page The page.
109161
*/
110162
export async function addNewField(page) {
111-
await page.getByRole('button', { name: 'Add field' }).click();
163+
await page.getByRole("button", { name: "Add field" }).click();
112164
}
113165

114166
/**
115167
* Save the option field in the field edit modal.
116-
*
168+
*
117169
* @param {import("@playwright/test").Page} page The page.
118170
* @param {string|number} modelId The input field model id.
119171
*/
120172
export async function saveFieldInModal(page, modelId) {
121-
await page.locator(`.ppom_sort_id_${modelId} :is(.ppom-add-field, .ppom-update-field)`).click();
122-
}
173+
await page
174+
.locator(
175+
`.ppom_sort_id_${modelId} :is(.ppom-add-field, .ppom-update-field)`,
176+
)
177+
.click();
178+
}

0 commit comments

Comments
 (0)