diff --git a/js/admin/ppom-admin.js b/js/admin/ppom-admin.js index 61f0a604..61248b12 100644 --- a/js/admin/ppom-admin.js +++ b/js/admin/ppom-admin.js @@ -134,12 +134,16 @@ jQuery(function($) { const formData = new FormData(); const ppomFields = new URLSearchParams(); - // NOTE: since the request is to big for small values of `max_input_vars`, we will send the PPOM fields as a single string. - (new FormData(this)).forEach(( value, key) => { - if ( key.startsWith('ppom[') && typeof value === 'string' ) { - ppomFields.append( key, value ); + /* + NOTE: since the request is to big for small values of `max_input_vars`, we will send the PPOM fields as a single string. + + INFO: some parts of the code use `\r\n` as delimiter for arrays in textarea. `serializeArray` respect this convention while native JS Form value access sanitize it to just `\n`. + */ + $( this ).serializeArray().forEach(({ value, name }) => { + if ( name.startsWith('ppom[') && typeof value === 'string' ) { + ppomFields.append( name, value ); } else { - formData.append(key, value); + formData.append(name, value); } }); diff --git a/tests/e2e/specs/checkbox.spec.js b/tests/e2e/specs/checkbox.spec.js new file mode 100644 index 00000000..302ffaba --- /dev/null +++ b/tests/e2e/specs/checkbox.spec.js @@ -0,0 +1,86 @@ +/** + * WordPress dependencies + */ +import { test, expect } from "@wordpress/e2e-test-utils-playwright"; + +import { + addNewField, + addNewOptionInModal, + fillFieldNameAndId, + fillOptionNameAndValue, + pickFieldTypeInModal, + saveFieldInModal, + saveFields, +} from "../utils"; + +const CHECKBOX_OPTIONS = { + CHECKED_OPTION_1: 'yes', + CHECKED_OPTION_2: 'no', + UNCHECKED_OPTION_1: 'maybe' +}; + +test.describe("Checkbox", () => { + /*** + * Create a simple checkbox with 3 options. Two will be marked as checked by default. Check if the selection is respected on rendering. + */ + test("check default selected options", async ({ page, admin }) => { + await admin.visitAdminPage("admin.php?page=ppom"); + + await page.getByRole("link", { name: "Add New Group" }).click(); + await page + .getByRole("textbox") + .fill("Default Value for Checkbox"); + + await addNewField(page); + await pickFieldTypeInModal(page, "checkbox"); + + const modelId = 1; + const fieldId = `checkbox_test`; + + await fillFieldNameAndId( + page, + modelId, + `Checkbox Default values`, + fieldId, + ); + + + await page.locator(`textarea[name="ppom\\[${modelId}\\]\\[checked\\]"]`) + .fill(`${CHECKBOX_OPTIONS.CHECKED_OPTION_1}\r\n${CHECKBOX_OPTIONS.CHECKED_OPTION_2}`); + + await page + .locator(`#ppom_field_model_${modelId}`) + .getByText("Add Options", { exact: true }) + .click(); + + await fillOptionNameAndValue(page, modelId, 0, CHECKBOX_OPTIONS.CHECKED_OPTION_1, CHECKBOX_OPTIONS.CHECKED_OPTION_1); + await addNewOptionInModal(page, modelId); + await fillOptionNameAndValue(page, modelId, 1, CHECKBOX_OPTIONS.CHECKED_OPTION_2, CHECKBOX_OPTIONS.CHECKED_OPTION_2); + await addNewOptionInModal(page, modelId); + await fillOptionNameAndValue(page, modelId, 2, CHECKBOX_OPTIONS.UNCHECKED_OPTION_1, CHECKBOX_OPTIONS.UNCHECKED_OPTION_1); + await saveFieldInModal(page, modelId); + + await saveFields(page); + 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 selectedProductId = await productSelector.inputValue(); + await page.getByRole("button", { name: "Save", exact: true }).click(); + + await page.waitForLoadState("networkidle"); + await page.goto(`/?p=${selectedProductId}`); + + await expect(page.locator(`input[name="ppom[fields][${fieldId}][]"][value="${CHECKBOX_OPTIONS.CHECKED_OPTION_1}"]`)).toBeChecked(); + await expect(page.locator(`input[name="ppom[fields][${fieldId}][]"][value="${CHECKBOX_OPTIONS.CHECKED_OPTION_2}"]`)).toBeChecked(); + await expect(page.locator(`input[name="ppom[fields][${fieldId}][]"][value="${CHECKBOX_OPTIONS.UNCHECKED_OPTION_1}"]`)).not.toBeChecked(); + }); +});