@thepalaceproject/circulation-admin 1.43.0-post.6 → 1.43.0-post.8

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.6"
+  "version": "1.43.0-post.8"
 }

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome with no behavior worth exercising here, and
+// Header pulls in the react-router v3 context that `renderWithProviders` does not
+// supply. Mock them to markers so the test stays about what AccountPage composes.
+jest.mock("../../../src/components/Header", () => ({
+  __esModule: true,
+  default: () => <div data-testid="header" />,
+}));
+jest.mock("../../../src/components/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+import AccountPage from "../../../src/components/AccountPage";
+
+describe("AccountPage", () => {
+  it("renders the header and footer chrome", () => {
+    renderWithProviders(<AccountPage />);
+
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+
+  it("renders the change-password form", () => {
+    renderWithProviders(<AccountPage />);
+
+    // ChangePasswordForm is connected; its heading and fields appearing proves
+    // it received a working store and csrf token from context. EditableInput
+    // renders its label and input as siblings with no htmlFor, so there is no
+    // accessible label association to query — assert the label text instead.
+    expect(
+      screen.getByRole("heading", { name: "Change Password" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("New Password")).toBeInTheDocument();
+    expect(screen.getByText("Confirm New Password")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+
+import BookDetails from "../../../src/components/BookDetails";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+const book: BookData = {
+  id: "urn:librarysimplified.org/terms/id/3M%20ID/crrmnr9",
+  url: "http://circulation.librarysimplified.org/works/3M/crrmnr9",
+  title: "The Mayan Secrets",
+  authors: ["Clive Cussler", "Thomas Perry"],
+  contributors: ["contributor 1"],
+  summary:
+    "<b>Sam and Remi Fargo race for treasure—and survival—in this lightning-paced new adventure from #1<i> New York Times</i> bestselling author Clive Cussler.</b><br /><br />Husband-and-wife team Sam and Remi Fargo are in Mexico when they come upon a remarkable discovery—the mummified remainsof a man clutching an ancient sealed pot. Within the pot is a Mayan book larger than any known before.<br /><br />The book contains astonishing information about the Mayans, their cities, and about mankind itself. The secrets are so powerful that some people would do anything to possess them—as the Fargos are about to find out. Many men and women are going to die for that book.",
+  imageUrl: "https://dlotdqc6pnwqb.cloudfront.net/3M/crrmnr9/cover.jpg",
+  borrowUrl: "borrow url",
+  openAccessLinks: [{ url: "secrets.epub", type: "application/epub+zip" }],
+  publisher: "Penguin Publishing Group",
+  published: "February 29, 2016",
+  categories: ["Children", "10-12", "Fiction", "Adventure", "Fantasy"],
+  raw: {
+    category: [
+      {
+        $: {
+          scheme: { value: "http://schema.org/audience" },
+          label: { value: "Children" },
+        },
+      },
+      {
+        $: {
+          scheme: { value: "http://schema.org/typicalAgeRange" },
+          label: { value: "10-12" },
+        },
+      },
+      {
+        $: {
+          scheme: { value: "http://librarysimplified.org/terms/fiction/" },
+          label: { value: "Fiction" },
+        },
+      },
+      {
+        $: {
+          scheme: {
+            value: "http://librarysimplified.org/terms/genres/Simplified/",
+          },
+          label: { value: "Adventure" },
+        },
+      },
+      {
+        $: {
+          scheme: {
+            value: "http://librarysimplified.org/terms/genres/Simplified/",
+          },
+          label: { value: "Fantasy" },
+        },
+      },
+    ],
+    "bibframe:distribution": [
+      {
+        $: {
+          "bibframe:ProviderName": {
+            value: "Overdrive",
+          },
+        },
+      },
+    ],
+    link: [
+      {
+        $: {
+          rel: { value: "issues" },
+          href: { value: "http://example.com/report" },
+        },
+      },
+      {
+        $: {
+          rel: { value: "http://librarysimplified.org/terms/rel/revoke" },
+          href: { value: "http://example.com/revoke" },
+        },
+      },
+    ],
+  },
+};
+
+describe("BookDetails", () => {
+  const updateBook = jest.fn();
+
+  it("shows audience and target age", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const audience = container.querySelector(".audience");
+    expect(audience).toBeInTheDocument();
+    expect(audience).toHaveTextContent("Audience: Children (age 10-12)");
+  });
+
+  it("shows categories", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const categories = container.querySelector(".categories");
+    expect(categories).toBeInTheDocument();
+    expect(categories).toHaveTextContent("Categories: Adventure, Fantasy");
+  });
+
+  it("doesn't show categories when there aren't any", () => {
+    const bookCopy: BookData = {
+      ...book,
+      raw: { category: [], link: [] },
+    };
+    const { container } = render(
+      <BookDetails book={bookCopy} updateBook={updateBook} />
+    );
+    expect(container.querySelector(".categories")).not.toBeInTheDocument();
+  });
+
+  it("shows distributor", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const distributor = container.querySelector(".distributed-by");
+    expect(distributor).toBeInTheDocument();
+    expect(distributor).toHaveTextContent("Distributed By: Overdrive");
+  });
+
+  it("doesn't render any circulation link content", () => {
+    const { container } = render(
+      <BookDetails book={book} updateBook={updateBook} />
+    );
+    const circulationLinks = container.querySelector(".circulation-links");
+    expect(circulationLinks).toBeInTheDocument();
+    expect(circulationLinks).toBeEmptyDOMElement();
+  });
+});

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

@@ -0,0 +1,116 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import { render, screen } from "@testing-library/react";
+
+import buildStore from "../../../src/store";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+
+// BookDetailsTabContainer is a connected TabContainer that mounts every one of its
+// tab panels on render (the metadata editor, classifications, cover, and lists
+// editors), each of which fetches over the network on mount. That machinery is
+// incidental to what BookDetailsContainer composes, so mock it to a marker that
+// echoes the props it receives and renders the book child it is handed.
+jest.mock("../../../src/components/BookDetailsTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="book-details-tab-container"
+      data-book-url={props.bookUrl}
+      data-collection-url={props.collectionUrl}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+      data-has-library={String(!!props.library)}
+      data-has-refresh-catalog={String(!!props.refreshCatalog)}
+    >
+      {props.children}
+    </div>
+  ),
+}));
+
+import BookDetailsContainer from "../../../src/components/BookDetailsContainer";
+import BookDetails from "../../../src/components/BookDetails";
+
+// BookDetailsContainer reads its configuration from the legacy React context that
+// the OPDS web client supplies in production. `renderWithProviders` does not supply
+// the `library` (nor `tab`) keys it reads, so wrap it in a small legacy context
+// provider that hands it everything it needs.
+class LegacyContextProvider extends React.Component<{ context: any }> {
+  static childContextTypes = {
+    editorStore: PropTypes.object,
+    csrfToken: PropTypes.string,
+    tab: PropTypes.string,
+    library: PropTypes.func,
+    admin: PropTypes.object,
+  };
+  getChildContext() {
+    return this.props.context;
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+const bookData: BookData = {
+  id: "book id",
+  url: "book url",
+  title: "book title",
+  raw: { category: [], link: [] },
+};
+
+describe("BookDetailsContainer", () => {
+  let store;
+  let context;
+  let refreshCatalog;
+
+  beforeEach(() => {
+    store = buildStore();
+    refreshCatalog = jest.fn();
+    context = {
+      editorStore: store,
+      csrfToken: "token",
+      library: jest.fn(),
+      admin: { isLibraryManager: () => true },
+    };
+  });
+
+  const renderContainer = () =>
+    render(
+      <LegacyContextProvider context={context}>
+        <BookDetailsContainer
+          book={bookData}
+          bookUrl="book url"
+          collectionUrl="collection url"
+          refreshCatalog={refreshCatalog}
+        >
+          <BookDetails book={bookData} updateBook={jest.fn()} />
+        </BookDetailsContainer>
+      </LegacyContextProvider>
+    );
+
+  it("renders BookDetails with its child's props", () => {
+    renderContainer();
+    // The container recreates the real BookDetails from the child element's props,
+    // so the book it was handed shows up (its title is rendered as the heading).
+    expect(
+      screen.getByRole("heading", { name: "book title" })
+    ).toBeInTheDocument();
+  });
+
+  it("shows a tab container with initial tab", () => {
+    renderContainer();
+    const tabContainer = screen.getByTestId("book-details-tab-container");
+    expect(tabContainer).toBeInTheDocument();
+    expect(tabContainer).toHaveAttribute("data-book-url", "book url");
+    expect(tabContainer).toHaveAttribute(
+      "data-collection-url",
+      "collection url"
+    );
+    expect(tabContainer).toHaveAttribute("data-csrf-token", "token");
+    // The library function, redux store, and refreshCatalog callback are forwarded
+    // from context/props; they are not serializable to the DOM, so assert they were
+    // passed through.
+    expect(tabContainer).toHaveAttribute("data-has-store", "true");
+    expect(tabContainer).toHaveAttribute("data-has-library", "true");
+    expect(tabContainer).toHaveAttribute("data-has-refresh-catalog", "true");
+  });
+});

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. 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" />,
+}));
+
+// ConfigTabContainer mounts the connected configuration sections (Libraries,
+// Collections, Individual Admins, ...) which fetch over the network on mount. That
+// is incidental to what ConfigPage composes — the page's job is to hand the tab
+// container the params and context it needs — so mock it to a marker that echoes
+// the props it received.
+jest.mock("../../../src/components/ConfigTabContainer", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="config-tab-container"
+      data-tab={props.tab}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import ConfigPage from "../../../src/components/ConfigPage";
+
+describe("ConfigPage", () => {
+  const params = {
+    tab: "libraries",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows a tab container with tab from params", () => {
+    renderWithProviders(<ConfigPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const tabContainer = screen.getByTestId("config-tab-container");
+    expect(tabContainer).toHaveAttribute("data-tab", "libraries");
+    expect(tabContainer).toHaveAttribute("data-edit-or-create", "edit");
+    expect(tabContainer).toHaveAttribute("data-identifier", "identifier");
+    expect(tabContainer).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(tabContainer).toHaveAttribute("data-has-store", "true");
+  });
+});

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. 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" />,
+}));
+
+// CustomLists is a connected component that fetches lists, collections, libraries,
+// and languages over the network on mount. That is incidental to what
+// CustomListPage composes — the page's job is to hand the editor the params and
+// context it needs — so mock it to a marker that echoes the props it received.
+jest.mock("../../../src/components/CustomLists", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="custom-lists"
+      data-library={props.library}
+      data-edit-or-create={props.editOrCreate}
+      data-identifier={props.identifier}
+      data-csrf-token={props.csrfToken}
+      data-has-store={String(!!props.store)}
+    />
+  ),
+}));
+
+import CustomListPage from "../../../src/components/CustomListPage";
+
+describe("CustomListPage", () => {
+  const params = {
+    library: "library",
+    editOrCreate: "edit",
+    identifier: "identifier",
+  };
+
+  it("shows custom lists with info from params", () => {
+    renderWithProviders(<CustomListPage params={params} />, {
+      appConfigSettings: { csrfToken: "token" },
+    });
+
+    const customLists = screen.getByTestId("custom-lists");
+    expect(customLists).toHaveAttribute("data-library", "library");
+    expect(customLists).toHaveAttribute("data-edit-or-create", "edit");
+    expect(customLists).toHaveAttribute("data-identifier", "identifier");
+    expect(customLists).toHaveAttribute("data-csrf-token", "token");
+    // The redux store is forwarded from context; assert it was passed through.
+    expect(customLists).toHaveAttribute("data-has-store", "true");
+  });
+});

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

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// Header and Footer are page chrome; Header pulls in the react-router v3 context
+// that `renderWithProviders` does not supply. 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" />,
+}));
+
+// Stats fetches statistics via RTK Query on mount; DashboardPage's job is just
+// composition, so mock Stats to a marker that echoes the `library` prop it is
+// handed rather than wiring up fetch mocking.
+jest.mock("../../../src/components/Stats", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div data-testid="stats" data-library={props.library} />
+  ),
+}));
+
+// CirculationEventsDownload gates its output on a feature flag (off by default) and
+// keeps the `library` prop inside a collapsed form, so it is not DOM-observable when
+// rendered for real. Mock it to a marker that echoes `library` so the prop-flow the
+// original test checked stays observable.
+jest.mock("../../../src/components/CirculationEventsDownload", () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="circulation-events-download"
+      data-library={props.library}
+    />
+  ),
+}));
+
+import DashboardPage from "../../../src/components/DashboardPage";
+
+describe("DashboardPage", () => {
+  it("shows Header", () => {
+    renderWithProviders(<DashboardPage params={{}} />);
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+
+  it("shows CirculationEventsDownload", () => {
+    const { rerender } = renderWithProviders(<DashboardPage params={{}} />);
+
+    let events = screen.getByTestId("circulation-events-download");
+    expect(events).toBeInTheDocument();
+    expect(events).not.toHaveAttribute("data-library");
+
+    rerender(<DashboardPage params={{ library: "NYPL" }} />);
+    events = screen.getByTestId("circulation-events-download");
+    expect(events).toHaveAttribute("data-library", "NYPL");
+  });
+
+  it("shows Stats", () => {
+    const { rerender } = renderWithProviders(<DashboardPage params={{}} />);
+
+    let stats = screen.getByTestId("stats");
+    expect(stats).not.toHaveAttribute("data-library");
+
+    rerender(<DashboardPage params={{ library: "NYPL" }} />);
+    stats = screen.getByTestId("stats");
+    expect(stats).toHaveAttribute("data-library", "NYPL");
+  });
+
+  it("shows Footer", () => {
+    renderWithProviders(<DashboardPage params={{}} />);
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});

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

@@ -212,11 +212,7 @@ describe("DebugAuthentication", () => {
       )
     );
 
-    const {
-      getByLabelText,
-      queryByLabelText,
-      rerender,
-    } = renderWithProviders(
+    const { getByLabelText, queryByLabelText, rerender } = renderWithProviders(
       <DebugAuthentication library={LIBRARY} csrfToken="test-csrf-token" />,
       { queryClient }
     );

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

@@ -383,7 +383,11 @@ describe("EditableConfigList - library association disclosure", () => {
     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" }] }] }}
+          data={{
+            services: [
+              { id: 1, name: "Service A", libraries: [{ short_name: "nypl" }] },
+            ],
+          }}
           fetchData={jest.fn()}
           editItem={jest.fn().mockResolvedValue(undefined)}
           deleteItem={jest.fn().mockResolvedValue(undefined)}
@@ -393,7 +397,9 @@ describe("EditableConfigList - library association disclosure", () => {
         config
       );
       fireEvent.click(container.querySelector(".association-toggle"));
-      expect(container.querySelector(".associated-items li").textContent).toBe("nypl");
+      expect(container.querySelector(".associated-items li").textContent).toBe(
+        "nypl"
+      );
     });
   });
 });

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+
+// The wrapped `Collection` (from web-opds-client) is incidental here — the
+// container's job is to pull the "Formats" facets out and hand them to
+// `EntryPointsTabs`. Mock Collection to a marker so we can render the real
+// EntryPointsTabs and assert the tabs it produces.
+jest.mock(
+  "@thepalaceproject/web-opds-client/lib/components/Collection",
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="collection" />,
+  })
+);
+
+// EntryPointsTabs renders CatalogLink -> React Router `Link`, which needs router
+// context renderWithProviders does not supply. Mock `Link` to a marker.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+import EntryPointsContainer from "../../../src/components/EntryPointsContainer";
+
+// Stands in for the OPDS Collection child whose `collection` prop the container
+// reads. It is never rendered by the container (only its props are inspected).
+class CollectionChild extends React.Component<{ collection: unknown }> {
+  render() {
+    return null;
+  }
+}
+
+describe("EntryPointsContainer", () => {
+  it("should not render entry-point tabs if no facets were passed", () => {
+    const collection = {
+      facetGroups: [],
+      lanes: [],
+      books: [],
+      navigationLinks: [],
+    };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    expect(
+      container.querySelector(".entry-points-tab-container")
+    ).toBeInTheDocument();
+    // EntryPointsTabs renders nothing when there are no format facets.
+    expect(container.querySelector(".nav-tabs")).toBeNull();
+  });
+
+  it("shows a tab container with facets when the label is 'Formats'", () => {
+    const facetGroups = [
+      {
+        facets: [],
+        label: "Some other facets",
+      },
+      {
+        facets: [
+          {
+            label: "Ebooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Book",
+            active: false,
+          },
+          {
+            label: "Audiobooks",
+            href: "http://circulation.librarysimplified.org/groups/?entrypoint=Audio",
+            active: false,
+          },
+        ],
+        label: "Formats",
+      },
+    ];
+    const collection = { facetGroups };
+
+    const { container } = renderWithProviders(
+      <EntryPointsContainer>
+        <CollectionChild collection={collection} />
+      </EntryPointsContainer>
+    );
+
+    const list = container.querySelector("ul.nav-tabs");
+    expect(list).toBeInTheDocument();
+    expect(list.querySelectorAll("li")).toHaveLength(2);
+    expect(screen.getByText("Ebooks")).toBeInTheDocument();
+    expect(screen.getByText("Audiobooks")).toBeInTheDocument();
+  });
+});