@thepalaceproject/circulation-admin 1.43.0-post.15 → 1.43.0-post.17

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

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

@@ -0,0 +1,229 @@
+import * as React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import AnnouncementForm from "../../../src/components/AnnouncementForm";
+
+// 66 characters — within the 15-350 valid range.
+const CONTENT =
+  "Here is some sample content which comes out to over 15 characters.";
+
+const getTextarea = () => screen.getByRole("textbox") as HTMLTextAreaElement;
+const getDateInputs = (container: HTMLElement) =>
+  Array.from(
+    container.querySelectorAll<HTMLInputElement>('input[type="date"]')
+  );
+const getCounter = () => screen.getByText(/Current length:/);
+
+// Enter valid content and a start/finish date.
+const fillOutForm = async (
+  user: ReturnType<typeof userEvent.setup>,
+  container: HTMLElement
+) => {
+  await user.type(getTextarea(), CONTENT);
+  const [start, finish] = getDateInputs(container);
+  // Date inputs are read via a ref, so `fireEvent.change` (set value + dispatch)
+  // reliably sets the value.
+  fireEvent.change(start, { target: { value: "2020-06-01" } });
+  fireEvent.change(finish, { target: { value: "2020-07-01" } });
+};
+
+describe("AnnouncementForm", () => {
+  let add: jest.Mock;
+  beforeEach(() => {
+    add = jest.fn();
+  });
+
+  it("renders the input fields", () => {
+    const { container } = render(<AnnouncementForm add={add} />);
+
+    // Content field: a textarea carrying the 15/350 length constraints.
+    const textarea = getTextarea();
+    expect(textarea.tagName).toBe("TEXTAREA");
+    expect(textarea).toHaveAttribute("minlength", "15");
+    expect(textarea).toHaveAttribute("maxlength", "350");
+    expect(
+      screen.getByText("New Announcement Text (15-350 characters)")
+    ).toBeInTheDocument();
+    expect(screen.getByText("(Current length: 0/350)")).toBeInTheDocument();
+
+    // Two date fields, each with its label and description.
+    const dates = getDateInputs(container);
+    expect(dates).toHaveLength(2);
+    // EditableInput prepends "(Optional) " to each description, so match the
+    // full sentence as a substring rather than the whole text content.
+    expect(screen.getByText("Start Date")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /If no start date is chosen, the default start date is today's date\./
+      )
+    ).toBeInTheDocument();
+    expect(screen.getByText("End Date")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /If no expiration date is chosen, the default expiration date is 2 months from the start date\./
+      )
+    ).toBeInTheDocument();
+  });
+
+  // The other tests only compare the date fields against whatever they rendered
+  // with, so they would all still pass if the defaults came out blank. Pin the
+  // clock and assert the actual values.
+  it("prefills the date fields with today and two months from today", () => {
+    jest.useFakeTimers().setSystemTime(new Date(2026, 2, 15));
+    try {
+      const { container } = render(<AnnouncementForm add={add} />);
+
+      const [start, finish] = getDateInputs(container);
+      expect(start.value).toBe("2026-03-15");
+      expect(finish.value).toBe("2026-05-15");
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it("renders the buttons", () => {
+    render(<AnnouncementForm add={add} />);
+    expect(screen.getAllByRole("button")).toHaveLength(2);
+    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+  });
+
+  it("keeps track of whether the content is too short or too long", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<AnnouncementForm add={add} />);
+
+    // Empty content: 0/350, flagged as the wrong length, Add disabled.
+    expect(getCounter()).toHaveTextContent("(Current length: 0/350)");
+    expect(getCounter().parentElement).toHaveClass("wrong-length");
+    expect(screen.getByRole("button", { name: "Add" })).toBeDisabled();
+
+    // Valid content: length flag cleared and Add enabled.
+    await fillOutForm(user, container);
+    expect(getCounter()).toHaveTextContent("(Current length: 66/350)");
+    expect(getCounter().parentElement).not.toHaveClass("wrong-length");
+    expect(screen.getByRole("button", { name: "Add" })).not.toBeDisabled();
+
+    // Content at the 350-character cap is flagged as too long again.
+    const longString =
+      "Here's some extremely/gratuitously long content.  The point of the content is just to get up to 350 characters so that I can test whether the class name will change.  I realize even as I am typing this that it probably would have been a better idea to do it with filler text; oh well...?  Anyway, I have now written the most boring announcement EVER.";
+    fireEvent.change(getTextarea(), { target: { value: longString } });
+    expect(getCounter()).toHaveTextContent("(Current length: 350/350)");
+    expect(getCounter().parentElement).toHaveClass("wrong-length");
+  });
+
+  it("adds a new announcement", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<AnnouncementForm add={add} />);
+    await fillOutForm(user, container);
+
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    expect(add).toHaveBeenCalledTimes(1);
+    expect(add.mock.calls[0][0].content).toBe(CONTENT);
+    expect(add.mock.calls[0][0].start).toBe("2020-06-01");
+    expect(add.mock.calls[0][0].finish).toBe("2020-07-01");
+  });
+
+  it("cancels adding a new announcement", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<AnnouncementForm add={add} />);
+    const [start0, finish0] = getDateInputs(container);
+    const defaultStart = start0.value;
+    const defaultFinish = finish0.value;
+
+    await fillOutForm(user, container);
+    expect(getTextarea()).toHaveValue(CONTENT);
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    // Cancelling a brand-new announcement adds nothing and restores the
+    // empty content field and the default dates.
+    expect(add).not.toHaveBeenCalled();
+    expect(getTextarea()).toHaveValue("");
+    expect(getCounter()).toHaveTextContent("(Current length: 0/350)");
+    const [start1, finish1] = getDateInputs(container);
+    expect(start1.value).toBe(defaultStart);
+    expect(finish1.value).toBe(defaultFinish);
+  });
+
+  it("edits an existing announcement", async () => {
+    const user = userEvent.setup();
+    const { container, rerender } = render(<AnnouncementForm add={add} />);
+    const [start0, finish0] = getDateInputs(container);
+    const defaultStart = start0.value;
+    const defaultFinish = finish0.value;
+
+    // Supplying an existing announcement's props switches the form to edit mode.
+    rerender(
+      <AnnouncementForm
+        add={add}
+        content={CONTENT}
+        start="07/01/2020"
+        finish="08/01/2020"
+      />
+    );
+
+    // The form is populated with the existing announcement (dates reformatted).
+    expect(getTextarea()).toHaveValue(CONTENT);
+    const [start1, finish1] = getDateInputs(container);
+    expect(start1.value).toBe("2020-07-01");
+    expect(finish1.value).toBe("2020-08-01");
+
+    // Edit the content and save it.
+    fireEvent.change(getTextarea(), {
+      target: { value: "Here is an edited version of the content" },
+    });
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    expect(add).toHaveBeenCalledTimes(1);
+    expect(add.mock.calls[0][0].content).toBe(
+      "Here is an edited version of the content"
+    );
+
+    // The form resets to an empty content field and the default dates.
+    expect(getTextarea()).toHaveValue("");
+    const [start2, finish2] = getDateInputs(container);
+    expect(start2.value).toBe(defaultStart);
+    expect(finish2.value).toBe(defaultFinish);
+  });
+
+  it("cancels editing an existing announcement", async () => {
+    const user = userEvent.setup();
+    const { container, rerender } = render(<AnnouncementForm add={add} />);
+    const [start0, finish0] = getDateInputs(container);
+    const defaultStart = start0.value;
+    const defaultFinish = finish0.value;
+
+    rerender(
+      <AnnouncementForm
+        add={add}
+        content={CONTENT}
+        start="07/01/2020"
+        finish="08/01/2020"
+      />
+    );
+
+    expect(getTextarea()).toHaveValue(CONTENT);
+    const [start1, finish1] = getDateInputs(container);
+    expect(start1.value).toBe("2020-07-01");
+    expect(finish1.value).toBe("2020-08-01");
+
+    fireEvent.change(getTextarea(), {
+      target: { value: "Here is an edited version of the content" },
+    });
+    // Cancelling while editing re-submits the (edited) announcement rather than
+    // discarding it — unlike cancelling a brand-new one.
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(add).toHaveBeenCalledTimes(1);
+    expect(add.mock.calls[0][0].content).toBe(
+      "Here is an edited version of the content"
+    );
+
+    expect(getTextarea()).toHaveValue("");
+    const [start2, finish2] = getDateInputs(container);
+    expect(start2.value).toBe(defaultStart);
+    expect(finish2.value).toBe(defaultFinish);
+  });
+});

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

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import AnnouncementsSection from "../../../src/components/AnnouncementsSection";
+import { SettingData } from "../../../src/interfaces";
+
+const announcements = [
+  {
+    content: "First Announcement",
+    start: "2020-05-12",
+    finish: "2020-06-12",
+    id: "perm_1",
+  },
+  {
+    content: "Second Announcement",
+    start: "2020-05-28",
+    finish: "2020-06-28",
+    id: "perm_2",
+  },
+];
+
+const setting: SettingData = {
+  description: "announcements",
+  format: "date-range",
+  key: "announcements",
+  label: "Announcements",
+  type: "list",
+};
+
+const renderSection = (ref?: React.RefObject<AnnouncementsSection>) =>
+  render(
+    <AnnouncementsSection
+      ref={ref}
+      setting={setting}
+      // Fresh copies so the in-place sort during render can't leak between tests.
+      value={announcements.map((a) => ({ ...a }))}
+    />
+  );
+
+const announcementEls = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll<HTMLElement>(".announcement"));
+
+describe("AnnouncementsSection", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders a list of announcements", () => {
+    const { container } = renderSection();
+
+    expect(
+      screen.getByRole("heading", { name: "Scheduled Announcements:" })
+    ).toBeInTheDocument();
+
+    const items = announcementEls(container);
+    expect(items).toHaveLength(2);
+
+    // Sorted by start date: First (05/12) then Second (05/28).
+    expect(
+      within(items[0]).getByText("First Announcement")
+    ).toBeInTheDocument();
+    expect(
+      within(items[0]).getByText("05/12/2020 – 06/12/2020")
+    ).toBeInTheDocument();
+    expect(
+      within(items[1]).getByText("Second Announcement")
+    ).toBeInTheDocument();
+    expect(
+      within(items[1]).getByText("05/28/2020 – 06/28/2020")
+    ).toBeInTheDocument();
+  });
+
+  it("renders a form", () => {
+    const { container } = renderSection();
+    expect(container.querySelectorAll(".announcement-form")).toHaveLength(1);
+  });
+
+  it("adds an announcement", async () => {
+    const user = userEvent.setup();
+    const { container } = renderSection();
+    expect(announcementEls(container)).toHaveLength(2);
+
+    // The only textbox on the page is the form's content field.
+    await user.type(screen.getByRole("textbox"), "Third Announcement");
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    expect(announcementEls(container)).toHaveLength(3);
+    expect(screen.getByText("Third Announcement")).toBeInTheDocument();
+  });
+
+  it("edits an announcement", async () => {
+    const user = userEvent.setup();
+    const { container } = renderSection();
+    expect(announcementEls(container)).toHaveLength(2);
+
+    // Each announcement has its own Edit button; edit the first one.
+    await user.click(screen.getAllByRole("button", { name: "Edit" })[0]);
+
+    // The edited announcement leaves the list and is loaded into the form.
+    const items = announcementEls(container);
+    expect(items).toHaveLength(1);
+    expect(
+      within(items[0]).getByText("Second Announcement")
+    ).toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toHaveValue("First Announcement");
+
+    // Its dates are loaded too, which is what lets it be re-saved unchanged.
+    const dates =
+      container.querySelectorAll<HTMLInputElement>('input[type="date"]');
+    expect(dates[0]).toHaveValue("2020-05-12");
+    expect(dates[1]).toHaveValue("2020-06-12");
+  });
+
+  it("deletes an announcement", async () => {
+    const user = userEvent.setup();
+    jest.spyOn(window, "confirm").mockReturnValue(true);
+    const { container } = renderSection();
+    expect(announcementEls(container)).toHaveLength(2);
+
+    await user.click(screen.getAllByRole("button", { name: "Delete" })[0]);
+
+    const items = announcementEls(container);
+    expect(items).toHaveLength(1);
+    expect(
+      within(items[0]).getByText("Second Announcement")
+    ).toBeInTheDocument();
+  });
+
+  it("removes any temporary IDs before submitting the list of announcements", async () => {
+    const user = userEvent.setup();
+    const ref = React.createRef<AnnouncementsSection>();
+    renderSection(ref);
+
+    // Add a third announcement through the form; it is assigned a temporary id.
+    await user.type(screen.getByRole("textbox"), "Third Announcement");
+    await user.click(screen.getByRole("button", { name: "Add" }));
+
+    // `getValue` is the imperative API the parent form calls on submit: it keeps
+    // the permanent ids and strips the temporary one.
+    const list = ref.current.getValue();
+    expect(list[0].id).toBe("perm_1");
+    expect(list[1].id).toBe("perm_2");
+    expect(list[2].id).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { installFormDataShim } from "../testUtils/formDataShim";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderWithProviders } from "../testUtils/withProviders";
+import ConnectedChangePasswordForm, {
+  ChangePasswordForm,
+} from "../../../src/components/ChangePasswordForm";
+// The reusable-components `Form` builds `new FormData(formElement)` on
+// submit, which the unit jsdom env's undici FormData rejects; install the
+// shared shim that reads the form's successful controls.
+installFormDataShim();
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+// Render the unconnected class so tests can pass a `changePassword` spy and
+// drive props directly. A separate test below renders the connected default
+// export to cover the connect wiring (mapStateToProps/mapDispatchToProps).
+const renderUnconnected = (
+  props: Partial<React.ComponentProps<typeof ChangePasswordForm>> = {}
+) =>
+  render(
+    <ChangePasswordForm
+      isFetching={false}
+      csrfToken="token"
+      changePassword={jest.fn().mockResolvedValue(undefined)}
+      {...props}
+    />
+  );
+
+const passwordInput = (container: HTMLElement) =>
+  container.querySelector('input[name="password"]') as HTMLInputElement;
+const confirmInput = (container: HTMLElement) =>
+  container.querySelector('input[name="confirm_password"]') as HTMLInputElement;
+
+describe("ChangePasswordForm", () => {
+  it("shows an error message when there is a fetch error", () => {
+    const { container, rerender } = renderUnconnected();
+    expect(container.querySelector(".alert-danger")).not.toBeInTheDocument();
+
+    rerender(
+      <ChangePasswordForm
+        isFetching={false}
+        csrfToken="token"
+        changePassword={jest.fn()}
+        fetchError={{ status: 500, response: "response", url: "" }}
+      />
+    );
+
+    expect(container.querySelector(".alert-danger")).toBeInTheDocument();
+    expect(screen.getByText("Error: response")).toBeInTheDocument();
+  });
+
+  it("shows a loading indicator while fetching", () => {
+    const { rerender } = renderUnconnected({ isFetching: false });
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+
+    rerender(
+      <ChangePasswordForm
+        isFetching={true}
+        csrfToken="token"
+        changePassword={jest.fn()}
+      />
+    );
+
+    expect(screen.getByText("Loading")).toBeInTheDocument();
+  });
+
+  it("renders the two labeled password inputs", () => {
+    const { container } = renderUnconnected();
+
+    expect(passwordInput(container)).toHaveAttribute("type", "password");
+    expect(confirmInput(container)).toHaveAttribute("type", "password");
+
+    const labels = container.querySelectorAll("label.control-label");
+    expect(labels[0]).toHaveTextContent("New Password");
+    expect(labels[1]).toHaveTextContent("Confirm New Password");
+  });
+
+  it("does not submit a blank form", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    renderUnconnected({ changePassword });
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Fields cannot be blank.")).toBeInTheDocument();
+  });
+
+  // Rendered fresh, so the error message asserted below can only have come from
+  // this partial submit rather than lingering from an earlier blank one.
+  it("does not submit a partially blank form", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+    expect(screen.queryByText("Fields cannot be blank.")).toBeNull();
+
+    // Only the first field filled.
+    await user.type(passwordInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Fields cannot be blank.")).toBeInTheDocument();
+  });
+
+  it("does not submit when the passwords do not match", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "somethingElse");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).not.toHaveBeenCalled();
+    expect(screen.getByText("Passwords do not match.")).toBeInTheDocument();
+  });
+
+  it("submits the new password and shows a success message", async () => {
+    const user = userEvent.setup();
+    const changePassword = jest.fn().mockResolvedValue(undefined);
+    const { container } = renderUnconnected({ changePassword });
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(changePassword).toHaveBeenCalledTimes(1);
+    const submittedData = changePassword.mock.calls[0][0];
+    expect(submittedData.get("password")).toBe("newPassword");
+    expect(submittedData.get("confirm_password")).toBe("newPassword");
+
+    expect(
+      await screen.findByText("Password changed successfully")
+    ).toBeInTheDocument();
+  });
+
+  it("dispatches the password change through the connected store", async () => {
+    const user = userEvent.setup();
+    const fetchSpy = jest
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response("ok", { status: 200 }));
+
+    const { container } = renderWithProviders(
+      <ConnectedChangePasswordForm csrfToken="token" />
+    );
+
+    await user.type(passwordInput(container), "newPassword");
+    await user.type(confirmInput(container), "newPassword");
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    expect(
+      await screen.findByText("Password changed successfully")
+    ).toBeInTheDocument();
+    expect(fetchSpy).toHaveBeenCalledWith(
+      "/admin/change_password",
+      expect.objectContaining({ method: "POST" })
+    );
+  });
+});