@etus/ui 0.1.0

package/src/components/forms/Select/Select.test.tsx

@@ -0,0 +1,1136 @@
+// Select/Select.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { beforeAll, describe, expect, it, vi } from "vitest"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./Select"
+
+expect.extend(toHaveNoViolations)
+
+// Mock pointer capture methods for JSDOM (Radix Select uses them)
+beforeAll(() => {
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.setPointerCapture = vi.fn()
+  Element.prototype.releasePointerCapture = vi.fn()
+})
+
+// Helper to open the select using keyboard (works in JSDOM)
+async function openSelect(user: ReturnType<typeof userEvent.setup>) {
+  const trigger = screen.getByRole("combobox")
+  trigger.focus()
+  await user.keyboard("{Enter}")
+}
+
+// Helper component for testing
+function TestSelect({
+  placeholder = "Select an option",
+  disabled = false,
+  required = false,
+  defaultValue,
+  value,
+  onValueChange,
+  onOpenChange,
+  size,
+  variant,
+}: {
+  defaultValue?: string
+  disabled?: boolean
+  onOpenChange?: (open: boolean) => void
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  required?: boolean
+  size?: "lg" | "md" | "sm"
+  value?: string
+  variant?: "default" | "filled" | "flushed"
+}) {
+  return (
+    <Select
+      defaultValue={defaultValue}
+      disabled={disabled}
+      required={required}
+      value={value}
+      onOpenChange={onOpenChange}
+      onValueChange={onValueChange}
+    >
+      <SelectTrigger aria-label="Select option" size={size} variant={variant}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+
+// Helper component with groups
+function TestSelectWithGroups() {
+  return (
+    <Select>
+      <SelectTrigger aria-label="Select fruit">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Vegetables</SelectLabel>
+          <SelectItem value="carrot">Carrot</SelectItem>
+          <SelectItem value="celery">Celery</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("Select", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<TestSelect />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("renders trigger with custom className", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test" className="custom-class">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toHaveClass("custom-class")
+    })
+
+    it("renders with placeholder", () => {
+      render(<TestSelect placeholder="Choose wisely" />)
+      expect(screen.getByText("Choose wisely")).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      render(<TestSelect defaultValue="apple" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Apple")
+    })
+
+    it("renders with controlled value", () => {
+      render(<TestSelect value="banana" onValueChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Banana")
+    })
+
+    it("has data-slot attribute on trigger", () => {
+      render(<TestSelect />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "select-trigger")
+    })
+
+    it("passes through data-* attributes to trigger", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test" data-custom="value">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("forwards ref correctly", () => {
+      const ref = { current: null }
+      render(
+        <Select>
+          <SelectTrigger ref={ref} aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+    })
+
+    it("renders chevron icon", () => {
+      render(<TestSelect />)
+      const trigger = screen.getByRole("combobox")
+      expect(trigger.querySelector("svg")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<TestSelect disabled />)
+      expect(screen.getByRole("combobox")).toBeDisabled()
+    })
+
+    it("applies disabled styling", () => {
+      render(<TestSelect disabled />)
+      expect(screen.getByRole("combobox")).toHaveClass("disabled:opacity-50")
+    })
+
+    it("handles aria-invalid state on trigger", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-invalid="true" aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("applies aria-invalid styling", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-invalid="true" aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toHaveClass("aria-invalid:border-destructive")
+    })
+
+    it("shows placeholder when no value selected", () => {
+      render(<TestSelect placeholder="Pick something" />)
+      expect(screen.getByText("Pick something")).toBeInTheDocument()
+    })
+
+    it("shows selected value instead of placeholder", () => {
+      render(<TestSelect defaultValue="apple" placeholder="Pick something" />)
+      expect(screen.queryByText("Pick something")).not.toBeInTheDocument()
+      expect(screen.getByText("Apple")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // SELECTION TESTS
+  // ============================================
+  describe("Selection", () => {
+    it("opens dropdown when trigger is activated", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("shows all options when opened", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      expect(screen.getByRole("option", { name: "Apple" })).toBeInTheDocument()
+      expect(screen.getByRole("option", { name: "Banana" })).toBeInTheDocument()
+      expect(screen.getByRole("option", { name: "Orange" })).toBeInTheDocument()
+    })
+
+    it("selects option with keyboard", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TestSelect onValueChange={handleChange} />)
+
+      await openSelect(user)
+      // First ArrowDown highlights apple, Enter selects it
+      await user.keyboard("{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("closes dropdown after selection", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      await user.keyboard("{ArrowDown}{Enter}")
+
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    })
+
+    it("closes dropdown when Escape is pressed", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+
+      await user.keyboard("{Escape}")
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onValueChange when option is selected", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TestSelect onValueChange={handleChange} />)
+
+      await openSelect(user)
+      // Navigate to banana (first ArrowDown highlights apple, second highlights banana)
+      await user.keyboard("{ArrowDown}{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("calls onValueChange with new value when selection changes", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TestSelect defaultValue="apple" onValueChange={handleChange} />)
+
+      await openSelect(user)
+      await user.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalledWith("orange")
+    })
+
+    it("does not call onValueChange when disabled", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TestSelect disabled onValueChange={handleChange} />)
+
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      await user.keyboard("{Enter}")
+
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+
+    it("calls onOpenChange when dropdown opens", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<TestSelect onOpenChange={handleOpenChange} />)
+
+      await openSelect(user)
+      expect(handleOpenChange).toHaveBeenCalledWith(true)
+    })
+
+    it("calls onOpenChange when dropdown closes", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<TestSelect onOpenChange={handleOpenChange} />)
+
+      await openSelect(user)
+      await user.keyboard("{Escape}")
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<TestSelect />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--select-trigger-height-md)]")
+    })
+
+    it("applies sm size", () => {
+      render(<TestSelect size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--select-trigger-height-sm)]")
+    })
+
+    it("applies md size", () => {
+      render(<TestSelect size="md" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--select-trigger-height-md)]")
+    })
+
+    it("applies lg size", () => {
+      render(<TestSelect size="lg" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--select-trigger-height-lg)]")
+    })
+
+    it("has data-size attribute for sm", () => {
+      render(<TestSelect size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "sm")
+    })
+
+    it("has data-size attribute for md", () => {
+      render(<TestSelect size="md" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "md")
+    })
+
+    it("has data-size attribute for lg", () => {
+      render(<TestSelect size="lg" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "lg")
+    })
+  })
+
+  // ============================================
+  // VISUAL VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      render(<TestSelect />)
+      expect(screen.getByRole("combobox")).toHaveClass("border-input")
+    })
+
+    it("applies filled variant", () => {
+      render(<TestSelect variant="filled" />)
+      expect(screen.getByRole("combobox")).toHaveClass("bg-muted")
+    })
+
+    it("applies flushed variant", () => {
+      render(<TestSelect variant="flushed" />)
+      expect(screen.getByRole("combobox")).toHaveClass("rounded-none")
+      expect(screen.getByRole("combobox")).toHaveClass("border-x-0")
+    })
+
+    it("has data-variant attribute for default", () => {
+      render(<TestSelect variant="default" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "default")
+    })
+
+    it("has data-variant attribute for filled", () => {
+      render(<TestSelect variant="filled" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "filled")
+    })
+
+    it("has data-variant attribute for flushed", () => {
+      render(<TestSelect variant="flushed" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "flushed")
+    })
+  })
+
+  // ============================================
+  // KEYBOARD NAVIGATION TESTS
+  // ============================================
+  describe("Keyboard Navigation", () => {
+    it("opens dropdown with Enter key", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("opens dropdown with Space key", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard(" ")
+
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("opens dropdown with ArrowDown key", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{ArrowDown}")
+
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("opens dropdown with ArrowUp key", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{ArrowUp}")
+
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("navigates options with ArrowDown", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      // When opening with Enter, no item is initially highlighted
+      // First ArrowDown highlights the first item
+      await user.keyboard("{ArrowDown}")
+
+      const options = screen.getAllByRole("option")
+      // Check that one of the options has the highlighted attribute
+      const highlightedOption = options.find(opt => opt.hasAttribute("data-highlighted"))
+      expect(highlightedOption).toBeTruthy()
+    })
+
+    it("selects option with Enter key", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TestSelect onValueChange={handleChange} />)
+
+      await openSelect(user)
+      await user.keyboard("{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("navigates through all options with arrow keys", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      await user.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}")
+
+      const options = screen.getAllByRole("option")
+      // Verify at least one option is highlighted after navigation
+      const highlightedOption = options.find(opt => opt.hasAttribute("data-highlighted"))
+      expect(highlightedOption).toBeTruthy()
+    })
+
+    it("can navigate through options with keyboard", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      // Navigate through options
+      await user.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}")
+
+      const options = screen.getAllByRole("option")
+      // At least one option should be highlighted
+      const highlightedOption = options.find(opt => opt.hasAttribute("data-highlighted"))
+      expect(highlightedOption).toBeTruthy()
+    })
+  })
+
+  // ============================================
+  // GROUPS AND LABELS TESTS
+  // ============================================
+  describe("Groups and Labels", () => {
+    it("renders groups correctly", async () => {
+      const user = userEvent.setup()
+      render(<TestSelectWithGroups />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      expect(screen.getAllByRole("group")).toHaveLength(2)
+    })
+
+    it("renders labels within groups", async () => {
+      const user = userEvent.setup()
+      render(<TestSelectWithGroups />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      expect(screen.getByText("Fruits")).toBeInTheDocument()
+      expect(screen.getByText("Vegetables")).toBeInTheDocument()
+    })
+
+    it("renders separator between groups", async () => {
+      const user = userEvent.setup()
+      render(<TestSelectWithGroups />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      const content = screen.getByRole("listbox")
+      expect(content.querySelector('[data-slot="select-separator"]')).toBeInTheDocument()
+    })
+
+    it("label has correct data-slot", async () => {
+      const user = userEvent.setup()
+      render(<TestSelectWithGroups />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      const label = screen.getByText("Fruits")
+      expect(label).toHaveAttribute("data-slot", "select-label")
+    })
+
+    it("group has correct data-slot", async () => {
+      const user = userEvent.setup()
+      render(<TestSelectWithGroups />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      const groups = screen.getAllByRole("group")
+      expect(groups[0]).toHaveAttribute("data-slot", "select-group")
+    })
+
+    it("can select items from different groups", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <Select onValueChange={handleChange}>
+          <SelectTrigger aria-label="Select">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Group 1</SelectLabel>
+              <SelectItem value="item1">Item 1</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+              <SelectLabel>Group 2</SelectLabel>
+              <SelectItem value="item2">Item 2</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      await user.keyboard("{ArrowDown}{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalledWith("item2")
+    })
+  })
+
+  // ============================================
+  // DISABLED ITEMS TESTS
+  // ============================================
+  describe("Disabled Items", () => {
+    it("renders disabled item correctly", async () => {
+      const user = userEvent.setup()
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="enabled">Enabled</SelectItem>
+            <SelectItem disabled value="disabled">Disabled</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      const disabledItem = screen.getByRole("option", { name: "Disabled" })
+
+      expect(disabledItem).toHaveAttribute("data-disabled")
+    })
+
+    it("skips disabled items when navigating with keyboard", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <Select onValueChange={handleChange}>
+          <SelectTrigger aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="first">First</SelectItem>
+            <SelectItem disabled value="disabled">Disabled</SelectItem>
+            <SelectItem value="third">Third</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      await user.keyboard("{ArrowDown}{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalledWith("third")
+    })
+  })
+
+  // ============================================
+  // CONTROLLED STATE TESTS
+  // ============================================
+  describe("Controlled State", () => {
+    it("respects controlled value", () => {
+      const { rerender } = render(
+        <TestSelect value="apple" onValueChange={() => {}} />
+      )
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("Apple")
+
+      rerender(<TestSelect value="banana" onValueChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Banana")
+    })
+
+    it("reports new value via onValueChange", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TestSelect value="apple" onValueChange={handleChange} />)
+
+      await openSelect(user)
+      await user.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalledWith("orange")
+    })
+
+    it("maintains controlled state across renders", () => {
+      const { rerender } = render(<TestSelect value="apple" onValueChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Apple")
+
+      rerender(<TestSelect value="orange" onValueChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Orange")
+    })
+  })
+
+  // ============================================
+  // FOCUS TESTS
+  // ============================================
+  describe("Focus", () => {
+    it("trigger is focusable", () => {
+      render(<TestSelect />)
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      expect(trigger).toHaveFocus()
+    })
+
+    it("trigger is not focusable when disabled", () => {
+      render(<TestSelect disabled />)
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      expect(trigger).not.toHaveFocus()
+    })
+
+    it("can be focused via Tab", async () => {
+      const user = userEvent.setup()
+      render(
+        <div>
+          <button>Before</button>
+          <TestSelect />
+        </div>
+      )
+
+      await user.tab()
+      await user.tab()
+      expect(screen.getByRole("combobox")).toHaveFocus()
+    })
+
+    it("returns focus to trigger after closing", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      await user.keyboard("{Escape}")
+
+      expect(screen.getByRole("combobox")).toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(<TestSelect />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <TestSelect size="sm" />
+          <TestSelect size="md" />
+          <TestSelect size="lg" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all visual variants", async () => {
+      const { container } = render(
+        <div>
+          <TestSelect variant="default" />
+          <TestSelect variant="filled" />
+          <TestSelect variant="flushed" />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when disabled", async () => {
+      const { container } = render(<TestSelect disabled />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with default value", async () => {
+      const { container } = render(<TestSelect defaultValue="apple" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("trigger has combobox role", () => {
+      render(<TestSelect />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("dropdown has listbox role when open", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("options have option role", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      expect(screen.getAllByRole("option")).toHaveLength(3)
+    })
+
+    it("supports aria-label on trigger", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-label="Choose color">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="red">Red</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toHaveAccessibleName("Choose color")
+    })
+
+    it("supports aria-describedby on trigger", () => {
+      render(
+        <>
+          <Select>
+            <SelectTrigger aria-describedby="help" aria-label="Test">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="test">Test</SelectItem>
+            </SelectContent>
+          </Select>
+          <span id="help">Help text</span>
+        </>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-describedby", "help")
+    })
+
+    it("supports aria-labelledby on trigger", () => {
+      render(
+        <>
+          <span id="label">Choose Option</span>
+          <Select>
+            <SelectTrigger aria-labelledby="label">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="test">Test</SelectItem>
+            </SelectContent>
+          </Select>
+        </>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-labelledby", "label")
+    })
+
+    it("announces selected value correctly", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TestSelect onValueChange={handleChange} />)
+
+      await openSelect(user)
+      await user.keyboard("{ArrowDown}{Enter}")
+
+      // Verify a selection was made
+      expect(handleChange).toHaveBeenCalled()
+      // The selected value should now be shown in the trigger
+      expect(screen.getByRole("combobox")).not.toHaveTextContent("Select an option")
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("has data-slot on trigger", () => {
+      render(<TestSelect />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "select-trigger")
+    })
+
+    it("has data-slot on content when opened", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      expect(screen.getByRole("listbox")).toHaveAttribute("data-slot", "select-content")
+    })
+
+    it("has data-slot on items", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      const items = screen.getAllByRole("option")
+      items.forEach((item) => {
+        expect(item).toHaveAttribute("data-slot", "select-item")
+      })
+    })
+
+    it("preserves custom data attributes on trigger", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test" data-field="color" data-form="settings">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-field", "color")
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-form", "settings")
+    })
+
+    it("has data-state on trigger", () => {
+      render(<TestSelect />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "closed")
+    })
+
+    it("has data-state=open when opened", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      await user.keyboard("{Enter}")
+
+      // After opening, the trigger should have data-state="open"
+      expect(trigger).toHaveAttribute("data-state", "open")
+    })
+  })
+
+  // ============================================
+  // CONTENT POSITION TESTS
+  // ============================================
+  describe("Content Position", () => {
+    it("renders content with popper position by default", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      await openSelect(user)
+      const content = screen.getByRole("listbox")
+      expect(content).toHaveClass("data-[side=bottom]:translate-y-1")
+    })
+
+    it("renders content with item-aligned position", async () => {
+      const user = userEvent.setup()
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent position="item-aligned">
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      const content = screen.getByRole("listbox")
+      expect(content).not.toHaveClass("data-[side=bottom]:translate-y-1")
+    })
+  })
+
+  // ============================================
+  // EDGE CASES TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("handles empty select gracefully", async () => {
+      const user = userEvent.setup()
+      render(
+        <Select>
+          <SelectTrigger aria-label="Empty select">
+            <SelectValue placeholder="No options" />
+          </SelectTrigger>
+          <SelectContent />
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("maintains state through re-renders", () => {
+      const { rerender } = render(<TestSelect defaultValue="apple" />)
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("Apple")
+
+      rerender(<TestSelect defaultValue="apple" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("Apple")
+    })
+
+    it("handles rapid open/close correctly", async () => {
+      const user = userEvent.setup()
+      render(<TestSelect />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      await user.keyboard("{Escape}")
+      await user.keyboard("{Enter}")
+      await user.keyboard("{Escape}")
+      await user.keyboard("{Enter}")
+
+      expect(screen.getByRole("listbox")).toBeInTheDocument()
+    })
+
+    it("handles empty className", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test" className="">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("handles whitespace-only className", () => {
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test" className="   ">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("handles long option text", async () => {
+      const user = userEvent.setup()
+      const longText = "This is a very long option text that might cause layout issues"
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="long">{longText}</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      expect(screen.getByRole("option", { name: longText })).toBeInTheDocument()
+    })
+
+    it("handles special characters in option values", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <Select onValueChange={handleChange}>
+          <SelectTrigger aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="special-chars_123">Special Chars</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      await user.keyboard("{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalledWith("special-chars_123")
+    })
+
+    it("handles unicode characters in option text", async () => {
+      const user = userEvent.setup()
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="emoji">Option with emoji</SelectItem>
+            <SelectItem value="chinese">Chinese characters</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      expect(screen.getByRole("option", { name: "Option with emoji" })).toBeInTheDocument()
+    })
+
+    it("handles many options", async () => {
+      const user = userEvent.setup()
+      const options = Array.from({ length: 100 }, (_, i) => `Option ${String(i + 1)}`)
+      render(
+        <Select>
+          <SelectTrigger aria-label="Test">
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option} value={option}>{option}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+      expect(screen.getAllByRole("option")).toHaveLength(100)
+    })
+  })
+
+  // ============================================
+  // TYPE SAFETY TESTS
+  // ============================================
+  describe("Type Safety", () => {
+    it("accepts valid size prop values", () => {
+      const sizes = ["sm", "md", "lg"] as const
+      sizes.forEach((size) => {
+        const { unmount } = render(<TestSelect size={size} />)
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+
+    it("accepts valid variant prop values", () => {
+      const variants = ["default", "filled", "flushed"] as const
+      variants.forEach((variant) => {
+        const { unmount } = render(<TestSelect variant={variant} />)
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+})