@redrockswebdevelopment/formstack-form-testing 0.1.30 → 0.1.32

package/dist/index.js

@@ -42,7 +42,7 @@ export const liveFormFieldTypeCoverage = {
         domInteraction: true,
         domAssertion: true,
         reason: "Date API state can be set reliably, but split/calendar renderer variants should be verified through DOM assertions.",
-        recommendedHelpers: ["buildLiveFormDateTimeValue", "setLiveFormFieldValueTransaction", "fillDateTime", "readLiveFormDomFieldState"],
+        recommendedHelpers: ["buildLiveFormDateTimeValue", "setLiveFormDateTimeValue", "readLiveFormDateTimeState", "fillDateTime"],
     },
     datetime: {
         kind: "datetime",
@@ -51,7 +51,7 @@ export const liveFormFieldTypeCoverage = {
         domInteraction: true,
         domAssertion: true,
         reason: "Date/time API state can be set, but visible split controls may lag or vary by renderer.",
-        recommendedHelpers: ["buildLiveFormDateTimeValue", "setLiveFormFieldValueTransaction", "fillDateTime", "readLiveFormDomFieldState"],
+        recommendedHelpers: ["buildLiveFormDateTimeValue", "setLiveFormDateTimeValue", "readLiveFormDateTimeState", "fillDateTime"],
     },
     description: {
         kind: "description",
@@ -87,7 +87,7 @@ export const liveFormFieldTypeCoverage = {
         domInteraction: true,
         domAssertion: true,
         reason: "File fields must be tested through browser file upload controls, not generic Live Form API setValue payloads.",
-        recommendedHelpers: ["uploadFile", "liveFormFieldRecipes.uploadFileDom", "readLiveFormDomFieldState"],
+        recommendedHelpers: ["uploadLiveFormFile", "readLiveFormFileState", "uploadFile", "liveFormFieldRecipes.uploadFileDom"],
     },
     matrix: {
         kind: "matrix",
@@ -2309,16 +2309,24 @@ export async function readLiveFormDateTimeState(page, options) {
         }
         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);
+        const renderedValueAvailable = Object.keys(selectedParts).length > 0;
+        const unavailableParts = renderedValueAvailable ? [] : expectedEntries.map(([part]) => part);
+        const missingParts = renderedValueAvailable
+            ? expectedEntries
+                .filter(([part]) => selectedParts[part] === undefined || selectedParts[part] === "")
+                .map(([part]) => part)
+            : [];
+        const mismatchedParts = renderedValueAvailable
+            ? 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 }),
+            renderedValueAvailable,
+            unavailableParts,
             missingParts,
             mismatchedParts,
             matched: Boolean(root) && missingParts.length === 0 && mismatchedParts.length === 0,
