@thepalaceproject/circulation-admin 1.43.0-post.9 → 1.44.0-post.3

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

@@ -0,0 +1,167 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import NeighborhoodAnalyticsForm from "../../../src/components/NeighborhoodAnalyticsForm";
+import { SettingData } from "../../../src/interfaces";
+
+const patronAuthSetting: SettingData = {
+  key: "neighborhood_mode",
+  label: "Patron Auth",
+  options: [
+    { key: "disabled", label: "Off" },
+    { key: "choice1", label: "Choice 1" },
+    { key: "choice2", label: "Choice 2" },
+  ],
+};
+
+const analyticsSetting: SettingData = {
+  key: "location_source",
+  label: "Analytics",
+  options: [
+    { key: "disabled", label: "Off" },
+    { key: "choice1", label: "Choice 1" },
+    { key: "choice2", label: "Choice 2" },
+  ],
+};
+
+// The Panel renders its body collapsed and `aria-hidden` by default, so the
+// form is present in the DOM but hidden from the accessibility tree; query it
+// through the container.
+const getSelect = (container: HTMLElement) =>
+  container.querySelector("select") as HTMLSelectElement;
+const panelTitle = (container: HTMLElement) =>
+  container.querySelector(".panel-title") as HTMLElement;
+const warning = (container: HTMLElement) =>
+  container.querySelector(".bg-warning") as HTMLElement | null;
+
+describe("NeighborhoodAnalyticsForm", () => {
+  it("renders a panel with the feature name", () => {
+    const { container } = render(
+      <NeighborhoodAnalyticsForm setting={patronAuthSetting} />
+    );
+    expect(container.querySelector(".panel")).toBeInTheDocument();
+    expect(panelTitle(container)).toHaveTextContent(
+      "Patron Neighborhood Analytics: Disabled"
+    );
+  });
+
+  it("renders a select whose options reflect the setting", () => {
+    const { container } = render(
+      <NeighborhoodAnalyticsForm setting={patronAuthSetting} />
+    );
+    const options = Array.from(getSelect(container).querySelectorAll("option"));
+    expect(options).toHaveLength(patronAuthSetting.options.length);
+    options.forEach((option, idx) => {
+      expect(option).toHaveValue(patronAuthSetting.options[idx].key);
+      expect(option).toHaveTextContent(patronAuthSetting.options[idx].label);
+    });
+  });
+
+  it("renders a warning message pointing at the paired service once enabled", async () => {
+    const user = userEvent.setup();
+    const { container, rerender } = render(
+      <NeighborhoodAnalyticsForm setting={patronAuthSetting} />
+    );
+
+    // No warning while the feature is off.
+    expect(warning(container)).not.toBeInTheDocument();
+    await user.selectOptions(getSelect(container), "disabled");
+    expect(warning(container)).not.toBeInTheDocument();
+
+    // Enabling it surfaces a warning that links to the analytics config.
+    await user.selectOptions(getSelect(container), "choice1");
+    expect(warning(container)).toBeInTheDocument();
+    expect(warning(container)).toHaveTextContent(
+      "This feature will work only if it is also enabled in your local analytics service configuration settings."
+    );
+    expect(warning(container).querySelector("a")).toHaveAttribute(
+      "href",
+      "/admin/web/config/analytics"
+    );
+
+    // Switching the setting flips the paired service to patron auth.
+    rerender(<NeighborhoodAnalyticsForm setting={analyticsSetting} />);
+    expect(warning(container)).toHaveTextContent(
+      "This feature will work only if it is also enabled in your patron authentication service configuration settings."
+    );
+    expect(warning(container).querySelector("a")).toHaveAttribute(
+      "href",
+      "/admin/web/config/patronAuth"
+    );
+  });
+
+  it("updates the header when an option is chosen", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <NeighborhoodAnalyticsForm setting={patronAuthSetting} />
+    );
+    expect(panelTitle(container)).toHaveTextContent(
+      "Patron Neighborhood Analytics: Disabled"
+    );
+
+    await user.selectOptions(getSelect(container), "choice1");
+    expect(panelTitle(container)).toHaveTextContent(
+      "Patron Neighborhood Analytics: Enabled"
+    );
+  });
+
+  it("reflects the currentValue prop as the initial selection", () => {
+    const { container } = render(
+      <NeighborhoodAnalyticsForm
+        setting={patronAuthSetting}
+        currentValue="choice1"
+      />
+    );
+    // A non-"disabled" currentValue means the feature starts enabled.
+    expect(panelTitle(container)).toHaveTextContent(
+      "Patron Neighborhood Analytics: Enabled"
+    );
+    expect(getSelect(container)).toHaveValue("choice1");
+  });
+
+  it("tells the user whether the feature is currently enabled", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <NeighborhoodAnalyticsForm setting={patronAuthSetting} />
+    );
+
+    expect(panelTitle(container)).toHaveTextContent("Disabled");
+    await user.selectOptions(getSelect(container), "choice1");
+    expect(panelTitle(container)).toHaveTextContent("Enabled");
+    await user.selectOptions(getSelect(container), "choice2");
+    expect(panelTitle(container)).toHaveTextContent("Enabled");
+    await user.selectOptions(getSelect(container), "disabled");
+    expect(panelTitle(container)).toHaveTextContent("Disabled");
+  });
+
+  it("shows the warning only for enabled selections", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <NeighborhoodAnalyticsForm setting={patronAuthSetting} />
+    );
+
+    expect(warning(container)).not.toBeInTheDocument();
+    await user.selectOptions(getSelect(container), "choice1");
+    expect(warning(container)).toBeInTheDocument();
+    await user.selectOptions(getSelect(container), "choice2");
+    expect(warning(container)).toBeInTheDocument();
+    await user.selectOptions(getSelect(container), "disabled");
+    expect(warning(container)).not.toBeInTheDocument();
+  });
+
+  it("exposes the selected value through its getValue ref API", async () => {
+    // ServiceEditForm reads the chosen value via this imperative ref API.
+    const user = userEvent.setup();
+    const ref = React.createRef<NeighborhoodAnalyticsForm>();
+    const { container } = render(
+      <NeighborhoodAnalyticsForm ref={ref} setting={patronAuthSetting} />
+    );
+
+    expect(ref.current?.getValue()).toBe("");
+    await user.selectOptions(getSelect(container), "choice1");
+    expect(ref.current?.getValue()).toBe("choice1");
+    await user.selectOptions(getSelect(container), "choice2");
+    expect(ref.current?.getValue()).toBe("choice2");
+  });
+});

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

