@redrockswebdevelopment/formstack-form-testing 0.1.24 → 0.1.26

package/dist/index.js

@@ -920,6 +920,19 @@ export function normalizeLiveFormChoiceValue(value, otherValue = "") {
 export function buildLiveFormSelectValue(value) {
     return { value };
 }
+export function readLiveFormSelectValue(value) {
+    if (typeof value === "string")
+        return value;
+    if (!value || typeof value !== "object")
+        return null;
+    const selected = value.value;
+    return typeof selected === "string" && selected.length > 0 ? selected : null;
+}
+export function normalizeLiveFormSelectValue(value) {
+    if (typeof value === "string")
+        return buildLiveFormSelectValue(value);
+    return buildLiveFormSelectValue(value.value);
+}
 export function buildLiveFormCheckboxValue(values, otherValue = null) {
     return Object.fromEntries([...values.map((value, index) => [String(index), value]), ["otherValue", otherValue]]);
 }
@@ -974,6 +987,22 @@ export function buildLiveFormMatrixValue(selections) {
         }),
     };
 }
+export function readLiveFormMatrixSelections(value) {
+    if (Array.isArray(value)) {
+        return value.filter((entry) => typeof entry === "string");
+    }
+    if (!value || typeof value !== "object")
+        return [];
+    const selections = value.value;
+    return Array.isArray(selections)
+        ? selections.filter((entry) => typeof entry === "string")
+        : [];
+}
+export function normalizeLiveFormMatrixValue(selections) {
+    if (Array.isArray(selections))
+        return buildLiveFormMatrixValue(selections);
+    return buildLiveFormMatrixValue(readLiveFormMatrixSelections(selections));
+}
 export async function readLiveFormFieldValue(page, options) {
     if (!hasEvaluate(page)) {
         throw new Error("readLiveFormFieldValue requires a Playwright page with evaluate().");
@@ -1882,6 +1911,168 @@ export async function waitForLiveFormChoiceState(page, options) {
     }
     return latest;
 }
+export async function readLiveFormSelectState(page, options) {
+    if (!hasEvaluate(page)) {
+        throw new Error("readLiveFormSelectState requires a Playwright page with evaluate().");
+    }
+    return page.evaluate((stateOptions) => {
+        const controlSnapshot = (control) => ({
+            tagName: control.tagName.toLowerCase(),
+            type: control.getAttribute("type"),
+            id: control.getAttribute("id"),
+            name: control.getAttribute("name"),
+            value: control.getAttribute("value"),
+            currentValue: control.value,
+            checked: null,
+        });
+        const root = stateOptions.selector != null
+            ? document.querySelector(stateOptions.selector)
+            : stateOptions.internalLabel != null
+                ? document.querySelector(`[data-internal-label="${CSS.escape(stateOptions.internalLabel)}"]`)
+                : stateOptions.fieldId == null
+                    ? null
+                    : document.querySelector(`#fsCell${CSS.escape(String(stateOptions.fieldId))}, #fsFieldCell${CSS.escape(String(stateOptions.fieldId))}, [data-testid="field-${CSS.escape(String(stateOptions.fieldId))}"]`);
+        const selects = root
+            ? Array.from(root.querySelectorAll("select"))
+            : [];
+        const controls = selects.map(controlSnapshot);
+        const primary = selects[0] ?? null;
+        const options = primary
+            ? Array.from(primary.options).map((option) => ({
+                value: option.value,
+                text: option.textContent?.replace(/\s+/g, " ").trim() ?? "",
+                selected: option.selected,
+            }))
+            : [];
+        const selected = options.find((option) => option.selected) ?? null;
+        const selectedValue = primary ? primary.value : null;
+        const selectedText = selected?.text ?? null;
+        const allValues = options
+            .map((option) => option.value)
+            .filter((value) => value.length > 0);
+        return {
+            fieldMatched: Boolean(root),
+            selectedValue,
+            selectedText,
+            allValues,
+            ...(stateOptions.expectedValue === undefined ? {} : { expectedValue: stateOptions.expectedValue }),
+            matched: Boolean(root) &&
+                primary !== null &&
+                (stateOptions.expectedValue === undefined || selectedValue === stateOptions.expectedValue),
+            controls,
+            options,
+        };
+    }, options);
+}
+export async function waitForLiveFormSelectState(page, options) {
+    const timeoutMs = options.timeoutMs ?? 10_000;
+    const intervalMs = options.intervalMs ?? 100;
+    const startedAt = Date.now();
+    let latest = await readLiveFormSelectState(page, options);
+    while (!latest.matched && Date.now() - startedAt < timeoutMs) {
+        await delay(intervalMs);
+        latest = await readLiveFormSelectState(page, options);
+    }
+    return latest;
+}
+export async function readLiveFormMatrixState(page, options) {
+    if (!hasEvaluate(page)) {
+        throw new Error("readLiveFormMatrixState requires a Playwright page with evaluate().");
+    }
+    return page.evaluate((stateOptions) => {
+        const normalizeText = (value) => (value ?? "").replace(/\s+/g, " ").trim();
+        const controlSnapshot = (control) => ({
+            tagName: control.tagName.toLowerCase(),
+            type: control.getAttribute("type"),
+            id: control.getAttribute("id"),
+            name: control.getAttribute("name"),
+            value: control.getAttribute("value"),
+            currentValue: control.value,
+            checked: control.checked,
+        });
+        const root = stateOptions.selector != null
+            ? document.querySelector(stateOptions.selector)
+            : stateOptions.internalLabel != null
+                ? document.querySelector(`[data-internal-label="${CSS.escape(stateOptions.internalLabel)}"]`)
+                : stateOptions.fieldId == null
+                    ? null
+                    : document.querySelector(`#fsCell${CSS.escape(String(stateOptions.fieldId))}, #fsFieldCell${CSS.escape(String(stateOptions.fieldId))}, [data-testid="field-${CSS.escape(String(stateOptions.fieldId))}"]`);
+        const controls = root
+            ? Array.from(root.querySelectorAll("input[type=\"radio\"], input[type=\"checkbox\"]"))
+            : [];
+        const inferCell = (control) => {
+            const tableCell = control.closest("td, th");
+            const tableRow = control.closest("tr");
+            const table = control.closest("table");
+            const rowHeader = tableRow
+                ? tableRow.querySelector("th") ??
+                    Array.from(tableRow.children).find((child) => !child.contains(control))
+                : null;
+            const columnIndex = tableCell?.cellIndex ?? -1;
+            const headerRows = table ? Array.from(table.querySelectorAll("thead tr, tr")).filter((row) => !row.contains(control)) : [];
+            const columnHeader = columnIndex >= 0
+                ? headerRows
+                    .map((row) => row.children.item(columnIndex))
+                    .find((cell) => cell && normalizeText(cell.textContent).length > 0) ?? null
+                : null;
+            const ariaLabel = control.getAttribute("aria-label");
+            const label = control.id ? root?.querySelector(`label[for="${CSS.escape(control.id)}"]`) : null;
+            const row = normalizeText(control.getAttribute("data-row-label")) ||
+                normalizeText(rowHeader?.textContent) ||
+                normalizeText(control.getAttribute("data-row")) ||
+                null;
+            const column = normalizeText(control.getAttribute("data-column-label")) ||
+                normalizeText(columnHeader?.textContent) ||
+                normalizeText(control.getAttribute("data-column")) ||
+                normalizeText(ariaLabel) ||
+                normalizeText(label?.textContent) ||
+                normalizeText(control.value) ||
+                null;
+            const selection = row && column ? `${row} = ${column}` : null;
+            return {
+                row,
+                column,
+                value: control.value,
+                selection,
+                checked: control.checked,
+                control: controlSnapshot(control),
+            };
+        };
+        const cells = controls.map(inferCell);
+        const selectedSelections = cells
+            .filter((cell) => cell.checked && cell.selection)
+            .map((cell) => cell.selection);
+        const allSelections = cells
+            .map((cell) => cell.selection)
+            .filter((selection) => typeof selection === "string" && selection.length > 0);
+        const expectedSelections = [...(stateOptions.expectedSelections ?? [])];
+        const missingSelections = expectedSelections.filter((selection) => !selectedSelections.includes(selection));
+        const unexpectedSelections = selectedSelections.filter((selection) => !expectedSelections.includes(selection));
+        const exact = stateOptions.exact !== false;
+        return {
+            fieldMatched: Boolean(root),
+            selectedSelections,
+            allSelections,
+            expectedSelections,
+            missingSelections,
+            unexpectedSelections,
+            exact,
+            matched: Boolean(root) && missingSelections.length === 0 && (!exact || unexpectedSelections.length === 0),
+            cells,
+        };
+    }, options);
+}
+export async function waitForLiveFormMatrixState(page, options) {
+    const timeoutMs = options.timeoutMs ?? 10_000;
+    const intervalMs = options.intervalMs ?? 100;
+    const startedAt = Date.now();
+    let latest = await readLiveFormMatrixState(page, options);
+    while (!latest.matched && Date.now() - startedAt < timeoutMs) {
+        await delay(intervalMs);
+        latest = await readLiveFormMatrixState(page, options);
+    }
+    return latest;
+}
 export async function dispatchLiveFormFieldDomEvents(page, options) {
     if (!hasEvaluate(page)) {
         throw new Error("dispatchLiveFormFieldDomEvents requires a Playwright page with evaluate().");
@@ -3515,6 +3706,93 @@ export async function setLiveFormChoiceValue(page, options) {
             (visibility?.matched ?? true),
     };
 }
+export async function setLiveFormSelectValue(page, options) {
+    const payload = normalizeLiveFormSelectValue(options.value);
+    const value = payload.value;
+    const transaction = await performLiveFormFieldTransaction(page, {
+        write: {
+            ...(options.write ?? {}),
+            target: options.target,
+            value: payload,
+            notify: options.write?.notify ?? true,
+        },
+        fieldKind: "select",
+        waitForEvent: options.waitForEvent ?? true,
+        dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+        afterQuiet: options.afterQuiet ?? { quietMs: 200, timeoutMs: 5_000 },
+        ...(options.afterValidation === undefined ? {} : { afterValidation: options.afterValidation }),
+    });
+    const dom = await waitForLiveFormSelectState(page, {
+        ...options.target,
+        expectedValue: value,
+        ...(options.write?.timeoutMs === undefined ? {} : { timeoutMs: options.write.timeoutMs }),
+    });
+    const visibilityTargets = [
+        ...(options.expectVisible ?? []).map((target) => ({ ...target, visible: true })),
+        ...(options.expectHidden ?? []).map((target) => ({ ...target, visible: false })),
+    ];
+    const visibility = visibilityTargets.length > 0
+        ? await waitForLiveFormVisibility(page, { targets: visibilityTargets })
+        : undefined;
+    return {
+        payload,
+        value,
+        transaction,
+        dom,
+        ...(visibility ? { visibility } : {}),
+        ok: transaction.write.valueMatched &&
+            (transaction.event?.matched ?? true) &&
+            (transaction.domDispatch ? transaction.domDispatch.matchedControlCount >= 1 : true) &&
+            (transaction.quiet?.quiet ?? true) &&
+            ((transaction.validation?.inlineErrors.length ?? 0) === 0) &&
+            dom.matched &&
+            (visibility?.matched ?? true),
+    };
+}
+export async function setLiveFormMatrixValues(page, options) {
+    const payload = normalizeLiveFormMatrixValue(options.selections);
+    const selections = payload.value;
+    const transaction = await performLiveFormFieldTransaction(page, {
+        write: {
+            ...(options.write ?? {}),
+            target: options.target,
+            value: payload,
+            notify: options.write?.notify ?? true,
+        },
+        fieldKind: "matrix",
+        waitForEvent: options.waitForEvent ?? true,
+        dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+        afterQuiet: options.afterQuiet ?? { quietMs: 200, timeoutMs: 5_000 },
+        ...(options.afterValidation === undefined ? {} : { afterValidation: options.afterValidation }),
+    });
+    const dom = await waitForLiveFormMatrixState(page, {
+        ...options.target,
+        expectedSelections: selections,
+        exact: options.exactDomSelection ?? true,
+        ...(options.write?.timeoutMs === undefined ? {} : { timeoutMs: options.write.timeoutMs }),
+    });
+    const visibilityTargets = [
+        ...(options.expectVisible ?? []).map((target) => ({ ...target, visible: true })),
+        ...(options.expectHidden ?? []).map((target) => ({ ...target, visible: false })),
+    ];
+    const visibility = visibilityTargets.length > 0
+        ? await waitForLiveFormVisibility(page, { targets: visibilityTargets })
+        : undefined;
+    return {
+        payload,
+        selections,
+        transaction,
+        dom,
+        ...(visibility ? { visibility } : {}),
+        ok: transaction.write.valueMatched &&
+            (transaction.event?.matched ?? true) &&
+            (transaction.domDispatch ? transaction.domDispatch.matchedControlCount >= selections.length : true) &&
+            (transaction.quiet?.quiet ?? true) &&
+            ((transaction.validation?.inlineErrors.length ?? 0) === 0) &&
+            dom.matched &&
+            (visibility?.matched ?? true),
+    };
+}
 export async function answerProgressiveLiveFormField(page, options) {
     const validationOptions = options.afterValidation === undefined ? undefined : typeof options.afterValidation === "object" ? options.afterValidation : {};
     const checkboxTransaction = options.fieldKind === "checkbox"
@@ -3539,23 +3817,49 @@ export async function answerProgressiveLiveFormField(page, options) {
             ...(validationOptions ? { afterValidation: validationOptions } : {}),
         })
         : undefined;
+    const selectTransaction = !checkboxTransaction && !choiceTransaction && options.fieldKind === "select"
+        ? await setLiveFormSelectValue(page, {
+            target: options.target,
+            value: options.value,
+            ...(options.write === undefined ? {} : { write: options.write }),
+            waitForEvent: options.waitForEvent ?? true,
+            dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+            afterQuiet: options.afterQuiet ?? true,
+            ...(validationOptions ? { afterValidation: validationOptions } : {}),
+        })
+        : undefined;
+    const matrixTransaction = !checkboxTransaction && !choiceTransaction && !selectTransaction && options.fieldKind === "matrix"
+        ? await setLiveFormMatrixValues(page, {
+            target: options.target,
+            selections: options.value,
+            ...(options.write === undefined ? {} : { write: options.write }),
+            waitForEvent: options.waitForEvent ?? true,
+            dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+            afterQuiet: options.afterQuiet ?? true,
+            ...(validationOptions ? { afterValidation: validationOptions } : {}),
+        })
+        : undefined;
     const transaction = checkboxTransaction
         ? checkboxTransaction.transaction
         : choiceTransaction
             ? choiceTransaction.transaction
-            : await performLiveFormFieldTransaction(page, {
-                write: {
-                    ...(options.write ?? {}),
-                    target: options.target,
-                    value: options.value,
-                    notify: options.write?.notify ?? true,
-                },
-                ...(options.fieldKind ? { fieldKind: options.fieldKind } : {}),
-                waitForEvent: options.waitForEvent ?? true,
-                dispatchDomEvents: options.dispatchDomEvents ?? "auto",
-                afterQuiet: options.afterQuiet ?? true,
-                ...(validationOptions ? { afterValidation: validationOptions } : {}),
-            });
+            : selectTransaction
+                ? selectTransaction.transaction
+                : matrixTransaction
+                    ? matrixTransaction.transaction
+                    : await performLiveFormFieldTransaction(page, {
+                        write: {
+                            ...(options.write ?? {}),
+                            target: options.target,
+                            value: options.value,
+                            notify: options.write?.notify ?? true,
+                        },
+                        ...(options.fieldKind ? { fieldKind: options.fieldKind } : {}),
+                        waitForEvent: options.waitForEvent ?? true,
+                        dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+                        afterQuiet: options.afterQuiet ?? true,
+                        ...(validationOptions ? { afterValidation: validationOptions } : {}),
+                    });
     const visibilityTargets = [
         ...(options.expectVisible ?? []),
         ...(options.expectHidden ?? []).map((target) => ({ ...target, visible: false })),
@@ -4990,7 +5294,19 @@ export const liveFormFieldRecipes = {
             });
         },
     }),
