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


const textContent = "Testing";


describe("Renders", () => {
	it("Renders with defaults", () => {
		render(<MoltenPill>{textContent}</MoltenPill>);

		//Make sure the pill div is present
		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
		expect(pillDiv).toBeInTheDocument();
		expect(pillDiv).toHaveTextContent(textContent);
		//Check for the default classes
		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
		expect(pillDiv).toHaveClass("bg-molten", "text-black");
		expect(pillDiv).toHaveClass("rounded-full");
	});
});

describe("Rounding", () => {
	it("Renders with no rounding", () => {
		render(<MoltenPill rounding="none">{textContent}</MoltenPill>);

		//Make sure the pill div is present
		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
		expect(pillDiv).toBeInTheDocument();
		expect(pillDiv).toHaveTextContent(textContent);
		//Check for the default classes
		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
		expect(pillDiv).toHaveClass("bg-molten", "text-black");
	});
	it("Renders with small rounding", () => {
		render(<MoltenPill rounding="sm">{textContent}</MoltenPill>);

		//Make sure the pill div is present
		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
		expect(pillDiv).toBeInTheDocument();
		expect(pillDiv).toHaveTextContent(textContent);
		//Check for the default classes
		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
		expect(pillDiv).toHaveClass("bg-molten", "text-black");
		expect(pillDiv).toHaveClass("rounded-sm");
	});
	it("Renders with medium rounding", () => {
		render(<MoltenPill rounding="md">{textContent}</MoltenPill>);

		//Make sure the pill div is present
		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
		expect(pillDiv).toBeInTheDocument();
		expect(pillDiv).toHaveTextContent(textContent);
		//Check for the default classes
		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
		expect(pillDiv).toHaveClass("bg-molten", "text-black");
		expect(pillDiv).toHaveClass("rounded");
	});
	it("Renders with large rounding", () => {
		render(<MoltenPill rounding="lg">{textContent}</MoltenPill>);

		//Make sure the pill div is present
		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
		expect(pillDiv).toBeInTheDocument();
		expect(pillDiv).toHaveTextContent(textContent);
		//Check for the default classes
		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
		expect(pillDiv).toHaveClass("bg-molten", "text-black");
		expect(pillDiv).toHaveClass("rounded-lg");
	});
	it("Renders with full rounding", () => {
		render(<MoltenPill rounding="full">{textContent}</MoltenPill>);

		//Make sure the pill div is present
		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
		expect(pillDiv).toBeInTheDocument();
		expect(pillDiv).toHaveTextContent(textContent);
		//Check for the default classes
		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
		expect(pillDiv).toHaveClass("bg-molten", "text-black");
		expect(pillDiv).toHaveClass("rounded-full");
	});
});
