@multiplatform.one/frappe-ui 7.6.3 → 7.7.1

package/src/fields/DateRange/DateRange.spec.tsx

@@ -0,0 +1,143 @@
+/**
+ * DateRangeField contract specs. The `Date Range` fieldtype composes the forms
+ * DateRangePicker, so the adapter's contract is which props survive the hop.
+ *
+ * One of them does not, and that is pinned here deliberately: `value` and
+ * `onChange` are DECLARED on DateRangeFieldProps and then destructured away
+ * (`value: _value`, `onChange: _onChange`) instead of being handed to
+ * DateRangePicker. The registry feeds `props.value` straight into the adapter,
+ * so a saved Date Range never paints and a picked range never emits. These
+ * tests describe today's behaviour and will go red the moment someone wires it
+ * up — which is the point: that is the signal to update them alongside the fix.
+ * Reported on MPO-123.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { DateRangeField } from ".";
+
+afterEach(cleanup);
+
+const trigger = (container: HTMLElement) =>
+  container.querySelector("input") as HTMLInputElement | null;
+
+/** The accessible control: role="combobox", not the decorative inner input. */
+const combobox = (container: HTMLElement) =>
+  container.querySelector('[data-testid="date-picker-trigger"]');
+
+describe("DateRangeField composes the forms DateRangePicker", () => {
+  it("renders a single range trigger, not two date inputs", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" />);
+    expect(result.container.querySelectorAll("input")).toHaveLength(1);
+  });
+
+  it("carries the picker's own placeholder when the field sets none", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" />);
+    expect(trigger(result.container)?.getAttribute("placeholder")).toContain("date");
+  });
+
+  it("forwards an explicit placeholder", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" placeholder="From – To" />);
+    expect(trigger(result.container)?.getAttribute("placeholder")).toBe("From – To");
+  });
+
+  it("forwards readOnly, which swaps the popover trigger for a flat read-only box", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" readOnly />);
+    expect(trigger(result.container)?.hasAttribute("readonly")).toBe(true);
+  });
+
+  it("forwards required to the control, not just to the label", () => {
+    // The accessible control is the combobox box, not the inner <input>: that
+    // input is readOnly / tabIndex -1 / pointerEvents none, so the aria state
+    // rides the role="combobox" wrapper. Asserting it on the input passes
+    // vacuously against a picker that sets neither.
+    const result = renderWithProviders(<DateRangeField label="Period" required />);
+    expect(combobox(result.container)?.getAttribute("aria-required")).toBe("true");
+    expect(combobox(result.container)?.getAttribute("role")).toBe("combobox");
+  });
+
+  it("forwards error, which marks the control invalid", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" error="pick a range" />);
+    expect(combobox(result.container)?.getAttribute("aria-invalid")).toBe("true");
+    expect(result.container.textContent).toContain("pick a range");
+  });
+
+  it("leaves both aria states off a field that is neither required nor errored", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" />);
+    expect(combobox(result.container)?.getAttribute("aria-required")).toBeNull();
+    expect(combobox(result.container)?.getAttribute("aria-invalid")).toBeNull();
+  });
+
+  it("forwards the label and helperText", () => {
+    const result = renderWithProviders(
+      <DateRangeField label="Period" helperText="inclusive of both ends" />,
+    );
+    expect(result.container.textContent).toContain("Period");
+    expect(result.container.textContent).toContain("inclusive of both ends");
+  });
+
+  it("skeleton branch renders no trigger", () => {
+    const result = renderWithProviders(<DateRangeField label="Period" skeleton />);
+    expect(trigger(result.container)).toBeNull();
+  });
+});
+
+describe("DateRangeField value gap (MPO-123)", () => {
+  it("declares value on its props type", () => {
+    // Type-level promise: the adapter advertises a controlled value.
+    const props: React.ComponentProps<typeof DateRangeField> = { value: "2026-01-01" };
+    expect(props.value).toBe("2026-01-01");
+  });
+
+  it("but a controlled value does not reach the control — the trigger stays empty", () => {
+    const result = renderWithProviders(
+      <DateRangeField label="Period" value="2026-01-01,2026-01-31" />,
+    );
+    expect(trigger(result.container)?.value).toBe("");
+  });
+
+  it("and the registry hands that value straight to the adapter, so the drop is on this file", () => {
+    const Component = getFieldComponent("Date Range")!;
+    const element = (Component as Function)({
+      value: "2026-01-01,2026-01-31",
+      onChange: () => {},
+    } as FieldRenderProps) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(DateRangeField);
+    expect(element.props.value).toBe("2026-01-01,2026-01-31");
+  });
+});
+
+describe("registry resolution (Date Range fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Date Range' to DateRangeField, and not to the Date adapter", () => {
+    const Component = getFieldComponent("Date Range")!;
+    expect(Component).toBeTruthy();
+    expect(Component).not.toBe(getFieldComponent("Date"));
+    const element = (Component as Function)(propsFor({ label: "Period" })) as React.ReactElement<
+      Record<string, any>
+    >;
+    expect(element.type).toBe(DateRangeField);
+    expect(element.props.label).toBe("Period");
+  });
+
+  it("passes helperText / readOnly / skeleton / compact through", () => {
+    const Component = getFieldComponent("Date Range")!;
+    const element = (Component as Function)(
+      propsFor({
+        helperText: "both ends inclusive",
+        readOnly: true,
+        skeleton: true,
+        compact: true,
+      }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.helperText).toBe("both ends inclusive");
+    expect(element.props.readOnly).toBe(true);
+    expect(element.props.skeleton).toBe(true);
+    expect(element.props.compact).toBe(true);
+  });
+});

