87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
|
import { describe, expect, it, afterEach } from "vitest"
|
|
import { render, screen, cleanup } from "@testing-library/react"
|
|
import userEvent from "@testing-library/user-event"
|
|
|
|
import { ChipLink } from "./ChipLink"
|
|
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|
|
|
|
describe("ChipLink", () => {
|
|
describe("rendering", () => {
|
|
it("renders as a link element", () => {
|
|
render(<ChipLink href="/test">Test Link</ChipLink>)
|
|
const link = screen.getByRole("link", { name: "Test Link" })
|
|
expect(link).toBeTruthy()
|
|
expect(link.tagName).toBe("A")
|
|
})
|
|
|
|
it("renders children content", () => {
|
|
render(<ChipLink href="/test">Link Content</ChipLink>)
|
|
expect(screen.getByText("Link Content")).toBeTruthy()
|
|
})
|
|
|
|
it("applies correct href attribute", () => {
|
|
render(<ChipLink href="/destination">Go somewhere</ChipLink>)
|
|
const link = screen.getByRole("link", { name: "Go somewhere" })
|
|
expect(link.getAttribute("href")).toBe("/destination")
|
|
})
|
|
|
|
it("renders with multiple children", () => {
|
|
render(
|
|
<ChipLink href="/test">
|
|
<span>Icon</span>
|
|
Text
|
|
</ChipLink>
|
|
)
|
|
expect(screen.getByText("Icon")).toBeTruthy()
|
|
expect(screen.getByText("Text")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("props", () => {
|
|
it("applies custom className", () => {
|
|
render(
|
|
<ChipLink href="/test" className="custom-class">
|
|
Link
|
|
</ChipLink>
|
|
)
|
|
const link = screen.getByRole("link", { name: "Link" })
|
|
expect(link.className).toContain("custom-class")
|
|
})
|
|
|
|
it("supports target attribute", () => {
|
|
render(
|
|
<ChipLink href="/external" target="_blank">
|
|
External Link
|
|
</ChipLink>
|
|
)
|
|
const link = screen.getByRole("link", { name: "External Link" })
|
|
expect(link.getAttribute("target")).toBe("_blank")
|
|
})
|
|
|
|
it("supports rel attribute", () => {
|
|
render(
|
|
<ChipLink href="/external" rel="noopener noreferrer">
|
|
External Link
|
|
</ChipLink>
|
|
)
|
|
const link = screen.getByRole("link", { name: "External Link" })
|
|
expect(link.getAttribute("rel")).toBe("noopener noreferrer")
|
|
})
|
|
})
|
|
|
|
describe("keyboard navigation", () => {
|
|
it("is focusable via keyboard", async () => {
|
|
const user = userEvent.setup()
|
|
render(<ChipLink href="/test">Focusable Link</ChipLink>)
|
|
|
|
const link = screen.getByRole("link", { name: "Focusable Link" })
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(link)
|
|
})
|
|
})
|
|
})
|