86 lines
2.7 KiB
TypeScript
86 lines
2.7 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 accessibility", () => {
|
|
describe("semantic HTML", () => {
|
|
it("uses proper link element for navigation", () => {
|
|
render(<ChipLink href="/test">Test Link</ChipLink>)
|
|
const link = screen.getByRole("link")
|
|
expect(link.tagName).toBe("A")
|
|
})
|
|
|
|
it("has accessible link text", () => {
|
|
render(<ChipLink href="/hotels">View Hotels</ChipLink>)
|
|
expect(screen.getByRole("link", { name: "View Hotels" })).toBeTruthy()
|
|
})
|
|
|
|
it("link has descriptive href attribute", () => {
|
|
render(<ChipLink href="/hotels/stockholm">Stockholm Hotels</ChipLink>)
|
|
const link = screen.getByRole("link", { name: "Stockholm Hotels" })
|
|
expect(link.getAttribute("href")).toBe("/hotels/stockholm")
|
|
})
|
|
})
|
|
|
|
describe("keyboard navigation", () => {
|
|
it("link is keyboard accessible", async () => {
|
|
const user = userEvent.setup()
|
|
render(<ChipLink href="/test">Accessible Link</ChipLink>)
|
|
|
|
const link = screen.getByRole("link")
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(link)
|
|
})
|
|
|
|
it("multiple links maintain logical focus order", async () => {
|
|
const user = userEvent.setup()
|
|
render(
|
|
<div>
|
|
<ChipLink href="/first">First Link</ChipLink>
|
|
<ChipLink href="/second">Second Link</ChipLink>
|
|
<ChipLink href="/third">Third Link</ChipLink>
|
|
</div>
|
|
)
|
|
|
|
const firstLink = screen.getByRole("link", { name: "First Link" })
|
|
const secondLink = screen.getByRole("link", { name: "Second Link" })
|
|
const thirdLink = screen.getByRole("link", { name: "Third Link" })
|
|
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(firstLink)
|
|
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(secondLink)
|
|
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(thirdLink)
|
|
})
|
|
})
|
|
|
|
describe("screen reader support", () => {
|
|
it("link has accessible name from content", () => {
|
|
render(<ChipLink href="/test">Descriptive Link Text</ChipLink>)
|
|
const link = screen.getByRole("link")
|
|
expect(link.textContent?.trim().length).toBeGreaterThan(0)
|
|
})
|
|
|
|
it("link with icon and text has accessible name", () => {
|
|
render(
|
|
<ChipLink href="/test">
|
|
<span aria-hidden="true">→</span>
|
|
Next Page
|
|
</ChipLink>
|
|
)
|
|
const link = screen.getByRole("link")
|
|
expect(link.textContent).toContain("Next Page")
|
|
})
|
|
})
|
|
})
|