import React from "react";
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { MetricPill } from "@/components/dashboard/shared/MetricPill";
import { TooltipProvider } from "@/components/ui/tooltip";

describe("MetricPill Visual Polish", () => {
  it("should have hover scale and transition classes", () => {
    render(
      <TooltipProvider>
        <MetricPill label="Test" value="100" tooltip="Hover me" />
      </TooltipProvider>
    );
    
    const label = screen.getByText("Test");
    // The container is the parent of the label's parent div
    const container = label.parentElement?.parentElement;
    // We expect these classes to be added for the polish
    expect(container?.className).toContain("active:scale-[0.98]");
    expect(container?.className).toContain("transition-all");
    expect(container?.className).toContain("duration-300");
  });
});