import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vite-plus/test";
import { FlaskConicalIcon } from "lucide-react";

import { Button } from "./button";

describe("button geometry tokens", () => {
  it("uses the shared control radius and an opaque semantic icon color", () => {
    const html = renderToStaticMarkup(
      <Button size="icon-xs" variant="outline" aria-label="Run tests">
        <FlaskConicalIcon />
      </Button>,
    );

    expect(html).toContain("rounded-[var(--control-radius)]");
    expect(html).toContain("[--control-icon-color:var(--contrast-muted-foreground)]");
    expect(html).toContain("text-[var(--control-icon-color)]");
    expect(html).not.toContain("opacity-80");
  });

  it("keeps compact icon buttons square at every breakpoint", () => {
    const html = renderToStaticMarkup(
      <Button size="icon-xs" aria-label="Add action">
        <span>+</span>
      </Button>,
    );

    expect(html).toContain("size-7");
    expect(html).toContain("sm:size-6");
  });

  it("owns shared compact and micro control geometry", () => {
    const compact = renderToStaticMarkup(<Button size="compact">Condition</Button>);
    const microLabel = renderToStaticMarkup(
      <Button size="micro">
        <FlaskConicalIcon /> Run
      </Button>,
    );
    const micro = renderToStaticMarkup(
      <Button size="icon-micro" variant="ghost-muted" aria-label="Add action">
        <span>+</span>
      </Button>,
    );

    expect(compact).toContain("h-7");
    expect(compact).toContain("rounded-md");
    expect(microLabel).toContain("text-[11px]");
    expect(microLabel).toContain("sm:text-[11px]");
    expect(microLabel).toContain("sm:[&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-3");
    expect(micro).toContain("size-5");
    expect(micro).toContain("rounded-sm");
    expect(micro).toContain("text-muted-foreground");
  });
});