@prosopo/procaptcha-puzzle 2.13.3 → 2.14.0

package/src/tests/procaptchaWidget.unit.test.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import type { Ti18n } from "@prosopo/locale";
+import type { Component } from "@prosopo/procaptcha-common";
 import {
 	type GetPuzzleCaptchaResponse,
 	ModeEnum,
@@ -20,8 +21,6 @@ import {
 	type ProcaptchaState,
 	type PuzzleEvent,
 } from "@prosopo/types";
-import { type ReactElement, act, createElement } from "react";
-import { type Root, createRoot } from "react-dom/client";
 import {
 	type Mock,
 	afterEach,
@@ -31,7 +30,12 @@ import {
 	test,
 	vi,
 } from "vitest";
-import Procaptcha from "../components/ProcaptchaWidget.js";
+import {
+	type ProcaptchaPuzzleHandle,
+	mountProcaptchaPuzzleWidget,
+} from "../components/procaptchaWidget.js";
+import type { PuzzleCanvasProps } from "../components/puzzleCanvas.js";
+import { type Mounted, fire, mount, settle } from "./domHarness.js";
 import { challengeResponse, config, frictionless } from "./managerHarness.js";
 
 /**
@@ -52,36 +56,9 @@ const mocks = vi.hoisted(() => {
 		getHoneypotValue?: () => string | undefined;
 	}[] = [];
 	const loadI18next = vi.fn<(a?: boolean, b?: string) => Promise<unknown>>();
-	const checkboxProps: {
-		current:
-			| {
-					checked: boolean;
-					loading: boolean;
-					labelText: string;
-					error?: string;
-					onChange: (event: { nativeEvent: unknown }) => Promise<void>;
-			  }
-			| undefined;
-	} = { current: undefined };
-	const canvasProps: {
-		current:
-			| {
-					originX: number;
-					originY: number;
-					background: string;
-					piece: string;
-					pieceSize: number;
-					showRetry: boolean;
-					submitting: boolean;
-					onComplete: (
-						x: number,
-						y: number,
-						events: PuzzleEvent[],
-					) => Promise<void> | void;
-			  }
-			| undefined;
-	} = { current: undefined };
-	const honeypotQuestions: string[] = [];
+	const canvasProps: { current: PuzzleCanvasProps | undefined } = {
+		current: undefined,
+	};
 	const translationsReady = { current: true };
 	return {
 		translationsReady,
@@ -90,9 +67,7 @@ const mocks = vi.hoisted(() => {
 		resetState,
 		constructions,
 		loadI18next,
-		checkboxProps,
 		canvasProps,
-		honeypotQuestions,
 	};
 });
 
@@ -117,79 +92,42 @@ vi.mock("../services/Manager.js", () => ({
 // The canvas has its own suite; here it is reduced to a probe so a test can
 // read the props the widget hands it and fire the completion callback without
 // simulating a drag.
-vi.mock("../components/PuzzleCanvas.js", async () => {
-	const { createElement: create } = await import("react");
-	interface CanvasStubProps {
-		originX: number;
-		originY: number;
-		background: string;
-		piece: string;
-		pieceSize: number;
-		showRetry: boolean;
-		submitting: boolean;
-		onComplete: (
-			x: number,
-			y: number,
-			events: PuzzleEvent[],
-		) => Promise<void> | void;
-	}
-	const PuzzleCanvas = (canvasProps: CanvasStubProps) => {
+vi.mock("../components/puzzleCanvas.js", () => ({
+	mountPuzzleCanvas: (
+		canvasProps: PuzzleCanvasProps,
+	): Component<PuzzleCanvasProps> => {
 		mocks.canvasProps.current = canvasProps;
-		return create("div", { "data-cy": "canvas-stub" });
-	};
-	return { PuzzleCanvas };
-});
-
-// The checkbox and the honeypot are procaptcha-common's, and tested there. The
-// stubs keep their contract — a change callback and a forwarded input ref —
-// while letting a test drive the exact browser event the widget branches on,
-// which jsdom cannot produce (it marks every dispatched event untrusted, and
-// the real checkbox drops those before the widget ever sees them).
-vi.mock("@prosopo/procaptcha-common", async (importOriginal) => {
-	const actual =
-		await importOriginal<typeof import("@prosopo/procaptcha-common")>();
-	const { createElement: create, forwardRef } = await import("react");
-	interface CheckboxStubProps {
-		checked: boolean;
-		loading: boolean;
-		labelText: string;
-		error?: string;
-		onChange: (event: { nativeEvent: unknown }) => Promise<void>;
-	}
-	const Checkbox = (checkboxProps: CheckboxStubProps) => {
-		mocks.checkboxProps.current = checkboxProps;
-		return create("input", {
-			type: "checkbox",
-			readOnly: true,
-			checked: checkboxProps.checked,
-			"aria-label": checkboxProps.labelText,
-			"data-error": checkboxProps.error,
-			"data-loading": String(checkboxProps.loading),
-		});
-	};
-	const Honeypot = forwardRef<HTMLInputElement, { encodedQuestion: string }>(
-		({ encodedQuestion }, ref) => {
-			mocks.honeypotQuestions.push(encodedQuestion);
-			return create("input", { type: "text", ref, name: "honeypot" });
-		},
-	);
-	return { ...actual, Checkbox, Honeypot };
-});
+		const element = document.createElement("div");
+		element.setAttribute("data-cy", "canvas-stub");
+		document.body.appendChild(element);
+		return {
+			update: (next: PuzzleCanvasProps) => {
+				mocks.canvasProps.current = next;
+			},
+			destroy: () => {
+				element.remove();
+				mocks.canvasProps.current = undefined;
+			},
+		};
+	},
+}));
 
 vi.mock("@prosopo/locale", async (importOriginal) => {
 	const actual = await importOriginal<typeof import("@prosopo/locale")>();
 	return {
 		...actual,
 		loadI18next: mocks.loadI18next,
-		useTranslation: () => ({
+		createTranslator: () => ({
 			t: (key: string) => key,
-			ready: mocks.translationsReady.current,
+			isReady: () => mocks.translationsReady.current,
+			subscribe: () => () => undefined,
+			i18n: undefined,
 		}),
 	};
 });
 
-let container: HTMLDivElement;
-let root: Root;
+let mounted: Mounted;
+let widget: ProcaptchaPuzzleHandle | undefined;
 
 const i18nStub = (
 	language: string,
@@ -204,53 +142,52 @@ const props = (overrides: Partial<ProcaptchaProps> = {}): ProcaptchaProps => ({
 });
 
 const render = (widgetProps: ProcaptchaProps): void => {
-	act(() => {
-		root.render(createElement(Procaptcha, widgetProps) as ReactElement);
-	});
+	widget = mountProcaptchaPuzzleWidget(mounted.container, widgetProps);
+};
+
+const destroy = (): void => {
+	widget?.destroy();
+	widget = undefined;
 };
 
 beforeEach(() => {
 	vi.clearAllMocks();
 	mocks.constructions.length = 0;
-	mocks.honeypotQuestions.length = 0;
 	mocks.translationsReady.current = true;
-	mocks.checkboxProps.current = undefined;
 	mocks.canvasProps.current = undefined;
 	mocks.start.mockResolvedValue(challengeResponse());
 	mocks.submitSolution.mockResolvedValue(true);
 	mocks.loadI18next.mockResolvedValue(undefined);
-	container = document.createElement("div");
-	document.body.appendChild(container);
-	act(() => {
-		root = createRoot(container);
-	});
+	widget = undefined;
+	mounted = mount();
 });
 
 afterEach(() => {
-	act(() => {
-		root.unmount();
-	});
-	container.remove();
-	// React schedules through timers, so a suite that leaves them faked makes
-	// every later render land after its assertions.
+	destroy();
+	mounted.unmount();
 	vi.useRealTimers();
 	vi.restoreAllMocks();
 });
 
 const checkbox = (): HTMLInputElement => {
-	const element = container.querySelector<HTMLInputElement>(
+	const element = mounted.container.querySelector<HTMLInputElement>(
 		'input[type="checkbox"]',
 	);
 	if (!element) throw new Error("expected a checkbox to be rendered");
 	return element;
 };
 
+// The canvas puts itself on the body rather than inside the widget, so it can
+// escape the skeleton's query container.
 const canvas = (): Element | null =>
-	container.querySelector('[data-cy="canvas-stub"]');
+	document.body.querySelector('[data-cy="canvas-stub"]');
+
+const spinner = (): Element | null =>
+	mounted.container.querySelector('[role="status"]');
 
 const honeypotInput = (): HTMLInputElement => {
-	const element = container.querySelector<HTMLInputElement>(
-		'input[name="honeypot"]',
+	const element = document.querySelector<HTMLInputElement>(
+		'input[name="email_confirm"]',
 	);
 	if (!element) throw new Error("expected a honeypot to be rendered");
 	return element;
@@ -263,17 +200,10 @@ interface ClickOptions {
 	touches?: { clientX: number; clientY: number }[];
 }
 
-/** Hand the widget the browser event a click on the checkbox would produce. */
+/** Click the real checkbox with the browser event a user would produce. */
 const click = async (options: ClickOptions = {}): Promise<void> => {
-	const nativeEvent = {
-		isTrusted: options.trusted ?? true,
-		clientX: options.clientX ?? 0,
-		clientY: options.clientY ?? 0,
-		...(options.touches ? { touches: options.touches } : {}),
-	};
-	await act(async () => {
-		await mocks.checkboxProps.current?.onChange({ nativeEvent });
-	});
+	fire(checkbox(), "click", options);
+	await settle();
 };
 
 /**
@@ -281,11 +211,7 @@ const click = async (options: ClickOptions = {}): Promise<void> => {
  * manager's promise open.
  */
 const clickWithoutWaiting = (): void => {
-	act(() => {
-		void mocks.checkboxProps.current?.onChange({
-			nativeEvent: { isTrusted: true, clientX: 0, clientY: 0 },
-		});
-	});
+	fire(checkbox(), "click");
 };
 
 /** Fire the canvas completion callback the way a finished drag would. */
@@ -294,9 +220,8 @@ const complete = async (
 	y = 80,
 	events: PuzzleEvent[] = [{ x: 200, y: 80, t: 5 }],
 ): Promise<void> => {
-	await act(async () => {
-		await mocks.canvasProps.current?.onComplete(x, y, events);
-	});
+	await mocks.canvasProps.current?.onComplete(x, y, events);
+	await settle();
 };
 
 describe("what the widget renders", () => {
@@ -307,7 +232,9 @@ describe("what the widget renders", () => {
 
 	test("an invisible widget shows no checkbox at all", () => {
 		render(props({ config: config({ mode: ModeEnum.invisible }) }));
-		expect(container.querySelector('input[type="checkbox"]')).toBeNull();
+		expect(
+			mounted.container.querySelector('input[type="checkbox"]'),
+		).toBeNull();
 	});
 
 	test("no puzzle is shown until a challenge has been fetched", () => {
@@ -316,18 +243,22 @@ describe("what the widget renders", () => {
 	});
 
 	test("a session with a honeypot question renders the honeypot", () => {
-		render(props({ frictionlessState: frictionless({ hp: "question" }) }));
+		render(
+			props({ frictionlessState: frictionless({ hp: btoa("question") }) }),
+		);
 		expect(honeypotInput()).toBeDefined();
-		expect(mocks.honeypotQuestions.at(-1)).toBe("question");
+		expect(document.body.textContent).toContain("question");
 	});
 
 	test("a session without one renders no bait at all", () => {
 		render(props({ frictionlessState: frictionless() }));
-		expect(container.querySelector('input[name="honeypot"]')).toBeNull();
+		expect(document.querySelector('input[name="email_confirm"]')).toBeNull();
 	});
 
 	test("the manager can read the honeypot input the widget rendered", () => {
-		render(props({ frictionlessState: frictionless({ hp: "question" }) }));
+		render(
+			props({ frictionlessState: frictionless({ hp: btoa("question") }) }),
+		);
 		honeypotInput().value = "bot@example.com";
 		expect(mocks.constructions[0]?.getHoneypotValue?.()).toBe(
 			"bot@example.com",
@@ -341,32 +272,22 @@ describe("what the widget renders", () => {
 
 	test("the checkbox is labelled once the translations are ready", () => {
 		render(props());
-		expect(mocks.checkboxProps.current?.labelText).toBe("WIDGET.I_AM_HUMAN");
+		expect(checkbox().getAttribute("aria-label")).toBe("WIDGET.I_AM_HUMAN");
 	});
 
 	test("the label is left empty while the translations load", () => {
 		mocks.translationsReady.current = false;
 		render(props());
-		expect(mocks.checkboxProps.current?.labelText).toBe("");
+		expect(checkbox().getAttribute("aria-label")).toBe("");
 	});
 
-	test("the widget keeps the manager it started with across re-renders", () => {
-		// `useRef(Manager(...))` re-evaluates the argument on every render, so
-		// extra managers are constructed and thrown away; what matters is that
-		// the widget still listens to the first one.
-		render(props());
+	test("the widget builds exactly one manager", async () => {
+		// The React version rebuilt the manager on every render and kept the
+		// first through a ref, which is what lost the checkbox click coordinates
+		// before the ref was introduced. There is one manager per mount now.
 		render(props());
-		act(() => {
-			mocks.constructions[0]?.updateState({
-				error: {
-					message: "from the original manager",
-					key: "API.UNKNOWN_ERROR",
-				},
-			});
-		});
-		expect(mocks.checkboxProps.current?.error).toBe(
-			"from the original manager",
-		);
+		await click();
+		expect(mocks.constructions).toHaveLength(1);
 	});
 });
 
@@ -419,10 +340,12 @@ describe("starting from the checkbox", () => {
 		});
 	});
 
-	test("an untrusted click starts a solve but carries no coordinates", async () => {
+	test("a synthetic click never reaches the manager", async () => {
+		// The checkbox drops untrusted events before the widget sees them, so an
+		// automated solver cannot open a puzzle at all.
 		render(props());
 		await click({ trusted: false, clientX: 12, clientY: 34 });
-		expect(mocks.start).toHaveBeenCalledWith(0, 0);
+		expect(mocks.start).not.toHaveBeenCalled();
 	});
 
 	test("a tap reports the coordinates of the first touch", async () => {
@@ -431,7 +354,7 @@ describe("starting from the checkbox", () => {
 		expect(mocks.start).toHaveBeenCalledWith(7, 9);
 	});
 
-	test("a touch event with no touches falls back to the origin", async () => {
+	test("a touch event with no touches falls back to the pointer", async () => {
 		render(props());
 		await click({ touches: [] });
 		expect(mocks.start).toHaveBeenCalledWith(0, 0);
@@ -442,9 +365,11 @@ describe("starting from the checkbox", () => {
 			// replaced synchronously by the promise executor below
 		};
 		mocks.start.mockReturnValue(
-			new Promise<GetPuzzleCaptchaResponse>((resolve) => {
-				release = resolve;
-			}),
+			new Promise<GetPuzzleCaptchaResponse>(
+				(resolve: (challenge: GetPuzzleCaptchaResponse) => void) => {
+					release = resolve;
+				},
+			),
 		);
 		render(props());
 		// Not awaited: the handler cannot settle until the challenge is
@@ -452,9 +377,8 @@ describe("starting from the checkbox", () => {
 		clickWithoutWaiting();
 		clickWithoutWaiting();
 		expect(mocks.start).toHaveBeenCalledTimes(1);
-		await act(async () => {
-			release(challengeResponse());
-		});
+		release(challengeResponse());
+		await settle();
 	});
 
 	test("the checkbox shows a spinner while the solve is loading", async () => {
@@ -462,17 +386,19 @@ describe("starting from the checkbox", () => {
 			// replaced synchronously by the promise executor below
 		};
 		mocks.start.mockReturnValue(
-			new Promise<GetPuzzleCaptchaResponse>((resolve) => {
-				release = resolve;
-			}),
+			new Promise<GetPuzzleCaptchaResponse>(
+				(resolve: (challenge: GetPuzzleCaptchaResponse) => void) => {
+					release = resolve;
+				},
+			),
 		);
 		render(props());
 		clickWithoutWaiting();
-		expect(mocks.checkboxProps.current?.loading).toBe(true);
-		await act(async () => {
-			release(challengeResponse());
-		});
-		expect(mocks.checkboxProps.current?.loading).toBe(false);
+		await settle();
+		expect(spinner()).not.toBeNull();
+		release(challengeResponse());
+		await settle();
+		expect(spinner()).toBeNull();
 	});
 
 	test("a start that yields no challenge leaves the checkbox in place", async () => {
@@ -480,7 +406,7 @@ describe("starting from the checkbox", () => {
 		render(props());
 		await click();
 		expect(canvas()).toBeNull();
-		expect(mocks.checkboxProps.current?.loading).toBe(false);
+		expect(spinner()).toBeNull();
 	});
 
 	test("a start that throws returns the user to a usable checkbox", async () => {
@@ -490,7 +416,7 @@ describe("starting from the checkbox", () => {
 		await click();
 		// Without the guard the spinner would stay up for good: nothing awaits
 		// the checkbox handler, so the rejection escapes as an unhandled one.
-		expect(mocks.checkboxProps.current?.loading).toBe(false);
+		expect(spinner()).toBeNull();
 		expect(onError).toHaveBeenCalledWith(expect.any(Error));
 	});
 
@@ -498,42 +424,30 @@ describe("starting from the checkbox", () => {
 		mocks.start.mockRejectedValue(new Error("provider down"));
 		render(props());
 		await click();
-		expect(mocks.checkboxProps.current?.loading).toBe(false);
+		expect(spinner()).toBeNull();
 	});
 });
 
 describe("autoStart", () => {
 	test("fetches a challenge and opens the puzzle without a click", async () => {
-		await act(async () => {
-			root.render(
-				createElement(
-					Procaptcha,
-					props({ autoStart: true, startCoords: { x: 5, y: 6 } }),
-				) as ReactElement,
-			);
-		});
+		render(props({ autoStart: true, startCoords: { x: 5, y: 6 } }));
+		await settle();
 		expect(mocks.start).toHaveBeenCalledWith(5, 6);
 		expect(canvas()).not.toBeNull();
 	});
 
 	test("starts at the origin when no coordinates were handed over", async () => {
-		await act(async () => {
-			root.render(
-				createElement(Procaptcha, props({ autoStart: true })) as ReactElement,
-			);
-		});
+		render(props({ autoStart: true }));
+		await settle();
 		expect(mocks.start).toHaveBeenCalledWith(0, 0);
 	});
 
 	test("a failed autoStart leaves the checkbox usable", async () => {
 		mocks.start.mockRejectedValue(new Error("nope"));
-		await act(async () => {
-			root.render(
-				createElement(Procaptcha, props({ autoStart: true })) as ReactElement,
-			);
-		});
+		render(props({ autoStart: true }));
+		await settle();
 		expect(canvas()).toBeNull();
-		expect(mocks.checkboxProps.current?.loading).toBe(false);
+		expect(spinner()).toBeNull();
 	});
 
 	test("no autoStart means no solve until the user acts", () => {
@@ -561,7 +475,7 @@ describe("finishing the drag", () => {
 		await openPuzzle();
 		await complete();
 		expect(canvas()).toBeNull();
-		expect(mocks.checkboxProps.current?.loading).toBe(false);
+		expect(spinner()).toBeNull();
 	});
 
 	test("a rejected solution asks for another go on a fresh challenge", async () => {
@@ -628,29 +542,25 @@ describe("finishing the drag", () => {
 			// replaced synchronously by the promise executor below
 		};
 		mocks.submitSolution.mockReturnValue(
-			new Promise<boolean>((resolve) => {
+			new Promise<boolean>((resolve: (verified: boolean) => void) => {
 				release = resolve;
 			}),
 		);
 		await openPuzzle();
 		// Not awaited: the handler cannot settle until the verdict is released.
-		act(() => {
-			void mocks.canvasProps.current?.onComplete(200, 80, []);
-		});
+		void mocks.canvasProps.current?.onComplete(200, 80, []);
+		await settle();
 		expect(mocks.canvasProps.current?.submitting).toBe(true);
-		expect(mocks.checkboxProps.current?.loading).toBe(true);
-		await act(async () => {
-			release(true);
-		});
+		expect(spinner()).not.toBeNull();
+		release(true);
+		await settle();
 	});
 });
 
 describe("invisible mode", () => {
 	const execute = async (): Promise<void> => {
-		await act(async () => {
-			document.dispatchEvent(new Event("procaptcha:execute"));
-			await Promise.resolve();
-		});
+		document.dispatchEvent(new Event("procaptcha:execute"));
+		await settle();
 	};
 
 	test("an execute event fetches a challenge and opens the puzzle", async () => {
@@ -669,10 +579,8 @@ describe("invisible mode", () => {
 	test("a targeted execute on the container runs a visible widget", async () => {
 		const target = document.createElement("div");
 		render(props({ container: target }));
-		await act(async () => {
-			target.dispatchEvent(new Event("procaptcha:execute"));
-			await Promise.resolve();
-		});
+		target.dispatchEvent(new Event("procaptcha:execute"));
+		await settle();
 		expect(mocks.start).toHaveBeenCalledTimes(1);
 		expect(canvas()).not.toBeNull();
 	});
@@ -685,10 +593,8 @@ describe("invisible mode", () => {
 				container: target,
 			}),
 		);
-		await act(async () => {
-			target.dispatchEvent(new Event("procaptcha:execute"));
-			await Promise.resolve();
-		});
+		target.dispatchEvent(new Event("procaptcha:execute"));
+		await settle();
 		expect(mocks.start).toHaveBeenCalledTimes(1);
 	});
 
@@ -725,43 +631,37 @@ describe("invisible mode", () => {
 		expect(onError).toHaveBeenCalledWith(expect.any(Error));
 	});
 
-	test("the listener is dropped when the widget unmounts", async () => {
+	test("the listener is dropped when the widget is destroyed", async () => {
 		render(props({ config: config({ mode: ModeEnum.invisible }) }));
-		act(() => {
-			root.unmount();
-		});
-		act(() => {
-			root = createRoot(container);
-		});
+		destroy();
 		await execute();
 		expect(mocks.start).not.toHaveBeenCalled();
 	});
 });
 
 describe("an invalidated session", () => {
-	const invalidate = (
+	const invalidate = async (
 		key = "CAPTCHA.NO_SESSION_FOUND",
 		message = "session gone",
-	): void => {
-		act(() => {
-			mocks.constructions[0]?.updateState({ error: { message, key } });
-		});
+	): Promise<void> => {
+		mocks.constructions[0]?.updateState({ error: { message, key } });
+		await settle();
 	};
 
 	test("the error is shown on the checkbox and the puzzle is torn down", async () => {
 		render(props());
 		await click();
-		invalidate("API.UNKNOWN_ERROR", "something broke");
-		expect(mocks.checkboxProps.current?.error).toBe("something broke");
+		await invalidate("API.UNKNOWN_ERROR", "something broke");
+		expect(mounted.container.textContent).toContain("something broke");
 		expect(canvas()).toBeNull();
-		expect(mocks.checkboxProps.current?.loading).toBe(false);
+		expect(spinner()).toBeNull();
 	});
 
 	test("the host is told to re-mint, with the coordinates of the original click", async () => {
 		const onSessionInvalidated = vi.fn<(x?: number, y?: number) => void>();
 		render(props({ onSessionInvalidated }));
 		await click({ clientX: 12, clientY: 34 });
-		invalidate();
+		await invalidate();
 		expect(onSessionInvalidated).toHaveBeenCalledWith(12, 34);
 	});
 
@@ -769,52 +669,39 @@ describe("an invalidated session", () => {
 		const onSessionInvalidated = vi.fn<(x?: number, y?: number) => void>();
 		render(props({ onSessionInvalidated }));
 		await click();
-		invalidate("CAPTCHA.NO_SESSION_FOUND", "gone");
-		invalidate("CAPTCHA.NO_SESSION_FOUND", "gone again");
+		await invalidate("CAPTCHA.NO_SESSION_FOUND", "gone");
+		await invalidate("CAPTCHA.NO_SESSION_FOUND", "gone again");
 		expect(onSessionInvalidated).toHaveBeenCalledTimes(1);
 	});
 
 	test("with no host handler the frictionless session restarts instead", async () => {
-		vi.useFakeTimers();
 		const restart = vi.fn<() => void>();
 		render(props({ frictionlessState: frictionless({ restart }) }));
-		invalidate();
+		await invalidate();
 		expect(restart).not.toHaveBeenCalled();
-		await act(async () => {
-			await vi.advanceTimersByTimeAsync(100);
-		});
+		await new Promise<void>((resolve: () => void) => setTimeout(resolve, 150));
 		expect(restart).toHaveBeenCalledTimes(1);
-		vi.useRealTimers();
 	});
 
-	test("a restart pending at unmount is cancelled", async () => {
-		vi.useFakeTimers();
+	test("a restart pending at destroy is cancelled", async () => {
 		const restart = vi.fn<() => void>();
 		render(props({ frictionlessState: frictionless({ restart }) }));
-		invalidate();
-		act(() => {
-			root.unmount();
-		});
-		await act(async () => {
-			await vi.advanceTimersByTimeAsync(200);
-		});
+		await invalidate();
+		destroy();
+		await new Promise<void>((resolve: () => void) => setTimeout(resolve, 200));
 		expect(restart).not.toHaveBeenCalled();
-		act(() => {
-			root = createRoot(container);
-		});
-		vi.useRealTimers();
 	});
 
 	test("a lost session with nothing to recover it is simply surfaced", async () => {
 		render(props());
-		invalidate();
-		expect(mocks.checkboxProps.current?.error).toBe("session gone");
+		await invalidate();
+		expect(mounted.container.textContent).toContain("session gone");
 	});
 
-	test("no coordinates are reported when the session was never clicked into", () => {
+	test("no coordinates are reported when the session was never clicked into", async () => {
 		const onSessionInvalidated = vi.fn<(x?: number, y?: number) => void>();
 		render(props({ onSessionInvalidated }));
-		invalidate();
+		await invalidate();
 		expect(onSessionInvalidated).toHaveBeenCalledWith(undefined, undefined);
 	});
 });