package/src/fields/FileUpload.spec.tsx

@@ -0,0 +1,334 @@
+/**
+ * Frappe FileUpload contract specs (the live-data uploader behind the
+ * "FrappeUI/FileUpload" catalog entry — not the forms dropzone, and not the
+ * FileUploadField registry adapter).
+ *
+ * Everything worth pinning here is transport state, because that is what the
+ * component owns and what a screenshot cannot show: the size gate before a
+ * byte is read, the progress channel, the failure row that keeps the existing
+ * value instead of wiping it (DG-VAL-04), retry, and the abort that has to
+ * actually reach the handler's AbortSignal.
+ *
+ * The default transport inserts into the File doctype, so every test injects
+ * `onUpload` — the documented override — and drives it by hand.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FileUpload } from "./FileUpload";
+
+afterEach(cleanup);
+
+const hiddenInput = (container: HTMLElement) =>
+  container.querySelector('input[type="file"]') as HTMLInputElement;
+
+function makeFile(name = "report.pdf", size = 1024, type = "application/pdf") {
+  const file = new File(["x"], name, { type });
+  Object.defineProperty(file, "size", { value: size });
+  return file;
+}
+
+async function selectFile(container: HTMLElement, file: File) {
+  await act(async () => {
+    fireEvent.change(hiddenInput(container), { target: { files: [file] } });
+  });
+}
+
+/** A handler the test resolves or rejects on demand. */
+function deferredUpload() {
+  let resolve!: (url: string) => void;
+  let reject!: (err: Error) => void;
+  let progress!: (percent: number) => void;
+  let signal!: AbortSignal;
+  const handler = vi.fn(
+    (_file: File, ctx: { onProgress: (p: number) => void; signal: AbortSignal }) => {
+      progress = ctx.onProgress;
+      signal = ctx.signal;
+      return new Promise<string>((res, rej) => {
+        resolve = res;
+        reject = rej;
+      });
+    },
+  );
+  return {
+    handler,
+    resolve: (url: string) => resolve(url),
+    reject: (err: Error) => reject(err),
+    progress: (p: number) => progress(p),
+    get signal() {
+      return signal;
+    },
+  };
+}
+
+describe("FileUpload empty state", () => {
+  it("offers a Choose File affordance and nothing else", () => {
+    const result = renderWithProviders(<FileUpload label="Attachment" onChange={() => {}} />);
+    expect(result.getButton("Choose File")).toBeTruthy();
+    expect(result.container.querySelector('[data-file-upload="transfer"]')).toBeNull();
+  });
+
+  it("marks a required field on its label", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" required onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("Attachment");
+    expect(result.container.textContent).toContain("*");
+  });
+
+  it("skeleton branch offers no affordance at all", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" skeleton onChange={() => {}} />,
+    );
+    expect(result.getButton("Choose File")).toBeUndefined();
+  });
+
+  it("shows helperText while nothing is in flight", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" helperText="PDF or PNG, under 5MB" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("PDF or PNG, under 5MB");
+  });
+});
+
+describe("FileUpload size gate", () => {
+  it("refuses a file over maxSize before the transport is ever called", async () => {
+    const onUpload = vi.fn();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" maxSize={1024} onUpload={onUpload} onChange={onChange} />,
+    );
+    await selectFile(result.container, makeFile("big.pdf", 2048));
+    expect(onUpload).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(result.container.textContent).toContain("exceeds");
+  });
+
+  it("accepts a file at exactly maxSize", async () => {
+    const onUpload = vi.fn().mockResolvedValue("/files/ok.pdf");
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" maxSize={1024} onUpload={onUpload} onChange={() => {}} />,
+    );
+    await selectFile(result.container, makeFile("ok.pdf", 1024));
+    expect(onUpload).toHaveBeenCalledTimes(1);
+  });
+});
+
+/**
+ * i18n interpolation is INERT under `renderWithProviders`: the provider hands
+ * back the raw key, so `t("Retry {{name}}", { name })` renders the accessible
+ * name literally as `Retry {{name}}` rather than `Retry report.pdf`. Buttons
+ * are therefore looked up by the stable half of the label, and the per-file
+ * parameterisation is asserted separately (`ariaNames` below) so a dropped
+ * `aria-label` still fails. Recorded on MPO-123.
+ */
+const buttonLabelled = (container: HTMLElement, prefix: string) =>
+  Array.from(container.querySelectorAll("button")).find((b) =>
+    (b.getAttribute("aria-label") ?? "").startsWith(prefix),
+  );
+
+describe("FileUpload transfer", () => {
+  it("shows the file name and a live progressbar while uploading", async () => {
+    const upload = deferredUpload();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" onUpload={upload.handler} onChange={() => {}} />,
+    );
+    await selectFile(result.container, makeFile("report.pdf"));
+
+    const row = result.container.querySelector('[data-file-upload="transfer"]');
+    expect(row?.getAttribute("data-transfer-status")).toBe("uploading");
+    expect(result.container.textContent).toContain("report.pdf");
+
+    const bar = result.container.querySelector('[data-file-upload="progress"]');
+    expect(bar?.getAttribute("aria-valuenow")).toBe("0");
+    await act(async () => {
+      upload.progress(42);
+    });
+    expect(
+      result.container
+        .querySelector('[data-file-upload="progress"]')
+        ?.getAttribute("aria-valuenow"),
+    ).toBe("42");
+  });
+
+  it("clamps a nonsense progress report into 0..100", async () => {
+    const upload = deferredUpload();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" onUpload={upload.handler} onChange={() => {}} />,
+    );
+    await selectFile(result.container, makeFile());
+    await act(async () => {
+      upload.progress(999);
+    });
+    expect(
+      result.container
+        .querySelector('[data-file-upload="progress"]')
+        ?.getAttribute("aria-valuenow"),
+    ).toBe("100");
+  });
+
+  it("emits the committed URL through onChange and clears the transfer row", async () => {
+    const upload = deferredUpload();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" onUpload={upload.handler} onChange={onChange} />,
+    );
+    await selectFile(result.container, makeFile());
+    await act(async () => {
+      upload.resolve("/files/report.pdf");
+    });
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("/files/report.pdf"));
+    expect(result.container.querySelector('[data-file-upload="transfer"]')).toBeNull();
+  });
+
+  it("keeps the existing value when the transfer fails (DG-VAL-04)", async () => {
+    const upload = deferredUpload();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload
+        label="Attachment"
+        value="/files/previous.pdf"
+        onUpload={upload.handler}
+        onChange={onChange}
+      />,
+    );
+    await selectFile(result.container, makeFile());
+    await act(async () => {
+      upload.reject(new Error("network is down"));
+    });
+    await waitFor(() =>
+      expect(
+        result.container
+          .querySelector('[data-file-upload="transfer"]')
+          ?.getAttribute("data-transfer-status"),
+      ).toBe("failed"),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+    expect(result.container.textContent).toContain("network is down");
+    expect(result.container.textContent).toContain("previous.pdf");
+  });
+
+  it("offers Retry and Remove on a failed row, and Retry re-runs the transport", async () => {
+    const upload = deferredUpload();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" onUpload={upload.handler} onChange={() => {}} />,
+    );
+    await selectFile(result.container, makeFile("report.pdf"));
+    await act(async () => {
+      upload.reject(new Error("boom"));
+    });
+    await waitFor(() => expect(buttonLabelled(result.container, "Retry ")).toBeTruthy());
+    const remove = buttonLabelled(result.container, "Remove ");
+    expect(remove).toBeTruthy();
+    // Both affordances carry a per-file accessible name, so a screen reader
+    // can tell one failed row's Retry from another's.
+    expect(buttonLabelled(result.container, "Retry ")?.getAttribute("aria-label")).toMatch(
+      /^Retry \S/,
+    );
+    expect(remove?.getAttribute("aria-label")).toMatch(/^Remove \S/);
+    // The visible text stays the short verb; the file name lives on the label.
+    expect(buttonLabelled(result.container, "Retry ")?.textContent).toContain("Retry");
+
+    await act(async () => {
+      fireEvent.click(buttonLabelled(result.container, "Retry ") as Element);
+    });
+    expect(upload.handler).toHaveBeenCalledTimes(2);
+  });
+
+  it("Cancel aborts the in-flight signal and drops the row", async () => {
+    const upload = deferredUpload();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" onUpload={upload.handler} onChange={() => {}} />,
+    );
+    await selectFile(result.container, makeFile("report.pdf"));
+    expect(upload.signal.aborted).toBe(false);
+
+    await act(async () => {
+      fireEvent.click(buttonLabelled(result.container, "Cancel ") as Element);
+    });
+    expect(upload.signal.aborted).toBe(true);
+    expect(result.container.querySelector('[data-file-upload="transfer"]')).toBeNull();
+  });
+
+  it("an aborted transport never emits onChange", async () => {
+    const upload = deferredUpload();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" onUpload={upload.handler} onChange={onChange} />,
+    );
+    await selectFile(result.container, makeFile("report.pdf"));
+    await act(async () => {
+      fireEvent.click(buttonLabelled(result.container, "Cancel ") as Element);
+      upload.resolve("/files/late.pdf");
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("FileUpload with a value", () => {
+  it("previews an image value as an <img> with a string src", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Photo" isImage value="/files/photo.png" onChange={() => {}} />,
+    );
+    const img = result.container.querySelector("img");
+    expect(img?.getAttribute("src")).toBe("/files/photo.png");
+  });
+
+  it("shows the file name for a non-image value", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" value="/files/deep/report.pdf" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("report.pdf");
+    expect(result.container.querySelector("img")).toBeNull();
+  });
+
+  it("offers Replace and Remove, and Remove clears the value", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" value="/files/report.pdf" onChange={onChange} />,
+    );
+    expect(result.getButton("Replace")).toBeTruthy();
+    fireEvent.click(result.getButton("Remove") as Element);
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("readOnly hides Replace and Remove — the value is visible, not editable", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" value="/files/report.pdf" readOnly onChange={() => {}} />,
+    );
+    expect(result.getButton("Replace")).toBeUndefined();
+    expect(result.getButton("Remove")).toBeUndefined();
+  });
+
+  it("disabled refuses a Remove even though the button is on screen", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" value="/files/report.pdf" disabled onChange={onChange} />,
+    );
+    fireEvent.click(result.getButton("Remove") as Element);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("disabled refuses a file selection outright", async () => {
+    const onUpload = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" disabled onUpload={onUpload} onChange={() => {}} />,
+    );
+    await selectFile(result.container, makeFile());
+    expect(onUpload).not.toHaveBeenCalled();
+  });
+});
+
+describe("FileUpload accept", () => {
+  it("passes an explicit accept list to the native picker", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" accept=".pdf,.docx" onChange={() => {}} />,
+    );
+    expect(hiddenInput(result.container).getAttribute("accept")).toBe(".pdf,.docx");
+  });
+
+  it("falls back to image/* when the field is an image field", () => {
+    const result = renderWithProviders(<FileUpload label="Photo" isImage onChange={() => {}} />);
+    expect(hiddenInput(result.container).getAttribute("accept")).toBe("image/*");
+  });
+});

