@thepalaceproject/circulation-admin 1.43.0-post.9 → 1.44.0-post.3

package/jest.config.js

@@ -1,15 +1,17 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
-
-// Options shared by both projects.
-const sharedProjectConfig = {
+module.exports = {
   preset: "ts-jest",
+  // `jest-fixed-jsdom` restores Node's fetch/Response globals so MSW can
+  // intercept them.
+  testEnvironment: "jest-fixed-jsdom",
   testEnvironmentOptions: {
-    // Without this, jsdom's default `["browser"]` export condition resolves sinon
-    // to its ESM bundle, which ts-jest does not transform. Every legacy suite then
-    // dies with `SyntaxError: Unexpected token 'export'`.
+    // MSW / jest-fixed-jsdom rely on the default resolution conditions; the empty
+    // string keeps jsdom's "browser" condition from pulling in ESM-only builds
+    // that ts-jest would not transform.
     customExportConditions: [""],
   },
   setupFiles: ["<rootDir>/jest.polyfills.js"],
+  setupFilesAfterEnv: ["<rootDir>/tests/jest/jest-setup.ts"],
   moduleNameMapper: {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/tests/__mocks__/fileMock.js",
@@ -20,44 +22,9 @@ const sharedProjectConfig = {
   // files that no test imports — otherwise they are silently omitted from the
   // report rather than counted as uncovered, and the coverage percentage rises
   // while real coverage is unchanged.
-  roots: ["<rootDir>/src"],
-};
-
-module.exports = {
+  roots: ["<rootDir>/src", "<rootDir>/tests/jest"],
+  testMatch: ["<rootDir>/tests/jest/**/*.test.{js,jsx,ts,tsx}"],
   coverageDirectory: "coverage/jest",
   coverageReporters: ["lcov", "text-summary"],
-  // Must live at the top level, not inside `projects`: jest reads
-  // `collectCoverageFrom` off the *global* config. Set it only per-project and it
-  // is silently undefined globally, so every executed file gets instrumented —
-  // including test helpers and everything under `tests/`.
-  collectCoverageFrom: [
-    "src/**/*.{ts,tsx}",
-    "!src/**/__tests__/**",
-    "!src/**/*.d.ts",
-  ],
-  projects: [
-    {
-      ...sharedProjectConfig,
-      displayName: "unit",
-      roots: [...sharedProjectConfig.roots, "<rootDir>/tests/jest"],
-      testMatch: ["<rootDir>/tests/jest/**/*.test.{js,jsx,ts,tsx}"],
-      // `jest-fixed-jsdom` restores Node's fetch/Response globals so MSW can
-      // intercept them.
-      testEnvironment: "jest-fixed-jsdom",
-      setupFilesAfterEnv: ["<rootDir>/tests/jest/jest-setup.ts"],
-    },
-    {
-      // Legacy enzyme + chai + sinon tests, still in `src/**/__tests__/`. They are
-      // being rewritten as React Testing Library tests under `tests/jest/`; when the
-      // last one is gone, delete this project, its environment, and its setup file.
-      //
-      // These cannot use `jest-fixed-jsdom`: it swaps in undici's `FormData`, which
-      // rejects `new FormData(formElement)` and crashes any test that submits a form.
-      ...sharedProjectConfig,
-      displayName: "legacy",
-      testMatch: ["<rootDir>/src/**/__tests__/*-test.{ts,tsx}"],
-      testEnvironment: "<rootDir>/tests/jest/legacyJsdomEnvironment.js",
-      setupFilesAfterEnv: ["<rootDir>/tests/jest/legacy-setup.ts"],
-    },
-  ],
+  collectCoverageFrom: ["src/**/*.{ts,tsx}", "!src/**/*.d.ts"],
 };

package/package.json

@@ -84,13 +84,10 @@
     "@types/react-router": "^3.0.28",
     "@types/recharts": "^1.8.28",
     "@types/redux-mock-store": "^1.0.3",
-    "chai": "4.2.0",
     "clean-webpack-plugin": "^2.0.1",
     "copy-webpack-plugin": "14.0.0",
     "css-loader": "^7.1.4",
     "dotenv-cli": "^11.0.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -119,7 +116,6 @@
     "sass-lint": "^1.13.1",
     "sass-loader": "^17.0.0",
     "selenium-standalone": "^10.0.2",
-    "sinon": "22.0.0",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.6",
     "ts-jest": "^29.2.6",
@@ -143,5 +139,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.43.0-post.9"
+  "version": "1.44.0-post.3"
 }

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

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+
+// AdvancedSearchBuilder is a pure forwarding component: it renders an
+// AdvancedSearchFilterInput and an AdvancedSearchFilterViewer and threads their
+// callbacks up to the builder's handlers, prefixed with the builder `name`. Mock
+// both children to markers that capture the props they receive, so those
+// forwarding closures can be exercised directly — including `onMove`, which is
+// otherwise only reachable through a real react-dnd drag that jsdom can't perform.
+let inputProps: any;
+let viewerProps: any;
+jest.mock("../../../src/components/AdvancedSearchFilterInput", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    inputProps = props;
+    return <div data-testid="filter-input" data-name={props.name} />;
+  },
+}));
+jest.mock("../../../src/components/AdvancedSearchFilterViewer", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    viewerProps = props;
+    return (
+      <div
+        data-testid="filter-viewer"
+        data-read-only={String(props.readOnly)}
+      />
+    );
+  },
+}));
+
+import AdvancedSearchBuilder from "../../../src/components/AdvancedSearchBuilder";
+
+describe("AdvancedSearchBuilder", () => {
+  const query = { id: "0", key: "genre", value: "Horror" };
+
+  const renderBuilder = (overrides: Record<string, unknown> = {}) => {
+    const handlers = {
+      addQuery: jest.fn(),
+      updateClearFiltersFlag: jest.fn(),
+      updateQueryBoolean: jest.fn(),
+      moveQuery: jest.fn(),
+      removeQuery: jest.fn(),
+      selectQuery: jest.fn(),
+    };
+    render(
+      <AdvancedSearchBuilder
+        isOwner
+        name="include"
+        query={query as any}
+        selectedQueryId="0"
+        {...handlers}
+        {...overrides}
+      />
+    );
+    return handlers;
+  };
+
+  beforeEach(() => {
+    inputProps = undefined;
+    viewerProps = undefined;
+  });
+
+  it("renders the filter input and the viewer", () => {
+    renderBuilder();
+
+    expect(screen.getByTestId("filter-input")).toHaveAttribute(
+      "data-name",
+      "include"
+    );
+    expect(screen.getByTestId("filter-viewer")).toBeInTheDocument();
+    expect(viewerProps.query).toBe(query);
+    expect(viewerProps.selectedQueryId).toBe("0");
+  });
+
+  it("hides the filter input and marks the viewer read-only when not the owner", () => {
+    renderBuilder({ isOwner: false });
+
+    expect(screen.queryByTestId("filter-input")).not.toBeInTheDocument();
+    expect(screen.getByTestId("filter-viewer")).toHaveAttribute(
+      "data-read-only",
+      "true"
+    );
+  });
+
+  it("forwards the input's onAdd and clear-filters callbacks with the builder name", () => {
+    const { addQuery, updateClearFiltersFlag } = renderBuilder();
+
+    const newQuery = { key: "title", value: "The Shining" };
+    inputProps.onAdd(newQuery);
+    inputProps.onClearFiltersFlagChange(true);
+
+    expect(addQuery).toHaveBeenCalledWith("include", newQuery);
+    expect(updateClearFiltersFlag).toHaveBeenCalledWith("include", true);
+  });
+
+  it("forwards the viewer's callbacks to their handlers with the builder name", () => {
+    const { updateQueryBoolean, moveQuery, removeQuery, selectQuery } =
+      renderBuilder();
+
+    viewerProps.onBooleanChange("2", "or");
+    viewerProps.onMove("2", "33");
+    viewerProps.onRemove("2");
+    viewerProps.onSelect("2");
+
+    expect(updateQueryBoolean).toHaveBeenCalledWith("include", "2", "or");
+    expect(moveQuery).toHaveBeenCalledWith("include", "2", "33");
+    expect(removeQuery).toHaveBeenCalledWith("include", "2");
+    expect(selectQuery).toHaveBeenCalledWith("include", "2");
+  });
+});

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

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Announcement from "../../../src/components/Announcement";
+
+describe("Announcement", () => {
+  let stubDelete: jest.Mock;
+  let stubEdit: jest.Mock;
+
+  beforeEach(() => {
+    stubDelete = jest.fn();
+    stubEdit = jest.fn();
+  });
+
+  const renderAnnouncement = (
+    overrides: Partial<React.ComponentProps<typeof Announcement>> = {}
+  ) =>
+    render(
+      <Announcement
+        content="test"
+        start="2020-05-12"
+        finish="2020-05-28"
+        id="1"
+        delete={stubDelete}
+        edit={stubEdit}
+        {...overrides}
+      />
+    );
+
+  it("renders the content and dates", () => {
+    const { container } = renderAnnouncement();
+
+    expect(
+      container.querySelector("section.announcement-info")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".dates")).toHaveTextContent(
+      "05/12/2020 – 05/28/2020"
+    );
+    expect(screen.getByText("test")).toBeInTheDocument();
+  });
+
+  it("renders an edit button", async () => {
+    const user = userEvent.setup();
+    renderAnnouncement();
+
+    const editButton = screen.getByRole("button", { name: "Edit" });
+    await user.click(editButton);
+
+    expect(stubEdit).toHaveBeenCalledTimes(1);
+    expect(stubEdit).toHaveBeenCalledWith("1");
+  });
+
+  it("renders a delete button", async () => {
+    const user = userEvent.setup();
+    renderAnnouncement();
+
+    const deleteButton = screen.getByRole("button", { name: "Delete" });
+    await user.click(deleteButton);
+
+    expect(stubDelete).toHaveBeenCalledTimes(1);
+    expect(stubDelete).toHaveBeenCalledWith("1");
+  });
+
+  it("formats dates", () => {
+    // The dates are stored as year-month-day but displayed as month/day/year.
+    const { container } = renderAnnouncement({
+      start: "2020-03-14",
+      finish: "2021-12-25",
+    });
+
+    expect(container.querySelector(".dates")).toHaveTextContent(
+      "03/14/2020 – 12/25/2021"
+    );
+  });
+});

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