@thepalaceproject/circulation-admin 1.43.0 → 1.44.0

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

@@ -0,0 +1,446 @@
+import * as React from "react";
+import {
+  render,
+  screen,
+  within,
+  waitFor,
+  fireEvent,
+  act,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Lanes } from "../../../src/components/Lanes";
+import { LaneData, CustomListData } from "../../../src/interfaces";
+
+// Render react-router's Link as a marker so the lane tree and editor links
+// render without a Router in context (see Lane.test.tsx / CustomListsSidebar.test.tsx).
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to} className={props.className}>
+      {props.children}
+    </div>
+  ),
+}));
+
+// NOTE ON DRAG-AND-DROP COVERAGE
+// ------------------------------
+// `Lanes` reorders lanes with `react-beautiful-dnd`, and a real drag/drop cannot
+// be simulated in jsdom. The outcomes of a drag are still covered:
+//   - `orderChanged` (and so the "Change Lane Order" panel), saving the reordered
+//     tree via `changeLaneOrder`, and cancelling it via `resetOrder` are all
+//     exercised in the "Lanes - reorder flow" describe below, which calls
+//     `Lanes.drag(...)` through a ref — the same callback LanesSidebar invokes on
+//     a real drop.
+//   - The drop boundary (a lane may only be dropped within its own parent) lives
+//     in LanesSidebar and is asserted in LanesSidebar.test.tsx.
+// Only the pointer-level gestures themselves ("drags a top-level lane", "drags a
+// sublane") have no jsdom-reachable trigger; the tree structure and expand/collapse
+// behavior they produce are asserted instead (see "renders the draggable lane tree"
+// and "expands and collapses lanes").
+//
+// The connected default export is not rendered here: it mounts with real
+// dispatch props (fetchLanes/fetchCustomLists fire a network request on mount,
+// which would reject and crash the worker) and would override the explicit
+// `lanes`/`customLists`/dispatch stubs these behavior tests assert against.
+
+const makeLanesData = (): LaneData[] => {
+  const subsublane: LaneData = {
+    id: 3,
+    display_name: "sublane 3",
+    visible: false,
+    count: 2,
+    sublanes: [],
+    custom_list_ids: [2],
+    inherit_parent_restrictions: false,
+  };
+  const sublane: LaneData = {
+    id: 2,
+    display_name: "sublane 2",
+    visible: false,
+    count: 3,
+    sublanes: [subsublane],
+    custom_list_ids: [2],
+    inherit_parent_restrictions: false,
+  };
+  return [
+    {
+      id: 1,
+      display_name: "lane 1",
+      visible: true,
+      count: 5,
+      sublanes: [sublane],
+      custom_list_ids: [1],
+      inherit_parent_restrictions: true,
+    },
+    {
+      id: 4,
+      display_name: "lane 4",
+      visible: true,
+      count: 1,
+      sublanes: [],
+      custom_list_ids: [],
+      inherit_parent_restrictions: false,
+    },
+  ];
+};
+
+const customListsData: CustomListData[] = [
+  { id: 1, name: "list 1", entry_count: 0, is_owner: true, is_shared: false },
+  { id: 2, name: "list 2", entry_count: 2, is_owner: true, is_shared: false },
+];
+
+describe("Lanes", () => {
+  let fetchLanes: jest.Mock;
+  let fetchCustomLists: jest.Mock;
+  let editLane: jest.Mock;
+  let deleteLane: jest.Mock;
+  let showLane: jest.Mock;
+  let hideLane: jest.Mock;
+  let resetLanes: jest.Mock;
+  let changeLaneOrder: jest.Mock;
+  let confirmSpy: jest.SpyInstance;
+  let lanesData: LaneData[];
+
+  const makeProps = (overrides: Record<string, unknown> = {}) => ({
+    csrfToken: "token",
+    library: "library",
+    lanes: lanesData,
+    customLists: customListsData,
+    isFetching: false,
+    fetchLanes,
+    fetchCustomLists,
+    editLane,
+    deleteLane,
+    showLane,
+    hideLane,
+    resetLanes,
+    changeLaneOrder,
+    ...overrides,
+  });
+
+  beforeEach(() => {
+    lanesData = makeLanesData();
+    fetchLanes = jest.fn();
+    fetchCustomLists = jest.fn();
+    editLane = jest.fn().mockResolvedValue(undefined);
+    deleteLane = jest.fn().mockResolvedValue(undefined);
+    showLane = jest.fn().mockResolvedValue(undefined);
+    hideLane = jest.fn().mockResolvedValue(undefined);
+    resetLanes = jest.fn().mockResolvedValue(undefined);
+    changeLaneOrder = jest.fn().mockResolvedValue(undefined);
+    confirmSpy = jest.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders an error message from a bad form submission", () => {
+    const { container, rerender } = render(<Lanes {...makeProps()} />);
+    expect(container.querySelector(".alert-danger")).toBeNull();
+
+    rerender(
+      <Lanes
+        {...makeProps({
+          formError: { status: 500, response: "Error", url: "url" },
+        })}
+      />
+    );
+    expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+  });
+
+  it("renders an error message from a loading error", () => {
+    const { container, rerender } = render(<Lanes {...makeProps()} />);
+    expect(container.querySelector(".alert-danger")).toBeNull();
+
+    rerender(
+      <Lanes
+        {...makeProps({
+          fetchError: { status: 500, response: "Error", url: "url" },
+        })}
+      />
+    );
+    expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+  });
+
+  it("renders a loading indicator while fetching", () => {
+    const { container, rerender } = render(<Lanes {...makeProps()} />);
+    expect(container.querySelector(".loading")).toBeNull();
+
+    rerender(<Lanes {...makeProps({ isFetching: true })} />);
+    expect(container.querySelector(".loading")).toBeInTheDocument();
+  });
+
+  it("renders the create editor by default", () => {
+    const { rerender } = render(<Lanes {...makeProps()} />);
+
+    expect(screen.getByText("New top-level lane")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Save lane" })
+    ).toBeInTheDocument();
+
+    // With an identifier, the create editor makes a sublane of that lane.
+    rerender(<Lanes {...makeProps({ identifier: "2" })} />);
+    expect(screen.getByText("New sublane of sublane 2")).toBeInTheDocument();
+  });
+
+  it("renders the edit editor for a lane", () => {
+    const { container } = render(
+      <Lanes {...makeProps({ editOrCreate: "edit", identifier: "2" })} />
+    );
+
+    // The editor header identifies the lane being edited (id 2).
+    expect(container.querySelector(".save-or-edit")).toHaveTextContent("ID-2");
+    expect(
+      screen.getByRole("button", { name: "Save lane" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Delete lane/ })
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".lane-custom-lists-drag-and-drop")
+    ).toBeInTheDocument();
+  });
+
+  it("renders the reset confirmation form", () => {
+    render(<Lanes {...makeProps({ editOrCreate: "reset" })} />);
+
+    expect(
+      screen.getByRole("heading", { name: "Reset all lanes" })
+    ).toBeInTheDocument();
+    expect(screen.getByText(/cannot be undone/)).toBeInTheDocument();
+  });
+
+  it("enables the reset button only after typing RESET", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <Lanes {...makeProps({ editOrCreate: "reset" })} />
+    );
+
+    const resetButton = container.querySelector<HTMLButtonElement>(
+      "button.reset-button"
+    );
+    const input = container.querySelector<HTMLInputElement>(".reset input");
+
+    expect(resetButton).toBeDisabled();
+
+    await user.type(input, "RESET");
+    expect(resetButton).not.toBeDisabled();
+  });
+
+  it("resets the lanes only when RESET is confirmed", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <Lanes {...makeProps({ editOrCreate: "reset" })} />
+    );
+
+    const resetButton = container.querySelector<HTMLButtonElement>(
+      "button.reset-button"
+    );
+    const input = container.querySelector<HTMLInputElement>(".reset input");
+
+    // The wrong confirmation text leaves the button disabled and does nothing.
+    await user.type(input, "NOPE");
+    expect(resetButton).toBeDisabled();
+    fireEvent.click(resetButton);
+    expect(resetLanes).not.toHaveBeenCalled();
+
+    // Typing RESET enables the button and resets on click.
+    await user.clear(input);
+    await user.type(input, "RESET");
+    expect(resetButton).not.toBeDisabled();
+
+    await user.click(resetButton);
+    expect(resetLanes).toHaveBeenCalledTimes(1);
+    // fetchLanes runs once on mount and again after the reset resolves.
+    await waitFor(() => expect(fetchLanes).toHaveBeenCalledTimes(2));
+  });
+
+  it("edits a lane through the editor", async () => {
+    const user = userEvent.setup();
+    render(<Lanes {...makeProps({ editOrCreate: "edit", identifier: "2" })} />);
+
+    await user.click(screen.getByRole("button", { name: "Save lane" }));
+
+    expect(editLane).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(fetchLanes).toHaveBeenCalledTimes(2));
+  });
+
+  it("deletes a lane through the editor", async () => {
+    const user = userEvent.setup();
+    render(<Lanes {...makeProps({ editOrCreate: "edit", identifier: "2" })} />);
+
+    const deleteButton = screen.getByRole("button", { name: /Delete lane/ });
+
+    // Declining the confirmation does not delete.
+    confirmSpy.mockReturnValue(false);
+    await user.click(deleteButton);
+    expect(deleteLane).not.toHaveBeenCalled();
+
+    // Confirming deletes the lane and refetches.
+    confirmSpy.mockReturnValue(true);
+    await user.click(deleteButton);
+    expect(deleteLane).toHaveBeenCalledTimes(1);
+    expect(deleteLane).toHaveBeenCalledWith("2");
+    await waitFor(() => expect(fetchLanes).toHaveBeenCalledTimes(2));
+  });
+
+  it("renders the draggable lane tree", () => {
+    const { container } = render(<Lanes {...makeProps()} />);
+
+    const sidebar = container.querySelector<HTMLElement>(".lanes-sidebar");
+    expect(sidebar).toBeInTheDocument();
+
+    // The two top-level lanes render inside a droppable list, each as a
+    // draggable row.
+    expect(sidebar.querySelector("ul.droppable")).toBeInTheDocument();
+    expect(sidebar.querySelectorAll(".lane-info.draggable")).toHaveLength(2);
+    expect(within(sidebar).getByText("lane 1")).toBeInTheDocument();
+    expect(within(sidebar).getByText("lane 4")).toBeInTheDocument();
+  });
+
+  it("expands and collapses lanes to reveal sublanes", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Lanes {...makeProps()} />);
+    const sidebar = container.querySelector<HTMLElement>(".lanes-sidebar");
+
+    // Lane 1 starts expanded (so sublane 2 shows), but sublane 2 starts
+    // collapsed (so sublane 3 is hidden).
+    expect(within(sidebar).getByText("sublane 2")).toBeInTheDocument();
+    expect(within(sidebar).queryByText("sublane 3")).toBeNull();
+
+    const sublane2 = within(sidebar)
+      .getByText("sublane 2")
+      .closest(".lane-parent") as HTMLElement;
+    await user.click(sublane2.querySelector("button.expand-button"));
+    expect(within(sidebar).getByText("sublane 3")).toBeInTheDocument();
+
+    // Collapsing lane 1 hides all of its sublanes.
+    const lane1 = within(sidebar)
+      .getByText("lane 1")
+      .closest(".lane-parent") as HTMLElement;
+    await user.click(lane1.querySelector("button.collapse-button"));
+    expect(within(sidebar).queryByText("sublane 2")).toBeNull();
+  });
+});
+
+// The lane-reorder flow. `Lanes.drag` is the callback LanesSidebar invokes on a
+// real drop (which jsdom can't perform), so we call it through a ref to drive the
+// order-changed UI, then exercise save/reset and findParentOfLane.
+describe("Lanes - reorder flow", () => {
+  const makeLanesData = (): LaneData[] => {
+    const subsublane: LaneData = {
+      id: 3,
+      display_name: "sublane 3",
+      visible: false,
+      count: 2,
+      sublanes: [],
+      custom_list_ids: [2],
+      inherit_parent_restrictions: false,
+    };
+    const sublane: LaneData = {
+      id: 2,
+      display_name: "sublane 2",
+      visible: false,
+      count: 3,
+      sublanes: [subsublane],
+      custom_list_ids: [2],
+      inherit_parent_restrictions: false,
+    };
+    return [
+      {
+        id: 1,
+        display_name: "lane 1",
+        visible: true,
+        count: 5,
+        sublanes: [sublane],
+        custom_list_ids: [1],
+        inherit_parent_restrictions: true,
+      },
+    ];
+  };
+
+  const props = (overrides: Record<string, unknown> = {}) => ({
+    csrfToken: "token",
+    library: "library",
+    lanes: makeLanesData(),
+    customLists: [],
+    isFetching: false,
+    fetchLanes: jest.fn(),
+    fetchCustomLists: jest.fn(),
+    editLane: jest.fn(),
+    deleteLane: jest.fn(),
+    showLane: jest.fn(),
+    hideLane: jest.fn(),
+    resetLanes: jest.fn(),
+    changeLaneOrder: jest.fn().mockResolvedValue(undefined),
+    ...overrides,
+  });
+
+  it("shows the reorder UI after a drag, then saves the reordered lanes and resets", async () => {
+    const user = userEvent.setup();
+    const changeLaneOrder = jest.fn().mockResolvedValue(undefined);
+    const fetchLanes = jest.fn();
+    const ref = React.createRef<any>();
+    // Two top-level lanes, so a reorder is observable in the saved payload.
+    const secondLane: LaneData = {
+      id: 4,
+      display_name: "lane 4",
+      visible: true,
+      count: 1,
+      sublanes: [],
+      custom_list_ids: [3],
+      inherit_parent_restrictions: true,
+    };
+    const initialLanes = [...makeLanesData(), secondLane];
+    const { container } = render(
+      <Lanes
+        ref={ref}
+        {...props({ changeLaneOrder, fetchLanes, lanes: initialLanes })}
+      />
+    );
+
+    // A drop hands the reordered tree to Lanes.drag (what LanesSidebar does),
+    // which stores it and flags orderChanged.
+    const originalOrder = ref.current.state.lanes;
+    const reordered = [...originalOrder].reverse();
+    act(() => ref.current.drag({ lanes: reordered, orderChanged: true }));
+    expect(container.querySelector(".order-change-info")).toBeInTheDocument();
+
+    fetchLanes.mockClear(); // ignore the fetch fired on mount
+    await user.click(
+      container.querySelector("button.save-lane-order-changes") as HTMLElement
+    );
+    // The exact reordered tree is persisted — not the original order.
+    expect(changeLaneOrder).toHaveBeenCalledTimes(1);
+    expect(changeLaneOrder).toHaveBeenCalledWith(reordered);
+    expect(changeLaneOrder.mock.calls[0][0]).not.toEqual(originalOrder);
+    // saveOrder() only fetches once changeLaneOrder resolves.
+    await waitFor(() => expect(fetchLanes).toHaveBeenCalledTimes(1));
+
+    // With a reorder pending in state, cancelling runs resetOrder(), which
+    // restores state.lanes from props and clears the panel.
+    act(() => ref.current.drag({ lanes: reordered, orderChanged: true }));
+    expect(ref.current.state.lanes).toEqual(reordered);
+
+    await user.click(
+      container.querySelector("button.cancel-lane-order-changes") as HTMLElement
+    );
+
+    expect(ref.current.state.lanes).toEqual(initialLanes);
+    expect(
+      container.querySelector(".order-change-info")
+    ).not.toBeInTheDocument();
+  });
+
+  it("finds the parent of a deeply nested lane", () => {
+    const ref = React.createRef<any>();
+    render(<Lanes ref={ref} {...props()} />);
+
+    // The subsublane (id 3) is a child of sublane 2, not a top-level lane, so the
+    // lookup recurses one level down.
+    const subsublane = { id: 3 } as LaneData;
+    expect(ref.current.findParentOfLane(subsublane).id).toBe(2);
+  });
+});