mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 13:43:59 -05:00
Added tests for buttons
This commit is contained in:
@@ -16,6 +16,7 @@ export default function Button(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<button
|
||||
data-testid="mattrixwv-button"
|
||||
{...buttonProps}
|
||||
disabled={disabled}
|
||||
className={clsx(
|
||||
@@ -23,7 +24,7 @@ export default function Button(props: ButtonProps){
|
||||
//Rounding
|
||||
{
|
||||
"rounded-sm": rounding === "sm",
|
||||
"rounded": rounding === "md",
|
||||
"rounded-md": rounding === "md",
|
||||
"rounded-lg": rounding === "lg",
|
||||
"rounded-full": rounding === "full"
|
||||
},
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function DangerButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-danger-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function DarkButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-dark-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function InfoButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-info-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function LightButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-light-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function MoltenButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-molten-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function PrimaryButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-primary-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function SecondaryButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-secondary-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function SuccessButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-success-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function TertiaryButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-tertiary-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function WarningButton(props: ButtonProps){
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-testid="mattrixwv-warning-button"
|
||||
{...props}
|
||||
className={clsx(
|
||||
"transition duration-300",
|
||||
|
||||
236
test/component/button/Button.test.tsx
Normal file
236
test/component/button/Button.test.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import Button from "$/component/button/Button";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Test Button";
|
||||
|
||||
describe("Button Component", () => {
|
||||
it("Render with defaults", () => {
|
||||
render(<Button>{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-button-class";
|
||||
|
||||
render(<Button className={customClass}>{buttonText}</Button>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Custom Aria Label";
|
||||
render(<Button aria-label={ariaLabel}>{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<Button onClick={handleClick}>{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
describe("Button Rounding Variants", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<Button rounding="sm">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<Button rounding="md">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<Button rounding="lg">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<Button rounding="full">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
describe("Button Size and Shape Variants", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<Button size="xs" shape="square">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<Button size="sm" shape="square">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<Button size="md" shape="square">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<Button size="lg" shape="square">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<Button size="xl" shape="square">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<Button size="xs" shape="rectangle">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<Button size="sm" shape="rectangle">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<Button size="md" shape="rectangle">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<Button size="lg" shape="rectangle">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<Button size="xl" shape="rectangle">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
describe("Button Variant Types", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<Button variant="standard">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("border");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<Button variant="outline">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("border");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<Button variant="outline-ghost">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("border");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<Button variant="ghost">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("border-none");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<Button variant="icon">{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("border-none");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Button Component Disabled", () => {
|
||||
it("Render with defaults", () => {
|
||||
render(<Button disabled={true}>{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-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).not.toHaveClass("cursor-pointer");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-button-class";
|
||||
|
||||
render(<Button className={customClass} disabled={true}>{buttonText}</Button>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Custom Aria Label";
|
||||
render(<Button aria-label={ariaLabel} disabled={true}>{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<Button onClick={handleClick} disabled={true}>{buttonText}</Button>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
306
test/component/button/DangerButton.test.tsx
Normal file
306
test/component/button/DangerButton.test.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
import DangerButton from "$/component/button/DangerButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Danger Button";
|
||||
|
||||
|
||||
describe("DangerButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<DangerButton>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-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-red-600", "hover:bg-red-700", "active:bg-red-800");
|
||||
expect(button).toHaveClass("border-red-600", "hover:border-red-700", "active:border-red-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-danger-button-class";
|
||||
|
||||
render(<DangerButton className={customClass}>{buttonText}</DangerButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Danger Button Aria Label";
|
||||
|
||||
render(<DangerButton aria-label={ariaLabel}>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<DangerButton onClick={handleClick}>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
describe("DangerButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<DangerButton rounding="sm">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<DangerButton rounding="md">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<DangerButton rounding="lg">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<DangerButton rounding="full">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
describe("DangerButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<DangerButton size="xs" shape="square">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<DangerButton size="sm" shape="square">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<DangerButton size="md" shape="square">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<DangerButton size="lg" shape="square">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<DangerButton size="xl" shape="square">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<DangerButton size="xs" shape="rectangle">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<DangerButton size="sm" shape="rectangle">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<DangerButton size="md" shape="rectangle">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<DangerButton size="lg" shape="rectangle">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<DangerButton size="xl" shape="rectangle">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("DangerButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<DangerButton disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-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-red-400/80");
|
||||
expect(button).toHaveClass("border-red-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-danger-button-class";
|
||||
|
||||
render(<DangerButton className={customClass} disabled>{buttonText}</DangerButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Danger Button Aria Label";
|
||||
|
||||
render(<DangerButton aria-label={ariaLabel} disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<DangerButton onClick={handleClick} disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("DangerButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<DangerButton variant="standard">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-red-600", "hover:bg-red-700", "active:bg-red-800");
|
||||
expect(button).toHaveClass("border", "border-red-600", "hover:border-red-700", "active:border-red-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<DangerButton variant="outline">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-red-600", "hover:border-red-700", "active:border-red-800");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-red-700", "active:text-red-800");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<DangerButton variant="outline-ghost">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-red-600", "active:bg-red-700");
|
||||
expect(button).toHaveClass("border", "border-red-600", "hover:border-red-600", "active:border-red-700");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<DangerButton variant="ghost">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-red-600", "active:bg-red-700");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<DangerButton variant="icon">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-red-700", "active:text-red-800");
|
||||
});
|
||||
});
|
||||
|
||||
describe("DangerButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<DangerButton variant="standard" disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-red-400/80");
|
||||
expect(button).toHaveClass("border", "border-red-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<DangerButton variant="outline" disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-red-400/80");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<DangerButton variant="outline-ghost" disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-red-400/80");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<DangerButton variant="ghost" disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<DangerButton variant="icon" disabled>{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
});
|
||||
});
|
||||
311
test/component/button/DarkButton.test.tsx
Normal file
311
test/component/button/DarkButton.test.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import DarkButton from "$/component/button/DarkButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Dark Button";
|
||||
|
||||
|
||||
describe("DarkButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<DarkButton>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-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-black", "hover:bg-neutral-700", "active:bg-neutral-600");
|
||||
expect(button).toHaveClass("border-black", "hover:border-neutral-700", "active:border-neutral-600");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-dark-button-class";
|
||||
|
||||
render(<DarkButton className={customClass}>{buttonText}</DarkButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Dark Button Aria Label";
|
||||
|
||||
render(<DarkButton aria-label={ariaLabel}>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<DarkButton onClick={handleClick}>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe("DarkButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<DarkButton rounding="sm">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<DarkButton rounding="md">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<DarkButton rounding="lg">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<DarkButton rounding="full">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
|
||||
describe("DarkButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<DarkButton size="xs" shape="square">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<DarkButton size="sm" shape="square">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<DarkButton size="md" shape="square">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<DarkButton size="lg" shape="square">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<DarkButton size="xl" shape="square">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<DarkButton size="xs" shape="rectangle">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<DarkButton size="sm" shape="rectangle">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<DarkButton size="md" shape="rectangle">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<DarkButton size="lg" shape="rectangle">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<DarkButton size="xl" shape="rectangle">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("DarkButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<DarkButton disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-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-neutral-700/80");
|
||||
expect(button).toHaveClass("border-neutral-700/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-dark-button-class";
|
||||
|
||||
render(<DarkButton className={customClass} disabled>{buttonText}</DarkButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Dark Button Aria Label";
|
||||
|
||||
render(<DarkButton aria-label={ariaLabel} disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<DarkButton onClick={handleClick} disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("DarkButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<DarkButton variant="standard">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-black", "hover:bg-neutral-700", "active:bg-neutral-600");
|
||||
expect(button).toHaveClass("border", "border-black", "hover:border-neutral-700", "active:border-neutral-600");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<DarkButton variant="outline">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-black", "hover:border-neutral-700", "active:border-neutral-600");
|
||||
expect(button).toHaveClass("text-black", "hover:text-neutral-700", "active:text-neutral-600");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<DarkButton variant="outline-ghost">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-black", "active:bg-neutral-700");
|
||||
expect(button).toHaveClass("border", "border-black", "hover:border-black", "active:border-neutral-700");
|
||||
expect(button).toHaveClass("text-black", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<DarkButton variant="ghost">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-black", "active:bg-neutral-700");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-black", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<DarkButton variant="icon">{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-black", "hover:text-neutral-700", "active:text-neutral-600");
|
||||
});
|
||||
});
|
||||
|
||||
describe("DarkButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<DarkButton variant="standard" disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-neutral-700/80");
|
||||
expect(button).toHaveClass("border", "border-neutral-700/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<DarkButton variant="outline" disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-700/80");
|
||||
expect(button).toHaveClass("text-neutral-700/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<DarkButton variant="outline-ghost" disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-700/80");
|
||||
expect(button).toHaveClass("text-neutral-700/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<DarkButton variant="ghost" disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-700/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<DarkButton variant="icon" disabled>{buttonText}</DarkButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-dark-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-700/80");
|
||||
});
|
||||
});
|
||||
311
test/component/button/InfoButton.test.tsx
Normal file
311
test/component/button/InfoButton.test.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import InfoButton from "$/component/button/InfoButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Info Button";
|
||||
|
||||
|
||||
describe("InfoButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<InfoButton>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-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-cyan-500", "hover:bg-cyan-600", "active:bg-cyan-700");
|
||||
expect(button).toHaveClass("border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-info-button-class";
|
||||
|
||||
render(<InfoButton className={customClass}>{buttonText}</InfoButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Info Button Aria Label";
|
||||
|
||||
render(<InfoButton aria-label={ariaLabel}>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<InfoButton onClick={handleClick}>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe("InfoButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<InfoButton rounding="sm">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<InfoButton rounding="md">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<InfoButton rounding="lg">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<InfoButton rounding="full">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
|
||||
describe("InfoButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<InfoButton size="xs" shape="square">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<InfoButton size="sm" shape="square">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<InfoButton size="md" shape="square">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<InfoButton size="lg" shape="square">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<InfoButton size="xl" shape="square">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<InfoButton size="xs" shape="rectangle">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<InfoButton size="sm" shape="rectangle">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<InfoButton size="md" shape="rectangle">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<InfoButton size="lg" shape="rectangle">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<InfoButton size="xl" shape="rectangle">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("InfoButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<InfoButton disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-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-sky-300/80");
|
||||
expect(button).toHaveClass("border-sky-300/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-info-button-class";
|
||||
|
||||
render(<InfoButton className={customClass} disabled>{buttonText}</InfoButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Info Button Aria Label";
|
||||
|
||||
render(<InfoButton aria-label={ariaLabel} disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<InfoButton onClick={handleClick} disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("InfoButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<InfoButton variant="standard">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-cyan-500", "hover:bg-cyan-600", "active:bg-cyan-700");
|
||||
expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<InfoButton variant="outline">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-cyan-600", "active:text-cyan-700");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<InfoButton variant="outline-ghost">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-cyan-500", "active:bg-cyan-600");
|
||||
expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-500", "active:border-cyan-600");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<InfoButton variant="ghost">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-cyan-500", "active:bg-cyan-600");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<InfoButton variant="icon">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-cyan-600", "active:text-cyan-700");
|
||||
});
|
||||
});
|
||||
|
||||
describe("InfoButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<InfoButton variant="standard" disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-sky-300/80");
|
||||
expect(button).toHaveClass("border", "border-sky-300/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<InfoButton variant="outline" disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-sky-300/80");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<InfoButton variant="outline-ghost" disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-sky-300/80");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<InfoButton variant="ghost" disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<InfoButton variant="icon" disabled>{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
});
|
||||
});
|
||||
311
test/component/button/LightButton.test.tsx
Normal file
311
test/component/button/LightButton.test.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import LightButton from "$/component/button/LightButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Light Button";
|
||||
|
||||
|
||||
describe("LightButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<LightButton>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-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-white", "hover:bg-neutral-300", "active:bg-neutral-400");
|
||||
expect(button).toHaveClass("border-white", "hover:border-neutral-300", "active:border-neutral-400");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-light-button-class";
|
||||
|
||||
render(<LightButton className={customClass}>{buttonText}</LightButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Light Button Aria Label";
|
||||
|
||||
render(<LightButton aria-label={ariaLabel}>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<LightButton onClick={handleClick}>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe("LightButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<LightButton rounding="sm">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<LightButton rounding="md">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<LightButton rounding="lg">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<LightButton rounding="full">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
|
||||
describe("LightButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<LightButton size="xs" shape="square">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<LightButton size="sm" shape="square">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<LightButton size="md" shape="square">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<LightButton size="lg" shape="square">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<LightButton size="xl" shape="square">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<LightButton size="xs" shape="rectangle">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<LightButton size="sm" shape="rectangle">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<LightButton size="md" shape="rectangle">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<LightButton size="lg" shape="rectangle">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<LightButton size="xl" shape="rectangle">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("LightButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<LightButton disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-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-neutral-400/80");
|
||||
expect(button).toHaveClass("border-neutral-400/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-light-button-class";
|
||||
|
||||
render(<LightButton className={customClass} disabled>{buttonText}</LightButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Light Button Aria Label";
|
||||
|
||||
render(<LightButton aria-label={ariaLabel} disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<LightButton onClick={handleClick} disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("LightButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<LightButton variant="standard">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-white", "hover:bg-neutral-300", "active:bg-neutral-400");
|
||||
expect(button).toHaveClass("border", "border-white", "hover:border-neutral-300", "active:border-neutral-400");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<LightButton variant="outline">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-white", "hover:border-neutral-300", "active:border-neutral-400");
|
||||
expect(button).toHaveClass("text-white", "hover:text-neutral-300", "active:text-neutral-400");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<LightButton variant="outline-ghost">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-white", "active:bg-neutral-300");
|
||||
expect(button).toHaveClass("border", "border-white", "hover:border-white", "active:border-neutral-300");
|
||||
expect(button).toHaveClass("text-white", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<LightButton variant="ghost">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-white", "active:bg-neutral-300");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-white", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<LightButton variant="icon">{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-white", "hover:text-neutral-300", "active:text-neutral-400");
|
||||
});
|
||||
});
|
||||
|
||||
describe("LightButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<LightButton variant="standard" disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-neutral-400/80");
|
||||
expect(button).toHaveClass("border", "border-neutral-400/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<LightButton variant="outline" disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-400/80");
|
||||
expect(button).toHaveClass("text-neutral-400/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<LightButton variant="outline-ghost" disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-400/80");
|
||||
expect(button).toHaveClass("text-neutral-400/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<LightButton variant="ghost" disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-400/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<LightButton variant="icon" disabled>{buttonText}</LightButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-light-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-400/80");
|
||||
});
|
||||
});
|
||||
311
test/component/button/MoltenButton.test.tsx
Normal file
311
test/component/button/MoltenButton.test.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import MoltenButton from "$/component/button/MoltenButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Molten Button";
|
||||
|
||||
|
||||
describe("MoltenButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<MoltenButton>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-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-orange-600", "hover:bg-orange-700", "active:bg-orange-800");
|
||||
expect(button).toHaveClass("border-orange-600", "hover:border-orange-700", "active:border-orange-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-molten-button-class";
|
||||
|
||||
render(<MoltenButton className={customClass}>{buttonText}</MoltenButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Molten Button Aria Label";
|
||||
|
||||
render(<MoltenButton aria-label={ariaLabel}>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<MoltenButton onClick={handleClick}>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe("MoltenButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<MoltenButton rounding="sm">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<MoltenButton rounding="md">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<MoltenButton rounding="lg">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<MoltenButton rounding="full">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
|
||||
describe("MoltenButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<MoltenButton size="xs" shape="square">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<MoltenButton size="sm" shape="square">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<MoltenButton size="md" shape="square">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<MoltenButton size="lg" shape="square">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<MoltenButton size="xl" shape="square">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<MoltenButton size="xs" shape="rectangle">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<MoltenButton size="sm" shape="rectangle">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<MoltenButton size="md" shape="rectangle">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<MoltenButton size="lg" shape="rectangle">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<MoltenButton size="xl" shape="rectangle">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("MoltenButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<MoltenButton disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-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-orange-400/80");
|
||||
expect(button).toHaveClass("border-orange-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-molten-button-class";
|
||||
|
||||
render(<MoltenButton className={customClass} disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Molten Button Aria Label";
|
||||
|
||||
render(<MoltenButton aria-label={ariaLabel} disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<MoltenButton onClick={handleClick} disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("MoltenButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<MoltenButton variant="standard">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-orange-600", "hover:bg-orange-700", "active:bg-orange-800");
|
||||
expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-700", "active:border-orange-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<MoltenButton variant="outline">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-700", "active:border-orange-800");
|
||||
expect(button).toHaveClass("text-orange-600", "hover:text-orange-700", "active:text-orange-800");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<MoltenButton variant="outline-ghost">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-orange-600", "active:bg-orange-700");
|
||||
expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-600", "active:border-orange-700");
|
||||
expect(button).toHaveClass("text-orange-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<MoltenButton variant="ghost">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-orange-600", "active:bg-orange-700");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-orange-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<MoltenButton variant="icon">{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-orange-600", "hover:text-orange-700", "active:text-orange-800");
|
||||
});
|
||||
});
|
||||
|
||||
describe("MoltenButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<MoltenButton variant="standard" disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-orange-400/80");
|
||||
expect(button).toHaveClass("border", "border-orange-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<MoltenButton variant="outline" disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-orange-400/80");
|
||||
expect(button).toHaveClass("text-orange-400/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<MoltenButton variant="outline-ghost" disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-orange-400/80");
|
||||
expect(button).toHaveClass("text-orange-400/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<MoltenButton variant="ghost" disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-orange-400/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<MoltenButton variant="icon" disabled>{buttonText}</MoltenButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-molten-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-orange-400/80");
|
||||
});
|
||||
});
|
||||
311
test/component/button/PrimaryButton.test.tsx
Normal file
311
test/component/button/PrimaryButton.test.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import PrimaryButton from "$/component/button/PrimaryButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Primary Button";
|
||||
|
||||
|
||||
describe("PrimaryButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<PrimaryButton>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-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-blue-600", "hover:bg-blue-700", "active:bg-blue-800");
|
||||
expect(button).toHaveClass("border-blue-600", "hover:border-blue-700", "active:border-blue-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-primary-button-class";
|
||||
|
||||
render(<PrimaryButton className={customClass}>{buttonText}</PrimaryButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Primary Button Aria Label";
|
||||
|
||||
render(<PrimaryButton aria-label={ariaLabel}>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<PrimaryButton onClick={handleClick}>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe("PrimaryButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<PrimaryButton rounding="sm">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<PrimaryButton rounding="md">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<PrimaryButton rounding="lg">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<PrimaryButton rounding="full">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
|
||||
describe("PrimaryButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<PrimaryButton size="xs" shape="square">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<PrimaryButton size="sm" shape="square">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<PrimaryButton size="md" shape="square">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<PrimaryButton size="lg" shape="square">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<PrimaryButton size="xl" shape="square">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<PrimaryButton size="xs" shape="rectangle">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<PrimaryButton size="sm" shape="rectangle">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<PrimaryButton size="md" shape="rectangle">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<PrimaryButton size="lg" shape="rectangle">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<PrimaryButton size="xl" shape="rectangle">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("PrimaryButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<PrimaryButton disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-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-blue-400/80");
|
||||
expect(button).toHaveClass("border-blue-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-primary-button-class";
|
||||
|
||||
render(<PrimaryButton className={customClass} disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
//Check button requirements
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Primary Button Aria Label";
|
||||
|
||||
render(<PrimaryButton aria-label={ariaLabel} disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<PrimaryButton onClick={handleClick} disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("PrimaryButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<PrimaryButton variant="standard">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-blue-600", "hover:bg-blue-700", "active:bg-blue-800");
|
||||
expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-700", "active:border-blue-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<PrimaryButton variant="outline">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-700", "active:border-blue-800");
|
||||
expect(button).toHaveClass("text-blue-600", "hover:text-blue-700", "active:text-blue-800");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<PrimaryButton variant="outline-ghost">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-blue-600", "active:bg-blue-700");
|
||||
expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-600", "active:border-blue-700");
|
||||
expect(button).toHaveClass("text-blue-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<PrimaryButton variant="ghost">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-blue-600", "active:bg-blue-700");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-blue-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<PrimaryButton variant="icon">{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-blue-600", "hover:text-blue-700", "active:text-blue-800");
|
||||
});
|
||||
});
|
||||
|
||||
describe("PrimaryButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<PrimaryButton variant="standard" disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-blue-400/80");
|
||||
expect(button).toHaveClass("border", "border-blue-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<PrimaryButton variant="outline" disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-blue-400/80");
|
||||
expect(button).toHaveClass("text-blue-400/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<PrimaryButton variant="outline-ghost" disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-blue-400/80");
|
||||
expect(button).toHaveClass("text-blue-400/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<PrimaryButton variant="ghost" disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-blue-400/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<PrimaryButton variant="icon" disabled>{buttonText}</PrimaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-primary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-blue-400/80");
|
||||
});
|
||||
});
|
||||
309
test/component/button/SecondaryButton.test.tsx
Normal file
309
test/component/button/SecondaryButton.test.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import SecondaryButton from "$/component/button/SecondaryButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Secondary Button";
|
||||
|
||||
|
||||
describe("SecondaryButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<SecondaryButton>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-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-neutral-500", "hover:bg-neutral-600", "active:bg-neutral-700");
|
||||
expect(button).toHaveClass("border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-secondary-button-class";
|
||||
|
||||
render(<SecondaryButton className={customClass}>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Secondary Button Aria Label";
|
||||
|
||||
render(<SecondaryButton aria-label={ariaLabel}>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<SecondaryButton onClick={handleClick}>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe("SecondaryButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<SecondaryButton rounding="sm">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<SecondaryButton rounding="md">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<SecondaryButton rounding="lg">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<SecondaryButton rounding="full">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
|
||||
describe("SecondaryButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<SecondaryButton size="xs" shape="square">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<SecondaryButton size="sm" shape="square">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<SecondaryButton size="md" shape="square">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<SecondaryButton size="lg" shape="square">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<SecondaryButton size="xl" shape="square">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<SecondaryButton size="xs" shape="rectangle">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<SecondaryButton size="sm" shape="rectangle">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<SecondaryButton size="md" shape="rectangle">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<SecondaryButton size="lg" shape="rectangle">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<SecondaryButton size="xl" shape="rectangle">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("SecondaryButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<SecondaryButton disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-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-neutral-300/80");
|
||||
expect(button).toHaveClass("border-neutral-300/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-secondary-button-class";
|
||||
|
||||
render(<SecondaryButton className={customClass} disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Secondary Button Aria Label";
|
||||
|
||||
render(<SecondaryButton aria-label={ariaLabel} disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<SecondaryButton onClick={handleClick} disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("SecondaryButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<SecondaryButton variant="standard">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-neutral-500", "hover:bg-neutral-600", "active:bg-neutral-700");
|
||||
expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<SecondaryButton variant="outline">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-neutral-600", "active:text-neutral-700");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<SecondaryButton variant="outline-ghost">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-neutral-500", "active:bg-neutral-600");
|
||||
expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-500", "active:border-neutral-600");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<SecondaryButton variant="ghost">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-neutral-500", "active:bg-neutral-600");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<SecondaryButton variant="icon">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-neutral-600", "active:text-neutral-700");
|
||||
});
|
||||
});
|
||||
|
||||
describe("SecondaryButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<SecondaryButton variant="standard" disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-neutral-300/80");
|
||||
expect(button).toHaveClass("border", "border-neutral-300/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<SecondaryButton variant="outline" disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-300/80");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<SecondaryButton variant="outline-ghost" disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-300/80");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<SecondaryButton variant="ghost" disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<SecondaryButton variant="icon" disabled>{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
});
|
||||
});
|
||||
309
test/component/button/SuccessButton.test.tsx
Normal file
309
test/component/button/SuccessButton.test.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import SuccessButton from "$/component/button/SuccessButton";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
const buttonText = "Success Button";
|
||||
|
||||
|
||||
describe("SuccessButton Component", () => {
|
||||
it("Renders with defaults", () => {
|
||||
render(<SuccessButton>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-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-green-600", "hover:bg-green-700", "active:bg-green-800");
|
||||
expect(button).toHaveClass("border-green-600", "hover:border-green-700", "active:border-green-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
it("Renders with custom className", () => {
|
||||
const customClass = "custom-success-button-class";
|
||||
|
||||
render(<SuccessButton className={customClass}>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Success Button Aria Label";
|
||||
|
||||
render(<SuccessButton aria-label={ariaLabel}>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
|
||||
it("Renders with onClick handler", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<SuccessButton onClick={handleClick}>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe("SuccessButton Component Rounding", () => {
|
||||
it("Renders with small rounding", () => {
|
||||
render(<SuccessButton rounding="sm">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<SuccessButton rounding="md">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<SuccessButton rounding="lg">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with full rounding", () => {
|
||||
render(<SuccessButton rounding="full">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("rounded-full");
|
||||
});
|
||||
});
|
||||
|
||||
describe("SuccessButton Component Size and Shape", () => {
|
||||
it("Renders with xs square", () => {
|
||||
render(<SuccessButton size="xs" shape="square">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-0");
|
||||
});
|
||||
it("Renders with sm square", () => {
|
||||
render(<SuccessButton size="sm" shape="square">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-1");
|
||||
});
|
||||
it("Renders with md square", () => {
|
||||
render(<SuccessButton size="md" shape="square">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-2");
|
||||
});
|
||||
it("Renders with lg square", () => {
|
||||
render(<SuccessButton size="lg" shape="square">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-3");
|
||||
});
|
||||
it("Renders with xl square", () => {
|
||||
render(<SuccessButton size="xl" shape="square">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("p-4");
|
||||
});
|
||||
it("Renders with xs rectangle", () => {
|
||||
render(<SuccessButton size="xs" shape="rectangle">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-1", "py-0");
|
||||
});
|
||||
it("Renders with sm rectangle", () => {
|
||||
render(<SuccessButton size="sm" shape="rectangle">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-2", "py-1");
|
||||
});
|
||||
it("Renders with md rectangle", () => {
|
||||
render(<SuccessButton size="md" shape="rectangle">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-4", "py-2");
|
||||
});
|
||||
it("Renders with lg rectangle", () => {
|
||||
render(<SuccessButton size="lg" shape="rectangle">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-6", "py-3");
|
||||
});
|
||||
it("Renders with xl rectangle", () => {
|
||||
render(<SuccessButton size="xl" shape="rectangle">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("px-8", "py-4");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("SuccessButton Component Disabled", () => {
|
||||
it("Render with defaults when disabled", () => {
|
||||
render(<SuccessButton disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-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-green-400/80");
|
||||
expect(button).toHaveClass("border-green-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
const customClass = "custom-success-button-class";
|
||||
|
||||
render(<SuccessButton className={customClass} disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass(customClass);
|
||||
});
|
||||
it("Renders with aria-label when disabled", () => {
|
||||
const ariaLabel = "Success Button Aria Label";
|
||||
|
||||
render(<SuccessButton aria-label={ariaLabel} disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
it("Does not trigger onClick handler when disabled", async () => {
|
||||
const handleClick = vi.fn();
|
||||
|
||||
render(<SuccessButton onClick={handleClick} disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(button);
|
||||
expect(handleClick).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("SuccessButton Component Variants", () => {
|
||||
it("Renders with standard variant", () => {
|
||||
render(<SuccessButton variant="standard">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-green-600", "hover:bg-green-700", "active:bg-green-800");
|
||||
expect(button).toHaveClass("border", "border-green-600", "hover:border-green-700", "active:border-green-800");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
render(<SuccessButton variant="outline">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-green-600", "hover:border-green-700", "active:border-green-800");
|
||||
expect(button).toHaveClass("text-green-600", "hover:text-green-700", "active:text-green-800");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<SuccessButton variant="outline-ghost">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-green-600", "active:bg-green-700");
|
||||
expect(button).toHaveClass("border", "border-green-600", "hover:border-green-600", "active:border-green-700");
|
||||
expect(button).toHaveClass("text-green-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<SuccessButton variant="ghost">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-green-600", "active:bg-green-700");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-green-600", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<SuccessButton variant="icon">{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-green-600", "hover:text-green-700", "active:text-green-800");
|
||||
});
|
||||
});
|
||||
|
||||
describe("SuccessButton Component Variants Disabled", () => {
|
||||
it("Renders with standard variant when disabled", () => {
|
||||
render(<SuccessButton variant="standard" disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-green-400/80");
|
||||
expect(button).toHaveClass("border", "border-green-400/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
render(<SuccessButton variant="outline" disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-green-400/80");
|
||||
expect(button).toHaveClass("text-green-400/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<SuccessButton variant="outline-ghost" disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-green-400/80");
|
||||
expect(button).toHaveClass("text-green-400/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<SuccessButton variant="ghost" disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-green-400/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<SuccessButton variant="icon" disabled>{buttonText}</SuccessButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-success-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-green-400/80");
|
||||
});
|
||||
});
|
||||
309
test/component/button/TertiaryButton.test.tsx
Normal file
309
test/component/button/TertiaryButton.test.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
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");
|
||||
});
|
||||
});
|
||||
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