import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import { Badge } from "./badge";

describe("Badge", () => {
  it("renders with root and label slots plus data hooks", () => {
    render(
      <Badge size="sm" tone="success" variant="solid">
        Stable
      </Badge>
    );

    const badge = screen.getByText("Stable").closest('[data-slot="root"]');

    expect(badge).toBeInTheDocument();
    expect(badge).toHaveAttribute("data-size", "sm");
    expect(badge).toHaveAttribute("data-tone", "success");
    expect(badge).toHaveAttribute("data-variant", "solid");
    expect(screen.getByText("Stable")).toHaveAttribute("data-slot", "label");
  });

  it("supports asChild rendering", () => {
    render(
      <Badge asChild tone="primary">
        <a href="/release">Release</a>
      </Badge>
    );

    const link = screen.getByRole("link", { name: "Release" });

    expect(link).toHaveAttribute("data-slot", "root");
    expect(link).toHaveAttribute("data-tone", "primary");
  });
});