// frontend/tests/notify/WhyChip.test.tsx — tone 색 매핑
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { WhyChip } from "@/components/notify/WhyChip";

describe("WhyChip", () => {
  it("tone=muted → var(--muted)", () => {
    render(<WhyChip why="내가 미룸" tone="muted" />);
    const el = screen.getByText("내가 미룸");
    expect(el).toHaveStyle({ color: "var(--muted)" });
  });

  it("tone=coral → var(--coral)", () => {
    render(<WhyChip why="VIP 발신자" tone="coral" />);
    const el = screen.getByText("VIP 발신자");
    expect(el).toHaveStyle({ color: "var(--coral)" });
  });

  it("tone=amber(되돌림) → var(--amber)", () => {
    render(<WhyChip why="되돌림" tone="amber" />);
    expect(screen.getByText("되돌림")).toHaveStyle({ color: "var(--amber)" });
  });
});