@thepalaceproject/circulation-admin 0.0.0-post.1

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { stub } from "sinon";
+import { LaneData } from "../../../src/interfaces";
+import Lane from "../../../src/components/Lane";
+
+// Mock the Link component from React Router, so we can verify that it gets rendered with the
+// expected props. This serves as an example of how to do something analogous to Enzyme's shallow
+// rendering, when we don't want/need to render the whole component tree down to HTML elements to
+// test something. This technique is useful for testing components in isolation (unit testing),
+// instead of the integration testing that RTL focuses on.
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+const renderLanes = stub();
+const toggleLaneVisibility = stub();
+
+function createLaneData(displayName: string, isAutomated: boolean): LaneData {
+  return {
+    id: 1,
+    display_name: displayName,
+    visible: true,
+    count: 5,
+    sublanes: [],
+    // The absence/presence of custom list ids determines if a lane is automated or custom.
+    custom_list_ids: isAutomated ? [] : [1],
+    inherit_parent_restrictions: true,
+  };
+}
+
+describe("Lane", () => {
+  it("renders an edit link on a custom lane", () => {
+    const laneData = createLaneData("Custom Lane", false);
+
+    render(
+      <Lane
+        lane={laneData}
+        active={false}
+        library="test_library"
+        orderChanged={false}
+        renderLanes={renderLanes}
+        toggleLaneVisibility={toggleLaneVisibility}
+      />
+    );
+
+    const editLink = screen.getAllByTestId("Link")[0];
+
+    expect(editLink).toHaveAttribute("data-to", expect.stringMatching(/edit/i));
+    expect(editLink).toHaveTextContent(/edit/i);
+  });
+
+  it("renders an edit link on an automated lane", async () => {
+    const laneData = createLaneData("Automated Lane", true);
+
+    render(
+      <Lane
+        lane={laneData}
+        active={false}
+        library="test_library"
+        orderChanged={false}
+        renderLanes={renderLanes}
+        toggleLaneVisibility={toggleLaneVisibility}
+      />
+    );
+
+    const editLink = screen.getAllByTestId("Link")[0];
+
+    expect(editLink).toHaveAttribute("data-to", expect.stringMatching(/edit/i));
+    expect(editLink).toHaveTextContent(/edit/i);
+  });
+});

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

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { stub } from "sinon";
+import { LaneData } from "../../../src/interfaces";
+import LaneEditor from "../../../src/components/LaneEditor";
+
+// Mock the LaneCustomListsEditor so we can verify that it is or isn't rendered. This serves as an
+// example of how to do something analogous to Enzyme's shallow rendering, when we don't want/need
+// to render the whole component tree down to HTML elements to test something. This technique is
+// useful for testing components in isolation (unit testing), instead of the integration testing
+// that RTL focuses on.
+
+jest.mock("../../../src/components/LaneCustomListsEditor", () => ({
+  __esModule: true,
+  default: (props) => <div data-testid="LaneCustomListsEditor" />,
+}));
+
+const customListsData = [
+  { id: 1, name: "list 1", entries: [], is_owner: true, is_shared: false },
+];
+
+const editLane = stub().returns(
+  new Promise<void>((resolve) => resolve())
+);
+
+const deleteLane = stub().returns(
+  new Promise<void>((resolve) => resolve())
+);
+
+const toggleLaneVisibility = stub();
+
+function createLaneData(displayName: string, isAutomated: boolean): LaneData {
+  return {
+    id: 1,
+    display_name: displayName,
+    visible: true,
+    count: 5,
+    sublanes: [
+      {
+        id: 2,
+        display_name: `Sublane of ${displayName}`,
+        visible: true,
+        count: 3,
+        sublanes: [],
+        custom_list_ids: [1],
+        inherit_parent_restrictions: false,
+      },
+    ],
+    // The absence/presence of custom list ids determines if a lane is automated or custom.
+    custom_list_ids: isAutomated ? [] : [1],
+    inherit_parent_restrictions: true,
+  };
+}
+
+describe("LaneEditor", () => {
+  describe("for a custom lane", () => {
+    const laneData = createLaneData("Custom Lane", false);
+
+    beforeEach(() => {
+      render(
+        <LaneEditor
+          library="library"
+          lane={laneData}
+          customLists={customListsData}
+          editOrCreate="edit"
+          editLane={editLane}
+          deleteLane={deleteLane}
+          findParentOfLane={stub().returns(laneData)}
+          toggleLaneVisibility={toggleLaneVisibility}
+        />
+      );
+    });
+
+    it("renders a delete button", () => {
+      expect(screen.getByRole("button", { name: /delete/i })).not.toBeNull();
+    });
+
+    it("renders an inherit parent restrictions checkbox", () => {
+      expect(
+        screen.getByRole("checkbox", {
+          name: /inherit restrictions from parent/i,
+        })
+      ).not.toBeNull();
+    });
+
+    it("renders a custom lists editor", () => {
+      expect(screen.getByTestId("LaneCustomListsEditor")).not.toBeNull();
+    });
+  });
+
+  describe("for an automated lane", () => {
+    const laneData = createLaneData("Automated Lane", true);
+
+    beforeEach(() => {
+      render(
+        <LaneEditor
+          library="library"
+          lane={laneData}
+          customLists={customListsData}
+          editOrCreate="edit"
+          editLane={editLane}
+          deleteLane={deleteLane}
+          findParentOfLane={stub().returns(laneData)}
+          toggleLaneVisibility={toggleLaneVisibility}
+        />
+      );
+    });
+
+    it("does not render a delete button", () => {
+      expect(screen.queryByRole("button", { name: /delete/i })).toBeNull();
+    });
+
+    it("does not render an inherit parent restrictions checkbox", () => {
+      expect(
+        screen.queryByRole("checkbox", {
+          name: /inherit restrictions from parent/i,
+        })
+      ).toBeNull();
+    });
+
+    it("does not render a custom lists editor", () => {
+      expect(screen.queryByTestId("LaneCustomListsEditor")).toBeNull();
+    });
+
+    it("renders an explanation that the lane contents can't be edited", () => {
+      expect(screen.getByText(/contents cannot be edited/i)).not.toBeNull();
+    });
+  });
+
+  it("doesn't render a custom lists editor while a lane is being loaded for editing", () => {
+    const laneData = null;
+
+    render(
+      <LaneEditor
+        library="library"
+        lane={laneData}
+        customLists={customListsData}
+        editOrCreate="edit"
+        editLane={editLane}
+        deleteLane={deleteLane}
+        findParentOfLane={stub().returns(laneData)}
+        toggleLaneVisibility={toggleLaneVisibility}
+      />
+    );
+
+    expect(screen.queryByTestId("LaneCustomListsEditor")).toBeNull();
+  });
+});

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ProtocolFormField from "../../../src/components/ProtocolFormField";
+
+// NB: This file adds / duplicates existing tests from:
+// - `src/components/__tests__/ProtocolFormField-test.tsx`.
+//
+// Those tests should eventually be migrated here and
+// adapted to the Jest/React Testing Library paradigm.
+
+describe("ProtocolFormField", () => {
+  it("renders date-picker setting", async () => {
+    const user = userEvent.setup();
+    const emptyValue = "";
+    const testDate = "2022-01-01";
+    const datePickerLabel = "A date setting field";
+    const fieldDescription = "Description of the setting";
+    const setting = {
+      key: "setting",
+      label: datePickerLabel,
+      description: `<p>${fieldDescription}</p>`,
+      type: "date-picker",
+    };
+
+    render(<ProtocolFormField setting={setting} disabled={false} />);
+    const input = screen.getByLabelText(datePickerLabel) as HTMLInputElement;
+
+    expect(input.value).toBe(emptyValue);
+
+    // Enter a date.
+    await user.click(input);
+    await user.keyboard(`${testDate}{enter}`);
+
+    expect(input.value).toBe(testDate);
+  });
+});

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { screen, waitFor } from "@testing-library/react";
+
+import QuicksightDashboard from "../../../src/components/QuicksightDashboard";
+import { LibrariesData } from "../../../src/interfaces";
+import buildStore from "../../../src/store";
+import { setupServer } from "msw/node";
+import { http, HttpResponse } from "msw";
+import renderWithContext from "../testUtils/renderWithContext";
+import { renderWithProviders } from "../testUtils/withProviders";
+import QuicksightDashboardPage from "../../../src/components/QuicksightDashboardPage";
+
+const libraries: LibrariesData = { libraries: [{ uuid: "my-uuid" }] };
+const dashboardId = "test";
+const embedUrl = "http://embedUrl";
+const dashboardUrlData = { embedUrl: embedUrl };
+
+describe("QuicksightDashboard", () => {
+  const server = setupServer(
+    http.get("/admin/libraries", () => HttpResponse.json(libraries)),
+    http.get(`/admin/quicksight_embed/${dashboardId}`, ({ request }) => {
+      const url = new URL(request.url);
+      const libraryUuids = url.searchParams.get("libraryUuids");
+
+      if (libraryUuids === libraries["libraries"][0]["uuid"]) {
+        return HttpResponse.json(dashboardUrlData);
+      }
+    })
+  );
+
+  beforeAll(() => {
+    server.listen();
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
+  it("embed url is retrieved and set in iframe", async () => {
+    renderWithProviders(
+      <QuicksightDashboard dashboardId={dashboardId} store={buildStore()} />
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByTitle("Library Dashboard")[0]).toHaveAttribute(
+        "src",
+        embedUrl
+      );
+    });
+  });
+
+  it("header renders without navigation links ", () => {
+    renderWithProviders(<QuicksightDashboardPage params={{ library: null }} />);
+
+    // Make sure we see the QuicksSight iFrame.
+    expect(screen.getByTitle("Library Dashboard")).toBeInTheDocument();
+    // Make sure we have the branding image.
+    expect(
+      screen.getByAltText("Palace Collection Manager")
+    ).toBeInTheDocument();
+
+    // Make sure we do not see other navigation links.
+    ["Dashboard", "System Configuration"].forEach((name) => {
+      expect(screen.queryByText(name)).not.toBeInTheDocument();
+    });
+  });
+});