@thepalaceproject/circulation-admin 1.43.0-post.10 → 1.43.0-post.11

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

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import DiagnosticsServiceTabs from "../../../src/components/DiagnosticsServiceTabs";
+
+describe("DiagnosticsServiceTabs", () => {
+  let goToTab: jest.Mock;
+
+  const ts1 = {
+    service: "test_service_1",
+    id: "1",
+    start: "start_time_string_1",
+    duration: "0",
+    collection_name: "collection1",
+  };
+  const ts2 = {
+    service: "test_service_2",
+    id: "2",
+    start: "start_time_string_2",
+    duration: "0",
+    collection_name: "collection2",
+    exception: "Stack trace",
+  };
+
+  const content: any = {
+    test_service_1: { collection1: [ts1] },
+    test_service_2: { collection2: [ts2] },
+  };
+
+  const renderTabs = () => {
+    goToTab = jest.fn();
+    return render(
+      <DiagnosticsServiceTabs
+        goToTab={goToTab}
+        content={content}
+        tab="test_service_1"
+      />
+    );
+  };
+
+  // Find the collapsible `.panel` whose header text matches `title`. The
+  // collection panels are titled by collection name; the timestamp panels nested
+  // inside them are titled by their start time.
+  const panelByTitle = (container: HTMLElement, title: string) => {
+    const titleEl = Array.from(container.querySelectorAll(".panel-title")).find(
+      (el) => el.textContent === title
+    );
+    return titleEl ? titleEl.closest(".panel") : null;
+  };
+
+  describe("nav", () => {
+    it("renders a tab for each service", () => {
+      const { container } = renderTabs();
+      expect(container.querySelectorAll("ul.nav-tabs")).toHaveLength(1);
+      const tabs = container.querySelectorAll("ul.nav-tabs li a");
+      expect(tabs).toHaveLength(2);
+      expect(tabs[0]).toHaveTextContent("Test_service_1");
+      expect(tabs[1]).toHaveTextContent("Test_service_2");
+    });
+
+    it("displays a badge", () => {
+      const { container } = renderTabs();
+      const tabs = container.querySelectorAll("ul.nav-tabs li");
+
+      // The first service has no exception: a plain count badge with a tooltip.
+      const tabWithoutException = tabs[0];
+      expect(tabWithoutException.querySelector(".danger")).toBeNull();
+      const badge = tabWithoutException.querySelector(".badge");
+      expect(badge).toHaveTextContent("1");
+      const toolTip = tabWithoutException.querySelector(".tool-tip");
+      expect(toolTip).toHaveTextContent(
+        "Total number of timestamps for this service"
+      );
+
+      // The second service contains a timestamp with an exception, so it shows a
+      // danger badge (a warning) and no tooltip.
+      const tabWithException = tabs[1];
+      const dangerBadge = tabWithException.querySelector(".badge.danger");
+      expect(dangerBadge).toHaveTextContent("!");
+      expect(tabWithException.querySelector(".tool-tip")).toBeNull();
+    });
+
+    it("defaults to showing the first tab", () => {
+      const { container } = renderTabs();
+      const tabs = container.querySelectorAll("ul.nav-tabs li");
+      expect(tabs[0]).toHaveClass("active");
+      expect(tabs[1]).not.toHaveClass("active");
+    });
+  });
+
+  describe("content", () => {
+    it("renders collections", () => {
+      const { container } = renderTabs();
+      expect(container.querySelectorAll(".tab-content")).toHaveLength(1);
+
+      // collection1 has no exception, so its panel starts collapsed.
+      const collection1 = panelByTitle(container, "collection1");
+      expect(collection1).toBeInTheDocument();
+      expect(collection1.querySelector(".panel-heading")).toHaveAttribute(
+        "aria-expanded",
+        "false"
+      );
+
+      // collection2 contains a timestamp with an exception, so its panel starts
+      // expanded.
+      const collection2 = panelByTitle(container, "collection2");
+      expect(collection2).toBeInTheDocument();
+      expect(collection2.querySelector(".panel-heading")).toHaveAttribute(
+        "aria-expanded",
+        "true"
+      );
+    });
+
+    it("renders timestamps", () => {
+      const { container } = renderTabs();
+      // Each timestamp renders as a panel headed by its start time.
+      expect(
+        panelByTitle(container, "start_time_string_1")
+      ).toBeInTheDocument();
+      expect(
+        panelByTitle(container, "start_time_string_2")
+      ).toBeInTheDocument();
+      // Both timestamps render their duration.
+      expect(screen.getAllByText("Duration: 0 seconds")).toHaveLength(2);
+    });
+  });
+
+  describe("behavior", () => {
+    it("switches tabs", async () => {
+      const user = userEvent.setup();
+      const { container } = renderTabs();
+      const tabLinks = container.querySelectorAll("ul.nav-tabs li a");
+
+      await user.click(tabLinks[1]);
+
+      expect(goToTab).toHaveBeenCalledTimes(1);
+      expect(goToTab).toHaveBeenCalledWith("test_service_2");
+    });
+  });
+});

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

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import DiagnosticsServiceType from "../../../src/components/DiagnosticsServiceType";
+
+describe("DiagnosticsServiceType", () => {
+  const ts1 = {
+    service: "test_service_1",
+    id: "1",
+    start: "start_time_string_1",
+    duration: "0",
+    collection_name: "collection1",
+  };
+  const ts2 = {
+    service: "test_service_2",
+    id: "2",
+    start: "start_time_string_2",
+    duration: "0",
+    collection_name: "collection2",
+  };
+
+  const services: any = {
+    test_service_1: { collection1: [ts1] },
+    test_service_2: { collection2: [ts2] },
+  };
+
+  it("renders service tabs", () => {
+    const { container } = render(
+      <DiagnosticsServiceType type="monitor" services={services} />
+    );
+
+    expect(container.firstChild).toHaveClass("config");
+    expect(container.firstChild).toHaveClass("services");
+
+    // The service tabs are rendered, one per service, defaulting to the first.
+    const tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs).toHaveLength(2);
+    expect(tabs[0]).toHaveTextContent("Test_service_1");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).toHaveTextContent("Test_service_2");
+    expect(tabs[1]).not.toHaveClass("active");
+  });
+
+  it("switches tabs", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <DiagnosticsServiceType type="monitor" services={services} />
+    );
+
+    // Starts on the first service tab.
+    let tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).toHaveClass("active");
+    expect(tabs[1]).not.toHaveClass("active");
+
+    // Clicking the second service tab selects it (goToTab updates the state that
+    // drives which tab is active).
+    await user.click(container.querySelectorAll("ul.nav-tabs li a")[1]);
+
+    tabs = container.querySelectorAll("ul.nav-tabs li");
+    expect(tabs[0]).not.toHaveClass("active");
+    expect(tabs[1]).toHaveClass("active");
+  });
+
+  it("displays a message if there are no services", () => {
+    const { container } = render(
+      <DiagnosticsServiceType type="monitor" services={null} />
+    );
+
+    expect(container.querySelector("ul.nav-tabs")).toBeNull();
+    expect(
+      screen.getByText("There are currently no monitor services.")
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,383 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import LibraryEditForm, {
+  LibraryEditFormProps,
+} from "../../../src/components/LibraryEditForm";
+import {
+  LibrariesData,
+  LibraryData,
+  LibrarySettingField,
+} from "../../../src/interfaces";
+installFormDataShim();
+
+describe("LibraryEditForm", () => {
+  const libraryData = {
+    uuid: "uuid",
+    name: "name",
+    short_name: "short_name",
+    // prettier-ignore
+    settings: {
+      "privacy-policy": "http://privacy",
+      "copyright": "http://copyright",
+      "featured_lane_size": "20",
+      "announcements": "[{\"content\": \"Announcement #1\", \"start\": \"2020-06-15\", \"finish\": \"2020-08-15\", \"id\": \"1\"}]"
+    },
+  };
+
+  const settingFields = [
+    { key: "name", label: "Name", category: "Basic Information", level: 3 },
+    {
+      key: "short_name",
+      label: "Short Name",
+      category: "Basic Information",
+      level: 3,
+    },
+    { key: "privacy-policy", label: "Privacy Policy", category: "Links" },
+    { key: "copyright", label: "Copyright", category: "Links" },
+    { key: "logo", label: "Logo", category: "Client Interface Customization" },
+    { key: "large_collections", label: "Languages", category: "Languages" },
+    {
+      key: "featured_lane_size",
+      label: "Maximum number of books in the 'featured' lanes",
+      category: "Lanes & Filters",
+      type: "number",
+    },
+    {
+      key: "service_area",
+      label: "Service Area",
+      category: "Geographic Areas",
+      type: "list",
+    },
+    {
+      key: "announcements",
+      label: "Announcements",
+      category: "Announcements",
+      type: "announcements",
+    },
+  ];
+
+  type Overrides = Partial<LibraryEditFormProps> & {
+    fetchError?: string;
+  };
+
+  const makeData = (
+    settings: LibrarySettingField[] = settingFields as LibrarySettingField[]
+  ): LibrariesData => ({
+    libraries: [libraryData as LibraryData],
+    settings,
+  });
+
+  const makeProps = (overrides: Overrides = {}): LibraryEditFormProps => ({
+    data: makeData(),
+    disabled: false,
+    save: jest.fn(),
+    urlBase: "url base",
+    listDataKey: "libraries",
+    adminLevel: 3,
+    ...(overrides as LibraryEditFormProps),
+  });
+
+  const renderForm = (overrides: Overrides = {}) => {
+    const props = makeProps(overrides);
+    const result = render(<LibraryEditForm {...props} />);
+    const rerender = (nextOverrides: Overrides) =>
+      result.rerender(<LibraryEditForm {...makeProps(nextOverrides)} />);
+    return { ...result, rerender, props };
+  };
+
+  const inputByName = (container: HTMLElement, name: string) =>
+    container.querySelector<HTMLInputElement>(`input[name="${name}"]`);
+
+  const panelByName = (container: HTMLElement, name: string) =>
+    Array.from(container.querySelectorAll<HTMLElement>(".panel")).find(
+      (panel) =>
+        panel.querySelector(".panel-heading")?.textContent?.startsWith(name) ??
+        false
+    );
+
+  describe("rendering", () => {
+    it("renders hidden uuid", () => {
+      const { container, rerender } = renderForm();
+      expect(inputByName(container, "uuid")).toHaveValue("");
+
+      rerender({ item: libraryData as LibraryData });
+      expect(inputByName(container, "uuid")).toHaveValue("uuid");
+    });
+
+    it("renders name", () => {
+      const { container, rerender } = renderForm();
+      expect(inputByName(container, "name")).toHaveValue("");
+
+      rerender({ item: libraryData as LibraryData });
+      expect(inputByName(container, "name")).toHaveValue("name");
+    });
+
+    it("renders short name", () => {
+      const { container, rerender } = renderForm();
+      expect(inputByName(container, "short_name")).toHaveValue("");
+
+      rerender({ item: libraryData as LibraryData });
+      expect(inputByName(container, "short_name")).toHaveValue("short_name");
+    });
+
+    it("renders settings", () => {
+      const { container, rerender } = renderForm();
+      expect(inputByName(container, "privacy-policy")).toHaveValue("");
+      expect(inputByName(container, "copyright")).toHaveValue("");
+
+      rerender({ item: libraryData as LibraryData });
+      expect(inputByName(container, "privacy-policy")).toHaveValue(
+        "http://privacy"
+      );
+      expect(inputByName(container, "copyright")).toHaveValue(
+        "http://copyright"
+      );
+    });
+
+    it("does not render settings with the skip attribute", () => {
+      const skip = { key: "skip", label: "Skip this setting!", skip: true };
+      const { container } = renderForm({
+        data: makeData([...settingFields, skip]),
+      });
+
+      // A normal setting still renders, but the skipped one does not.
+      expect(inputByName(container, "privacy-policy")).toBeInTheDocument();
+      expect(inputByName(container, "skip")).not.toBeInTheDocument();
+    });
+
+    it("renders the PairedMenus component", () => {
+      const inputListSetting = {
+        key: "inputList",
+        label: "Input List",
+        paired: "dropdown",
+        options: [],
+        default: ["opt_1"],
+        level: 2,
+      };
+      const dropdownSetting = {
+        key: "dropdown",
+        label: "Dropdown List",
+        options: [
+          { key: "opt_1", label: "Option 1" },
+          { key: "opt_2", label: "Option 2" },
+        ],
+        type: "select",
+        level: 2,
+      };
+      const { container, rerender } = renderForm({
+        data: makeData([inputListSetting, dropdownSetting]),
+      });
+
+      // These settings render inside a collapsed (aria-hidden) panel, so query
+      // the DOM directly rather than via accessible-role queries.
+      const pairedMenus = container.querySelector<HTMLElement>(".paired-menus");
+      expect(pairedMenus).toBeInTheDocument();
+
+      // The dropdown inside the paired menus is filtered to the option that is
+      // present in the input list (opt_1).
+      const dropdown = pairedMenus.querySelector<HTMLSelectElement>(
+        'select[name="dropdown"]'
+      );
+      const options = dropdown.querySelectorAll("option");
+      expect(options).toHaveLength(1);
+      expect(options[0]).toHaveValue("opt_1");
+
+      // At admin level 3 the setting is editable, so the input list's remove
+      // button is enabled.
+      expect(pairedMenus.querySelector(".remove-btn")).toBeEnabled();
+
+      // A librarian (level 1) is not authorized, so the paired menus become
+      // read-only and the remove button is disabled.
+      rerender({
+        data: makeData([inputListSetting, dropdownSetting]),
+        adminLevel: 1,
+      });
+      const readOnlyPaired =
+        container.querySelector<HTMLElement>(".paired-menus");
+      expect(readOnlyPaired.querySelector(".remove-btn")).toBeDisabled();
+    });
+
+    it("renders the InputList component", () => {
+      const inputListSetting = {
+        key: "inputList",
+        label: "Input List",
+        options: [],
+        default: ["opt_1"],
+        level: 2,
+        menuOptions: [],
+        type: "menu",
+      };
+      const { container, rerender } = renderForm({
+        data: makeData([inputListSetting]),
+      });
+
+      // This setting renders inside a collapsed (aria-hidden) panel, so query
+      // the DOM directly rather than via accessible-role queries.
+      expect(container.querySelector(".input-list")).toBeInTheDocument();
+      // The existing list item is editable and removable for an authorized admin.
+      expect(inputByName(container, "inputList_opt_1")).not.toHaveAttribute(
+        "readonly"
+      );
+      expect(container.querySelector(".remove-btn")).toBeEnabled();
+
+      // A librarian (level 1) is not authorized: the item becomes read-only and
+      // the remove button is disabled.
+      rerender({ data: makeData([inputListSetting]), adminLevel: 1 });
+      expect(inputByName(container, "inputList_opt_1")).toHaveAttribute(
+        "readonly"
+      );
+      expect(container.querySelector(".remove-btn")).toBeDisabled();
+    });
+
+    it("renders the Announcements component", () => {
+      const { container } = renderForm({ item: libraryData as LibraryData });
+
+      // The announcements section renders the library's saved announcement.
+      expect(
+        container.querySelector(".announcements-section")
+      ).toBeInTheDocument();
+      expect(screen.getByText("Scheduled Announcements:")).toBeInTheDocument();
+      expect(screen.getByText(/Announcement #1/)).toBeInTheDocument();
+    });
+
+    it("subdivides fields", () => {
+      const { container } = renderForm();
+
+      const panels = container.querySelectorAll(".panel");
+      expect(panels).toHaveLength(7);
+
+      // The first panel is the (required) Basic Information panel; the rest are
+      // optional.
+      const basic = panels[0].querySelector(".panel-heading");
+      expect(basic).toHaveTextContent("Basic Information");
+      Array.from(panels)
+        .slice(1)
+        .forEach((panel) => {
+          expect(panel.querySelector(".panel-heading")).toHaveTextContent(
+            "(Optional)"
+          );
+        });
+
+      // The Links panel holds two settings.
+      const links = panelByName(container, "Links");
+      expect(inputByName(links, "privacy-policy")).toBeInTheDocument();
+      expect(inputByName(links, "copyright")).toBeInTheDocument();
+      expect(
+        panelByName(container, "Languages").querySelectorAll("input")
+      ).toHaveLength(1);
+      expect(
+        panelByName(
+          container,
+          "Client Interface Customization"
+        ).querySelectorAll("input")
+      ).toHaveLength(1);
+
+      // Geographic Areas is a list input, which renders an add-list-item span
+      // and button.
+      const geographic = panelByName(container, "Geographic Areas");
+      expect(geographic.querySelectorAll(".add-list-item")).toHaveLength(2);
+    });
+
+    it("has a save button", () => {
+      renderForm();
+      expect(
+        screen.getByRole("button", { name: "Submit" })
+      ).toBeInTheDocument();
+    });
+
+    it("disables some fields if the user isn't a system admin", () => {
+      const sysAdminOnly = {
+        key: "level-3",
+        label: "Level 3",
+        category: "Basic Information",
+        level: 3,
+      };
+      const sysAdminAndLibMgr = {
+        key: "level-2",
+        label: "Level 2",
+        category: "Basic Information",
+        level: 2,
+      };
+      const data = makeData([
+        ...settingFields,
+        sysAdminOnly,
+        sysAdminAndLibMgr,
+      ]);
+      const { container, rerender } = renderForm({ data, adminLevel: 3 });
+
+      // System admin: everything is editable.
+      ["name", "short_name", "level-3", "level-2"].forEach((name) =>
+        expect(inputByName(container, name)).not.toHaveAttribute("readonly")
+      );
+
+      // Library manager (level 2): level-3 (and the always-restricted name/short
+      // name) are read-only, level-2 is editable.
+      rerender({ data, adminLevel: 2 });
+      ["name", "short_name", "level-3"].forEach((name) =>
+        expect(inputByName(container, name)).toHaveAttribute("readonly")
+      );
+      expect(inputByName(container, "level-2")).not.toHaveAttribute("readonly");
+
+      // Librarian (level 1): level-2 is now read-only too.
+      rerender({ data, adminLevel: 1 });
+      ["name", "short_name", "level-3", "level-2"].forEach((name) =>
+        expect(inputByName(container, name)).toHaveAttribute("readonly")
+      );
+    });
+  });
+
+  describe("behavior", () => {
+    it("calls save when the save button is clicked", async () => {
+      const user = userEvent.setup();
+      const save = jest.fn();
+      renderForm({ save });
+
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(save).toHaveBeenCalledTimes(1);
+    });
+
+    it("submits data", async () => {
+      const user = userEvent.setup();
+      const save = jest.fn();
+      renderForm({ save, item: libraryData as LibraryData });
+
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+
+      expect(save).toHaveBeenCalledTimes(1);
+      const formData = save.mock.calls[0][0];
+      expect(formData.get("uuid")).toBe("uuid");
+      expect(formData.get("name")).toBe("name");
+      expect(formData.get("short_name")).toBe("short_name");
+      expect(formData.get("privacy-policy")).toBe("http://privacy");
+      expect(formData.get("copyright")).toBe("http://copyright");
+    });
+
+    it("clears the form when a response comes back without an error", async () => {
+      const user = userEvent.setup();
+      const { container, rerender } = renderForm();
+
+      await user.type(inputByName(container, "name"), "new name");
+      expect(inputByName(container, "name")).toHaveValue("new name");
+
+      // A successful response (responseBody with no error) clears the form.
+      rerender({ responseBody: "new library" });
+      expect(inputByName(container, "name")).toHaveValue("");
+    });
+
+    it("doesn't clear the form if there's an error message", async () => {
+      const user = userEvent.setup();
+      const { container, rerender } = renderForm();
+
+      await user.type(inputByName(container, "name"), "new name");
+      expect(inputByName(container, "name")).toHaveValue("new name");
+
+      // An error response leaves the entered value in place.
+      rerender({ fetchError: "ERROR" });
+      expect(inputByName(container, "name")).toHaveValue("new name");
+    });
+  });
+});