39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { Button } from "./button";
|
|
|
|
describe("Button Component", () => {
|
|
it("renders correctly with children", () => {
|
|
render(<Button>Click me</Button>);
|
|
expect(
|
|
screen.getByRole("button", { name: /click me/i }),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("applies variant classes correctly", () => {
|
|
const { rerender } = render(<Button variant="destructive">Delete</Button>);
|
|
const button = screen.getByRole("button", { name: /delete/i });
|
|
expect(button).toHaveClass("bg-destructive");
|
|
|
|
rerender(<Button variant="outline">Cancel</Button>);
|
|
const outlineButton = screen.getByRole("button", { name: /cancel/i });
|
|
expect(outlineButton).toHaveClass("border-input");
|
|
});
|
|
|
|
it("calls onClick when clicked", async () => {
|
|
const onClick = vi.fn();
|
|
const user = userEvent.setup();
|
|
render(<Button onClick={onClick}>Click me</Button>);
|
|
|
|
await user.click(screen.getByRole("button", { name: /click me/i }));
|
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("is disabled when the disabled prop is passed", () => {
|
|
render(<Button disabled>Disabled Button</Button>);
|
|
const button = screen.getByRole("button", { name: /disabled button/i });
|
|
expect(button).toBeDisabled();
|
|
});
|
|
});
|