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

describe("StatusBadge Visual Polish", () => {
  it("should have hover scale and transition classes", () => {
    render(<StatusBadge status="success">Active</StatusBadge>);
    
    const badge = screen.getByText("Active").closest("div");
    expect(badge?.className).toContain("hover:scale-105");
    expect(badge?.className).toContain("transition-all");
    expect(badge?.className).toContain("duration-200");
  });

  it("should have pulse animation on the dot", () => {
    const { container } = render(<StatusBadge status="success">Active</StatusBadge>);
    const dot = container.querySelector(".animate-pulse");
    expect(dot).not.toBeNull();
  });
});