Move LinkChips and add unit + a11y tests for chips components

2026-02-04 14:28:21 +01:00
parent 989b18527e
commit c62999879f
13 changed files with 955 additions and 0 deletions
@@ -0,0 +1,116 @@
+/* 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()
+    })
+  })
+})
@@ -0,0 +1,104 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import { describe, expect, it, afterEach } from "vitest"
+import { render, screen, cleanup } from "@testing-library/react"
+
+import { ChipStatic } from "./ChipStatic"
+
+afterEach(() => {
+  cleanup()
+})
+
+describe("ChipStatic", () => {
+  describe("rendering", () => {
+    it("renders as a span element", () => {
+      render(<ChipStatic>Static Chip</ChipStatic>)
+      const chip = screen.getByText("Static Chip")
+      expect(chip).toBeTruthy()
+      expect(chip.tagName).toBe("SPAN")
+    })
+
+    it("renders children content", () => {
+      render(<ChipStatic>Chip Content</ChipStatic>)
+      expect(screen.getByText("Chip Content")).toBeTruthy()
+    })
+
+    it("renders with multiple children", () => {
+      render(
+        <ChipStatic>
+          <span>Icon</span>
+          Label
+        </ChipStatic>
+      )
+      expect(screen.getByText("Icon")).toBeTruthy()
+      expect(screen.getByText("Label")).toBeTruthy()
+    })
+  })
+
+  describe("color variants", () => {
+    it("renders Neutral color (default)", () => {
+      render(<ChipStatic color="Neutral">Neutral</ChipStatic>)
+      expect(screen.getByText("Neutral")).toBeTruthy()
+    })
+
+    it("renders Subtle color", () => {
+      render(<ChipStatic color="Subtle">Subtle</ChipStatic>)
+      expect(screen.getByText("Subtle")).toBeTruthy()
+    })
+
+    it("renders Disabled color", () => {
+      render(<ChipStatic color="Disabled">Disabled</ChipStatic>)
+      expect(screen.getByText("Disabled")).toBeTruthy()
+    })
+  })
+
+  describe("sizes", () => {
+    it("renders xs size", () => {
+      render(<ChipStatic size="xs">Extra Small</ChipStatic>)
+      expect(screen.getByText("Extra Small")).toBeTruthy()
+    })
+
+    it("renders sm size (default)", () => {
+      render(<ChipStatic size="sm">Small</ChipStatic>)
+      expect(screen.getByText("Small")).toBeTruthy()
+    })
+
+    it("renders lg size", () => {
+      render(<ChipStatic size="lg">Large</ChipStatic>)
+      expect(screen.getByText("Large")).toBeTruthy()
+    })
+  })
+
+  describe("typography", () => {
+    it("uses uppercase typography by default", () => {
+      render(<ChipStatic>Default Case</ChipStatic>)
+      expect(screen.getByText("Default Case")).toBeTruthy()
+    })
+
+    it("uses lowercase typography when lowerCase is true", () => {
+      render(<ChipStatic lowerCase>Lower Case</ChipStatic>)
+      expect(screen.getByText("Lower Case")).toBeTruthy()
+    })
+  })
+
+  describe("props", () => {
+    it("applies custom className", () => {
+      render(<ChipStatic className="custom-class">Styled</ChipStatic>)
+      const chip = screen.getByText("Styled")
+      expect(chip.className).toContain("custom-class")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("handles empty string children", () => {
+      const emptyString = ""
+      const { container } = render(<ChipStatic>{emptyString}</ChipStatic>)
+      const span = container.querySelector("span")
+      expect(span).toBeTruthy()
+    })
+
+    it("handles numeric children", () => {
+      render(<ChipStatic>{42}</ChipStatic>)
+      expect(screen.getByText("42")).toBeTruthy()
+    })
+  })
+})