@thepalaceproject/circulation-admin 1.43.0-post.5 → 1.43.0-post.7

package/package.json

@@ -143,5 +143,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.43.0-post.5"
+  "version": "1.43.0-post.7"
 }

package/tests/jest/components/SaveButton.test.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import SaveButton from "../../../src/components/SaveButton";
+
+describe("SaveButton", () => {
+  it("says 'Save' when given no text", () => {
+    render(<SaveButton disabled={false} submit={jest.fn()} />);
+
+    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+  });
+
+  it("displays the text it is given", () => {
+    render(
+      <SaveButton
+        disabled={false}
+        submit={jest.fn()}
+        text="some other string"
+      />
+    );
+
+    expect(
+      screen.getByRole("button", { name: "some other string" })
+    ).toBeInTheDocument();
+  });
+
+  it("submits when clicked", async () => {
+    const user = userEvent.setup();
+    const submit = jest.fn();
+    render(<SaveButton disabled={false} submit={submit} />);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(submit).toHaveBeenCalledTimes(1);
+  });
+
+  it("does nothing when disabled", async () => {
+    const user = userEvent.setup();
+    const submit = jest.fn();
+    render(<SaveButton disabled={true} submit={submit} />);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(submit).not.toHaveBeenCalled();
+  });
+});

package/tests/jest/components/UpdatingLoader.test.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+import UpdatingLoader from "../../../src/components/UpdatingLoader";
+
+describe("UpdatingLoader", () => {
+  it("renders only its container when not showing", () => {
+    const { container } = render(<UpdatingLoader show={false} />);
+
+    expect(
+      container.querySelector(".updating-loader-container")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".updating-loader")).not.toBeInTheDocument();
+    expect(screen.queryByText("Updating")).not.toBeInTheDocument();
+  });
+
+  it("renders the default message when showing", () => {
+    render(<UpdatingLoader show={true} />);
+
+    expect(screen.getByText("Updating")).toBeInTheDocument();
+  });
+
+  it("renders the text it is given instead of the default", () => {
+    render(<UpdatingLoader show={true} text="Doing something" />);
+
+    expect(screen.getByText("Doing something")).toBeInTheDocument();
+    expect(screen.queryByText("Updating")).not.toBeInTheDocument();
+  });
+
+  it("renders a spinner", () => {
+    const { container } = render(<UpdatingLoader show={true} />);
+
+    // The spinner is a Font Awesome <i>, which carries no accessible role.
+    expect(container.querySelector("i.fa-spinner")).toBeInTheDocument();
+  });
+});

package/tests/jest/testUtils/formDataShim.test.ts

@@ -0,0 +1,135 @@
+import { FormDataShim } from "./formDataShim";
+
+// Verifies the shim mirrors the browser's `new FormData(form)` "successful
+// controls" rules — the fidelity that makes the payload assertions in the form
+// suites (BookEditForm, SitewideAnnouncements, ...) trustworthy.
+describe("FormDataShim", () => {
+  const formWith = (html: string): HTMLFormElement => {
+    const form = document.createElement("form");
+    form.innerHTML = html;
+    return form;
+  };
+
+  it("includes named, enabled text controls", () => {
+    const data = new FormDataShim(
+      formWith(`<input name="title" value="Dune" />`)
+    );
+    expect(data.get("title")).toBe("Dune");
+  });
+
+  it("skips disabled controls, as the browser does", () => {
+    const data = new FormDataShim(
+      formWith(`<input name="title" value="Dune" disabled />`)
+    );
+    expect(data.get("title")).toBeNull();
+  });
+
+  it("skips unnamed controls", () => {
+    const data = new FormDataShim(formWith(`<input value="anon" />`));
+    expect(data.get("")).toBeNull();
+  });
+
+  it("skips controls disabled by an ancestor fieldset", () => {
+    // A control inside <fieldset disabled> is a non-successful control even
+    // though its own `disabled` property is false. (Attached to the document so
+    // the :disabled match resolves ancestry.)
+    const form = formWith(
+      `<fieldset disabled><input name="inside" value="x" /></fieldset>
+       <input name="outside" value="y" />`
+    );
+    document.body.appendChild(form);
+    try {
+      const data = new FormDataShim(form);
+      expect(data.get("inside")).toBeNull();
+      expect(data.get("outside")).toBe("y");
+    } finally {
+      form.remove();
+    }
+  });
+
+  it("includes a checkbox only when it is checked", () => {
+    expect(
+      new FormDataShim(
+        formWith(`<input type="checkbox" name="agree" value="yes" />`)
+      ).get("agree")
+    ).toBeNull();
+    expect(
+      new FormDataShim(
+        formWith(`<input type="checkbox" name="agree" value="yes" checked />`)
+      ).get("agree")
+    ).toBe("yes");
+  });
+
+  it("includes only the checked radio in a group", () => {
+    const data = new FormDataShim(
+      formWith(
+        `<input type="radio" name="size" value="s" />
+         <input type="radio" name="size" value="m" checked />`
+      )
+    );
+    expect(data.get("size")).toBe("m");
+  });
+
+  it("excludes submit/reset/button inputs", () => {
+    const data = new FormDataShim(
+      formWith(`<input type="submit" name="go" value="Save" />`)
+    );
+    expect(data.get("go")).toBeNull();
+  });
+
+  it("omits file inputs (the browser submits them as File objects)", () => {
+    // Deliberate divergence from real FormData: a value-reading shim can't
+    // reproduce a File, so file fields are treated as absent rather than sent
+    // as their string value. Pinned so a regression can't silently re-add them.
+    const data = new FormDataShim(formWith(`<input type="file" name="doc" />`));
+    expect(data.get("doc")).toBeNull();
+  });
+
+  it("includes every selected option of a multi-select", () => {
+    const form = document.createElement("form");
+    const select = document.createElement("select");
+    select.name = "langs";
+    select.multiple = true;
+    (
+      [
+        ["en", true],
+        ["fr", false],
+        ["de", true],
+      ] as const
+    ).forEach(([value, selected]) => {
+      const option = document.createElement("option");
+      option.value = value;
+      option.selected = selected;
+      select.appendChild(option);
+    });
+    form.appendChild(select);
+
+    expect(new FormDataShim(form).getAll("langs")).toStrictEqual(["en", "de"]);
+  });
+
+  it("supports the standard read/write surface", () => {
+    const data = new FormDataShim();
+    data.append("k", "1");
+    data.append("k", "2");
+    expect(data.getAll("k")).toStrictEqual(["1", "2"]);
+    expect(data.has("k")).toBe(true);
+    data.set("k", "3");
+    expect(data.getAll("k")).toStrictEqual(["3"]);
+    data.delete("k");
+    expect(data.has("k")).toBe(false);
+  });
+
+  it("set() replaces the first entry in place and drops later duplicates", () => {
+    const data = new FormDataShim();
+    data.append("a", "1");
+    data.append("b", "2");
+    data.append("a", "3");
+
+    data.set("a", "9");
+
+    expect(Array.from(data.entries())).toStrictEqual([
+      ["a", "9"],
+      ["b", "2"],
+    ]);
+  });
+});