package/src/fields/FileUploadField/FileUploadField.spec.tsx

@@ -0,0 +1,166 @@
+/**
+ * FileUploadField contract specs. This is the registry adapter behind Frappe's
+ * `Attach` and `Attach Image` fieldtypes, so it is the field a DocType actually
+ * gets. Three things are its own — everything else it forwards to the forms
+ * FileUpload:
+ *
+ *   1. the choose-from-library tab (MPO-53 AC-11), on by default, which is
+ *      what makes this field Attach rather than a plain dropzone,
+ *   2. the `isImage` accept default, which is what makes Attach Image narrower
+ *      than Attach,
+ *   3. a controlled `value` winning over `defaultValue`, so a saved attachment
+ *      paints on a re-render instead of the mount-time default.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { FileUploadField } from ".";
+
+afterEach(cleanup);
+
+const nativePicker = (container: HTMLElement) =>
+  container.querySelector('input[type="file"]') as HTMLInputElement | null;
+
+describe("FileUploadField library tab", () => {
+  it("offers the From Library action by default — this field IS Attach", () => {
+    const result = renderWithProviders(<FileUploadField label="Attachment" />);
+    expect(result.getButton("From Library")).toBeTruthy();
+  });
+
+  it("drops the action when the field opts out", () => {
+    const result = renderWithProviders(<FileUploadField label="Attachment" library={false} />);
+    expect(result.getButton("From Library")).toBeUndefined();
+  });
+
+  it("disables the action on a disabled field", () => {
+    const result = renderWithProviders(<FileUploadField label="Attachment" disabled />);
+    const button = result.getButton("From Library");
+    expect(button).toBeTruthy();
+    expect(
+      button?.getAttribute("aria-disabled") === "true" || (button as HTMLButtonElement).disabled,
+    ).toBe(true);
+  });
+
+  it("disables the action on a read-only field", () => {
+    const result = renderWithProviders(<FileUploadField label="Attachment" readOnly />);
+    const button = result.getButton("From Library");
+    expect(button).toBeTruthy();
+    expect(
+      button?.getAttribute("aria-disabled") === "true" || (button as HTMLButtonElement).disabled,
+    ).toBe(true);
+  });
+});
+
+describe("FileUploadField accept", () => {
+  it("sends no accept list for a plain Attach", () => {
+    const result = renderWithProviders(<FileUploadField label="Attachment" />);
+    expect(nativePicker(result.container)?.getAttribute("accept")).toBeNull();
+  });
+
+  it("narrows to the image list for Attach Image", () => {
+    const result = renderWithProviders(<FileUploadField label="Photo" isImage />);
+    const accept = nativePicker(result.container)?.getAttribute("accept") ?? "";
+    expect(accept).toContain("image/png");
+    expect(accept).toContain("image/jpeg");
+    expect(accept).toContain("image/svg+xml");
+  });
+
+  it("an explicit accept wins over the isImage default", () => {
+    const result = renderWithProviders(
+      <FileUploadField label="Photo" isImage accept="image/png" />,
+    );
+    expect(nativePicker(result.container)?.getAttribute("accept")).toBe("image/png");
+  });
+});
+
+describe("FileUploadField chrome", () => {
+  it("shows the label and the helperText when the field is clean", () => {
+    const result = renderWithProviders(
+      <FileUploadField label="Attachment" helperText="under 5MB" />,
+    );
+    expect(result.container.textContent).toContain("Attachment");
+    expect(result.container.textContent).toContain("under 5MB");
+  });
+
+  it("an error REPLACES the helperText rather than stacking under it", () => {
+    // FieldLayout's law, and the reason a field never shows contradictory
+    // guidance: one message slot, error wins.
+    const result = renderWithProviders(
+      <FileUploadField label="Attachment" helperText="under 5MB" error="required" />,
+    );
+    expect(result.container.textContent).toContain("Attachment");
+    expect(result.container.textContent).toContain("required");
+    expect(result.container.textContent).not.toContain("under 5MB");
+  });
+
+  it("skeleton branch renders no picker", () => {
+    const result = renderWithProviders(<FileUploadField label="Attachment" skeleton />);
+    expect(nativePicker(result.container)).toBeNull();
+  });
+});
+
+describe("registry resolution (Attach / Attach Image fieldtypes)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Attach' to FileUploadField with the library on", () => {
+    const Component = getFieldComponent("Attach")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: "/files/a.pdf", label: "Attachment" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(FileUploadField);
+    expect(element.props.value).toBe("/files/a.pdf");
+    expect(element.props.library).toBe(true);
+    expect(element.props.isImage).toBeUndefined();
+  });
+
+  it("resolves 'Attach Image' to the same component with isImage set", () => {
+    const Component = getFieldComponent("Attach Image")!;
+    expect(Component).toBeTruthy();
+    expect(Component).not.toBe(getFieldComponent("Attach"));
+    const element = (Component as Function)(propsFor({ label: "Photo" })) as React.ReactElement<
+      Record<string, any>
+    >;
+    expect(element.type).toBe(FileUploadField);
+    expect(element.props.isImage).toBe(true);
+  });
+
+  it("honours an explicit library:false from the schema", () => {
+    const Component = getFieldComponent("Attach")!;
+    const element = (Component as Function)(
+      propsFor({ library: false } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.library).toBe(false);
+  });
+
+  it("feeds the library its file list and folder from the schema", () => {
+    const Component = getFieldComponent("Attach")!;
+    const libraryFiles = [{ name: "a.png", file_url: "/files/a.png" }];
+    const element = (Component as Function)(
+      propsFor({ libraryFiles, libraryFolder: "Home/Attachments" } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.libraryFiles).toBe(libraryFiles);
+    expect(element.props.libraryFolder).toBe("Home/Attachments");
+  });
+
+  it("does not coerce a null value — an unset Attach must stay unset", () => {
+    const Component = getFieldComponent("Attach")!;
+    const element = (Component as Function)(
+      propsFor({ value: null as unknown as string }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBeNull();
+  });
+
+  it("wires the canonical onChange straight through", () => {
+    const onChange = vi.fn();
+    const Component = getFieldComponent("Attach")!;
+    const element = (Component as Function)(propsFor({ onChange })) as React.ReactElement<
+      Record<string, any>
+    >;
+    expect(element.props.onChange).toBe(onChange);
+  });
+});