rename web/ to admin/, along with the web-named build and cli identifiers

2026-08-16 00:17:58 +02:00
parent 5b3d1cd65c
commit 1e97c80f6b
136 changed files with 196 additions and 196 deletions
@@ -0,0 +1,179 @@
+import type { ReactNode } from "react";
+import { act, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider, type QueryClient as QC } from "@tanstack/react-query";
+import ConfirmDialog from "./ConfirmDialog";
+import { useCrudForm } from "./useCrudForm";
+
+interface Row {
+	id: number;
+	name: string;
+}
+
+function setup() {
+	const created: string[] = [];
+	const updated: { id: number; input: string }[] = [];
+	const removed: number[] = [];
+	const queryClient = new QueryClient({ defaultOptions: { mutations: { retry: false } } });
+	const wrapper = ({ children }: { children: ReactNode }) => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+	const hook = renderHook(
+		() =>
+			useCrudForm<Row, string>({
+				create: (_qc: QC) => ({
+					mutationFn: async (input: string) => {
+						created.push(input);
+					},
+				}),
+				update: (_qc: QC) => ({
+					mutationFn: async (vars: { id: number; input: string }) => {
+						updated.push(vars);
+					},
+				}),
+				remove: (_qc: QC) => ({
+					mutationFn: async (id: number) => {
+						removed.push(id);
+					},
+				}),
+				confirmDelete: (row) => `Delete "${row.name}"?`,
+			}),
+		{ wrapper },
+	);
+	return { hook, created, updated, removed };
+}
+
+/**
+ * The delete path is only finished when a real dialog drives it, so this
+ * harness wires the hook's pending-delete state to the component operators
+ * actually see (ruling 5). `window.confirm` no longer exists to stub.
+ */
+function DeleteHarness({ onRemoved }: { onRemoved: (id: number) => void }) {
+	const { onDelete, pendingDelete, confirmPendingDelete, cancelPendingDelete } = useCrudForm<Row, string>({
+		create: (_qc: QC) => ({ mutationFn: async () => undefined }),
+		update: (_qc: QC) => ({ mutationFn: async () => undefined }),
+		remove: (_qc: QC) => ({
+			mutationFn: async (id: number) => {
+				onRemoved(id);
+			},
+		}),
+		confirmDelete: (row) => `Delete "${row.name}"?`,
+	});
+	return (
+		<>
+			<button type="button" onClick={() => onDelete({ id: 3, name: "gamma" })}>
+				Delete gamma
+			</button>
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete row"
+				message={pendingDelete?.message ?? ""}
+				confirmLabel="Delete"
+				onConfirm={confirmPendingDelete}
+				onCancel={cancelPendingDelete}
+			/>
+		</>
+	);
+}
+
+function renderDeleteHarness() {
+	const removed: number[] = [];
+	const queryClient = new QueryClient({ defaultOptions: { mutations: { retry: false } } });
+	render(
+		<QueryClientProvider client={queryClient}>
+			<DeleteHarness onRemoved={(id) => removed.push(id)} />
+		</QueryClientProvider>,
+	);
+	return removed;
+}
+
+afterEach(() => vi.unstubAllGlobals());
+
+test("the create form submits through the create mutation and closes", async () => {
+	const { hook, created, updated } = setup();
+	act(() => hook.result.current.openForm({ mode: "create" }));
+	expect(hook.result.current.form).toEqual({ mode: "create" });
+
+	act(() => hook.result.current.onSubmit("alpha"));
+	await waitFor(() => expect(hook.result.current.form).toBeNull());
+	expect(created).toEqual(["alpha"]);
+	expect(updated).toEqual([]);
+});
+
+test("the edit form submits the row id through the update mutation", async () => {
+	const { hook, created, updated } = setup();
+	act(() => hook.result.current.openForm({ mode: "edit", entity: { id: 7, name: "beta" } }));
+
+	act(() => hook.result.current.onSubmit("beta2"));
+	await waitFor(() => expect(hook.result.current.form).toBeNull());
+	expect(updated).toEqual([{ id: 7, input: "beta2" }]);
+	expect(created).toEqual([]);
+});
+
+test("submitting with no form open does nothing", () => {
+	const { hook, created, updated } = setup();
+	act(() => hook.result.current.onSubmit("ignored"));
+	expect(created).toEqual([]);
+	expect(updated).toEqual([]);
+});
+
+test("openForm clears a stale create error so the reopened form starts clean", async () => {
+	const queryClient = new QueryClient({ defaultOptions: { mutations: { retry: false } } });
+	const wrapper = ({ children }: { children: ReactNode }) => (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	);
+	const hook = renderHook(
+		() =>
+			useCrudForm<Row, string>({
+				create: (_qc: QC) => ({ mutationFn: () => Promise.reject(new Error("boom")) }),
+				update: (_qc: QC) => ({ mutationFn: async () => undefined }),
+				remove: (_qc: QC) => ({ mutationFn: async () => undefined }),
+				confirmDelete: () => "?",
+			}),
+		{ wrapper },
+	);
+
+	act(() => hook.result.current.openForm({ mode: "create" }));
+	act(() => hook.result.current.onSubmit("alpha"));
+	await waitFor(() => expect(hook.result.current.create.error).not.toBeNull());
+	expect(hook.result.current.form).toEqual({ mode: "create" });
+
+	act(() => hook.result.current.openForm({ mode: "create" }));
+	await waitFor(() => expect(hook.result.current.create.error).toBeNull());
+});
+
+test("onDelete opens the confirmation instead of removing the row", () => {
+	const { hook, removed } = setup();
+	act(() => hook.result.current.onDelete({ id: 3, name: "gamma" }));
+
+	expect(hook.result.current.pendingDelete).toEqual({ entity: { id: 3, name: "gamma" }, message: 'Delete "gamma"?' });
+	expect(removed).toEqual([]);
+});
+
+test("cancelling the confirmation dialog leaves the row alone", async () => {
+	const removed = renderDeleteHarness();
+	fireEvent.click(screen.getByRole("button", { name: "Delete gamma" }));
+
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete "gamma"?');
+
+	fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(removed).toEqual([]);
+});
+
+test("confirming the dialog removes the row by id", async () => {
+	const removed = renderDeleteHarness();
+	fireEvent.click(screen.getByRole("button", { name: "Delete gamma" }));
+	await screen.findByRole("alertdialog");
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	await waitFor(() => expect(removed).toEqual([3]));
+	expect(screen.queryByRole("alertdialog")).toBeNull();
+});
+
+test("closeForm closes whichever form is open", () => {
+	const { hook } = setup();
+	act(() => hook.result.current.openForm({ mode: "edit", entity: { id: 1, name: "delta" } }));
+	act(() => hook.result.current.closeForm());
+	expect(hook.result.current.form).toBeNull();
+});