@redrockswebdevelopment/formstack-form-testing 0.1.28 → 0.1.30

package/dist/index.js

@@ -969,6 +969,61 @@ export function buildLiveFormDateTimeValue(value, current = {}) {
         ...(value.ampm !== undefined ? { A: value.ampm } : {}),
     };
 }
+export function normalizeLiveFormDateTimeValue(value) {
+    if (value instanceof Date) {
+        return {
+            M: String(value.getUTCMonth() + 1).padStart(2, "0"),
+            D: String(value.getUTCDate()).padStart(2, "0"),
+            Y: String(value.getUTCFullYear()),
+            H: String(value.getUTCHours()).padStart(2, "0"),
+            I: String(value.getUTCMinutes()).padStart(2, "0"),
+            S: String(value.getUTCSeconds()).padStart(2, "0"),
+        };
+    }
+    if (typeof value === "string") {
+        const iso = value.match(/^(\d{4})-(\d{2})-(\d{2})(?:[T\s](\d{2}):(\d{2})(?::(\d{2}))?)?/);
+        if (iso) {
+            const [, year, month, day, hour, minutes, seconds] = iso;
+            return {
+                ...(year === undefined ? {} : { Y: year }),
+                ...(month === undefined ? {} : { M: month }),
+                ...(day === undefined ? {} : { D: day }),
+                ...(hour === undefined ? {} : { H: hour }),
+                ...(minutes === undefined ? {} : { I: minutes }),
+                ...(seconds === undefined ? {} : { S: seconds }),
+            };
+        }
+        const us = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})(?:\s+(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)?)?/i);
+        if (us) {
+            const [, month, day, year, hour, minutes, seconds, ampm] = us;
+            return {
+                ...(month === undefined ? {} : { M: month.padStart(2, "0") }),
+                ...(day === undefined ? {} : { D: day.padStart(2, "0") }),
+                ...(year === undefined ? {} : { Y: year }),
+                ...(hour === undefined ? {} : { H: hour.padStart(2, "0") }),
+                ...(minutes === undefined ? {} : { I: minutes }),
+                ...(seconds === undefined ? {} : { S: seconds }),
+                ...(ampm === undefined ? {} : { A: ampm.toUpperCase() }),
+            };
+        }
+        return { Y: value };
+    }
+    if ("month" in value || "day" in value || "year" in value || "hour" in value || "minutes" in value || "seconds" in value || "ampm" in value) {
+        return buildLiveFormDateTimeValue(value);
+    }
+    if ("M" in value || "D" in value || "Y" in value || "H" in value || "I" in value || "S" in value || "A" in value) {
+        return {
+            ...(value.M === undefined ? {} : { M: String(value.M) }),
+            ...(value.D === undefined ? {} : { D: String(value.D) }),
+            ...(value.Y === undefined ? {} : { Y: String(value.Y) }),
+            ...(value.H === undefined ? {} : { H: String(value.H) }),
+            ...(value.I === undefined ? {} : { I: String(value.I) }),
+            ...(value.S === undefined ? {} : { S: String(value.S) }),
+            ...(value.A === undefined ? {} : { A: String(value.A) }),
+        };
+    }
+    return {};
+}
 export function buildLiveFormProductValue(value, current = {}) {
     return {
         ...(current && typeof current === "object" ? current : {}),
@@ -2172,6 +2227,116 @@ export async function waitForLiveFormRatingState(page, options) {
     }
     return latest;
 }
+export async function readLiveFormDateTimeState(page, options) {
+    if (!hasEvaluate(page)) {
+        throw new Error("readLiveFormDateTimeState requires a Playwright page with evaluate().");
+    }
+    return page.evaluate((stateOptions) => {
+        const normalizeText = (value) => (value ?? "").replace(/\s+/g, " ").trim();
+        const inferPart = (control) => {
+            const label = control.id ? document.querySelector(`label[for="${CSS.escape(control.id)}"]`) : null;
+            const haystack = [
+                control.name,
+                control.id,
+                control.className,
+                control.getAttribute("placeholder"),
+                control.getAttribute("aria-label"),
+                label?.textContent,
+            ].map(normalizeText).join(" ").toLowerCase();
+            if (/\b(month|mm|\[m\]|-m$|_m$)/i.test(haystack))
+                return "M";
+            if (/\b(day|dd|\[d\]|-d$|_d$)/i.test(haystack))
+                return "D";
+            if (/\b(year|yyyy|\[y\]|-y$|_y$)/i.test(haystack))
+                return "Y";
+            if (/\b(hour|hh|\[h\]|-h$|_h$)/i.test(haystack))
+                return "H";
+            if (/\b(minute|minutes|mmn|\[i\]|-i$|_i$)/i.test(haystack))
+                return "I";
+            if (/\b(second|seconds|\[s\]|-s$|_s$)/i.test(haystack))
+                return "S";
+            if (/\b(am\/pm|ampm|am pm|\[a\]|-a$|_a$)/i.test(haystack))
+                return "A";
+            return 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 nativeControls = root
+            ? Array.from(root.querySelectorAll("input, textarea, select"))
+            : [];
+        const controls = nativeControls.map((control) => {
+            const currentValue = "value" in control ? control.value : "";
+            return {
+                tagName: control.tagName.toLowerCase(),
+                type: control.getAttribute("type"),
+                id: control.getAttribute("id"),
+                name: control.getAttribute("name"),
+                value: control.getAttribute("value"),
+                currentValue,
+                checked: control instanceof HTMLInputElement && ["checkbox", "radio"].includes(control.type) ? control.checked : null,
+                part: inferPart(control),
+                text: control instanceof HTMLSelectElement
+                    ? normalizeText(control.selectedOptions.item(0)?.textContent)
+                    : normalizeText(control.textContent),
+            };
+        });
+        const selectedParts = {};
+        for (const control of controls) {
+            if (control.part && typeof control.currentValue === "string" && control.currentValue.length > 0) {
+                selectedParts[control.part] = control.currentValue;
+            }
+        }
+        const unparted = controls.filter((control) => control.part === null && typeof control.currentValue === "string" && control.currentValue.length > 0);
+        if (Object.keys(selectedParts).length === 0 && unparted.length === 1) {
+            const parsed = unparted[0]?.currentValue?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? unparted[0]?.currentValue?.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+            if (parsed) {
+                if (parsed[0].includes("-")) {
+                    selectedParts.Y = parsed[1] ?? "";
+                    selectedParts.M = parsed[2] ?? "";
+                    selectedParts.D = parsed[3] ?? "";
+                }
+                else {
+                    selectedParts.M = (parsed[1] ?? "").padStart(2, "0");
+                    selectedParts.D = (parsed[2] ?? "").padStart(2, "0");
+                    selectedParts.Y = parsed[3] ?? "";
+                }
+            }
+        }
+        const expected = stateOptions.expectedValue ?? {};
+        const expectedEntries = Object.entries(expected).filter((entry) => typeof entry[1] === "string" && entry[1].length > 0);
+        const missingParts = expectedEntries
+            .filter(([part]) => selectedParts[part] === undefined || selectedParts[part] === "")
+            .map(([part]) => part);
+        const mismatchedParts = expectedEntries
+            .filter(([part, value]) => selectedParts[part] !== undefined && selectedParts[part] !== "" && selectedParts[part] !== value)
+            .map(([part]) => part);
+        return {
+            fieldMatched: Boolean(root),
+            selectedParts,
+            ...(stateOptions.expectedValue === undefined ? {} : { expectedValue: stateOptions.expectedValue }),
+            missingParts,
+            mismatchedParts,
+            matched: Boolean(root) && missingParts.length === 0 && mismatchedParts.length === 0,
+            controls,
+        };
+    }, options);
+}
+export async function waitForLiveFormDateTimeState(page, options) {
+    const timeoutMs = options.timeoutMs ?? 10_000;
+    const intervalMs = options.intervalMs ?? 100;
+    const startedAt = Date.now();
+    let latest = await readLiveFormDateTimeState(page, options);
+    while (!latest.matched && Date.now() - startedAt < timeoutMs) {
+        await delay(intervalMs);
+        latest = await readLiveFormDateTimeState(page, options);
+    }
+    return latest;
+}
 export async function dispatchLiveFormFieldDomEvents(page, options) {
     if (!hasEvaluate(page)) {
         throw new Error("dispatchLiveFormFieldDomEvents requires a Playwright page with evaluate().");
@@ -2183,14 +2348,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) {
@@ -2207,7 +2388,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,
             })),
         };
