1import { useState } from "react";
2import { describe, expect, it } from "vite-plus/test";
3import { page, userEvent } from "vite-plus/test/browser";
4
5import { render } from "../../test/render";
6import { CommandPaletteContent } from "./CommandPaletteContent";
7import { CommandDialog, CommandDialogPopup, CommandItem, CommandList } from "./ui/command";
8
9function SubmenuPalette() {
10 const [open, setOpen] = useState(false);
11 return (
12 <>
13 <button type="button" onClick={() => setOpen(true)}>
14 Open
15 </button>
16 <CommandDialog open={open} onOpenChange={setOpen}>
17 <CommandDialogPopup aria-label="Command palette">
18 <CommandPaletteContent
19 items={["Project A"]}
20 inputProps={{
21 placeholder: "Search projects",
22 startAddon: (
23 <button type="button" aria-label="Back">
24 Back
25 </button>
26 ),
27 }}
28 >
29 <CommandList>
30 {(item: string) => <CommandItem value={item}>{item}</CommandItem>}
31 </CommandList>
32 </CommandPaletteContent>
33 </CommandDialogPopup>
34 </CommandDialog>
35 </>
36 );
37}
38
39describe("CommandPaletteContent", () => {
40 it("focuses the search input, not the Back button, when it opens into a submenu", async () => {
41 await using _screen = await render(<SubmenuPalette />);
42
43 await userEvent.click(page.getByRole("button", { name: "Open" }));
44
45 await expect.element(page.getByPlaceholder("Search projects")).toHaveFocus();
46 });
47});