feat: add command and combobox components

2026-03-19 18:16:50 +08:00
parent b7d17383bf
commit 71ebb010b9
12 changed files with 1318 additions and 0 deletions
@@ -0,0 +1,99 @@
+import { useState } from "react";
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+} from "./command";
+
+describe("Command", () => {
+  it("renders root, input, list, item, and shortcut slots", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Command label="Quick actions">
+        <CommandInput placeholder="Search actions" />
+        <CommandList>
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandGroup heading="Actions">
+            <CommandItem value="launch-release">Launch release</CommandItem>
+            <CommandItem value="open-legal">
+              Open legal review
+              <CommandShortcut>G L</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+        </CommandList>
+      </Command>
+    );
+
+    const root = document.querySelector('[data-slot="root"]');
+    const input = screen.getByPlaceholderText("Search actions");
+
+    expect(root).toHaveAttribute("data-slot", "root");
+    expect(input).toHaveAttribute("data-slot", "input");
+    expect(document.querySelector('[data-slot="list"]')).toBeInTheDocument();
+    expect(screen.getByText("Open legal review").closest('[data-slot="item"]')).toBeInTheDocument();
+    expect(screen.getByText("G L")).toHaveAttribute("data-slot", "shortcut");
+
+    await user.type(input, "zzz");
+    expect(await screen.findByText("No results.")).toHaveAttribute("data-slot", "empty");
+  });
+
+  it("calls onSelect when a command item is chosen", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <Command>
+        <CommandInput placeholder="Search actions" />
+        <CommandList>
+          <CommandItem onSelect={onSelect} value="launch-release">
+            Launch release
+          </CommandItem>
+        </CommandList>
+      </Command>
+    );
+
+    await user.click(screen.getByText("Launch release"));
+
+    expect(onSelect).toHaveBeenCalledWith("launch-release");
+  });
+
+  it("renders inside a dialog and closes through the default close control", async () => {
+    const user = userEvent.setup();
+
+    function CommandDialogExample() {
+      const [open, setOpen] = useState(true);
+
+      return (
+        <CommandDialog onOpenChange={setOpen} open={open}>
+          <CommandInput placeholder="Search across workspace" />
+          <CommandList>
+            <CommandItem value="open-docs">Open docs</CommandItem>
+          </CommandList>
+        </CommandDialog>
+      );
+    }
+
+    render(<CommandDialogExample />);
+
+    expect(screen.getByPlaceholderText("Search across workspace")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Close dialog" }));
+
+    await waitFor(() => {
+      expect(screen.queryByPlaceholderText("Search across workspace")).not.toBeInTheDocument();
+    });
+  });
+});