import { renderToStaticMarkup } from "react-dom/server";import { describe, expect, it } from "vite-plus/test"; import { Command, CommandFooter, CommandInput } from "./command"; describe("command compact geometry", () => { it("keeps shell selectors on the wrapper and direct-input padding on AutocompleteInput", () => { const html = renderToStaticMarkup( <Command> <CommandInput placeholder="Search commands" /> </Command>, ); const shellClass = html.match(/class="([^"]*px-\[var\(--command-shell-inset\)[^"]*)"/)?.[1]; const inputClass = html.match(/class="([^"]*has-focus-visible:ring-0[^"]*)"/)?.[1]; expect(shellClass).toContain( "[&_[data-slot=autocomplete-start-addon]]:ps-[calc(var(--command-shell-inset)+0.0625rem)]", ); expect(shellClass).not.toContain("sm:*:data-[slot=autocomplete-input]"); expect(inputClass).toContain( "sm:*:data-[slot=autocomplete-input]:ps-[calc(var(--command-shell-inset)+1.5rem)]!", ); }); it("uses the semantic footer inset without changing compact vertical padding", () => { const html = renderToStaticMarkup(<CommandFooter>Shortcuts</CommandFooter>); expect(html).toContain("px-[var(--command-content-inset)]"); expect(html).toContain("py-2.5"); });});
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vite-plus/test";
import { Command, CommandFooter, CommandInput } from "./command";
describe("command compact geometry", () => {
it("keeps shell selectors on the wrapper and direct-input padding on AutocompleteInput", () => {
const html = renderToStaticMarkup(
<Command>
<CommandInput placeholder="Search commands" />
</Command>,
);
const shellClass = html.match(/class="([^"]*px-\[var\(--command-shell-inset\)[^"]*)"/)?.[1];
const inputClass = html.match(/class="([^"]*has-focus-visible:ring-0[^"]*)"/)?.[1];
expect(shellClass).toContain(
"[&_[data-slot=autocomplete-start-addon]]:ps-[calc(var(--command-shell-inset)+0.0625rem)]",
);
expect(shellClass).not.toContain("sm:*:data-[slot=autocomplete-input]");
expect(inputClass).toContain(
"sm:*:data-[slot=autocomplete-input]:ps-[calc(var(--command-shell-inset)+1.5rem)]!",
);
});
it("uses the semantic footer inset without changing compact vertical padding", () => {
const html = renderToStaticMarkup(<CommandFooter>Shortcuts</CommandFooter>);
expect(html).toContain("px-[var(--command-content-inset)]");
expect(html).toContain("py-2.5");
});
});