-    setSelectApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormSelectValue(value), options),
+    setSelectApi: (name, internalLabel, value, options = {}) => ({
+        name,
+        run: async (harness) => {
+            await setLiveFormSelectValue(harness.page, {
+                target: { internalLabel },
+                value,
+                write: { notify: options.notify ?? true },
+                waitForEvent: options.waitForEvent ?? (options.notify ?? true),
+                dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+                afterQuiet: options.waitForQuiet ?? true,
+            });
+        },
+    }),
     setCheckboxesApi: (name, internalLabel, values, options = {}) => ({
         name,
         run: async (harness) => {
@@ -5005,7 +5321,19 @@ export const liveFormFieldRecipes = {
         },
     }),
     setDateTimeApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormDateTimeValue(value), options),
-    setMatrixApi: (name, internalLabel, selections, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormMatrixValue(selections), options),
+    setMatrixApi: (name, internalLabel, selections, options = {}) => ({
+        name,
+        run: async (harness) => {
+            await setLiveFormMatrixValues(harness.page, {
+                target: { internalLabel },
+                selections,
+                write: { notify: options.notify ?? true },
+                waitForEvent: options.waitForEvent ?? (options.notify ?? true),
+                dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+                afterQuiet: options.waitForQuiet ?? true,
+            });
+        },
+    }),
     setRatingApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormRatingValue(value), options),
     setProductApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormProductValue(value), options),
     setFieldApiAuto: (name, internalLabel, value, fieldKind, options = {}) => apiRecipeStep(name, { internalLabel }, value, { ...options, fieldKind, dispatchDomEvents: "auto" }),