1import { describe, expect, it, vi } from "vite-plus/test";
2import { page, userEvent } from "vite-plus/test/browser";
3
4import { render } from "../../test/render";
5import { useCommitOnBlur } from "../hooks/useCommitOnBlur";
6import { AppRouteModal } from "./AppRouteModal";
7
8function CommitOnBlurField({ onCommit }: { onCommit: (next: string) => void }) {
9 return <input aria-label="Instructions" {...useCommitOnBlur("", onCommit)} />;
10}
11
12describe("AppRouteModal", () => {
13 it("commits a focused field when Esc closes it", async () => {
14 const onCommit = vi.fn();
15 await using _screen = await render(
16 <AppRouteModal label="Settings">
17 <CommitOnBlurField onCommit={onCommit} />
18 </AppRouteModal>,
19 { router: "/settings/general" },
20 );
21
22 await page.getByRole("textbox", { name: "Instructions" }).fill("Keep titles short");
23 await userEvent.keyboard("{Escape}");
24
25 expect(onCommit).toHaveBeenCalledWith("Keep titles short");
26 });
27});