149 lines
4.7 KiB
TypeScript
149 lines
4.7 KiB
TypeScript
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
|
import { describe, expect, it, vi, afterEach } from "vitest"
|
|
import { render, screen, cleanup, fireEvent } from "@testing-library/react"
|
|
import userEvent from "@testing-library/user-event"
|
|
|
|
import { ChipButton } from "./ChipButton"
|
|
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|
|
|
|
describe("ChipButton", () => {
|
|
describe("rendering", () => {
|
|
it("renders as a button element", () => {
|
|
render(<ChipButton>Click me</ChipButton>)
|
|
const button = screen.getByRole("button", { name: "Click me" })
|
|
expect(button).toBeTruthy()
|
|
expect(button.tagName).toBe("BUTTON")
|
|
})
|
|
|
|
it("renders children content", () => {
|
|
render(<ChipButton>Button Content</ChipButton>)
|
|
expect(screen.getByText("Button Content")).toBeTruthy()
|
|
})
|
|
|
|
it("renders with multiple children", () => {
|
|
render(
|
|
<ChipButton>
|
|
<span>Icon</span>
|
|
Label
|
|
</ChipButton>
|
|
)
|
|
expect(screen.getByText("Icon")).toBeTruthy()
|
|
expect(screen.getByText("Label")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("variants", () => {
|
|
it("renders Default variant", () => {
|
|
render(<ChipButton variant="Default">Default</ChipButton>)
|
|
expect(screen.getByRole("button", { name: "Default" })).toBeTruthy()
|
|
})
|
|
|
|
it("renders Outlined variant", () => {
|
|
render(<ChipButton variant="Outlined">Outlined</ChipButton>)
|
|
expect(screen.getByRole("button", { name: "Outlined" })).toBeTruthy()
|
|
})
|
|
|
|
it("renders FilterRounded variant", () => {
|
|
render(<ChipButton variant="FilterRounded">Filter</ChipButton>)
|
|
expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("selected state", () => {
|
|
it("renders with selected=false by default", () => {
|
|
render(<ChipButton>Not Selected</ChipButton>)
|
|
expect(screen.getByRole("button", { name: "Not Selected" })).toBeTruthy()
|
|
})
|
|
|
|
it("renders with selected=true", () => {
|
|
render(<ChipButton selected>Selected</ChipButton>)
|
|
expect(screen.getByRole("button", { name: "Selected" })).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("sizes", () => {
|
|
it("renders Medium size", () => {
|
|
render(<ChipButton size="Medium">Medium</ChipButton>)
|
|
expect(screen.getByRole("button", { name: "Medium" })).toBeTruthy()
|
|
})
|
|
|
|
it("renders Large size (default)", () => {
|
|
render(<ChipButton size="Large">Large</ChipButton>)
|
|
expect(screen.getByRole("button", { name: "Large" })).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("props", () => {
|
|
it("applies custom className", () => {
|
|
render(<ChipButton className="custom-class">Button</ChipButton>)
|
|
const button = screen.getByRole("button", { name: "Button" })
|
|
expect(button.className).toContain("custom-class")
|
|
})
|
|
|
|
it("can be disabled", () => {
|
|
render(<ChipButton isDisabled>Disabled</ChipButton>)
|
|
const button = screen.getByRole("button", { name: "Disabled" })
|
|
expect(button).toHaveProperty("disabled", true)
|
|
})
|
|
})
|
|
|
|
describe("interactions", () => {
|
|
it("calls onPress when clicked", () => {
|
|
const onPress = vi.fn()
|
|
render(<ChipButton onPress={onPress}>Click me</ChipButton>)
|
|
|
|
// React Aria Components Button uses onPress which listens to click events
|
|
fireEvent.click(screen.getByRole("button", { name: "Click me" }))
|
|
expect(onPress).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it("does not call onPress when disabled", () => {
|
|
const onPress = vi.fn()
|
|
render(
|
|
<ChipButton isDisabled onPress={onPress}>
|
|
Disabled
|
|
</ChipButton>
|
|
)
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Disabled" }))
|
|
expect(onPress).not.toHaveBeenCalled()
|
|
})
|
|
})
|
|
|
|
describe("keyboard navigation", () => {
|
|
it("is focusable via keyboard", async () => {
|
|
const user = userEvent.setup()
|
|
render(<ChipButton>Focusable</ChipButton>)
|
|
|
|
const button = screen.getByRole("button", { name: "Focusable" })
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(button)
|
|
})
|
|
|
|
it("can be activated with Enter key", async () => {
|
|
const onPress = vi.fn()
|
|
const user = userEvent.setup()
|
|
render(<ChipButton onPress={onPress}>Press Enter</ChipButton>)
|
|
|
|
screen.getByRole("button", { name: "Press Enter" })
|
|
await user.tab()
|
|
await user.keyboard("{Enter}")
|
|
expect(onPress).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it("can be activated with Space key", async () => {
|
|
const onPress = vi.fn()
|
|
const user = userEvent.setup()
|
|
render(<ChipButton onPress={onPress}>Press Space</ChipButton>)
|
|
|
|
screen.getByRole("button", { name: "Press Space" })
|
|
await user.tab()
|
|
await user.keyboard(" ")
|
|
expect(onPress).toHaveBeenCalledTimes(1)
|
|
})
|
|
})
|
|
})
|