@thepalaceproject/circulation-admin 0.0.0-post.1

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

@@ -0,0 +1,203 @@
+import * as React from "react";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { setupServer } from "msw/node";
+import { http, HttpResponse } from "msw";
+import CustomLists from "../../../src/components/CustomLists";
+import renderWithContext from "../testUtils/renderWithContext";
+import buildStore from "../../../src/store";
+import { ConfigurationSettings } from "../../../src/interfaces";
+
+describe("CustomLists", () => {
+  // Stub scrollTo, since a component in the render tree will try to call it, and it is not
+  // provided by JSDOM.
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  Element.prototype.scrollTo = () => {};
+
+  const server = setupServer(
+    http.get("*/search", () => HttpResponse.xml("<feed />")),
+    http.get("*", () => HttpResponse.json({}))
+  );
+
+  beforeAll(() => {
+    server.listen();
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
+  it("adds filters when new filter values are entered", async () => {
+    const user = userEvent.setup();
+
+    const appConfigSettings: Partial<ConfigurationSettings> = {
+      csrfToken: "",
+      featureFlags: {},
+      roles: [{ role: "system" }],
+    };
+
+    renderWithContext(
+      <CustomLists
+        csrfToken=""
+        editOrCreate="create"
+        library="testlib"
+        store={buildStore()}
+      />,
+      appConfigSettings
+    );
+
+    await user.click(screen.getByRole("textbox", { name: "filter value" }));
+    await user.keyboard("horror{enter}");
+
+    const items = screen.getAllByRole("treeitem");
+
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveTextContent(/Genre = horror/);
+
+    await user.click(screen.getByRole("textbox", { name: "filter value" }));
+    await user.keyboard("science fiction{enter}");
+
+    const newItems = screen.getAllByRole("treeitem");
+
+    expect(newItems).toHaveLength(3);
+    expect(newItems[0]).toHaveTextContent(
+      /all of these filters must be matched/i
+    );
+    expect(newItems[1]).toHaveTextContent(/genre = horror/i);
+    expect(newItems[2]).toHaveTextContent(/genre = science fiction/i);
+  });
+
+  it("replaces the existing filters when adding a new filter when the clear filters checkbox is checked", async () => {
+    const user = userEvent.setup();
+
+    const appConfigSettings: Partial<ConfigurationSettings> = {
+      csrfToken: "",
+      featureFlags: {},
+      roles: [{ role: "system" }],
+    };
+
+    renderWithContext(
+      <CustomLists
+        csrfToken=""
+        editOrCreate="create"
+        library="testlib"
+        store={buildStore()}
+      />,
+      appConfigSettings
+    );
+
+    await user.click(screen.getByRole("textbox", { name: "filter value" }));
+    await user.keyboard("horror{enter}");
+
+    let items = screen.getAllByRole("treeitem");
+
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveTextContent(/Genre = horror/);
+
+    await user.click(screen.getByRole("textbox", { name: "filter value" }));
+    await user.keyboard("science fiction{enter}");
+
+    items = screen.getAllByRole("treeitem");
+    expect(items).toHaveLength(3);
+
+    await user.click(screen.getByRole("checkbox", { name: /clear filters/i }));
+
+    await user.click(screen.getByRole("textbox", { name: "filter value" }));
+    await user.keyboard("fantasy{enter}");
+
+    items = screen.getAllByRole("treeitem");
+    expect(items).toHaveLength(1);
+  });
+
+  it("sends the language=all search parameter", async () => {
+    let searchParams = null;
+
+    server.use(
+      http.get("*/search", ({ request }) => {
+        const url = new URL(request.url);
+        searchParams = url.searchParams;
+        return HttpResponse.xml("<feed />");
+      })
+    );
+
+    const user = userEvent.setup();
+
+    const appConfigSettings: Partial<ConfigurationSettings> = {
+      csrfToken: "",
+      featureFlags: {},
+      roles: [{ role: "system" }],
+    };
+
+    renderWithContext(
+      <CustomLists
+        csrfToken=""
+        editOrCreate="create"
+        library="testlib"
+        store={buildStore()}
+      />,
+      appConfigSettings
+    );
+
+    await user.click(screen.getByRole("textbox", { name: "filter value" }));
+    await user.keyboard("horror{enter}");
+
+    await waitFor(() => {
+      expect(searchParams.get("language")).toEqual("all");
+
+      expect(JSON.parse(searchParams.get("q"))).toEqual({
+        query: {
+          key: "genre",
+          value: "horror",
+        },
+      });
+    });
+  });
+
+  it("sends the language=all search parameter when a language filter is added, and places the language filter in the q parameter", async () => {
+    let searchParams = null;
+
+    server.use(
+      http.get("*/search", ({ request }) => {
+        const url = new URL(request.url);
+        searchParams = url.searchParams;
+        return HttpResponse.xml("<feed />");
+      })
+    );
+
+    const user = userEvent.setup();
+
+    const appConfigSettings: Partial<ConfigurationSettings> = {
+      csrfToken: "",
+      featureFlags: {},
+      roles: [{ role: "system" }],
+    };
+
+    renderWithContext(
+      <CustomLists
+        csrfToken=""
+        editOrCreate="create"
+        library="testlib"
+        store={buildStore()}
+      />,
+      appConfigSettings
+    );
+
+    await userEvent.selectOptions(
+      screen.getByRole("combobox", { name: "filter field key" }),
+      screen.getByRole("option", { name: "Language" })
+    );
+    await user.click(screen.getByRole("textbox", { name: "filter value" }));
+    await user.keyboard("french{enter}");
+
+    await waitFor(() => {
+      expect(searchParams.get("language")).toEqual("all");
+
+      expect(JSON.parse(searchParams.get("q"))).toEqual({
+        query: {
+          key: "language",
+          value: "french",
+        },
+      });
+    });
+  });
+});

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import EditableInput from "../../../src/components/EditableInput";
+
+describe("EditableInput", () => {
+  it("renders an accessible description if a description prop is supplied and a label prop is supplied", () => {
+    const label = "input1";
+    const description = "this is a field";
+
+    render(
+      <EditableInput
+        label={label}
+        optionalText={false}
+        description={description}
+      />
+    );
+
+    const textbox = screen.getByRole("textbox", { name: label });
+
+    expect(textbox).toHaveAccessibleDescription(description);
+  });
+
+  it("renders an accessible description if a description prop is supplied and a label prop is not supplied", () => {
+    const description = "this is a field";
+
+    render(<EditableInput optionalText={false} description={description} />);
+
+    const textbox = screen.getByRole("textbox");
+
+    expect(textbox).toHaveAccessibleDescription(description);
+  });
+
+  it("renders an accessible description if optionalText is true", () => {
+    render(<EditableInput optionalText={true} />);
+
+    const textbox = screen.getByRole("textbox");
+
+    expect(textbox).toHaveAccessibleDescription(/optional/i);
+  });
+
+  it("associates accessible descriptions with the correct inputs when multiple instances are present", () => {
+    const descriptions = ["desc 1", "desc 2", "desc 3"];
+
+    render(
+      <div>
+        <EditableInput optionalText={false} description={descriptions[0]} />
+        <EditableInput optionalText={false} />
+        <EditableInput optionalText={false} />
+        <EditableInput optionalText={false} description={descriptions[1]} />
+        <EditableInput optionalText={false} description={descriptions[2]} />
+        <EditableInput optionalText={false} />
+      </div>
+    );
+
+    const textboxes = screen.getAllByRole("textbox");
+
+    expect(textboxes[0]).toHaveAccessibleDescription(descriptions[0]);
+    expect(textboxes[1]).toHaveAccessibleDescription("");
+    expect(textboxes[2]).toHaveAccessibleDescription("");
+    expect(textboxes[3]).toHaveAccessibleDescription(descriptions[1]);
+    expect(textboxes[4]).toHaveAccessibleDescription(descriptions[2]);
+    expect(textboxes[5]).toHaveAccessibleDescription("");
+  });
+});

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

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import IndividualAdminEditForm from "../../../src/components/IndividualAdminEditForm";
+import renderWithContext from "../testUtils/renderWithContext";
+import { ConfigurationSettings } from "../../../src/interfaces";
+
+describe("IndividualAdminEditForm", () => {
+  it("clears the role checkboxes after save", async () => {
+    const user = userEvent.setup();
+
+    const appConfigSettings: Partial<ConfigurationSettings> = {
+      csrfToken: "",
+      featureFlags: {},
+      roles: [
+        {
+          role: "system",
+        },
+      ],
+    };
+
+    const props = {
+      data: {
+        allLibraries: [
+          {
+            name: "Alpha",
+            short_name: "alpha",
+            uuid: "a3247ce9-9639-426b-bb09-82e9cb4cf44b",
+          },
+          {
+            name: "Beta",
+            short_name: "beta",
+            uuid: "da80cd40-7a87-41db-a789-5f1e87732aeb",
+          },
+          {
+            name: "Gamma",
+            short_name: "gamma",
+            uuid: "15f32675-73f5-46f3-91f4-837b933bc7b1",
+          },
+        ],
+      },
+      disabled: false,
+      listDataKey: "",
+      urlBase: "",
+    };
+
+    const { rerender } = renderWithContext(
+      <IndividualAdminEditForm {...props} />,
+      appConfigSettings
+    );
+
+    const systemAdminCheckbox = screen.getByRole("checkbox", {
+      name: /^system admin$/i,
+    });
+
+    const allAdminCheckbox = screen.getByRole("checkbox", {
+      name: /^administrator$/i,
+    });
+
+    const allUserCheckbox = screen.getByRole("checkbox", {
+      name: /^user$/i,
+    });
+
+    const alphaAdminCheckbox = screen.getByRole("checkbox", {
+      name: /administrator of alpha/i,
+    });
+
+    const alphaUserCheckbox = screen.getByRole("checkbox", {
+      name: /user of alpha/i,
+    });
+
+    const betaAdminCheckbox = screen.getByRole("checkbox", {
+      name: /administrator of beta/i,
+    });
+
+    const betaUserCheckbox = screen.getByRole("checkbox", {
+      name: /user of beta/i,
+    });
+
+    const gammaAdminCheckbox = screen.getByRole("checkbox", {
+      name: /administrator of gamma/i,
+    });
+
+    const gammaUserCheckbox = screen.getByRole("checkbox", {
+      name: /user of gamma/i,
+    });
+
+    expect(systemAdminCheckbox).not.toBeChecked();
+
+    await user.click(systemAdminCheckbox);
+
+    expect(systemAdminCheckbox).toBeChecked();
+
+    expect(allAdminCheckbox).toBeChecked();
+    expect(allUserCheckbox).toBeChecked();
+
+    expect(alphaAdminCheckbox).toBeChecked();
+    expect(alphaUserCheckbox).toBeChecked();
+
+    expect(betaAdminCheckbox).toBeChecked();
+    expect(betaUserCheckbox).toBeChecked();
+
+    expect(gammaAdminCheckbox).toBeChecked();
+    expect(gammaUserCheckbox).toBeChecked();
+
+    const nextProps = {
+      ...props,
+      // Existence of the responseBody prop indicates that the form was just saved.
+      responseBody: "some response",
+    };
+
+    rerender(<IndividualAdminEditForm {...nextProps} />);
+
+    expect(systemAdminCheckbox).not.toBeChecked();
+
+    expect(allAdminCheckbox).not.toBeChecked();
+    expect(allUserCheckbox).not.toBeChecked();
+
+    expect(alphaAdminCheckbox).not.toBeChecked();
+    expect(alphaUserCheckbox).not.toBeChecked();
+
+    expect(betaAdminCheckbox).not.toBeChecked();
+    expect(betaUserCheckbox).not.toBeChecked();
+
+    expect(gammaAdminCheckbox).not.toBeChecked();
+    expect(gammaUserCheckbox).not.toBeChecked();
+  });
+});