@multiplatform.one/frappe-ui 7.6.2 → 7.7.0

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);
+  });
+});

package/src/fields/HTML/Html.spec.tsx

@@ -0,0 +1,179 @@
+/**
+ * Html field contract specs. The HTML fieldtype is display-only: it takes a
+ * server-supplied HTML string and paints it, so the whole contract is
+ * (1) what `sanitizeHtml` refuses to let through and (2) what the field shows
+ * when there is nothing to paint.
+ *
+ * The sanitiser is the security surface — a Frappe HTML field carries whatever
+ * a desk author typed — so it is asserted directly, tag by tag, rather than
+ * through the rendered tree.
+ */
+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 { Html, sanitizeHtml } from ".";
+
+afterEach(cleanup);
+
+describe("sanitizeHtml", () => {
+  it("keeps ordinary formatting markup", () => {
+    const out = sanitizeHtml(
+      '<p>hello <strong>world</strong> <a href="https://x.test">link</a></p>',
+    );
+    expect(out).toContain("<strong>world</strong>");
+    expect(out).toContain('href="https://x.test"');
+  });
+
+  it("drops executable and document-structure tags", () => {
+    for (const tag of ["script", "style", "iframe", "object", "embed", "form", "svg", "template"]) {
+      const out = sanitizeHtml(`<p>keep</p><${tag}>evil</${tag}>`);
+      expect(out).toContain("keep");
+      expect(out.toLowerCase()).not.toContain(`<${tag}`);
+    }
+  });
+
+  it("drops interactive form controls", () => {
+    const out = sanitizeHtml(
+      '<input value="x"><button>go</button><textarea></textarea><select></select>',
+    );
+    expect(out.toLowerCase()).not.toContain("<input");
+    expect(out.toLowerCase()).not.toContain("<button");
+    expect(out.toLowerCase()).not.toContain("<textarea");
+    expect(out.toLowerCase()).not.toContain("<select");
+  });
+
+  it("strips every event-handler attribute and srcdoc", () => {
+    const out = sanitizeHtml('<div onclick="steal()" onmouseover="x()" srcdoc="y">text</div>');
+    expect(out.toLowerCase()).not.toContain("onclick");
+    expect(out.toLowerCase()).not.toContain("onmouseover");
+    expect(out.toLowerCase()).not.toContain("srcdoc");
+    expect(out).toContain("text");
+  });
+
+  it("strips javascript:, vbscript: and data:text/html URIs, keeping the element", () => {
+    for (const uri of ["javascript:alert(1)", "vbscript:msgbox(1)", "data:text/html,<b>x</b>"]) {
+      const out = sanitizeHtml(`<a href="${uri}">click</a>`);
+      expect(out).toContain("click");
+      expect(out.toLowerCase()).not.toContain("href=");
+    }
+  });
+
+  it("sees through control characters padded into a javascript: URI", () => {
+    const padded = `java
+script:alert(1)`;
+    const out = sanitizeHtml(`<a href="${padded}">click</a>`);
+    expect(out.toLowerCase()).not.toContain("href=");
+  });
+
+  it("leaves safe URI attributes alone", () => {
+    const out = sanitizeHtml('<a href="/desk/app">in-app</a>');
+    expect(out).toContain('href="/desk/app"');
+  });
+
+  it("removes comments and returns empty string for empty input", () => {
+    expect(sanitizeHtml("<!-- secret --><p>a</p>")).not.toContain("secret");
+    expect(sanitizeHtml("")).toBe("");
+  });
+
+  it("sanitises nested descendants, not just the top level", () => {
+    const out = sanitizeHtml(
+      '<div><section><img src="javascript:alert(1)" onerror="x()"></section></div>',
+    );
+    expect(out.toLowerCase()).not.toContain("onerror");
+    expect(out.toLowerCase()).not.toContain("javascript:");
+  });
+});
+
+describe("Html field", () => {
+  it("paints the sanitised value into the DOM", () => {
+    const result = renderWithProviders(
+      <Html label="Body" value='<p id="painted">hello <em>there</em></p>' />,
+    );
+    const painted = result.container.querySelector("#painted");
+    expect(painted).toBeTruthy();
+    expect(painted?.querySelector("em")?.textContent).toBe("there");
+  });
+
+  it("never paints a script the value carried", () => {
+    const result = renderWithProviders(
+      <Html label="Body" value="<p>ok</p><script>globalThis.__pwned = 1;</script>" />,
+    );
+    expect(result.container.querySelector("script")).toBeNull();
+    expect(result.container.textContent).toContain("ok");
+  });
+
+  it("falls back to 'No content' when the value is empty", () => {
+    const result = renderWithProviders(<Html label="Body" value="" />);
+    expect(result.container.textContent).toContain("No content");
+  });
+
+  it("falls back to 'No content' when sanitising removed everything", () => {
+    const result = renderWithProviders(<Html label="Body" value="<script>evil()</script>" />);
+    expect(result.container.textContent).toContain("No content");
+  });
+
+  it("shows the label, helperText and error from FieldLayout", () => {
+    const result = renderWithProviders(
+      <Html label="Description" value="<p>x</p>" helperText="server rendered" error="broken" />,
+    );
+    expect(result.container.textContent).toContain("Description");
+    expect(result.container.textContent).toContain("broken");
+  });
+
+  it("skeleton branch paints neither the value nor the empty text", () => {
+    const result = renderWithProviders(
+      <Html label="Body" skeleton value='<p id="painted">x</p>' />,
+    );
+    expect(result.container.querySelector("#painted")).toBeNull();
+    expect(result.container.textContent).not.toContain("No content");
+  });
+});
+
+describe("registry resolution (HTML fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'HTML' to Html and forwards the value", () => {
+    const Component = getFieldComponent("HTML")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: "<p>doc</p>", label: "Body" }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.type).toBe(Html);
+    expect(element.props.value).toBe("<p>doc</p>");
+    expect(element.props.label).toBe("Body");
+  });
+
+  it("is display-only: the adapter passes no onChange", () => {
+    const Component = getFieldComponent("HTML")!;
+    const element = (Component as Function)(propsFor()) as React.ReactElement<Record<string, any>>;
+    expect(element.props.onChange).toBeUndefined();
+  });
+
+  it("substitutes an empty string for a null value so 'No content' shows", () => {
+    const Component = getFieldComponent("HTML")!;
+    const element = (Component as Function)(
+      propsFor({ value: null as unknown as string }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.value).toBe("");
+  });
+
+  it("passes helperText / readOnly / skeleton / compact through", () => {
+    const Component = getFieldComponent("HTML")!;
+    const element = (Component as Function)(
+      propsFor({
+        helperText: "rendered server-side",
+        readOnly: true,
+        skeleton: true,
+        compact: true,
+      }),
+    ) as React.ReactElement<Record<string, any>>;
+    expect(element.props.helperText).toBe("rendered server-side");
+    expect(element.props.readOnly).toBe(true);
+    expect(element.props.skeleton).toBe(true);
+    expect(element.props.compact).toBe(true);
+  });
+});