feat(admin): streamline group management

2026-08-02 11:06:55 -04:00
parent 71856bb869
commit d4afb71798
24 changed files with 1588 additions and 379 deletions
@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { AdminModalForm } from "./admin-modal-form";
+
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() { this.open = true; };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+    this.dispatchEvent(new Event("close"));
+  };
+});
+
+describe("AdminModalForm", () => {
+  it("renders an accessible trigger, labelled dialog, cancellation, and pending-capable submit control", () => {
+    const markup = renderToStaticMarkup(
+      <AdminModalForm
+        action={async () => undefined}
+        description="Review this policy change before applying it."
+        submitLabel="Apply policy"
+        title="Change access policy"
+        triggerLabel="Change"
+      >
+        <input name="groupId" type="hidden" value="group-one" />
+      </AdminModalForm>,
+    );
+    expect(markup).toContain("Change access policy");
+    expect(markup).toContain("Review this policy change before applying it.");
+    expect(markup).toContain("<dialog");
+    expect(markup).toContain("aria-haspopup=\"dialog\"");
+    expect(markup).toContain("Cancel");
+    expect(markup).toContain("Apply policy");
+  });
+
+  it("opens, cancels, and prevents dismissal while the action is pending", async () => {
+    let finishAction!: () => void;
+    const action = vi.fn(() => new Promise<void>((resolve) => { finishAction = resolve; }));
+    render(<AdminModalForm action={action} description="Confirm it." submitLabel="Apply policy" title="Change access policy" triggerLabel="Change" />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Change" }));
+    const dialog = screen.getByRole("dialog") as HTMLDialogElement;
+    expect(dialog.open).toBe(true);
+    fireEvent.click(screen.getByRole("button", { name: "Apply policy" }));
+    await waitFor(() => expect(action).toHaveBeenCalledOnce());
+    expect((screen.getByRole("button", { name: "Change" }) as HTMLButtonElement).disabled).toBe(true);
+
+    const cancelEvent = new Event("cancel", { bubbles: false, cancelable: true });
+    dialog.dispatchEvent(cancelEvent);
+    expect(cancelEvent.defaultPrevented).toBe(true);
+    expect(dialog.open).toBe(true);
+
+    finishAction();
+    await waitFor(() => expect((screen.getByRole("button", { name: "Change" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(dialog.open).toBe(false);
+  });
+});