@@ -0,0 +1,220 @@
+import * as React from "react";
+import { render, screen, within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import PairedMenus from "../../../src/components/PairedMenus";
+import { SettingData, LibraryData } from "../../../src/interfaces";
+
+describe("PairedMenus", () => {
+  const inputListSetting: SettingData = {
+    key: "input",
+    label: "Input List",
+    default: ["a", "b", "c"],
+    options: [
+      { key: "a", label: "A" },
+      { key: "b", label: "B" },
+      { key: "c", label: "C" },
+      { key: "d", label: "D" },
+      { key: "e", label: "E" },
+    ],
+    paired: "dropdown",
+  };
+  const dropdownSetting: SettingData = {
+    key: "dropdown",
+    label: "Dropdown",
+    default: "b",
+    options: [
+      { key: "a", label: "A" },
+      { key: "b", label: "B" },
+      { key: "c", label: "C" },
+      { key: "d", label: "D" },
+      { key: "e", label: "E" },
+    ],
+    type: "select",
+  };
+
+  const renderPairedMenus = (props = {}) =>
+    render(
+      <PairedMenus
+        inputListSetting={inputListSetting}
+        dropdownSetting={dropdownSetting}
+        disabled={false}
+        {...props}
+      />
+    );
+
+  // The current InputList items are rendered as read-only text inputs inside the
+  // `.input-list-ul` list; return their displayed values.
+  const listItemValues = (container: HTMLElement): string[] =>
+    within(container.querySelector<HTMLElement>(".input-list-ul")!)
+      .getAllByRole("textbox")
+      .map((input) => (input as HTMLInputElement).value);
+
+  const dropdown = (container: HTMLElement): HTMLSelectElement =>
+    container.querySelector<HTMLSelectElement>('select[name="dropdown"]')!;
+
+  it("renders a fieldset with an InputList and a dropdown", () => {
+    const { container } = renderPairedMenus();
+    expect(
+      container.querySelector("fieldset.paired-menus")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".input-list")).toBeInTheDocument();
+    expect(dropdown(container)).toBeInTheDocument();
+  });
+
+  it("renders the InputList items as read-only fields", () => {
+    const { container } = renderPairedMenus();
+    const listItems = within(
+      container.querySelector<HTMLElement>(".input-list-ul")!
+    ).getAllByRole("textbox");
+    expect(listItems).toHaveLength(3);
+    listItems.forEach((input) =>
+      expect((input as HTMLInputElement).readOnly).toBe(true)
+    );
+    expect(listItemValues(container)).toEqual(["A", "B", "C"]);
+  });
+
+  it("renders the dropdown with its default value and available options", () => {
+    const { container } = renderPairedMenus();
+    const select = dropdown(container);
+    expect(select).toHaveValue("b");
+    const options = within(select).getAllByRole("option");
+    expect(options.map((o) => o.textContent)).toEqual(["A", "B", "C"]);
+    expect(options.map((o) => (o as HTMLOptionElement).value)).toEqual([
+      "a",
+      "b",
+      "c",
+    ]);
+  });
+
+  it("optionally disables the InputList's button", () => {
+    const { rerender } = renderPairedMenus();
+    expect(screen.getByRole("button", { name: "Add" })).toBeEnabled();
+
+    rerender(
+      <PairedMenus
+        inputListSetting={inputListSetting}
+        dropdownSetting={dropdownSetting}
+        disabled={false}
+        readOnly={true}
+      />
+    );
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+  });
+
+  it("reflects the default InputList values and dropdown value", () => {
+    const { container } = renderPairedMenus();
+    expect(listItemValues(container)).toEqual(["A", "B", "C"]);
+    expect(dropdown(container)).toHaveValue("b");
+  });
+
+  it("takes an optional item prop", () => {
+    const item: LibraryData = {
+      name: "Library",
+      short_name: "lib",
+      uuid: "123",
+      settings: {
+        input: ["c", "d", "e"],
+        dropdown: "d",
+      },
+    };
+    const { container } = renderPairedMenus({ item });
+
+    const listItems = within(
+      container.querySelector<HTMLElement>(".input-list-ul")!
+    ).getAllByRole("textbox");
+    expect(listItems.map((i) => (i as HTMLInputElement).value)).toEqual([
+      "C",
+      "D",
+      "E",
+    ]);
+    expect(listItems.map((i) => (i as HTMLInputElement).name)).toEqual([
+      "input_c",
+      "input_d",
+      "input_e",
+    ]);
+
+    const select = dropdown(container);
+    expect(select).toHaveValue("d");
+    expect(
+      within(select)
+        .getAllByRole("option")
+        .map((o) => o.textContent)
+    ).toEqual(["C", "D", "E"]);
+  });
+
+  it("updates the InputList when an item is removed", async () => {
+    const user = userEvent.setup();
+    const { container } = renderPairedMenus();
+    expect(listItemValues(container)).toEqual(["A", "B", "C"]);
+
+    // Remove the first list item ("A").
+    await user.click(screen.getAllByRole("button", { name: /Delete/ })[0]);
+
+    await waitFor(() =>
+      expect(
+        within(
+          container.querySelector<HTMLElement>(".input-list-ul")!
+        ).getAllByRole("textbox")
+      ).toHaveLength(2)
+    );
+    expect(listItemValues(container)).toEqual(["B", "C"]);
+  });
+
+  it("recalculates the dropdown options based on the InputList values", async () => {
+    const user = userEvent.setup();
+    const { container } = renderPairedMenus();
+    expect(
+      within(dropdown(container))
+        .getAllByRole("option")
+        .map((o) => o.textContent)
+    ).toEqual(["A", "B", "C"]);
+
+    // Removing "A" leaves the InputList holding [b, c], so the dropdown may only
+    // offer B and C.
+    await user.click(screen.getAllByRole("button", { name: /Delete/ })[0]);
+
+    await waitFor(() =>
+      expect(
+        within(dropdown(container))
+          .getAllByRole("option")
+          .map((o) => o.textContent)
+      ).toEqual(["B", "C"])
+    );
+  });
+
+  it("updates the dropdown selection", async () => {
+    const user = userEvent.setup();
+    const { container } = renderPairedMenus();
+    const select = dropdown(container);
+    expect(select).toHaveValue("b");
+
+    await user.selectOptions(select, "c");
+    expect(select).toHaveValue("c");
+  });
+
+  it("displays a message when the dropdown has no available values", async () => {
+    const user = userEvent.setup();
+    const { container } = renderPairedMenus();
+
+    // Remove every item from the InputList.
+    for (let remaining = 3; remaining > 0; remaining--) {
+      const removeButtons = screen.getAllByRole("button", { name: /Delete/ });
+      expect(removeButtons).toHaveLength(remaining);
+      await user.click(removeButtons[0]);
+      await waitFor(() =>
+        expect(
+          screen.queryAllByRole("button", { name: /Delete/ })
+        ).toHaveLength(remaining - 1)
+      );
+    }
+
+    const message =
+      "In order to set this value, you must add at least one option from the menu above.";
+    expect(screen.getByText(message)).toBeInTheDocument();
+    expect(container.querySelector(".bg-warning")).toHaveTextContent(message);
+
+    // The dropdown select is replaced by the warning; only the add menu remains.
+    expect(dropdown(container)).not.toBeInTheDocument();
+    expect(container.querySelectorAll("select")).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { screen, waitFor } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+// Render the CONNECTED default export so that mapStateToProps / mapDispatchToProps
+// are exercised: the panel fetches its data on mount, the fetch populates the
+// Redux store, and mapStateToProps feeds it back in as props.
+import PatronAuthServices from "../../../src/components/PatronAuthServices";
+
+const listData = {
+  patron_auth_services: [
+    {
+      id: 2,
+      protocol: "test protocol",
+      settings: { test_setting: "test setting" },
+      libraries: [
+        { short_name: "nypl", test_library_setting: "test library setting" },
+      ],
+      name: "nypl protocol",
+    },
+  ],
+  protocols: [
+    { name: "test protocol", label: "test protocol label", settings: [] },
+  ],
+  allLibraries: [{ short_name: "nypl" }],
+};
+
+/**
+ * Stub `fetch` so the panel's on-mount fetch resolves with `body`. Returning a
+ * fresh Response per call avoids "body already used" when several fetches run.
+ */
+const stubFetch = (body: unknown) =>
+  jest.spyOn(globalThis, "fetch").mockImplementation(
+    async () =>
+      new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      })
+  );
+
+// A fresh store per test keeps the fetched data isolated between tests.
+const renderConnected = (element: React.ReactElement) =>
+  renderWithProviders(element, {
+    reduxProviderProps: { store: buildStore() },
+  });
+
+describe("PatronAuthServices", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the patron auth service list", async () => {
+    stubFetch(listData);
+    const { container } = renderConnected(
+      <PatronAuthServices csrfToken="token" />
+    );
+
+    // The list appears once the connected component's on-mount fetch resolves.
+    // Its heading is the protocol-aware label built by PatronAuthServices.label().
+    expect(
+      await screen.findByRole("heading", {
+        level: 3,
+        name: /nypl protocol: test protocol label/,
+      })
+    ).toBeInTheDocument();
+
+    const editLink = container.querySelector("a.edit-item");
+    expect(editLink).not.toBeNull();
+    expect(editLink.getAttribute("href")).toBe(
+      "/admin/web/config/patronAuth/edit/2"
+    );
+
+    // No neighborhood analytics panel is shown in list mode.
+    expect(
+      screen.queryByText("Patron Neighborhood Analytics: Disabled")
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the neighborhood analytics panel when creating a service whose protocol has a neighborhood_mode setting", async () => {
+    const neighborhoodSetting = {
+      key: "neighborhood_mode",
+      label: "Neighborhood Mode",
+      description: "",
+      options: [],
+    };
+    const createData = {
+      patron_auth_services: [],
+      protocols: [
+        {
+          name: "test protocol",
+          label: "test protocol label",
+          settings: [neighborhoodSetting],
+        },
+      ],
+      allLibraries: [{ short_name: "nypl" }],
+    };
+    stubFetch(createData);
+
+    const { container } = renderConnected(
+      <PatronAuthServices csrfToken="token" editOrCreate="create" />
+    );
+
+    // Once the protocol data loads, the create form's extra section (the
+    // NeighborhoodAnalyticsForm) renders because the selected protocol carries a
+    // "neighborhood_mode" setting.
+    await waitFor(() =>
+      expect(container.querySelector("#neighborhood-panel")).toBeInTheDocument()
+    );
+    expect(
+      screen.getByText("Patron Neighborhood Analytics: Disabled")
+    ).toBeInTheDocument();
+  });
+});