@thepalaceproject/circulation-admin 1.43.0 → 1.44.0-post.4

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

@@ -0,0 +1,353 @@
+import * as React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import buildStore from "../../../src/store";
+
+// CustomListsForBook renders a react-router v3 <Link> for which
+// renderWithProviders supplies no router context. Mock it to a marker that
+// exposes the `to` pathname and state so the destination can be asserted.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props: any) => (
+    <div
+      data-testid="Link"
+      data-pathname={
+        typeof props.to === "string" ? props.to : props.to?.pathname
+      }
+      data-book-title={
+        typeof props.to === "object" ? props.to?.state?.bookTitle : undefined
+      }
+    >
+      {props.children}
+    </div>
+  ),
+}));
+
+// Render the CONNECTED default export so that mapStateToProps / mapDispatchToProps
+// are exercised. The book's lists and all available lists are fetched on mount
+// and fed back in through the Redux store; book/bookUrl/library/refreshCatalog
+// are own props.
+import CustomListsForBook, {
+  CustomListsForBook as UnconnectedCustomListsForBook,
+} from "../../../src/components/CustomListsForBook";
+
+const allCustomLists = [
+  { id: "1", name: "list 1", is_owner: true, is_shared: false },
+  { id: "2", name: "list 2", is_owner: true, is_shared: false },
+  { id: "3", name: "list 3", is_owner: true, is_shared: false },
+];
+const listsForBook = [
+  { id: "2", name: "list 2", is_owner: true, is_shared: false },
+];
+
+const jsonResponse = (body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+
+// Serves the "all custom lists" endpoint and the per-book "/lists" endpoint from
+// the supplied fixtures; answers POSTs (edit) with success.
+const stubFetch = (allLists: unknown[], forBook: unknown[]) =>
+  jest
+    .spyOn(globalThis, "fetch")
+    .mockImplementation(async (url, opts?: RequestInit) => {
+      if (opts?.method === "POST") {
+        return new Response("success", { status: 200 });
+      }
+      const u = String(url);
+      if (u.includes("custom_lists")) {
+        return jsonResponse({ custom_lists: allLists });
+      }
+      return jsonResponse({ custom_lists: forBook });
+    });
+
+const renderConnected = () => {
+  const store = buildStore();
+  const refreshCatalog = jest.fn().mockResolvedValue(undefined);
+  const result = renderWithProviders(
+    <CustomListsForBook
+      csrfToken="token"
+      book={{ id: "id", title: "test title" } as any}
+      bookUrl="works/book url"
+      library="library"
+      refreshCatalog={refreshCatalog}
+    />,
+    { reduxProviderProps: { store } }
+  );
+  return { ...result, refreshCatalog };
+};
+
+describe("CustomListsForBook", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("shows the book title and the book's current lists", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByRole("heading", { level: 2, name: "test title" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Current Lists" })
+    ).toBeInTheDocument();
+
+    const link = await screen.findByRole("link", { name: "list 2" });
+    expect(link).toHaveAttribute("href", "/admin/web/lists/library/edit/2");
+    // Exactly one current list is shown.
+    expect(container.querySelectorAll(".with-remove-button")).toHaveLength(1);
+  });
+
+  it("builds the current-list URL from the list's id, not its name", async () => {
+    // A list named "new" whose id is "42" proves the URL uses the id.
+    const newList = { id: "42", name: "new", is_owner: true, is_shared: false };
+    stubFetch([...allCustomLists, newList], [newList]);
+    renderConnected();
+
+    const link = await screen.findByRole("link", { name: "new" });
+    expect(link).toHaveAttribute("href", "/admin/web/lists/library/edit/42");
+  });
+
+  it("shows a menu of the lists the book is not yet on", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    const { container } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const select = container.querySelector("select");
+    expect(select).not.toBeNull();
+    const optionValues = Array.from(select.querySelectorAll("option")).map(
+      (o) => o.getAttribute("value")
+    );
+    // "list 2" is excluded because the book is already on it.
+    expect(optionValues).toStrictEqual(["list 1", "list 3"]);
+    expect(screen.getByText(/Select an existing list/)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+  });
+
+  it("shows placeholder text when the book is not on any list", async () => {
+    stubFetch(allCustomLists, []);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByText("This book is not currently on any lists.")
+    ).toBeInTheDocument();
+    // With no current lists there is no "Current Lists" heading.
+    expect(
+      screen.queryByRole("heading", { name: "Current Lists" })
+    ).not.toBeInTheDocument();
+    expect(container.querySelector(".with-remove-button")).toBeNull();
+  });
+
+  it("hides the menu once the book is on every available list", async () => {
+    stubFetch(allCustomLists, allCustomLists);
+    const { container } = renderConnected();
+
+    expect(
+      await screen.findByText(
+        "This book has been added to all the available lists."
+      )
+    ).toBeInTheDocument();
+    expect(container.querySelector("select")).toBeNull();
+  });
+
+  it("shows a message instead of the input list when no lists exist", async () => {
+    stubFetch([], []);
+    renderConnected();
+
+    expect(
+      await screen.findByText("There are no available lists.")
+    ).toBeInTheDocument();
+  });
+
+  it("shows a link to the list creator that carries the book title", async () => {
+    stubFetch(allCustomLists, listsForBook);
+    renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const creatorLink = screen.getByTestId("Link");
+    expect(creatorLink).toHaveTextContent("Create a new list");
+    expect(creatorLink).toHaveAttribute(
+      "data-pathname",
+      "/admin/web/lists/library/create"
+    );
+    expect(creatorLink).toHaveAttribute("data-book-title", "test title");
+    expect(
+      screen.getByText(
+        "(The book title will be automatically copied and searched on the list creator page.)"
+      )
+    ).toBeInTheDocument();
+  });
+
+  it("fetches the book's lists and all custom lists on mount, without refreshing the catalog", async () => {
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    const urls = fetchSpy.mock.calls.map(([u]) => String(u));
+    expect(urls).toContain("admin/works/book url/lists");
+    expect(urls.some((u) => u.includes("custom_lists"))).toBe(true);
+    expect(refreshCatalog).not.toHaveBeenCalled();
+  });
+
+  it("does not re-fetch all custom lists on mount when they are already loaded", () => {
+    // The mount guard (CustomListsForBook.tsx:158) fetches the full list of
+    // custom lists only when they are not already present; the book's own lists
+    // are still fetched. Drive the already-loaded case through the unconnected
+    // class, since the connected mount always starts from an empty store.
+    const fetchAllCustomLists = jest.fn();
+    const fetchCustomListsForBook = jest.fn();
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={fetchAllCustomLists}
+        fetchCustomListsForBook={fetchCustomListsForBook}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+      />
+    );
+
+    expect(fetchCustomListsForBook).toHaveBeenCalledTimes(1);
+    expect(fetchAllCustomLists).not.toHaveBeenCalled();
+  });
+
+  it("adds a list and posts the updated set of lists", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { container, refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    await user.selectOptions(
+      container.querySelector("select") as HTMLSelectElement,
+      "list 1"
+    );
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalled());
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/book url/lists");
+    const lists = JSON.parse(
+      ((postCall[1] as RequestInit).body as FormData).get("lists") as string
+    );
+    expect(lists).toStrictEqual([
+      { id: "2", name: "list 2", is_owner: true, is_shared: false },
+      { id: "1", name: "list 1", is_owner: true, is_shared: false },
+    ]);
+  });
+
+  it("removes a list and posts the emptied set of lists", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = stubFetch(allCustomLists, listsForBook);
+    const { refreshCatalog } = renderConnected();
+
+    await screen.findByRole("link", { name: "list 2" });
+
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+
+    await waitFor(() => expect(refreshCatalog).toHaveBeenCalled());
+
+    const postCall = fetchSpy.mock.calls.find(
+      ([, opts]) => (opts as RequestInit)?.method === "POST"
+    );
+    expect(String(postCall[0])).toBe("admin/works/book url/lists");
+    const lists = JSON.parse(
+      ((postCall[1] as RequestInit).body as FormData).get("lists") as string
+    );
+    expect(lists).toStrictEqual([]);
+  });
+
+  it("shows an error message", () => {
+    // A mount-time fetch failure would reject the (uncaught) fetch promise and
+    // crash the worker, so drive the error through the prop connect derives.
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={jest.fn()}
+        fetchCustomListsForBook={jest.fn()}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+        fetchError={{ status: 400, response: "boom", url: "" } as any}
+      />
+    );
+    expect(screen.getByText(/Error: boom/)).toBeInTheDocument();
+  });
+
+  it("disables the remove and add controls while fetching", () => {
+    // isFetching is a connect-derived prop; inject it via the unconnected class.
+    render(
+      <UnconnectedCustomListsForBook
+        csrfToken="token"
+        book={{ id: "id", title: "test title" } as any}
+        bookUrl="works/book url"
+        library="library"
+        refreshCatalog={jest.fn().mockResolvedValue(undefined)}
+        allCustomLists={allCustomLists as any}
+        customListsForBook={listsForBook as any}
+        fetchAllCustomLists={jest.fn()}
+        fetchCustomListsForBook={jest.fn()}
+        editCustomListsForBook={jest.fn().mockResolvedValue(undefined)}
+        isFetching={true}
+      />
+    );
+    expect(screen.getByRole("button", { name: "Delete" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+  });
+
+  it("shows the new book's lists when it is rerendered for another book", () => {
+    const commonProps = {
+      csrfToken: "token",
+      library: "library",
+      refreshCatalog: jest.fn().mockResolvedValue(undefined),
+      allCustomLists: allCustomLists as any,
+      fetchAllCustomLists: jest.fn(),
+      fetchCustomListsForBook: jest.fn(),
+      editCustomListsForBook: jest.fn().mockResolvedValue(undefined),
+    };
+    const { rerender } = render(
+      <UnconnectedCustomListsForBook
+        {...commonProps}
+        book={{ id: "a", title: "Book A" } as any}
+        bookUrl="works/book-a"
+        customListsForBook={listsForBook as any}
+      />
+    );
+    // list 2 (the book's only list) is in the current column, which renders
+    // each list as a link; the add-menu renders options instead.
+    expect(screen.getByRole("link", { name: "list 2" })).toBeInTheDocument();
+
+    // The current column renders straight from customListsForBook, so a new
+    // book's lists replace the old ones on rerender.
+    rerender(
+      <UnconnectedCustomListsForBook
+        {...commonProps}
+        book={{ id: "b", title: "Book B" } as any}
+        bookUrl="works/book-b"
+        customListsForBook={[allCustomLists[0]] as any}
+      />
+    );
+    expect(screen.getByRole("link", { name: "list 1" })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("link", { name: "list 2" })
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,251 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CustomListsSidebar from "../../../src/components/CustomListsSidebar";
+
+// Render react-router's Link as a marker anchor so we can assert its target
+// (`data-to`), text, and className without needing a Router in the test.
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <a
+      data-testid="Link"
+      data-to={props.to}
+      href={props.to}
+      className={props.className}
+    >
+      {props.children}
+    </a>
+  ),
+}));
+
+describe("CustomListsSidebar", () => {
+  const makeLists = () => [
+    {
+      id: 1,
+      name: "First List",
+      entry_count: 5,
+      is_owner: true,
+      is_shared: false,
+    },
+    {
+      id: 2,
+      name: "Second List",
+      entry_count: 10,
+      is_owner: true,
+      is_shared: false,
+    },
+  ];
+
+  const baseProps = () => ({
+    filter: "owned",
+    lists: makeLists(),
+    library: "library_name",
+    identifier: "123",
+    isLibraryManager: true,
+    deleteCustomList: jest.fn(),
+    changeSort: jest.fn(),
+    sortOrder: "asc",
+  });
+
+  it("renders a sidebar with a header and a create button", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    expect(
+      container.querySelector(".custom-lists-sidebar")
+    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+      "List Manager"
+    );
+
+    const createButton = screen.getAllByTestId("Link")[0];
+    expect(createButton).toHaveTextContent("Create New List");
+    expect(createButton).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/create"
+    );
+  });
+
+  it("renders filter select", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    const select = container.querySelector<HTMLSelectElement>(
+      'select[name="filter"]'
+    );
+    expect(select).toHaveValue("owned");
+
+    const options = within(select).getAllByRole("option");
+    expect(options).toHaveLength(4);
+    expect(options[0]).toHaveValue("");
+    expect(options[1]).toHaveValue("owned");
+    expect(options[2]).toHaveValue("shared-out");
+    expect(options[3]).toHaveValue("shared-in");
+  });
+
+  it("renders sort select", () => {
+    const { container } = render(<CustomListsSidebar {...baseProps()} />);
+
+    const select = container.querySelector<HTMLSelectElement>(
+      'select[name="sort"]'
+    );
+    expect(select).toHaveValue("asc");
+
+    const options = within(select).getAllByRole("option");
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveValue("asc");
+    expect(options[1]).toHaveValue("desc");
+  });
+
+  it("renders a list of custom list info items", async () => {
+    const user = userEvent.setup();
+    const deleteCustomList = jest.fn();
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        deleteCustomList={deleteCustomList}
+      />
+    );
+
+    const listItems = container.querySelectorAll("ul > li");
+    expect(listItems).toHaveLength(2);
+    const [firstList, secondList] = Array.from(listItems);
+
+    const firstInfo = firstList.querySelectorAll(".custom-list-info > div");
+    expect(firstInfo[0]).toHaveTextContent("First List");
+    expect(firstInfo[1]).toHaveTextContent("Books in list: 5");
+    expect(firstInfo[2]).toHaveTextContent("ID-1");
+
+    const firstButtons = firstList.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const firstEdit = within(firstButtons).getByTestId("Link");
+    expect(firstEdit).toHaveTextContent("Edit");
+    expect(firstEdit).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/edit/1"
+    );
+    const firstDelete = within(firstButtons).getByRole("button");
+    expect(firstDelete).toHaveTextContent("Delete");
+    await user.click(firstDelete);
+    expect(deleteCustomList).toHaveBeenCalledTimes(1);
+
+    const secondInfo = secondList.querySelectorAll(".custom-list-info > div");
+    expect(secondInfo[0]).toHaveTextContent("Second List");
+    expect(secondInfo[1]).toHaveTextContent("Books in list: 10");
+    expect(secondInfo[2]).toHaveTextContent("ID-2");
+
+    const secondButtons = secondList.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const secondEdit = within(secondButtons).getByTestId("Link");
+    expect(secondEdit).toHaveTextContent("Edit");
+    expect(secondEdit).toHaveAttribute(
+      "data-to",
+      "/admin/web/lists/library_name/edit/2"
+    );
+    const secondDelete = within(secondButtons).getByRole("button");
+    expect(secondDelete).toHaveTextContent("Delete");
+    await user.click(secondDelete);
+    expect(deleteCustomList).toHaveBeenCalledTimes(2);
+  });
+
+  it("disables the edit button if the list is already being edited", () => {
+    const props = baseProps();
+    const { container, rerender } = render(<CustomListsSidebar {...props} />);
+
+    const firstButtons = () =>
+      container.querySelectorAll<HTMLElement>(".custom-list-buttons")[0];
+
+    const editLink = within(firstButtons()).getByTestId("Link");
+    expect(editLink).not.toHaveClass("disabled");
+    expect(editLink).toHaveTextContent("EditPencil Icon");
+
+    rerender(<CustomListsSidebar {...props} identifier="1" />);
+
+    const editingButton = within(firstButtons()).getByRole("button", {
+      name: "Editing",
+    });
+    expect(editingButton).toBeDisabled();
+  });
+
+  it("renders a view button instead of an edit button if a list is not owned", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: false,
+            is_shared: false,
+          },
+        ]}
+      />
+    );
+
+    const firstButtons = container.querySelector<HTMLElement>(
+      ".custom-list-buttons"
+    );
+    const viewLink = within(firstButtons).getByTestId("Link");
+    expect(viewLink).not.toHaveClass("disabled");
+    expect(viewLink).toHaveTextContent("ViewVisible Icon");
+  });
+
+  it("displays the delete button only to library managers", () => {
+    const props = baseProps();
+    const { container, rerender } = render(<CustomListsSidebar {...props} />);
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(2);
+
+    rerender(<CustomListsSidebar {...props} isLibraryManager={false} />);
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+
+  it("does not render a delete button if a list is not owned", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: false,
+            is_shared: false,
+          },
+        ]}
+      />
+    );
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+
+  it("does not render a delete button if a list is shared", () => {
+    const { container } = render(
+      <CustomListsSidebar
+        {...baseProps()}
+        lists={[
+          {
+            id: 1,
+            name: "First List",
+            entry_count: 5,
+            is_owner: true,
+            is_shared: true,
+          },
+        ]}
+      />
+    );
+
+    expect(
+      container.querySelectorAll(".custom-list-buttons button")
+    ).toHaveLength(0);
+  });
+});

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 }
     );