@redrockswebdevelopment/formstack-form-testing 0.1.23 → 0.1.25

package/dist/index.js

@@ -904,9 +904,35 @@ export function buildLiveFormAddressValue(value, current = {}) {
 export function buildLiveFormChoiceValue(value, otherValue = "") {
     return { value, otherValue };
 }
+export function readLiveFormChoiceValue(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 normalizeLiveFormChoiceValue(value, otherValue = "") {
+    if (typeof value === "string")
+        return buildLiveFormChoiceValue(value, otherValue);
+    return buildLiveFormChoiceValue(value.value, typeof value.otherValue === "string" ? value.otherValue : 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]]);
 }
@@ -1815,6 +1841,124 @@ export async function diagnoseLiveFormCommitControl(page, options) {
         };
     }, options);
 }
+export async function readLiveFormChoiceState(page, options) {
+    if (!hasEvaluate(page)) {
+        throw new Error("readLiveFormChoiceState 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: 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\"]")).map(controlSnapshot)
+            : [];
+        const selectedControls = controls.filter((control) => control.checked === true);
+        const selectedValue = selectedControls.length === 1
+            ? selectedControls[0]?.currentValue ?? selectedControls[0]?.value ?? null
+            : null;
+        const allValues = controls
+            .map((control) => control.currentValue ?? control.value ?? "")
+            .filter((value) => value.length > 0);
+        return {
+            fieldMatched: Boolean(root),
+            selectedValue,
+            allValues,
+            ...(stateOptions.expectedValue === undefined ? {} : { expectedValue: stateOptions.expectedValue }),
+            matched: Boolean(root) &&
+                selectedControls.length === 1 &&
+                (stateOptions.expectedValue === undefined || selectedValue === stateOptions.expectedValue),
+            controls,
+        };
+    }, options);
+}
+export async function waitForLiveFormChoiceState(page, options) {
+    const timeoutMs = options.timeoutMs ?? 10_000;
+    const intervalMs = options.intervalMs ?? 100;
+    const startedAt = Date.now();
+    let latest = await readLiveFormChoiceState(page, options);
+    while (!latest.matched && Date.now() - startedAt < timeoutMs) {
+        await delay(intervalMs);
+        latest = await readLiveFormChoiceState(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 dispatchLiveFormFieldDomEvents(page, options) {
     if (!hasEvaluate(page)) {
         throw new Error("dispatchLiveFormFieldDomEvents requires a Playwright page with evaluate().");
@@ -3405,6 +3549,92 @@ export async function setLiveFormCheckboxValues(page, options) {
             (commitControl?.ready ?? true),
     };
 }
+export async function setLiveFormChoiceValue(page, options) {
+    const payload = normalizeLiveFormChoiceValue(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: "radio",
+        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 waitForLiveFormChoiceState(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 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 answerProgressiveLiveFormField(page, options) {
     const validationOptions = options.afterValidation === undefined ? undefined : typeof options.afterValidation === "object" ? options.afterValidation : {};
     const checkboxTransaction = options.fieldKind === "checkbox"
@@ -3418,21 +3648,47 @@ export async function answerProgressiveLiveFormField(page, options) {
             ...(validationOptions ? { afterValidation: validationOptions } : {}),
         })
         : undefined;
-    const transaction = checkboxTransaction
-        ? checkboxTransaction.transaction
-        : await performLiveFormFieldTransaction(page, {
-            write: {
-                ...(options.write ?? {}),
-                target: options.target,
-                value: options.value,
-                notify: options.write?.notify ?? true,
-            },
-            ...(options.fieldKind ? { fieldKind: options.fieldKind } : {}),
+    const choiceTransaction = !checkboxTransaction && options.fieldKind === "radio"
+        ? await setLiveFormChoiceValue(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 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 transaction = checkboxTransaction
+        ? checkboxTransaction.transaction
+        : choiceTransaction
+            ? choiceTransaction.transaction
+            : selectTransaction
+                ? selectTransaction.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 })),
@@ -3635,7 +3891,7 @@ export function normalizeLiveFormSampleValue(kind = "unknown", value) {
     if (value instanceof Date)
         return value.toISOString().slice(0, 10);
     if (["radio", "rating", "select"].includes(kind) && typeof value === "string") {
-        return { value };
+        return kind === "radio" ? normalizeLiveFormChoiceValue(value) : { value };
     }
     if (kind === "checkbox" && (Array.isArray(value) || (value && typeof value === "object"))) {
         return normalizeLiveFormCheckboxValue(value);
@@ -4854,8 +5110,32 @@ export const liveFormFieldRecipes = {
     }),
     setNameApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormNameValue(value), options),
     setAddressApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormAddressValue(value), options),
-    setChoiceApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormChoiceValue(value), options),
-    setSelectApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormSelectValue(value), options),
+    setChoiceApi: (name, internalLabel, value, options = {}) => ({
+        name,
+        run: async (harness) => {
+            await setLiveFormChoiceValue(harness.page, {
+                target: { internalLabel },
+                value,
+                write: { notify: options.notify ?? true },
+                waitForEvent: options.waitForEvent ?? (options.notify ?? true),
+                dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+                afterQuiet: options.waitForQuiet ?? true,
+            });
+        },
+    }),
+    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) => {