@thepalaceproject/circulation-admin 1.39.0 → 1.40.0

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

@@ -0,0 +1,399 @@
+import * as React from "react";
+import { fireEvent } from "@testing-library/react";
+import {
+  EditableConfigList,
+  EditFormProps,
+} from "../../../src/components/EditableConfigList";
+import renderWithContext from "../testUtils/renderWithContext";
+import { ConfigurationSettings } from "../../../src/interfaces";
+import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
+
+// NB: This adds tests to the already existing tests in:
+// - `src/components/__tests__/EditableConfigList-test.tsx`.
+//
+// Those tests should eventually be migrated here and
+// adapted to the Jest/React Testing Library paradigm.
+
+describe("EditableConfigList - library association disclosure", () => {
+  // ── Test doubles ──────────────────────────────────────────────────────────
+
+  interface ServiceItem {
+    id: number;
+    name: string;
+    libraries?: Array<{ short_name: string }>;
+  }
+
+  interface ServicesData {
+    services: ServiceItem[];
+    allLibraries?: Array<{ short_name: string; name?: string; uuid?: string }>;
+  }
+
+  class TestEditForm extends React.Component<
+    EditFormProps<ServicesData, ServiceItem>
+  > {
+    render() {
+      return <div />;
+    }
+  }
+
+  class TestServiceList extends EditableConfigList<ServicesData, ServiceItem> {
+    EditForm = TestEditForm;
+    listDataKey = "services";
+    itemTypeName = "service";
+    urlBase = "/admin/services/";
+    identifierKey = "id";
+    labelKey = "name";
+    canCreate() {
+      return false;
+    }
+    canDelete() {
+      return false;
+    }
+  }
+
+  // ── Shared fixtures ───────────────────────────────────────────────────────
+
+  const allLibraries = [
+    { short_name: "gamma", name: "Gamma Library", uuid: "uuid-gamma" },
+    { short_name: "alpha", name: "Alpha Library", uuid: "uuid-alpha" },
+    { short_name: "beta", name: "Beta Library", uuid: "uuid-beta" },
+    { short_name: "delta", name: "Delta Library" }, // no uuid
+  ];
+
+  const config: Partial<ConfigurationSettings> = {
+    csrfToken: "",
+    featureFlags: defaultFeatureFlags,
+    roles: [{ role: "system" }],
+  };
+
+  const renderList = (items: ServiceItem[]) =>
+    renderWithContext(
+      <TestServiceList
+        data={{ services: items, allLibraries }}
+        fetchData={jest.fn()}
+        editItem={jest.fn().mockResolvedValue(undefined)}
+        deleteItem={jest.fn().mockResolvedValue(undefined)}
+        csrfToken="token"
+        isFetching={false}
+      />,
+      config
+    );
+
+  // ── Toggle visibility ─────────────────────────────────────────────────────
+
+  it("shows no toggle for an item without a libraries field", () => {
+    const { container } = renderList([{ id: 1, name: "Service A" }]);
+    expect(container.querySelector(".association-toggle")).toBeNull();
+    expect(container.querySelector(".library-count")).toBeNull();
+  });
+
+  it("shows a disabled toggle and 'no libraries' for an item with an empty libraries array", () => {
+    const { container } = renderList([
+      { id: 1, name: "Service A", libraries: [] },
+    ]);
+    const toggle = container.querySelector<HTMLButtonElement>(
+      ".association-toggle"
+    );
+    expect(toggle).not.toBeNull();
+    expect(toggle.disabled).toBe(true);
+    // aria-expanded is omitted on a permanently-disabled toggle (it can never change state).
+    expect(toggle.getAttribute("aria-expanded")).toBeNull();
+    expect(container.querySelector(".library-count").textContent).toBe(
+      " (no libraries)"
+    );
+  });
+
+  it("shows an enabled toggle and '1 library' for an item with one library", () => {
+    const { container } = renderList([
+      { id: 1, name: "Service A", libraries: [{ short_name: "alpha" }] },
+    ]);
+    const toggle = container.querySelector<HTMLButtonElement>(
+      ".association-toggle"
+    );
+    expect(toggle.disabled).toBe(false);
+    expect(container.querySelector(".library-count").textContent).toBe(
+      " (1 library)"
+    );
+  });
+
+  it("shows 'N libraries' for an item with multiple libraries", () => {
+    const { container } = renderList([
+      {
+        id: 1,
+        name: "Service A",
+        libraries: [
+          { short_name: "alpha" },
+          { short_name: "beta" },
+          { short_name: "gamma" },
+        ],
+      },
+    ]);
+    expect(container.querySelector(".library-count").textContent).toBe(
+      " (3 libraries)"
+    );
+  });
+
+  // ── Expand / collapse ─────────────────────────────────────────────────────
+
+  it("expands the library list on toggle click and collapses on a second click", () => {
+    const { container } = renderList([
+      {
+        id: 1,
+        name: "Service A",
+        libraries: [{ short_name: "alpha" }, { short_name: "beta" }],
+      },
+    ]);
+    const toggle = container.querySelector(".association-toggle");
+
+    expect(container.querySelector(".associated-items")).toBeNull();
+    fireEvent.click(toggle);
+    expect(container.querySelector(".associated-items")).not.toBeNull();
+    fireEvent.click(toggle);
+    expect(container.querySelector(".associated-items")).toBeNull();
+  });
+
+  it("sets aria-expanded correctly as the list is toggled", () => {
+    const { container } = renderList([
+      { id: 1, name: "Service A", libraries: [{ short_name: "alpha" }] },
+    ]);
+    const toggle = container.querySelector(".association-toggle");
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  // ── Expand all / Collapse all buttons ────────────────────────────────────
+
+  it("shows no expand/collapse controls when no items have libraries", () => {
+    const { container } = renderList([
+      { id: 1, name: "A", libraries: [] },
+      { id: 2, name: "B" },
+    ]);
+    expect(container.querySelector(".expand-collapse-controls")).toBeNull();
+  });
+
+  it("shows expand/collapse controls when at least one item has libraries", () => {
+    const { container } = renderList([
+      { id: 1, name: "A", libraries: [{ short_name: "alpha" }] },
+    ]);
+    const controlSets = container.querySelectorAll(".expand-collapse-controls");
+    // One set above the list and one below (visual duplicate).
+    expect(controlSets).toHaveLength(2);
+    // Top set: functional, in tab order, not hidden from accessibility tree.
+    const topSet = controlSets[0];
+    expect(topSet.closest("[aria-hidden]")).toBeNull();
+    expect(
+      topSet.querySelector<HTMLButtonElement>(".expand-all").tabIndex
+    ).not.toBe(-1);
+    expect(
+      topSet.querySelector<HTMLButtonElement>(".expand-all").disabled
+    ).toBe(false);
+    expect(
+      topSet.querySelector<HTMLButtonElement>(".collapse-all").disabled
+    ).toBe(true);
+    // Bottom set: hidden from accessibility tree and removed from tab order.
+    const bottomSet = controlSets[1];
+    expect(bottomSet.closest("[aria-hidden='true']")).not.toBeNull();
+    expect(
+      bottomSet.querySelector<HTMLButtonElement>(".expand-all").tabIndex
+    ).toBe(-1);
+    expect(
+      bottomSet.querySelector<HTMLButtonElement>(".collapse-all").tabIndex
+    ).toBe(-1);
+  });
+
+  it("Expand all expands all items that have libraries", () => {
+    const { container } = renderList([
+      { id: 1, name: "A", libraries: [{ short_name: "alpha" }] },
+      { id: 2, name: "B", libraries: [] }, // no libraries → toggle disabled
+      { id: 3, name: "C", libraries: [{ short_name: "beta" }] },
+      { id: 4, name: "D" }, // no libraries field → no toggle
+    ]);
+
+    fireEvent.click(container.querySelector(".expand-all"));
+
+    const lists = container.querySelectorAll(".associated-items");
+    // Items 1 and 3 have libraries; item 2 is empty so no list shown even when expanded.
+    expect(lists).toHaveLength(2);
+    expect(
+      container.querySelector<HTMLButtonElement>(".expand-all").disabled
+    ).toBe(true);
+    expect(
+      container.querySelector<HTMLButtonElement>(".collapse-all").disabled
+    ).toBe(false);
+  });
+
+  it("Collapse all collapses all expanded items", () => {
+    const { container } = renderList([
+      { id: 1, name: "A", libraries: [{ short_name: "alpha" }] },
+      { id: 2, name: "B", libraries: [{ short_name: "beta" }] },
+    ]);
+
+    fireEvent.click(container.querySelector(".expand-all"));
+    expect(container.querySelectorAll(".associated-items")).toHaveLength(2);
+
+    fireEvent.click(container.querySelector(".collapse-all"));
+    expect(container.querySelectorAll(".associated-items")).toHaveLength(0);
+    expect(
+      container.querySelector<HTMLButtonElement>(".collapse-all").disabled
+    ).toBe(true);
+  });
+
+  // ── Alt+click toggle-all ──────────────────────────────────────────────────
+
+  it("alt+click on any toggle expands all items that have libraries", () => {
+    const { container } = renderList([
+      { id: 1, name: "A", libraries: [{ short_name: "alpha" }] },
+      { id: 2, name: "B", libraries: [] }, // no libraries → toggle disabled
+      { id: 3, name: "C", libraries: [{ short_name: "beta" }] },
+      { id: 4, name: "D" }, // no libraries field → no toggle
+    ]);
+    const toggles = container.querySelectorAll(".association-toggle");
+    // Items 1, 2 and 3 have a libraries array → 3 toggles; item 4 has none.
+    expect(toggles).toHaveLength(3);
+
+    fireEvent.click(toggles[0], { altKey: true });
+
+    const lists = container.querySelectorAll(".associated-items");
+    // Items 1 and 3 have libraries; item 2 is empty so no list shown even when "expanded".
+    expect(lists).toHaveLength(2);
+  });
+
+  it("alt+click collapses all items when all expandable items are already expanded", () => {
+    const { container } = renderList([
+      { id: 1, name: "A", libraries: [{ short_name: "alpha" }] },
+      { id: 2, name: "B", libraries: [{ short_name: "beta" }] },
+    ]);
+    const toggles = container.querySelectorAll(".association-toggle");
+
+    // Expand all first.
+    fireEvent.click(toggles[0], { altKey: true });
+    expect(container.querySelectorAll(".associated-items")).toHaveLength(2);
+
+    // Alt+click again should collapse all.
+    fireEvent.click(toggles[0], { altKey: true });
+    expect(container.querySelectorAll(".associated-items")).toHaveLength(0);
+  });
+
+  // ── Sorted library list ───────────────────────────────────────────────────
+
+  it("renders associated libraries sorted alphabetically by display name", () => {
+    const { container } = renderList([
+      {
+        id: 1,
+        name: "Service A",
+        libraries: [
+          { short_name: "gamma" },
+          { short_name: "alpha" },
+          { short_name: "beta" },
+        ],
+      },
+    ]);
+    fireEvent.click(container.querySelector(".association-toggle"));
+
+    const items = container.querySelectorAll(".associated-items li");
+    expect(items).toHaveLength(3);
+    expect(items[0].textContent).toBe("Alpha Library");
+    expect(items[1].textContent).toBe("Beta Library");
+    expect(items[2].textContent).toBe("Gamma Library");
+  });
+
+  it("renders a library with a uuid as a link to its config page", () => {
+    const { container } = renderList([
+      { id: 1, name: "Service A", libraries: [{ short_name: "alpha" }] },
+    ]);
+    fireEvent.click(container.querySelector(".association-toggle"));
+
+    const link = container.querySelector<HTMLAnchorElement>(
+      ".associated-items a"
+    );
+    expect(link).not.toBeNull();
+    expect(link.textContent).toBe("Alpha Library");
+    expect(link.href).toContain("/admin/web/config/libraries/edit/uuid-alpha");
+  });
+
+  it("renders a library without a uuid as plain text (no link)", () => {
+    const { container } = renderList([
+      { id: 1, name: "Service A", libraries: [{ short_name: "delta" }] },
+    ]);
+    fireEvent.click(container.querySelector(".association-toggle"));
+
+    expect(container.querySelector(".associated-items a")).toBeNull();
+    expect(container.querySelector(".associated-items li").textContent).toBe(
+      "Delta Library"
+    );
+  });
+
+  it("falls back to short_name when no display name is available in allLibraries", () => {
+    const { container } = renderList([
+      { id: 1, name: "Service A", libraries: [{ short_name: "unknown" }] },
+    ]);
+    fireEvent.click(container.querySelector(".association-toggle"));
+
+    expect(container.querySelector(".associated-items li").textContent).toBe(
+      "unknown"
+    );
+  });
+
+  it("renders multiple libraries that are not in allLibraries, each falling back to its short_name", () => {
+    // Neither library is in allLibraries, so both fall back to their short_name
+    // as the display label. Distinct short_names → distinct labels → no key collision.
+    const { container } = renderList([
+      {
+        id: 1,
+        name: "Service A",
+        libraries: [{ short_name: "dup-a" }, { short_name: "dup-b" }],
+      },
+    ]);
+    fireEvent.click(container.querySelector(".association-toggle"));
+
+    const items = container.querySelectorAll(".associated-items li");
+    expect(items).toHaveLength(2);
+    expect(items[0].textContent).toBe("dup-a");
+    expect(items[1].textContent).toBe("dup-b");
+  });
+
+  describe("renderAssociatedLibraries", () => {
+    it("renders no associated-items panel when the item has no libraries property", () => {
+      const { container } = renderList([{ id: 1, name: "A" }]);
+      expect(container.querySelector(".associated-items")).toBeNull();
+    });
+
+    it("renders no associated-items panel when the item has an empty libraries array", () => {
+      const { container } = renderList([{ id: 1, name: "A", libraries: [] }]);
+      expect(container.querySelector(".associated-items")).toBeNull();
+    });
+
+    it("renders library names resolved from allLibraries on expand", () => {
+      const { container } = renderList([
+        {
+          id: 1,
+          name: "Service A",
+          libraries: [{ short_name: "alpha" }, { short_name: "beta" }],
+        },
+      ]);
+      fireEvent.click(container.querySelector(".association-toggle"));
+      const items = container.querySelectorAll(".associated-items li");
+      expect(items).toHaveLength(2);
+      // Sorted alphabetically by resolved display name.
+      expect(items[0].textContent).toBe("Alpha Library");
+      expect(items[1].textContent).toBe("Beta Library");
+    });
+
+    it("falls back to short_name when allLibraries is absent from the data", () => {
+      const { container } = renderWithContext(
+        <TestServiceList
+          data={{ services: [{ id: 1, name: "Service A", libraries: [{ short_name: "nypl" }] }] }}
+          fetchData={jest.fn()}
+          editItem={jest.fn().mockResolvedValue(undefined)}
+          deleteItem={jest.fn().mockResolvedValue(undefined)}
+          csrfToken="token"
+          isFetching={false}
+        />,
+        config
+      );
+      fireEvent.click(container.querySelector(".association-toggle"));
+      expect(container.querySelector(".associated-items li").textContent).toBe("nypl");
+    });
+  });
+});