// frontend/tests/Badge.test.tsx
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Badge } from "@/components/Badge";

describe("Badge", () => {
  it("기본 pill은 coral 톤", () => {
    render(<Badge>3</Badge>);
    const el = screen.getByText("3");
    expect(el).toHaveClass("badge-pill");
    expect(el).toHaveAttribute("data-tone", "coral");
  });
  it("count 변형은 차분한 카운트 스타일", () => {
    render(<Badge variant="count">8개</Badge>);
    expect(screen.getByText("8개")).toHaveClass("badge-count");
  });
  it("톤 지정", () => {
    render(<Badge tone="green">1</Badge>);
    expect(screen.getByText("1")).toHaveAttribute("data-tone", "green");
  });
});