BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-06 21:53:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added tests for buttons

Browse Source
This commit is contained in:
Mattrixwv
2025-11-17 23:08:37 -05:00
parent 7d9d0bdf73
commit 91c8169e97
22 changed files with 3342 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
test/component/button/Button.test.tsx Normal file
View 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();
});
});