package/tests/jest/testUtils/formDataShim.ts

@@ -0,0 +1,112 @@
+// The unit jsdom environment installs undici's `FormData`, which throws on
+// `new FormData(formElement)`. The reusable-components `Form` builds FormData
+// that way on submit, so tests that assert a submitted payload need a stand-in.
+//
+// This shim mirrors the browser's `new FormData(form)`: it serializes only
+// "successful controls" — named, non-disabled controls, with checkboxes and
+// radios contributing only when checked, submit/reset/button/image/file inputs
+// excluded, and every selected option of a multi-select included. A naive shim
+// that records *every* named control can make a payload assertion pass while the
+// real browser omits a disabled or unchecked field.
+export class FormDataShim {
+  private items: Array<[string, string]> = [];
+
+  constructor(form?: HTMLFormElement) {
+    if (!form) {
+      return;
+    }
+    // Serializes the form's own descendant controls; the forms under test don't
+    // associate external controls via `form="id"`, so those are not collected.
+    form
+      .querySelectorAll<
+        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+      >("input, select, textarea")
+      .forEach((el) => {
+        // `:disabled` (not the `.disabled` property) so controls disabled via an
+        // ancestor `<fieldset disabled>` are omitted too, as the browser does.
+        if (!el.name || el.matches(":disabled")) {
+          return;
+        }
+        if (el instanceof HTMLInputElement) {
+          // Buttons never contribute a value. File inputs are omitted
+          // deliberately: the browser submits them as File objects, which a
+          // value-reading shim can't reproduce, so tests treat them as absent.
+          if (
+            ["submit", "reset", "button", "image", "file"].includes(el.type)
+          ) {
+            return;
+          }
+          if ((el.type === "checkbox" || el.type === "radio") && !el.checked) {
+            return;
+          }
+        }
+        if (el instanceof HTMLSelectElement && el.multiple) {
+          Array.from(el.selectedOptions).forEach((option) =>
+            this.items.push([el.name, option.value])
+          );
+          return;
+        }
+        this.items.push([el.name, el.value]);
+      });
+  }
+
+  get(key: string) {
+    const found = this.items.find(([k]) => k === key);
+    return found ? found[1] : null;
+  }
+  getAll(key: string) {
+    return this.items.filter(([k]) => k === key).map(([, v]) => v);
+  }
+  has(key: string) {
+    return this.items.some(([k]) => k === key);
+  }
+  append(key: string, value: string) {
+    this.items.push([key, value]);
+  }
+  set(key: string, value: string) {
+    // Replace the first matching entry in place and drop any later duplicates,
+    // preserving position as FormData.set does.
+    const firstIndex = this.items.findIndex(([k]) => k === key);
+    this.items = this.items.filter(([k]) => k !== key);
+    if (firstIndex === -1) {
+      this.items.push([key, value]);
+    } else {
+      this.items.splice(firstIndex, 0, [key, value]);
+    }
+  }
+  delete(key: string) {
+    this.items = this.items.filter(([k]) => k !== key);
+  }
+  forEach(
+    callback: (value: string, key: string, parent: FormDataShim) => void
+  ) {
+    this.items.forEach(([k, v]) => callback(v, k, this));
+  }
+  keys() {
+    return this.items.map(([k]) => k)[Symbol.iterator]();
+  }
+  values() {
+    return this.items.map(([, v]) => v)[Symbol.iterator]();
+  }
+  entries() {
+    return this.items
+      .map(([k, v]) => [k, v] as [string, string])
+      [Symbol.iterator]();
+  }
+  [Symbol.iterator]() {
+    return this.entries();
+  }
+}
+
+// Swaps `window.FormData` for the shim around a suite, restoring it afterward.
+// Call once at the top level of a test file.
+export function installFormDataShim(): void {
+  let originalFormData: typeof FormData;
+  beforeAll(() => {
+    originalFormData = window.FormData;
+    (window as any).FormData = FormDataShim;
+  });
+  afterAll(() => {
+    (window as any).FormData = originalFormData;
+  });
+}