Tighten final-review screen

2026-04-20 18:33:33 -06:00
parent a22d53e860
commit 707d08642c
6 changed files with 192 additions and 23 deletions
@@ -39,4 +39,70 @@ describe("CoreValuesSelectScreen", () => {
      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
    });
  });
+
+  // The "Add value" → custom-chip → modal flow uses a `customPending`
+  // session: dismissing the modal must drop the brand-new chip entirely
+  // (not just unselect it), because the user never confirmed it via
+  // the modal's Add Value button. Clicking Add Value keeps the chip
+  // as a selected entry. These two tests pin both halves of the
+  // contract so the screens stay in sync with the create-flow draft.
+  describe("custom chip — confirmed vs dismissed", () => {
+    // Use a label guaranteed to NOT collide with any preset value
+    // (we'd otherwise get two matching chips and false positives).
+    const CUSTOM_LABEL = "ZZTopBespokeValue";
+
+    async function addCustomChipNamed(label: string) {
+      fireEvent.click(screen.getByRole("button", { name: "Add value" }));
+      const input = await screen.findByPlaceholderText("Type to add");
+      fireEvent.change(input, { target: { value: label } });
+      fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+      return screen.findByRole("dialog");
+    }
+
+    /**
+     * The label can also appear in the modal header while the modal
+     * is open, and as the chip's "Remove" button aria-label. Scope to
+     * chip-row buttons by excluding both.
+     */
+    function countCustomChips(label: string) {
+      return screen
+        .queryAllByRole("button", { name: label })
+        .filter(
+          (el) =>
+            !el.closest('[role="dialog"]') &&
+            (el.getAttribute("aria-label") ?? "") !== `Remove ${label}`,
+        ).length;
+    }
+
+    it("removes the custom chip when its modal is dismissed without Add Value", async () => {
+      renderWithProviders(<CoreValuesSelectScreen />);
+      await addCustomChipNamed(CUSTOM_LABEL);
+      expect(countCustomChips(CUSTOM_LABEL)).toBe(1);
+
+      fireEvent.keyDown(document, { key: "Escape" });
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      });
+      // Chip must be gone — not just unselected. If it were merely
+      // unselected the chip button would still render. Wrap in waitFor
+      // because the chip removal flushes through `updateState` →
+      // `useEffect` → `setCoreValueOptions` and isn't synchronous with
+      // the dialog close.
+      await waitFor(() => {
+        expect(countCustomChips(CUSTOM_LABEL)).toBe(0);
+      });
+    });
+
+    it("keeps the custom chip selected when Add Value is clicked", async () => {
+      renderWithProviders(<CoreValuesSelectScreen />);
+      const dialog = await addCustomChipNamed(CUSTOM_LABEL);
+      fireEvent.click(
+        within(dialog).getByRole("button", { name: "Add Value" }),
+      );
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      });
+      expect(countCustomChips(CUSTOM_LABEL)).toBe(1);
+    });
+  });
 });