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

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

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { installFormDataShim, FormDataShim } from "../testUtils/formDataShim";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+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 announcements on mount; the fetched data
+// flows back in through the Redux store.
+import SitewideAnnouncements from "../../../src/components/SitewideAnnouncements";
+
+const data = {
+  announcements: [
+    {
+      id: "dcf036d9-106b-426c-838f-ce7c57d53801",
+      content: "There is nothing to see here.",
+      start: "2022-08-31",
+      finish: "2022-10-31",
+    },
+  ],
+  settings: [
+    {
+      category: "Announcements",
+      description: "Announcements will be displayed to authenticated patrons.",
+      key: "global_announcements",
+      label: "Scheduled announcements",
+      level: 3,
+      type: "announcements",
+    },
+  ],
+};
+installFormDataShim();
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+const renderConnected = (
+  element: React.ReactElement,
+  appConfigSettings: Record<string, unknown> = {}
+) =>
+  renderWithProviders(element, {
+    reduxProviderProps: { store: buildStore() },
+    appConfigSettings,
+  });
+
+describe("SitewideAnnouncements", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders a form containing the announcements section", async () => {
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => jsonResponse(data));
+    const { container } = renderConnected(
+      <SitewideAnnouncements csrfToken="token" />
+    );
+
+    // Once the on-mount fetch resolves, the form renders with the announcement
+    // supplied through the store (proving the AnnouncementsSection received the
+    // data as its value).
+    expect(
+      await screen.findByText("There is nothing to see here.")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Scheduled Announcements:")).toBeInTheDocument();
+    expect(container.querySelector("form")).toBeInTheDocument();
+  });
+
+  it("renders a loading indicator instead of a form while data is loading", () => {
+    // A never-resolving fetch keeps the panel in its fetching state.
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(() => new Promise(() => {}));
+    const { container } = renderConnected(
+      <SitewideAnnouncements csrfToken="token" />
+    );
+
+    expect(container.querySelector(".loading")).toBeInTheDocument();
+    expect(container.querySelector("form")).not.toBeInTheDocument();
+  });
+
+  it("submits the announcements to editItem when the form is submitted", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (_url, opts?: RequestInit) => {
+        if (opts?.method === "POST") {
+          return new Response("success", { status: 200 });
+        }
+        return jsonResponse(data);
+      });
+
+    // System admin so the settings' required permission level is satisfied and
+    // the submit button is enabled.
+    renderConnected(<SitewideAnnouncements csrfToken="token" />, {
+      roles: [{ role: "system" }],
+    });
+
+    await screen.findByText("There is nothing to see here.");
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    // The submit dispatches editSitewideAnnouncements, which POSTs the form.
+    await waitFor(() => {
+      const postCall = fetchSpy.mock.calls.find(
+        ([, opts]) => (opts as RequestInit)?.method === "POST"
+      );
+      expect(postCall).toBeDefined();
+    });
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    const body = (postCall[1] as RequestInit).body as unknown as FormDataShim;
+    expect(JSON.parse(body.get("announcements"))).toStrictEqual(
+      data.announcements
+    );
+  });
+
+  it("disables the submit button when the admin lacks the required permission level", async () => {
+    jest
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => jsonResponse(data));
+    // No roles => admin level 1, below the settings' required level of 3.
+    renderConnected(<SitewideAnnouncements csrfToken="token" />);
+
+    await screen.findByText("There is nothing to see here.");
+    expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// The tab containers are connected components that fetch on mount and require
+// react-router context; TroubleshootingCategoryPage only chooses between them
+// and hands them a `tab` and `goToTab`. Mock them to markers that surface the
+// `tab` they receive and let us drive `goToTab`.
+jest.mock("../../../src/components/DiagnosticsTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="diagnostics-tab-container" data-tab={props.tab}>
+      <button type="button" onClick={() => props.goToTab("monitor")}>
+        go-to-monitor
+      </button>
+    </div>
+  ),
+}));
+jest.mock("../../../src/components/SelfTestsTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="self-tests-tab-container" data-tab={props.tab} />
+  ),
+}));
+
+import TroubleshootingCategoryPage from "../../../src/components/TroubleshootingCategoryPage";
+
+describe("TroubleshootingCategoryPage", () => {
+  it("renders a tab container", () => {
+    renderWithProviders(<TroubleshootingCategoryPage type="diagnostics" />);
+
+    expect(screen.getByTestId("diagnostics-tab-container")).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("self-tests-tab-container")
+    ).not.toBeInTheDocument();
+  });
+
+  it("switches tabs", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TroubleshootingCategoryPage type="diagnostics" />);
+
+    expect(screen.getByTestId("diagnostics-tab-container")).toHaveAttribute(
+      "data-tab",
+      "coverage_provider"
+    );
+
+    await user.click(screen.getByRole("button", { name: "go-to-monitor" }));
+
+    expect(screen.getByTestId("diagnostics-tab-container")).toHaveAttribute(
+      "data-tab",
+      "monitor"
+    );
+  });
+
+  it("renders a different tab container", () => {
+    const { rerender } = renderWithProviders(
+      <TroubleshootingCategoryPage type="diagnostics" />
+    );
+
+    rerender(<TroubleshootingCategoryPage type="self-tests" />);
+
+    expect(
+      screen.queryByTestId("diagnostics-tab-container")
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("self-tests-tab-container")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import title from "../../../src/utils/title";
+
+// Header needs react-router v3 context that renderWithProviders does not supply,
+// and both Header and Footer are page chrome, so mock them to markers.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+// The real TroubleshootingTabContainer requires router/pathFor context and
+// mounts self-test/diagnostic pages that fetch on mount. TroubleshootingPage's
+// own behavior is to own the active tab and pass it (and a goToTab callback)
+// down, so mock the container to a marker that exposes its `tab`/`subtab` props
+// and a control that invokes `goToTab` — exactly the contract under test.
+jest.mock("../../../src/components/TroubleshootingTabContainer", () => ({
+  __esModule: true,
+  default: ({
+    tab,
+    subtab,
+    goToTab,
+  }: {
+    tab: string;
+    subtab: string;
+    goToTab: (tab: string) => void;
+  }) => (
+    <div data-testid="tab-container" data-tab={tab} data-subtab={subtab}>
+      <button type="button" onClick={() => goToTab("self-tests")}>
+        Go to self-tests
+      </button>
+    </div>
+  ),
+}));
+
+import TroubleshootingPage from "../../../src/components/TroubleshootingPage";
+
+const renderPage = () =>
+  renderWithProviders(<TroubleshootingPage params={{ tab: "", subtab: "" }} />);
+
+describe("TroubleshootingPage", () => {
+  it("renders a header", () => {
+    renderPage();
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("renders a heading", () => {
+    renderPage();
+    expect(
+      screen.getByRole("heading", { name: "Troubleshooting" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders a tab container starting on the diagnostics tab", () => {
+    renderPage();
+    const tabContainer = screen.getByTestId("tab-container");
+    expect(tabContainer).toBeInTheDocument();
+    expect(tabContainer).toHaveAttribute("data-tab", "diagnostics");
+  });
+
+  it("switches tabs", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    expect(screen.getByTestId("tab-container")).toHaveAttribute(
+      "data-tab",
+      "diagnostics"
+    );
+
+    await user.click(screen.getByRole("button", { name: "Go to self-tests" }));
+
+    expect(screen.getByTestId("tab-container")).toHaveAttribute(
+      "data-tab",
+      "self-tests"
+    );
+  });
+
+  it("sets the document title", () => {
+    renderPage();
+    expect(document.title).toBe(title("Troubleshooting"));
+  });
+
+  it("shows a footer", () => {
+    renderPage();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});