tpmjs/packages/ui/src/Button/Button.test.tsx

import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Button } from "./Button";

describe("Button", () => {
	describe("Rendering", () => {
		it("renders with default variant and size", () => {
			render(<Button>Click me</Button>);
			const button = screen.getByRole("button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveTextContent("Click me");
		});

		it("renders as a button element", () => {
			render(<Button>Test</Button>);
			expect(screen.getByRole("button").tagName).toBe("BUTTON");
		});
	});

	describe("Variants", () => {
		it("applies default variant classes", () => {
			render(
				<Button variant="default" data-testid="button">
					Default
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("bg-primary");
			expect(button.className).toContain("text-primary-foreground");
		});

		it("applies destructive variant classes", () => {
			render(
				<Button variant="destructive" data-testid="button">
					Delete
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("bg-error");
			expect(button.className).toContain("text-error-foreground");
		});

		it("applies outline variant classes", () => {
			render(
				<Button variant="outline" data-testid="button">
					Outline
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("border");
			expect(button.className).toContain("bg-transparent");
		});

		it("applies secondary variant classes", () => {
			render(
				<Button variant="secondary" data-testid="button">
					Secondary
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("bg-secondary");
			expect(button.className).toContain("text-secondary-foreground");
		});

		it("applies ghost variant classes", () => {
			render(
				<Button variant="ghost" data-testid="button">
					Ghost
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("hover:bg-accent");
		});

		it("applies link variant classes", () => {
			render(
				<Button variant="link" data-testid="button">
					Link
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("text-primary");
			expect(button.className).toContain("underline-offset-4");
		});
	});

	describe("Sizes", () => {
		it("applies small size classes", () => {
			render(
				<Button size="sm" data-testid="button">
					Small
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("h-9");
			expect(button.className).toContain("px-3");
		});

		it("applies medium size classes (default)", () => {
			render(
				<Button size="md" data-testid="button">
					Medium
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("h-10");
			expect(button.className).toContain("px-4");
		});

		it("applies large size classes", () => {
			render(
				<Button size="lg" data-testid="button">
					Large
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("h-11");
			expect(button.className).toContain("px-8");
		});

		it("applies icon size classes", () => {
			render(
				<Button size="icon" data-testid="button" aria-label="Icon button" />,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("h-10");
			expect(button.className).toContain("w-10");
		});
	});

	describe("Compound Variants", () => {
		it("applies compound variant for outline + small", () => {
			render(
				<Button variant="outline" size="sm" data-testid="button">
					Small Outline
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("border");
			expect(button.className).toContain("h-9");
		});

		it("applies compound variant for link variants (removes padding)", () => {
			render(
				<Button variant="link" size="md" data-testid="button">
					Link
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("px-0");
		});
	});

	describe("Loading State", () => {
		it("shows loading spinner when loading is true", () => {
			render(<Button loading>Loading</Button>);
			const button = screen.getByRole("button");

			// Should have loading indicator
			const spinner = button.querySelector('[aria-hidden="true"]');
			expect(spinner).toBeInTheDocument();
			expect(spinner?.className).toContain("animate-spin");
		});

		it("disables button when loading", () => {
			render(<Button loading>Loading</Button>);
			const button = screen.getByRole("button");
			expect(button).toBeDisabled();
			expect(button).toHaveAttribute("aria-busy", "true");
		});

		it("applies cursor-wait class when loading", () => {
			render(
				<Button loading data-testid="button">
					Loading
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("cursor-wait");
		});

		it("still shows children text when loading", () => {
			render(<Button loading>Processing</Button>);
			expect(screen.getByText("Processing")).toBeInTheDocument();
		});
	});

	describe("Disabled State", () => {
		it("disables button when disabled prop is true", () => {
			render(<Button disabled>Disabled</Button>);
			const button = screen.getByRole("button");
			expect(button).toBeDisabled();
			expect(button).toHaveAttribute("aria-disabled", "true");
		});

		it("applies disabled opacity class", () => {
			render(
				<Button disabled data-testid="button">
					Disabled
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("disabled:opacity-50");
			expect(button.className).toContain("disabled:pointer-events-none");
		});

		it("is disabled when both disabled and loading are true", () => {
			render(
				<Button disabled loading>
					Both
				</Button>,
			);
			const button = screen.getByRole("button");
			expect(button).toBeDisabled();
		});
	});

	describe("Custom className", () => {
		it("merges custom className with variant classes", () => {
			render(
				<Button className="custom-class" data-testid="button">
					Custom
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("custom-class");
			expect(button.className).toContain("bg-primary");
		});
	});

	describe("Ref Forwarding", () => {
		it("forwards ref to button element", () => {
			let ref: HTMLButtonElement | null = null;
			render(
				<Button
					ref={(el) => {
						ref = el;
					}}
				>
					Ref Test
				</Button>,
			);
			expect(ref).toBeInstanceOf(HTMLButtonElement);
			expect(ref!.tagName).toBe("BUTTON");
		});
	});

	describe("HTML Attributes", () => {
		it("passes through HTML button attributes", () => {
			render(
				<Button
					type="submit"
					name="test-button"
					value="test-value"
					data-testid="button"
				>
					Submit
				</Button>,
			);
			const button = screen.getByTestId("button");
			expect(button).toHaveAttribute("type", "submit");
			expect(button).toHaveAttribute("name", "test-button");
			expect(button).toHaveAttribute("value", "test-value");
		});

		it("supports onClick handler", () => {
			let clicked = false;
			render(
				<Button
					onClick={() => {
						clicked = true;
					}}
				>
					Click
				</Button>,
			);
			const button = screen.getByRole("button");
			button.click();
			expect(clicked).toBe(true);
		});
	});

	describe("Accessibility", () => {
		it("has proper ARIA attributes for loading state", () => {
			render(<Button loading>Loading</Button>);
			const button = screen.getByRole("button");
			expect(button).toHaveAttribute("aria-busy", "true");
			expect(button).toHaveAttribute("aria-disabled", "true");
		});

		it("has proper ARIA attributes for disabled state", () => {
			render(<Button disabled>Disabled</Button>);
			const button = screen.getByRole("button");
			expect(button).toHaveAttribute("aria-disabled", "true");
		});

		it("hides loading spinner from screen readers", () => {
			render(<Button loading>Loading</Button>);
			const button = screen.getByRole("button");
			const spinner = button.querySelector('[aria-hidden="true"]');
			expect(spinner).toHaveAttribute("aria-hidden", "true");
		});

		it("supports aria-label for icon buttons", () => {
			render(
				<Button size="icon" aria-label="Close dialog">
					X
				</Button>,
			);
			const button = screen.getByRole("button");
			expect(button).toHaveAccessibleName("Close dialog");
		});
	});

	describe("Base Classes", () => {
		it("always includes base classes", () => {
			render(<Button data-testid="button">Base</Button>);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("inline-flex");
			expect(button.className).toContain("items-center");
			expect(button.className).toContain("justify-center");
			expect(button.className).toContain("font-medium");
			expect(button.className).toContain("rounded-md");
		});

		it("includes focus ring classes", () => {
			render(<Button data-testid="button">Focus</Button>);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("focus-ring");
		});

		it("includes transition classes", () => {
			render(<Button data-testid="button">Transition</Button>);
			const button = screen.getByTestId("button");
			expect(button.className).toContain("transition-base");
		});
	});
});