31 lines · 1.3 KB · TypeScript
RawDownload
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(      "[&amp;_[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");  });});