mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 21:53:57 -05:00
Added tests for buttons
This commit is contained in:
306
test/component/button/WarningButton.test.tsx
Normal file
306
test/component/button/WarningButton.test.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
import WarningButton from "$/component/button/WarningButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Warning Button";
|
||||
|
||||
|
||||
describe("WarningButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<WarningButton>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-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-yellow-500", "hover:bg-yellow-600", "active:bg-yellow-700");
|
||||
expect(button).toHaveClass("border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-danger-button-class";
|
||||
|
||||
render(<WarningButton className={customClass}>{buttonText}</WarningButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Danger Button Aria Label";
|
||||
|
||||
render(<WarningButton aria-label={ariaLabel}>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<WarningButton onClick={handleClick}>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
describe("WarningButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<WarningButton rounding="sm">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<WarningButton rounding="md">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<WarningButton rounding="lg">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<WarningButton rounding="full">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
describe("WarningButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<WarningButton size="xs" shape="square">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<WarningButton size="sm" shape="square">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<WarningButton size="md" shape="square">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<WarningButton size="lg" shape="square">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<WarningButton size="xl" shape="square">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<WarningButton size="xs" shape="rectangle">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<WarningButton size="sm" shape="rectangle">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<WarningButton size="md" shape="rectangle">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<WarningButton size="lg" shape="rectangle">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<WarningButton size="xl" shape="rectangle">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("WarningButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<WarningButton disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-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-yellow-300/80");
|
||||
expect(button).toHaveClass("border-yellow-300/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-danger-button-class";
|
||||
|
||||
render(<WarningButton className={customClass} disabled>{buttonText}</WarningButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Danger Button Aria Label";
|
||||
|
||||
render(<WarningButton aria-label={ariaLabel} disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<WarningButton onClick={handleClick} disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("WarningButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<WarningButton variant="standard">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-yellow-500", "hover:bg-yellow-600", "active:bg-yellow-700");
|
||||
expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<WarningButton variant="outline">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
|
||||
expect(button).toHaveClass("text-yellow-500", "hover:text-yellow-600", "active:text-yellow-700");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<WarningButton variant="outline-ghost">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-yellow-500", "active:bg-yellow-600");
|
||||
expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-500", "active:border-yellow-600");
|
||||
expect(button).toHaveClass("text-yellow-500", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<WarningButton variant="ghost">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-yellow-500", "active:bg-yellow-600");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-yellow-500", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<WarningButton variant="icon">{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-yellow-500", "hover:text-yellow-600", "active:text-yellow-700");
|
||||
});
|
||||
});
|
||||
|
||||
describe("WarningButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<WarningButton variant="standard" disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-yellow-300/80");
|
||||
expect(button).toHaveClass("border", "border-yellow-300/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<WarningButton variant="outline" disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-yellow-300/80");
|
||||
expect(button).toHaveClass("text-yellow-300/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<WarningButton variant="outline-ghost" disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-yellow-300/80");
|
||||
expect(button).toHaveClass("text-yellow-300/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<WarningButton variant="ghost" disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-yellow-300/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<WarningButton variant="icon" disabled>{buttonText}</WarningButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-warning-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-yellow-300/80");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user