@redrockswebdevelopment/formstack-form-testing 0.1.27 → 0.1.29

package/dist/index.js

@@ -978,6 +978,19 @@ export function buildLiveFormProductValue(value, current = {}) {
 export function buildLiveFormRatingValue(value) {
     return { value: String(value) };
 }
+export function readLiveFormRatingValue(value) {
+    if (typeof value === "string" || typeof value === "number")
+        return String(value);
+    if (!value || typeof value !== "object")
+        return null;
+    const selected = value.value;
+    return typeof selected === "string" || typeof selected === "number" ? String(selected) : null;
+}
+export function normalizeLiveFormRatingValue(value) {
+    if (typeof value === "string" || typeof value === "number")
+        return buildLiveFormRatingValue(value);
+    return buildLiveFormRatingValue(value.value);
+}
 export function buildLiveFormMatrixValue(selections) {
     return {
         value: selections.map((selection) => {
@@ -2077,6 +2090,88 @@ export async function waitForLiveFormMatrixState(page, options) {
     }
     return latest;
 }
+export async function readLiveFormRatingState(page, options) {
+    if (!hasEvaluate(page)) {
+        throw new Error("readLiveFormRatingState requires a Playwright page with evaluate().");
+    }
+    return page.evaluate((stateOptions) => {
+        const normalizeText = (value) => (value ?? "").replace(/\s+/g, " ").trim();
+        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 candidates = root
+            ? Array.from(root.querySelectorAll("input, button, [role=\"radio\"], [role=\"button\"], [aria-checked], [aria-pressed], [aria-selected], [data-value], [data-rating], [data-score]"))
+            : [];
+        const controlValue = (element) => {
+            const htmlInput = element instanceof HTMLInputElement ? element.value : "";
+            const text = normalizeText(element.textContent);
+            return element.getAttribute("value") ??
+                (htmlInput.length > 0 ? htmlInput : null) ??
+                element.getAttribute("data-value") ??
+                element.getAttribute("data-rating") ??
+                element.getAttribute("data-score") ??
+                element.getAttribute("aria-label")?.match(/\d+(?:\.\d+)?/)?.[0] ??
+                (text.length > 0 ? text : null);
+        };
+        const isSelected = (element) => {
+            const checked = element instanceof HTMLInputElement ? element.checked : null;
+            const ariaChecked = element.getAttribute("aria-checked");
+            const ariaPressed = element.getAttribute("aria-pressed");
+            const ariaSelected = element.getAttribute("aria-selected");
+            const classes = Array.from(element.classList).join(" ");
+            return checked === true ||
+                ariaChecked === "true" ||
+                ariaPressed === "true" ||
+                ariaSelected === "true" ||
+                /\b(active|checked|selected|filled|on)\b/i.test(classes);
+        };
+        const controls = candidates
+            .map((element) => ({
+            tagName: element.tagName.toLowerCase(),
+            id: element.getAttribute("id"),
+            value: controlValue(element),
+            text: normalizeText(element.textContent),
+            ariaChecked: element.getAttribute("aria-checked"),
+            ariaPressed: element.getAttribute("aria-pressed"),
+            ariaSelected: element.getAttribute("aria-selected"),
+            checked: element instanceof HTMLInputElement ? element.checked : null,
+            selected: isSelected(element),
+        }))
+            .filter((control) => control.value !== null && control.value.length > 0);
+        const selectedControls = controls.filter((control) => control.selected);
+        const selectedValue = selectedControls.length > 0
+            ? selectedControls[selectedControls.length - 1]?.value ?? null
+            : null;
+        const allValues = controls
+            .map((control) => control.value)
+            .filter((value) => typeof value === "string" && value.length > 0);
+        return {
+            fieldMatched: Boolean(root),
+            selectedValue,
+            allValues,
+            ...(stateOptions.expectedValue === undefined ? {} : { expectedValue: stateOptions.expectedValue }),
+            matched: Boolean(root) &&
+                selectedValue !== null &&
+                (stateOptions.expectedValue === undefined || selectedValue === stateOptions.expectedValue),
+            controls,
+        };
+    }, options);
+}
+export async function waitForLiveFormRatingState(page, options) {
+    const timeoutMs = options.timeoutMs ?? 10_000;
+    const intervalMs = options.intervalMs ?? 100;
+    const startedAt = Date.now();
+    let latest = await readLiveFormRatingState(page, options);
+    while (!latest.matched && Date.now() - startedAt < timeoutMs) {
+        await delay(intervalMs);
+        latest = await readLiveFormRatingState(page, options);
+    }
+    return latest;
+}
 export async function dispatchLiveFormFieldDomEvents(page, options) {
     if (!hasEvaluate(page)) {
         throw new Error("dispatchLiveFormFieldDomEvents requires a Playwright page with evaluate().");
@@ -2088,14 +2183,30 @@ export async function dispatchLiveFormFieldDomEvents(page, options) {
             : dispatchOptions.target.fieldId == null
                 ? null
                 : document.querySelector(`#fsCell${CSS.escape(String(dispatchOptions.target.fieldId))}, [data-testid="field-${CSS.escape(String(dispatchOptions.target.fieldId))}"]`);
-        const allControls = root ? Array.from(root.querySelectorAll("input, textarea, select")) : [];
+        const isSelectedControl = (control) => {
+            if (control instanceof HTMLInputElement && ["checkbox", "radio"].includes(control.type))
+                return control.checked;
+            if (control instanceof HTMLInputElement && control.type === "hidden")
+                return false;
+            const ariaChecked = control.getAttribute("aria-checked");
+            const ariaPressed = control.getAttribute("aria-pressed");
+            const ariaSelected = control.getAttribute("aria-selected");
+            const classes = Array.from(control.classList).join(" ");
+            return ariaChecked === "true" ||
+                ariaPressed === "true" ||
+                ariaSelected === "true" ||
+                /\b(active|checked|selected|filled|on)\b/i.test(classes);
+        };
+        const allControls = root
+            ? Array.from(root.querySelectorAll("input, textarea, select, button, [role=\"radio\"], [role=\"button\"], [aria-checked], [aria-pressed], [aria-selected]"))
+            : [];
         const controls = dispatchOptions.onlyCheckedChoices ?? true
             ? allControls.filter((control) => {
-                if (control instanceof HTMLInputElement && ["checkbox", "radio"].includes(control.type))
-                    return control.checked;
-                if (control instanceof HTMLInputElement && control.type === "hidden")
-                    return false;
-                return true;
+                if (control instanceof HTMLInputElement || control instanceof HTMLButtonElement)
+                    return isSelectedControl(control);
+                if (control.matches("[role=\"radio\"], [role=\"button\"], [aria-checked], [aria-pressed], [aria-selected]"))
+                    return isSelectedControl(control);
+                return !(control instanceof HTMLInputElement && control.type === "hidden");
             })
             : allControls;
         for (const control of controls) {
@@ -2112,7 +2223,7 @@ export async function dispatchLiveFormFieldDomEvents(page, options) {
                 id: control.getAttribute("id"),
                 name: control.getAttribute("name"),
                 value: control.getAttribute("value"),
-                currentValue: "value" in control ? control.value : null,
+                currentValue: "value" in control ? String(control.value) : null,
                 checked: control instanceof HTMLInputElement && ["checkbox", "radio"].includes(control.type) ? control.checked : null,
             })),
         };
@@ -3797,6 +3908,49 @@ export async function setLiveFormMatrixValues(page, options) {
             (visibility?.matched ?? true),
     };
 }
+export async function setLiveFormRatingValue(page, options) {
+    const payload = normalizeLiveFormRatingValue(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: "rating",
+        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 waitForLiveFormRatingState(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"
@@ -3843,6 +3997,17 @@ export async function answerProgressiveLiveFormField(page, options) {
             ...(validationOptions ? { afterValidation: validationOptions } : {}),
         })
         : undefined;
+    const ratingTransaction = !checkboxTransaction && !choiceTransaction && !selectTransaction && !matrixTransaction && options.fieldKind === "rating"
+        ? await setLiveFormRatingValue(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
@@ -3851,19 +4016,21 @@ export async function answerProgressiveLiveFormField(page, options) {
                 ? 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 } : {}),
-                    });
+                    : ratingTransaction
+                        ? ratingTransaction.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 })),
@@ -5338,7 +5505,19 @@ export const liveFormFieldRecipes = {
             });
         },
     }),
-    setRatingApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormRatingValue(value), options),
+    setRatingApi: (name, internalLabel, value, options = {}) => ({
+        name,
+        run: async (harness) => {
+            await setLiveFormRatingValue(harness.page, {
+                target: { internalLabel },
+                value,
+                write: { notify: options.notify ?? true },
+                waitForEvent: options.waitForEvent ?? (options.notify ?? true),
+                dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+                afterQuiet: options.waitForQuiet ?? true,
+            });
+        },
+    }),
     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" }),
     setNameApiAndDispatch: (name, internalLabel, value, options = {}) => liveFormFieldRecipes.setNameApi(name, internalLabel, value, { ...options, fieldKind: options.fieldKind ?? "name", dispatchDomEvents: "auto" }),