@@ -3935,6 +4116,47 @@ export async function setLiveFormRatingValue(page, options) {
             (visibility?.matched ?? true),
     };
 }
+export async function setLiveFormDateTimeValue(page, options) {
+    const payload = normalizeLiveFormDateTimeValue(options.value);
+    const transaction = await performLiveFormFieldTransaction(page, {
+        write: {
+            ...(options.write ?? {}),
+            target: options.target,
+            value: payload,
+            notify: options.write?.notify ?? true,
+        },
+        fieldKind: "datetime",
+        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 waitForLiveFormDateTimeState(page, {
+        ...options.target,
+        expectedValue: payload,
+        ...(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,
+        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"
@@ -3992,6 +4214,17 @@ export async function answerProgressiveLiveFormField(page, options) {
             ...(validationOptions ? { afterValidation: validationOptions } : {}),
         })
         : undefined;
+    const dateTimeTransaction = !checkboxTransaction && !choiceTransaction && !selectTransaction && !matrixTransaction && !ratingTransaction && ["date", "datetime"].includes(options.fieldKind ?? "")
+        ? await setLiveFormDateTimeValue(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
@@ -4002,19 +4235,21 @@ export async function answerProgressiveLiveFormField(page, options) {
                     ? matrixTransaction.transaction
                     : 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 } : {}),
-                        });
+                        : dateTimeTransaction
+                            ? dateTimeTransaction.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 })),
@@ -5475,7 +5710,19 @@ export const liveFormFieldRecipes = {
             });
         },
     }),
-    setDateTimeApi: (name, internalLabel, value, options) => apiRecipeStep(name, { internalLabel }, buildLiveFormDateTimeValue(value), options),
+    setDateTimeApi: (name, internalLabel, value, options = {}) => ({
+        name,
+        run: async (harness) => {
+            await setLiveFormDateTimeValue(harness.page, {
+                target: { internalLabel },
+                value,
+                write: { notify: options.notify ?? true },
+                waitForEvent: options.waitForEvent ?? (options.notify ?? true),
+                dispatchDomEvents: options.dispatchDomEvents ?? "auto",
+                afterQuiet: options.waitForQuiet ?? true,
+            });
+        },
+    }),
     setMatrixApi: (name, internalLabel, selections, options = {}) => ({
         name,
         run: async (harness) => {