33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import { render, screen, fireEvent } from "@testing-library/react"
|
|
import { describe, it, expect, vi } from "vitest"
|
|
import { Button } from "."
|
|
|
|
describe("Button", () => {
|
|
it("renders children in a button element", () => {
|
|
render(<Button>Click me</Button>)
|
|
const button = screen.getByRole("button", { name: "Click me" })
|
|
expect(button).toBeInTheDocument()
|
|
expect(button.tagName).toBe("BUTTON")
|
|
})
|
|
|
|
it("renders as a link when href is provided", () => {
|
|
render(<Button href="/about">About</Button>)
|
|
const link = screen.getByRole("link", { name: "About" })
|
|
expect(link).toBeInTheDocument()
|
|
expect(link).toHaveAttribute("href", "/about")
|
|
})
|
|
|
|
it("calls onClick with value when clicked", () => {
|
|
const onClick = vi.fn()
|
|
render(<Button value="test-value" onClick={onClick}>Click</Button>)
|
|
fireEvent.click(screen.getByRole("button", { name: "Click" }))
|
|
expect(onClick).toHaveBeenCalledOnce()
|
|
expect(onClick).toHaveBeenCalledWith("test-value", expect.anything())
|
|
})
|
|
|
|
it("applies disabled class when disabled is true", () => {
|
|
const { container } = render(<Button disabled>Disabled</Button>)
|
|
expect(container.firstElementChild!.className).toMatch(/disabled/)
|
|
})
|
|
})
|