MattrixwvReactComponents/test/component/button/TertiaryButton.test.tsx

import TertiaryButton from "$/component/button/TertiaryButton";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";


const buttonText = "Tertiary Button";


describe("TertiaryButton Component", () => {
	it("Renders with defaults", () => {
		render(<TertiaryButton>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		//Check button requirements
		expect(button).toBeInTheDocument();
		expect(button).toHaveTextContent(buttonText);
		//Classes
		expect(button).toHaveClass("rounded-lg");
		expect(button).toHaveClass("px-4", "py-2");
		expect(button).toHaveClass("border");
		expect(button).toHaveClass("cursor-pointer");
		//Colors
		expect(button).toHaveClass("bg-purple-600", "hover:bg-purple-700", "active:bg-purple-800");
		expect(button).toHaveClass("border-purple-600", "hover:border-purple-700", "active:border-purple-800");
		expect(button).toHaveClass("text-white");
	});

	it("Renders with custom className", () => {
		const customClass = "custom-tertiary-button-class";

		render(<TertiaryButton className={customClass}>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass(customClass);
	});

	it("Renders with aria-label", () => {
		const ariaLabel = "Tertiary Button Aria Label";

		render(<TertiaryButton aria-label={ariaLabel}>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveAttribute("aria-label", ariaLabel);
	});

	it("Renders with onClick handler", async () => {
		const handleClick = vi.fn();

		render(<TertiaryButton onClick={handleClick}>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();

		await userEvent.click(button);
		expect(handleClick).toHaveBeenCalledTimes(1);
	});

	describe("TertiaryButton Component Rounding", () => {
		it("Renders with small rounding", () => {
			render(<TertiaryButton rounding="sm">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("rounded-sm");
		});
		it("Renders with medium rounding", () => {
			render(<TertiaryButton rounding="md">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("rounded-md");
		});
		it("Renders with large rounding", () => {
			render(<TertiaryButton rounding="lg">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("rounded-lg");
		});
		it("Renders with full rounding", () => {
			render(<TertiaryButton rounding="full">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("rounded-full");
		});
	});

	describe("TertiaryButton Component Size and Shape", () => {
		it("Renders with xs square", () => {
			render(<TertiaryButton size="xs" shape="square">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("p-0");
		});
		it("Renders with sm square", () => {
			render(<TertiaryButton size="sm" shape="square">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("p-1");
		});
		it("Renders with md square", () => {
			render(<TertiaryButton size="md" shape="square">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("p-2");
		});
		it("Renders with lg square", () => {
			render(<TertiaryButton size="lg" shape="square">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("p-3");
		});
		it("Renders with xl square", () => {
			render(<TertiaryButton size="xl" shape="square">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("p-4");
		});
		it("Renders with xs rectangle", () => {
			render(<TertiaryButton size="xs" shape="rectangle">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("px-1", "py-0");
		});
		it("Renders with sm rectangle", () => {
			render(<TertiaryButton size="sm" shape="rectangle">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("px-2", "py-1");
		});
		it("Renders with md rectangle", () => {
			render(<TertiaryButton size="md" shape="rectangle">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("px-4", "py-2");
		});
		it("Renders with lg rectangle", () => {
			render(<TertiaryButton size="lg" shape="rectangle">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("px-6", "py-3");
		});
		it("Renders with xl rectangle", () => {
			render(<TertiaryButton size="xl" shape="rectangle">{buttonText}</TertiaryButton>);

			const button = screen.getByTestId("mattrixwv-tertiary-button");
			expect(button).toBeInTheDocument();
			expect(button).toHaveClass("px-8", "py-4");
		});
	});
});

describe("TertiaryButton Component Disabled", () => {
	it("Render with defaults when disabled", () => {
		render(<TertiaryButton disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		//Check button requirements
		expect(button).toBeInTheDocument();
		expect(button).toHaveTextContent(buttonText);
		//Classes
		expect(button).toHaveClass("rounded-lg");
		expect(button).toHaveClass("px-4", "py-2");
		expect(button).toHaveClass("border");
		//Disabled state
		expect(button).not.toHaveClass("cursor-pointer");
		expect(button).toHaveClass("bg-purple-400/80");
		expect(button).toHaveClass("border-purple-400/80");
		expect(button).toHaveClass("text-white");
	});
	it("Renders with custom className when disabled", () => {
		const customClass = "custom-tertiary-button-class";

		render(<TertiaryButton className={customClass} disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass(customClass);
	});
	it("Renders with aria-label when disabled", () => {
		const ariaLabel = "Tertiary Button Aria Label";

		render(<TertiaryButton aria-label={ariaLabel} disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveAttribute("aria-label", ariaLabel);
	});
	it("Does not trigger onClick handler when disabled", async () => {
		const handleClick = vi.fn();

		render(<TertiaryButton onClick={handleClick} disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();

		await userEvent.click(button);
		expect(handleClick).toHaveBeenCalledTimes(0);
	});
});

describe("TertiaryButton Component Variants", () => {
	it("Renders with standard variant", () => {
		render(<TertiaryButton variant="standard">{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-purple-600", "hover:bg-purple-700", "active:bg-purple-800");
		expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-700", "active:border-purple-800");
		expect(button).toHaveClass("text-white");
	});
	it("Renders with outline variant", () => {
		render(<TertiaryButton variant="outline">{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent");
		expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-700", "active:border-purple-800");
		expect(button).toHaveClass("text-purple-600", "hover:text-purple-700", "active:text-purple-800");
	});
	it("Renders with outline-ghost variant", () => {
		render(<TertiaryButton variant="outline-ghost">{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent", "hover:bg-purple-600", "active:bg-purple-700");
		expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-600", "active:border-purple-700");
		expect(button).toHaveClass("text-purple-600", "hover:text-white", "active:text-white");
	});
	it("Renders with ghost variant", () => {
		render(<TertiaryButton variant="ghost">{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent", "hover:bg-purple-600", "active:bg-purple-700");
		expect(button).toHaveClass("border-none");
		expect(button).toHaveClass("text-purple-600", "hover:text-white", "active:text-white");
	});
	it("Renders with icon variant", () => {
		render(<TertiaryButton variant="icon">{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent");
		expect(button).toHaveClass("border-none");
		expect(button).toHaveClass("text-purple-600", "hover:text-purple-700", "active:text-purple-800");
	});
});

describe("TertiaryButton Component Variants Disabled", () => {
	it("Renders with standard variant when disabled", () => {
		render(<TertiaryButton variant="standard" disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-purple-400/80");
		expect(button).toHaveClass("border", "border-purple-400/80");
		expect(button).toHaveClass("text-white");
	});
	it("Renders with outline variant when disabled", () => {
		render(<TertiaryButton variant="outline" disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent");
		expect(button).toHaveClass("border", "border-purple-400/80");
		expect(button).toHaveClass("text-purple-400/80");
	});
	it("Renders with outline-ghost variant when disabled", () => {
		render(<TertiaryButton variant="outline-ghost" disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent");
		expect(button).toHaveClass("border", "border-purple-400/80");
		expect(button).toHaveClass("text-purple-400/80");
	});
	it("Renders with ghost variant when disabled", () => {
		render(<TertiaryButton variant="ghost" disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent");
		expect(button).toHaveClass("border-none");
		expect(button).toHaveClass("text-purple-400/80");
	});
	it("Renders with icon variant when disabled", () => {
		render(<TertiaryButton variant="icon" disabled>{buttonText}</TertiaryButton>);

		const button = screen.getByTestId("mattrixwv-tertiary-button");
		expect(button).toBeInTheDocument();
		expect(button).toHaveClass("bg-transparent");
		expect(button).toHaveClass("border-none");
		expect(button).toHaveClass("text-purple-400/80");
	});
});