117 lines
3.6 KiB
TypeScript
117 lines
3.6 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 { ChipStatic } from "./ChipStatic"
|
|
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|
|
|
|
describe("ChipStatic accessibility", () => {
|
|
describe("semantic HTML", () => {
|
|
it("uses span element (non-interactive)", () => {
|
|
render(<ChipStatic>Static Label</ChipStatic>)
|
|
const chip = screen.getByText("Static Label")
|
|
expect(chip.tagName).toBe("SPAN")
|
|
})
|
|
|
|
it("is not a button or link", () => {
|
|
render(<ChipStatic>Not Interactive</ChipStatic>)
|
|
expect(screen.queryByRole("button")).toBeNull()
|
|
expect(screen.queryByRole("link")).toBeNull()
|
|
})
|
|
|
|
it("content is visible and readable", () => {
|
|
render(<ChipStatic>Readable Content</ChipStatic>)
|
|
expect(screen.getByText("Readable Content")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("non-interactive behavior", () => {
|
|
it("is not focusable by default", async () => {
|
|
const user = userEvent.setup()
|
|
render(
|
|
<div>
|
|
<ChipStatic>Static Chip</ChipStatic>
|
|
<button>Focusable Button</button>
|
|
</div>
|
|
)
|
|
|
|
await user.tab()
|
|
// Focus should skip the static chip and go directly to the button
|
|
expect(document.activeElement).toBe(
|
|
screen.getByRole("button", { name: "Focusable Button" })
|
|
)
|
|
})
|
|
|
|
it("does not receive focus when tabbing through page", async () => {
|
|
const user = userEvent.setup()
|
|
render(
|
|
<div>
|
|
<button>First</button>
|
|
<ChipStatic>Static</ChipStatic>
|
|
<button>Second</button>
|
|
</div>
|
|
)
|
|
|
|
const firstButton = screen.getByRole("button", { name: "First" })
|
|
const secondButton = screen.getByRole("button", { name: "Second" })
|
|
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(firstButton)
|
|
|
|
await user.tab()
|
|
expect(document.activeElement).toBe(secondButton)
|
|
})
|
|
})
|
|
|
|
describe("screen reader support", () => {
|
|
it("has visible text content", () => {
|
|
render(<ChipStatic>Screen Reader Text</ChipStatic>)
|
|
const chip = screen.getByText("Screen Reader Text")
|
|
expect(chip.textContent?.trim().length).toBeGreaterThan(0)
|
|
})
|
|
|
|
it("text content is accessible in the DOM", () => {
|
|
render(<ChipStatic>Status: Active</ChipStatic>)
|
|
expect(screen.getByText("Status: Active")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("color contrast considerations", () => {
|
|
it("Neutral color variant renders", () => {
|
|
render(<ChipStatic color="Neutral">Neutral</ChipStatic>)
|
|
expect(screen.getByText("Neutral")).toBeTruthy()
|
|
})
|
|
|
|
it("Subtle color variant renders", () => {
|
|
render(<ChipStatic color="Subtle">Subtle</ChipStatic>)
|
|
expect(screen.getByText("Subtle")).toBeTruthy()
|
|
})
|
|
|
|
it("Disabled color variant renders", () => {
|
|
render(<ChipStatic color="Disabled">Disabled</ChipStatic>)
|
|
expect(screen.getByText("Disabled")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("text sizing", () => {
|
|
it("xs size renders readable text", () => {
|
|
render(<ChipStatic size="xs">Extra Small</ChipStatic>)
|
|
expect(screen.getByText("Extra Small")).toBeTruthy()
|
|
})
|
|
|
|
it("sm size renders readable text", () => {
|
|
render(<ChipStatic size="sm">Small</ChipStatic>)
|
|
expect(screen.getByText("Small")).toBeTruthy()
|
|
})
|
|
|
|
it("lg size renders readable text", () => {
|
|
render(<ChipStatic size="lg">Large</ChipStatic>)
|
|
expect(screen.getByText("Large")).toBeTruthy()
|
|
})
|
|
})
|
|
})
|