@etus/ui 0.1.1 → 0.1.2

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

@@ -1,856 +0,0 @@
-// NativeSelect/NativeSelect.test.tsx
-import { fireEvent, render, screen, within } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { GlobeIcon, MapPinIcon } from "lucide-react"
-import { describe, expect, it, vi } from "vitest"
-
-import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./NativeSelect"
-
-expect.extend(toHaveNoViolations)
-
-// ============================================
-// RENDERING TESTS
-// ============================================
-describe("NativeSelect", () => {
-  describe("Rendering", () => {
-    it("renders correctly", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toBeInTheDocument()
-    })
-
-    it("renders options correctly", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          <NativeSelectOption value="2">Option 2</NativeSelectOption>
-          <NativeSelectOption value="3">Option 3</NativeSelectOption>
-        </NativeSelect>
-      )
-      const select = screen.getByTestId("select")
-      const options = within(select).getAllByRole("option")
-      expect(options).toHaveLength(3)
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <NativeSelect className="custom-class" data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("custom-class")
-    })
-
-    it("has data-slot attribute", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("data-slot", "native-select")
-    })
-
-    it("renders with default value", () => {
-      render(
-        <NativeSelect data-testid="select" defaultValue="2">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          <NativeSelectOption value="2">Option 2</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveValue("2")
-    })
-
-    it("renders with controlled value", () => {
-      render(
-        <NativeSelect data-testid="select" value="2" onChange={() => {}}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          <NativeSelectOption value="2">Option 2</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveValue("2")
-    })
-
-    it("passes through data-* attributes", () => {
-      render(
-        <NativeSelect data-custom="value" data-testid="test-select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("test-select")).toHaveAttribute("data-custom", "value")
-    })
-
-    it("renders wrapper with data-slot attribute", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const wrapper = container.querySelector('[data-slot="native-select-wrapper"]')
-      expect(wrapper).toBeInTheDocument()
-    })
-
-    it("renders chevron icon", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const icon = container.querySelector('[data-slot="native-select-icon"]')
-      expect(icon).toBeInTheDocument()
-      expect(icon).toHaveAttribute("aria-hidden", "true")
-    })
-  })
-
-  // ============================================
-  // PROPS TESTS
-  // ============================================
-  describe("Props", () => {
-    it("renders placeholder as first empty option", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption disabled value="">Select an option</NativeSelectOption>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const options = screen.getAllByRole("option")
-      expect(options[0]).toHaveTextContent("Select an option")
-      expect(options[0]).toBeDisabled()
-    })
-
-    it("supports multiple selection", () => {
-      render(
-        <NativeSelect multiple data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          <NativeSelectOption value="2">Option 2</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("multiple")
-    })
-
-    it("has correct name attribute", () => {
-      render(
-        <NativeSelect data-testid="select" name="country">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("name", "country")
-    })
-
-    it("has correct id attribute", () => {
-      render(
-        <NativeSelect data-testid="select" id="country-select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("id", "country-select")
-    })
-  })
-
-  // ============================================
-  // STATE TESTS
-  // ============================================
-  describe("States", () => {
-    it("handles disabled state", () => {
-      render(
-        <NativeSelect disabled data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toBeDisabled()
-    })
-
-    it("handles required state", () => {
-      render(
-        <NativeSelect required data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toBeRequired()
-    })
-
-    it("handles aria-invalid state", () => {
-      render(
-        <NativeSelect aria-invalid="true" data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("aria-invalid", "true")
-    })
-
-    it("applies aria-invalid styling", () => {
-      render(
-        <NativeSelect aria-invalid="true" data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("aria-invalid:border-destructive")
-    })
-
-    it("applies wrapper disabled styling", () => {
-      const { container } = render(
-        <NativeSelect disabled data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const wrapper = container.querySelector('[data-slot="native-select-wrapper"]')
-      expect(wrapper).toHaveClass("has-[select:disabled]:opacity-50")
-    })
-  })
-
-  // ============================================
-  // EVENT TESTS
-  // ============================================
-  describe("Events", () => {
-    it("calls onChange when value changes", () => {
-      const handleChange = vi.fn()
-      render(
-        <NativeSelect data-testid="select" onChange={handleChange}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          <NativeSelectOption value="2">Option 2</NativeSelectOption>
-        </NativeSelect>
-      )
-      fireEvent.change(screen.getByTestId("select"), { target: { value: "2" } })
-      expect(handleChange).toHaveBeenCalledTimes(1)
-    })
-
-    it("calls onFocus when focused", () => {
-      const handleFocus = vi.fn()
-      render(
-        <NativeSelect data-testid="select" onFocus={handleFocus}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      fireEvent.focus(screen.getByTestId("select"))
-      expect(handleFocus).toHaveBeenCalledTimes(1)
-    })
-
-    it("calls onBlur when blurred", () => {
-      const handleBlur = vi.fn()
-      render(
-        <NativeSelect data-testid="select" onBlur={handleBlur}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      fireEvent.blur(screen.getByTestId("select"))
-      expect(handleBlur).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  // ============================================
-  // INTERACTION TESTS
-  // ============================================
-  describe("Interactions", () => {
-    it("allows selecting an option", async () => {
-      const user = userEvent.setup()
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          <NativeSelectOption value="2">Option 2</NativeSelectOption>
-        </NativeSelect>
-      )
-
-      await user.selectOptions(screen.getByTestId("select"), "2")
-      expect(screen.getByTestId("select")).toHaveValue("2")
-    })
-
-    it("does not allow selection when disabled", async () => {
-      const user = userEvent.setup()
-      render(
-        <NativeSelect disabled data-testid="select" defaultValue="1">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          <NativeSelectOption value="2">Option 2</NativeSelectOption>
-        </NativeSelect>
-      )
-
-      // userEvent respects disabled state and won't change the value
-      await user.selectOptions(screen.getByTestId("select"), "2").catch(() => {})
-      expect(screen.getByTestId("select")).toHaveValue("1")
-    })
-
-    it("can be focused", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const select = screen.getByTestId("select")
-      select.focus()
-      expect(select).toHaveFocus()
-    })
-
-    it("is not focusable when disabled", () => {
-      render(
-        <NativeSelect disabled data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const select = screen.getByTestId("select")
-      select.focus()
-      expect(select).not.toHaveFocus()
-    })
-  })
-
-  // ============================================
-  // SIZE VARIANT TESTS
-  // ============================================
-  describe("Size Variants", () => {
-    it("applies default size (md)", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("h-9")
-    })
-
-    it("applies xs size", () => {
-      render(
-        <NativeSelect data-testid="select" size="xs">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("h-7")
-    })
-
-    it("applies sm size", () => {
-      render(
-        <NativeSelect data-testid="select" size="sm">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("h-8")
-    })
-
-    it("applies md size", () => {
-      render(
-        <NativeSelect data-testid="select" size="md">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("h-9")
-    })
-
-    it("applies lg size", () => {
-      render(
-        <NativeSelect data-testid="select" size="lg">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("h-10")
-    })
-
-    it("applies xl size", () => {
-      render(
-        <NativeSelect data-testid="select" size="xl">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("h-12")
-    })
-
-    it("applies correct icon size for xs", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select" size="xs">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const icon = container.querySelector('[data-slot="native-select-icon"]')
-      expect(icon).toHaveClass("size-3")
-    })
-
-    it("applies correct icon size for xl", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select" size="xl">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const icon = container.querySelector('[data-slot="native-select-icon"]')
-      expect(icon).toHaveClass("size-5")
-    })
-  })
-
-  // ============================================
-  // VISUAL VARIANT TESTS
-  // ============================================
-  describe("Visual Variants", () => {
-    it("applies default variant", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("border-input")
-    })
-
-    it("applies filled variant", () => {
-      render(
-        <NativeSelect data-testid="select" variant="filled">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("bg-muted")
-    })
-
-    it("applies flushed variant", () => {
-      render(
-        <NativeSelect data-testid="select" variant="flushed">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("rounded-none")
-      expect(screen.getByTestId("select")).toHaveClass("border-x-0")
-      expect(screen.getByTestId("select")).toHaveClass("border-t-0")
-    })
-
-    it("applies unstyled variant", () => {
-      render(
-        <NativeSelect data-testid="select" variant="unstyled">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("border-0")
-      expect(screen.getByTestId("select")).toHaveClass("shadow-none")
-    })
-  })
-
-  // ============================================
-  // LEFT ICON TESTS
-  // ============================================
-  describe("Left Icon", () => {
-    it("renders without left icon by default", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
-      expect(leftIcon).not.toBeInTheDocument()
-    })
-
-    it("renders left icon when provided", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon data-testid="globe" />}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
-      expect(leftIcon).toBeInTheDocument()
-      expect(screen.getByTestId("globe")).toBeInTheDocument()
-    })
-
-    it("left icon has aria-hidden attribute", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
-      expect(leftIcon).toHaveAttribute("aria-hidden", "true")
-    })
-
-    it("applies extra padding when left icon is present", () => {
-      render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("pl-9")
-    })
-
-    it("applies correct left padding for xs size", () => {
-      render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="xs">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("pl-7")
-    })
-
-    it("applies correct left padding for sm size", () => {
-      render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="sm">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("pl-8")
-    })
-
-    it("applies correct left padding for lg size", () => {
-      render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="lg">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("pl-10")
-    })
-
-    it("applies correct left padding for xl size", () => {
-      render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="xl">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("pl-11")
-    })
-
-    it("left icon position changes with size", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="xl">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
-      expect(leftIcon).toHaveClass("left-4", "size-5")
-    })
-
-    it("renders different icons correctly", () => {
-      const { rerender } = render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon data-testid="icon" />}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("icon")).toBeInTheDocument()
-
-      rerender(
-        <NativeSelect data-testid="select" leftIcon={<MapPinIcon data-testid="icon2" />}>
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("icon2")).toBeInTheDocument()
-    })
-
-    it("works with all variants", () => {
-      const { rerender } = render(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} variant="default">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("pl-9")
-
-      rerender(
-        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} variant="filled">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveClass("pl-9", "bg-muted")
-    })
-
-    it("has no accessibility violations with left icon", async () => {
-      const { container } = render(
-        <label>
-          Country
-          <NativeSelect leftIcon={<GlobeIcon />}>
-            <NativeSelectOption value="us">United States</NativeSelectOption>
-          </NativeSelect>
-        </label>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-
-  // ============================================
-  // OPTGROUP TESTS
-  // ============================================
-  describe("NativeSelectOptGroup", () => {
-    it("renders option groups", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOptGroup label="Group 1">
-            <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          </NativeSelectOptGroup>
-          <NativeSelectOptGroup label="Group 2">
-            <NativeSelectOption value="2">Option 2</NativeSelectOption>
-          </NativeSelectOptGroup>
-        </NativeSelect>
-      )
-      const groups = screen.getAllByRole("group")
-      expect(groups).toHaveLength(2)
-    })
-
-    it("has data-slot attribute on optgroup", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOptGroup label="Group 1">
-            <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          </NativeSelectOptGroup>
-        </NativeSelect>
-      )
-      const optgroup = container.querySelector('[data-slot="native-select-optgroup"]')
-      expect(optgroup).toBeInTheDocument()
-    })
-
-    it("applies custom className to optgroup", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOptGroup className="custom-group" label="Group 1">
-            <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          </NativeSelectOptGroup>
-        </NativeSelect>
-      )
-      const optgroup = container.querySelector('[data-slot="native-select-optgroup"]')
-      expect(optgroup).toHaveClass("custom-group")
-    })
-  })
-
-  // ============================================
-  // OPTION TESTS
-  // ============================================
-  describe("NativeSelectOption", () => {
-    it("has data-slot attribute on option", () => {
-      const { container } = render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const option = container.querySelector('[data-slot="native-select-option"]')
-      expect(option).toBeInTheDocument()
-    })
-
-    it("renders disabled option", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption disabled value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      const option = screen.getByRole("option", { name: "Option 1" })
-      expect(option).toBeDisabled()
-    })
-  })
-
-  // ============================================
-  // FORM INTEGRATION TESTS
-  // ============================================
-  describe("Form Integration", () => {
-    it("works within a form", async () => {
-      const handleSubmit = vi.fn((e: React.FormEvent) => { e.preventDefault() })
-      const user = userEvent.setup()
-
-      render(
-        <form onSubmit={handleSubmit}>
-          <NativeSelect data-testid="select" name="country">
-            <NativeSelectOption value="">Select</NativeSelectOption>
-            <NativeSelectOption value="us">United States</NativeSelectOption>
-          </NativeSelect>
-          <button type="submit">Submit</button>
-        </form>
-      )
-
-      await user.selectOptions(screen.getByTestId("select"), "us")
-      await user.click(screen.getByRole("button"))
-
-      expect(handleSubmit).toHaveBeenCalled()
-    })
-
-    it("supports autoComplete attribute", () => {
-      render(
-        <NativeSelect autoComplete="country" data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("autocomplete", "country")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations", async () => {
-      const { container } = render(
-        <label>
-          Country
-          <NativeSelect>
-            <NativeSelectOption value="us">United States</NativeSelectOption>
-          </NativeSelect>
-        </label>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all size variants", async () => {
-      const { container } = render(
-        <div>
-          <label>
-            XS Select
-            <NativeSelect size="xs">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-          <label>
-            SM Select
-            <NativeSelect size="sm">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-          <label>
-            MD Select
-            <NativeSelect size="md">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-          <label>
-            LG Select
-            <NativeSelect size="lg">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-          <label>
-            XL Select
-            <NativeSelect size="xl">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-        </div>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all visual variants", async () => {
-      const { container } = render(
-        <div>
-          <label>
-            Default
-            <NativeSelect variant="default">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-          <label>
-            Filled
-            <NativeSelect variant="filled">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-          <label>
-            Flushed
-            <NativeSelect variant="flushed">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-          <label>
-            Unstyled
-            <NativeSelect variant="unstyled">
-              <NativeSelectOption value="1">Option</NativeSelectOption>
-            </NativeSelect>
-          </label>
-        </div>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("supports aria-label", () => {
-      render(
-        <NativeSelect aria-label="Select country" data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("aria-label", "Select country")
-    })
-
-    it("supports aria-describedby", () => {
-      render(
-        <>
-          <NativeSelect aria-describedby="help" data-testid="select">
-            <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          </NativeSelect>
-          <span id="help">Help text</span>
-        </>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("aria-describedby", "help")
-    })
-
-    it("supports aria-labelledby", () => {
-      render(
-        <>
-          <span id="label">Country Selection</span>
-          <NativeSelect aria-labelledby="label" data-testid="select">
-            <NativeSelectOption value="1">Option 1</NativeSelectOption>
-          </NativeSelect>
-        </>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("aria-labelledby", "label")
-    })
-
-    it("select with aria-label has no violations", async () => {
-      const { container } = render(
-        <NativeSelect aria-label="Country selection">
-          <NativeSelectOption value="us">United States</NativeSelectOption>
-        </NativeSelect>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("disabled select has no violations", async () => {
-      const { container } = render(
-        <label>
-          Disabled
-          <NativeSelect disabled>
-            <NativeSelectOption value="1">Option</NativeSelectOption>
-          </NativeSelect>
-        </label>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("required select has no violations", async () => {
-      const { container } = render(
-        <label>
-          Required Field
-          <NativeSelect required>
-            <NativeSelectOption value="">Select</NativeSelectOption>
-            <NativeSelectOption value="1">Option</NativeSelectOption>
-          </NativeSelect>
-        </label>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("invalid select has no violations", async () => {
-      const { container } = render(
-        <label>
-          Invalid Field
-          <NativeSelect aria-describedby="error" aria-invalid="true">
-            <NativeSelectOption value="1">Option</NativeSelectOption>
-          </NativeSelect>
-          <span id="error">This field has an error</span>
-        </label>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-
-  // ============================================
-  // DATA ATTRIBUTE TESTS
-  // ============================================
-  describe("Data Attributes", () => {
-    it("has data-slot on select", () => {
-      render(
-        <NativeSelect data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("data-slot", "native-select")
-    })
-
-    it("preserves custom data attributes", () => {
-      render(
-        <NativeSelect data-field="country" data-form="profile" data-testid="select">
-          <NativeSelectOption value="1">Option 1</NativeSelectOption>
-        </NativeSelect>
-      )
-      expect(screen.getByTestId("select")).toHaveAttribute("data-field", "country")
-      expect(screen.getByTestId("select")).toHaveAttribute("data-form", "profile")
-    })
-  })
-})