File size: 1,666 Bytes
6a7089a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi } from "vitest";
import Button from "./Button";
describe("Button", () => {
it("renders children", () => {
render(<Button>Click me</Button>);
expect(
screen.getByRole("button", { name: "Click me" }),
).toBeInTheDocument();
});
it("handles click events", async () => {
const handleClick = vi.fn();
render(<Button onClick={handleClick}>Click me</Button>);
await userEvent.click(screen.getByRole("button"));
expect(handleClick).toHaveBeenCalledTimes(1);
});
it("applies variant styles", () => {
render(<Button variant="primary">Primary</Button>);
const button = screen.getByRole("button");
expect(button).toHaveClass("bg-primary");
});
it("applies size styles", () => {
render(<Button size="sm">Small</Button>);
const button = screen.getByRole("button");
expect(button).toHaveClass("text-xs");
});
it("can be disabled", () => {
render(<Button disabled>Disabled</Button>);
expect(screen.getByRole("button")).toBeDisabled();
});
it("shows spinner and disables when loading", () => {
render(<Button loading>Loading</Button>);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
expect(button.querySelector("svg")).toBeInTheDocument();
});
it("shows spinner alongside text when loading", () => {
render(<Button loading>Submit</Button>);
expect(screen.getByText("Submit")).toBeInTheDocument();
expect(screen.getByRole("button").querySelector("svg")).toBeInTheDocument();
});
});
|