Route kebab Customize through the prefilled policy wizard so existing methods and values can be renamed, reordered, and kept in that field order on the card after Finalize.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-21 13:51:37 -06:00
parent e9951f260b
commit 4006fe5c6c
31 changed files with 3062 additions and 1530 deletions
@@ -0,0 +1,113 @@
+import { describe, it, expect, vi } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import {
+  fireEvent,
+  renderWithProviders as render,
+  screen,
+} from "../utils/test-utils";
+import { CustomMethodCardWizardBlocksList } from "../../app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.container";
+import type { CustomMethodCardFieldBlock } from "../../lib/create/customMethodCardFieldBlocks";
+
+function createDataTransfer() {
+  const store: Record<string, string> = {};
+  return {
+    effectAllowed: "all",
+    dropEffect: "move",
+    setData(type: string, value: string) {
+      store[type] = value;
+    },
+    getData(type: string) {
+      return store[type] ?? "";
+    },
+  };
+}
+
+const fieldTypeLabels = {
+  text: "Text",
+  badges: "Badges",
+  upload: "Upload",
+  proportion: "Proportion",
+};
+
+const blocks: CustomMethodCardFieldBlock[] = [
+  {
+    kind: "text",
+    id: "facet-meaning",
+    blockTitle: "Meaning",
+    placeholderText: "a",
+  },
+  {
+    kind: "text",
+    id: "facet-signals",
+    blockTitle: "Signals",
+    placeholderText: "b",
+  },
+];
+
+describe("CustomMethodCardWizardBlocksList", () => {
+  it("reorders when a row is dropped after dragging from the handle", () => {
+    const onBlocksReorder = vi.fn();
+    render(
+      <CustomMethodCardWizardBlocksList
+        blocks={blocks}
+        fieldTypeLabels={fieldTypeLabels}
+        dragHandleAriaLabel="Drag to reorder this field"
+        listLabel="Fields"
+        onBlocksReorder={onBlocksReorder}
+        onEditBlock={() => {}}
+      />,
+    );
+
+    const handle = screen.getAllByRole("button", {
+      name: "Drag to reorder this field",
+    })[0];
+    const rows = screen.getAllByRole("listitem");
+    const dataTransfer = createDataTransfer();
+
+    fireEvent.pointerDown(handle);
+    fireEvent.dragStart(rows[0], { dataTransfer });
+    fireEvent.dragOver(rows[1], { dataTransfer });
+    fireEvent.drop(rows[1], { dataTransfer });
+
+    expect(onBlocksReorder).toHaveBeenCalledWith([blocks[1], blocks[0]]);
+  });
+
+  it("edits a block when its title is clicked", () => {
+    const onEditBlock = vi.fn();
+    render(
+      <CustomMethodCardWizardBlocksList
+        blocks={blocks}
+        fieldTypeLabels={fieldTypeLabels}
+        dragHandleAriaLabel="Drag to reorder this field"
+        listLabel="Fields"
+        onBlocksReorder={() => {}}
+        onEditBlock={onEditBlock}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Meaning" }));
+    expect(onEditBlock).toHaveBeenCalledWith(blocks[0]);
+  });
+
+  it("does not reorder when the drag did not start from the handle", () => {
+    const onBlocksReorder = vi.fn();
+    render(
+      <CustomMethodCardWizardBlocksList
+        blocks={blocks}
+        fieldTypeLabels={fieldTypeLabels}
+        dragHandleAriaLabel="Drag to reorder this field"
+        listLabel="Fields"
+        onBlocksReorder={onBlocksReorder}
+        onEditBlock={() => {}}
+      />,
+    );
+
+    const rows = screen.getAllByRole("listitem");
+    const dataTransfer = createDataTransfer();
+
+    fireEvent.dragStart(rows[0], { dataTransfer });
+    fireEvent.drop(rows[1], { dataTransfer });
+
+    expect(onBlocksReorder).not.toHaveBeenCalled();
+  });
+});