@@ -5245,6 +5253,109 @@ function productPartLocator(page, internalLabel, part) {
 function productQuantityLocator(page, internalLabel) {
     return page.locator(`${formstackSelectors.fieldByInternalLabel(internalLabel)} input[name$="[quantity]"], ${formstackSelectors.fieldByInternalLabel(internalLabel)} select[name$="[quantity]"]`).first();
 }
+export function normalizeLiveFormFileNames(files) {
+    const values = Array.isArray(files) ? files : [files];
+    return values.map((file) => {
+        const parts = String(file).split(/[\\/]/).filter(Boolean);
+        return parts.length > 0 ? parts[parts.length - 1] ?? String(file) : String(file);
+    });
+}
+function fileInputLocator(page, target) {
+    if (target.internalLabel != null) {
+        return page.locator(formstackSelectors.fieldByInternalLabel(target.internalLabel)).locator("input[type=\"file\"]").first();
+    }
+    if (target.fieldId != null) {
+        return page.locator(formstackSelectors.fieldById(target.fieldId)).locator("input[type=\"file\"]").first();
+    }
+    throw new Error("File upload target requires internalLabel or fieldId.");
+}
+export async function readLiveFormFileState(page, options) {
+    if (!hasEvaluate(page)) {
+        throw new Error("readLiveFormFileState requires a Playwright page with evaluate().");
+    }
+    return page.evaluate((stateOptions) => {
+        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=\"file\"]")).map((control) => {
+                const files = Array.from(control.files ?? []).map((file) => file.name);
+                return {
+                    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,
+                    files,
+                    accept: control.getAttribute("accept"),
+                    multiple: control.multiple,
+                    disabled: control.disabled,
+                    required: control.required,
+                };
+            })
+            : [];
+        const selectedFileNames = controls.flatMap((control) => control.files);
+        const expectedFileNames = [...(stateOptions.expectedFileNames ?? [])];
+        const missingFileNames = expectedFileNames.filter((name) => !selectedFileNames.includes(name));
+        const unexpectedFileNames = selectedFileNames.filter((name) => !expectedFileNames.includes(name));
+        const exact = stateOptions.exact !== false;
+        return {
+            fieldMatched: Boolean(root),
+            controlMatched: controls.length > 0,
+            selectedFileNames,
+            expectedFileNames,
+            missingFileNames,
+            unexpectedFileNames,
+            exact,
+            matched: Boolean(root) &&
+                controls.length > 0 &&
+                missingFileNames.length === 0 &&
+                (expectedFileNames.length === 0 || !exact || unexpectedFileNames.length === 0),
+            controls,
+        };
+    }, options);
+}
+export async function waitForLiveFormFileState(page, options) {
+    const timeoutMs = options.timeoutMs ?? 10_000;
+    const intervalMs = options.intervalMs ?? 100;
+    const startedAt = Date.now();
+    let latest = await readLiveFormFileState(page, options);
+    while (!latest.matched && Date.now() - startedAt < timeoutMs) {
+        await delay(intervalMs);
+        latest = await readLiveFormFileState(page, options);
+    }
+    return latest;
+}
+export async function uploadLiveFormFile(page, options) {
+    const fileNames = options.expectedFileNames ?? normalizeLiveFormFileNames(options.files);
+    await fileInputLocator(page, options.target).setInputFiles(options.files);
+    const quiet = options.afterQuiet === false
+        ? undefined
+        : await waitForLiveFormQuiet(page, typeof options.afterQuiet === "object" ? options.afterQuiet : {});
+    const dom = await waitForLiveFormFileState(page, {
+        ...options.target,
+        expectedFileNames: fileNames,
+        ...(options.exact === undefined ? {} : { exact: options.exact }),
+    });
+    const validation = options.afterValidation === undefined
+        ? undefined
+        : await waitForLiveFormValidationState(page, typeof options.afterValidation === "object" ? options.afterValidation : {});
+    return {
+        fileNames,
+        dom,
+        ...(quiet ? { quiet } : {}),
+        ...(validation ? { validation } : {}),
+        ok: dom.matched &&
+            (quiet?.quiet ?? true) &&
+            ((validation?.inlineErrors.length ?? 0) === 0),
+    };
+}
 export async function drawSignature(page, internalLabel, options = {}) {
     if (!page.mouse) {
         throw new Error("drawSignature requires a Playwright page with mouse support.");
@@ -5661,6 +5772,19 @@ export const liveFormFieldRecipes = {
         name,
         run: (harness) => harness.uploadFile(internalLabel, files),
     }),
+    uploadFileAndAssertDom: (name, internalLabel, files, options = {}) => ({
+        name,
+        run: async (harness) => {
+            const result = await uploadLiveFormFile(harness.page, {
+                ...options,
+                target: { internalLabel },
+                files,
+            });
+            if (!result.ok) {
+                throw new Error(`File upload "${internalLabel}" did not match expected selected files.`);
+            }
+        },
+    }),
     clearSignatureDom: (name, internalLabel) => ({
         name,
         run: (harness) => harness.clearSignature(internalLabel),