@etus/ui 0.1.0

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

@@ -0,0 +1,1036 @@
+import type { MultiSelectOption } from "./MultiSelect.types"
+
+// MultiSelect/MultiSelect.test.tsx
+import { render, screen, waitFor } 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 { MultiSelect } from "./MultiSelect"
+
+expect.extend(toHaveNoViolations)
+
+// Mock pointer capture methods for JSDOM (Radix Popover uses them)
+beforeAll(() => {
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.setPointerCapture = vi.fn()
+  Element.prototype.releasePointerCapture = vi.fn()
+})
+
+// Default test options
+const defaultOptions: MultiSelectOption[] = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "orange", label: "Orange" },
+]
+
+// Helper to open the multiselect
+async function openMultiSelect(user: ReturnType<typeof userEvent.setup>) {
+  const trigger = screen.getByRole("combobox")
+  await user.click(trigger)
+  await waitFor(() => {
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+  })
+}
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("MultiSelect", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          className="custom-class"
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveClass("custom-class")
+    })
+
+    it("renders with placeholder", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          placeholder="Choose wisely"
+        />
+      )
+      expect(screen.getByText("Choose wisely")).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple"]}
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByText("Apple")).toBeInTheDocument()
+    })
+
+    it("renders with multiple default values", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByText("Apple")).toBeInTheDocument()
+      expect(screen.getByText("Banana")).toBeInTheDocument()
+    })
+
+    it("renders with controlled value", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          value={["banana"]}
+          onChange={() => {}}
+        />
+      )
+      expect(screen.getByText("Banana")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "multi-select")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          data-custom="value"
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("renders chevron icon", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      const trigger = screen.getByRole("combobox")
+      expect(trigger.querySelector("svg")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // MULTIPLE SELECTION TESTS
+  // ============================================
+  describe("Multiple Selection", () => {
+    it("selects multiple options", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      await openMultiSelect(user)
+      await user.click(screen.getByText("Apple"))
+      expect(handleChange).toHaveBeenCalledWith(["apple"])
+
+      await user.click(screen.getByText("Banana"))
+      expect(handleChange).toHaveBeenCalledWith(["apple", "banana"])
+    })
+
+    it("deselects option when clicked again", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      await openMultiSelect(user)
+      // Click the Apple option in the dropdown content (not the tag)
+      const appleItem = document.querySelector<HTMLElement>('[data-slot="multi-select-item"][data-selected="true"]')
+      if (!appleItem) {
+        throw new Error("Expected selected item to be present.")
+      }
+      await user.click(appleItem)
+      expect(handleChange).toHaveBeenCalledWith(["banana"])
+    })
+
+    it("shows checkmarks on selected items", async () => {
+      const user = userEvent.setup()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple"]}
+          options={defaultOptions}
+        />
+      )
+
+      await openMultiSelect(user)
+      const selectedItem = document.querySelector('[data-slot="multi-select-item"][data-selected="true"]')
+      expect(selectedItem).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // TAG REMOVAL TESTS
+  // ============================================
+  describe("Tag Removal", () => {
+    it("removes tag when X button is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      // Find and click the remove button for Apple
+      const removeButtons = screen.getAllByRole("button", { name: /remove/i })
+      const firstRemoveButton = removeButtons[0]
+      if (!firstRemoveButton) {
+        throw new Error("Expected at least one remove button.")
+      }
+      await user.click(firstRemoveButton)
+
+      expect(handleChange).toHaveBeenCalledWith(["banana"])
+    })
+
+    it("removes correct tag from multiple selections", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana", "orange"]}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      // Remove the middle item (Banana)
+      const bananaTag = screen.getByText("Banana").closest('[data-slot="multi-select-tag"]')
+      const removeButton = bananaTag?.querySelector<HTMLButtonElement>('button[aria-label="Remove Banana"]')
+      if (!removeButton) {
+        throw new Error("Expected remove button for Banana tag.")
+      }
+      await user.click(removeButton)
+
+      expect(handleChange).toHaveBeenCalledWith(["apple", "orange"])
+    })
+
+    it("shows placeholder when all tags are removed", async () => {
+      const user = userEvent.setup()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple"]}
+          options={defaultOptions}
+          placeholder="Select options..."
+        />
+      )
+
+      // Remove the only tag
+      const removeButton = screen.getByRole("button", { name: /remove apple/i })
+      await user.click(removeButton)
+
+      await waitFor(() => {
+        expect(screen.getByText("Select options...")).toBeInTheDocument()
+      })
+    })
+
+    it("displays tags with data-slot attribute", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple"]}
+          options={defaultOptions}
+        />
+      )
+
+      const tag = document.querySelector('[data-slot="multi-select-tag"]')
+      expect(tag).toBeInTheDocument()
+      expect(tag).toHaveAttribute("data-value", "apple")
+    })
+  })
+
+  // ============================================
+  // SEARCH FILTERING TESTS
+  // ============================================
+  describe("Search Filtering", () => {
+    it("filters options based on search query", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      const searchInput = screen.getByPlaceholderText("Search...")
+      await user.type(searchInput, "app")
+
+      expect(screen.getByText("Apple")).toBeInTheDocument()
+      expect(screen.queryByText("Banana")).not.toBeInTheDocument()
+      expect(screen.queryByText("Orange")).not.toBeInTheDocument()
+    })
+
+    it("shows empty message when no matches", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      const searchInput = screen.getByPlaceholderText("Search...")
+      await user.type(searchInput, "xyz")
+
+      expect(screen.getByText("No results found.")).toBeInTheDocument()
+    })
+
+    it("uses custom empty message", async () => {
+      const user = userEvent.setup()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          emptyMessage="Nothing here!"
+          options={defaultOptions}
+        />
+      )
+
+      await openMultiSelect(user)
+      const searchInput = screen.getByPlaceholderText("Search...")
+      await user.type(searchInput, "xyz")
+
+      expect(screen.getByText("Nothing here!")).toBeInTheDocument()
+    })
+
+    it("calls onSearch callback when searching", async () => {
+      const user = userEvent.setup()
+      const handleSearch = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          onSearch={handleSearch}
+        />
+      )
+
+      await openMultiSelect(user)
+      const searchInput = screen.getByPlaceholderText("Search...")
+      await user.type(searchInput, "app")
+
+      expect(handleSearch).toHaveBeenCalledWith("a")
+      expect(handleSearch).toHaveBeenCalledWith("ap")
+      expect(handleSearch).toHaveBeenCalledWith("app")
+    })
+
+    it("uses custom search placeholder", async () => {
+      const user = userEvent.setup()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          searchPlaceholder="Type to filter..."
+        />
+      )
+
+      const trigger = screen.getByRole("combobox")
+      await user.click(trigger)
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText("Type to filter...")).toBeInTheDocument()
+      })
+    })
+
+    it("clears search when closing", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      const searchInput = screen.getByPlaceholderText("Search...")
+      await user.type(searchInput, "app")
+      await user.keyboard("{Escape}")
+
+      await openMultiSelect(user)
+      const newSearchInput = screen.getByPlaceholderText("Search...")
+      expect(newSearchInput).toHaveValue("")
+    })
+  })
+
+  // ============================================
+  // MAX SELECTED LIMIT TESTS
+  // ============================================
+  describe("Max Selected Limit", () => {
+    it("prevents selection when maxSelected is reached", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          maxSelected={2}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      await openMultiSelect(user)
+      await user.click(screen.getByText("Orange"))
+
+      // Should not add orange since limit is reached
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+
+    it("allows deselection when maxSelected is reached", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          maxSelected={2}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      await openMultiSelect(user)
+      // Click the Apple option in the dropdown content (not the tag)
+      const appleItem = document.querySelector<HTMLElement>('[data-slot="multi-select-item"][data-selected="true"]')
+      if (!appleItem) {
+        throw new Error("Expected selected item to be present.")
+      }
+      await user.click(appleItem)
+
+      expect(handleChange).toHaveBeenCalledWith(["banana"])
+    })
+
+    it("disables unselected items when maxSelected is reached", async () => {
+      const user = userEvent.setup()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          maxSelected={2}
+          options={defaultOptions}
+        />
+      )
+
+      await openMultiSelect(user)
+      const orangeItem = document.querySelector('[data-slot="multi-select-item"]:last-child')
+      expect(orangeItem).toHaveAttribute("data-disabled", "true")
+    })
+
+    it("allows selection after removing when at maxSelected", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          maxSelected={2}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      // Remove one
+      const removeButton = screen.getByRole("button", { name: /remove apple/i })
+      await user.click(removeButton)
+      expect(handleChange).toHaveBeenCalledWith(["banana"])
+
+      // Now should be able to select
+      handleChange.mockClear()
+      await openMultiSelect(user)
+      await user.click(screen.getByText("Orange"))
+      expect(handleChange).toHaveBeenCalledWith(["banana", "orange"])
+    })
+  })
+
+  // ============================================
+  // KEYBOARD NAVIGATION TESTS
+  // ============================================
+  describe("Keyboard Navigation", () => {
+    it("opens dropdown with Enter key", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+      })
+    })
+
+    it("opens dropdown with Space key", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard(" ")
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+      })
+    })
+
+    it("closes dropdown with Escape key", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      await user.keyboard("{Escape}")
+
+      await waitFor(() => {
+        expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument()
+      })
+    })
+
+    it("navigates options with arrow keys", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      await user.keyboard("{ArrowDown}")
+
+      const items = screen.getAllByText(/Apple|Banana|Orange/)
+      expect(items.length).toBe(3)
+    })
+
+    it("selects option with Enter key", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      await openMultiSelect(user)
+      await user.keyboard("{ArrowDown}{Enter}")
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // STATES TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(
+        <MultiSelect
+          disabled
+          aria-label="Test multiselect"
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-disabled", "true")
+    })
+
+    it("does not open when disabled", async () => {
+      const user = userEvent.setup()
+      render(
+        <MultiSelect
+          disabled
+          aria-label="Test multiselect"
+          options={defaultOptions}
+        />
+      )
+
+      await user.click(screen.getByRole("combobox"))
+      expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument()
+    })
+
+    it("applies disabled styling", () => {
+      render(
+        <MultiSelect
+          disabled
+          aria-label="Test multiselect"
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-disabled", "true")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toHaveClass("min-h-[var(--multiselect-trigger-min-height-md)]")
+    })
+
+    it("applies sm size", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          size="sm"
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveClass("min-h-[var(--multiselect-trigger-min-height-sm)]")
+    })
+
+    it("applies lg size", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          size="lg"
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveClass("min-h-[var(--multiselect-trigger-min-height-lg)]")
+    })
+
+    it("has data-size attribute", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          size="sm"
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "sm")
+    })
+  })
+
+  // ============================================
+  // VISUAL VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toHaveClass("border-input")
+    })
+
+    it("applies filled variant", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          variant="filled"
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveClass("bg-muted")
+    })
+
+    it("applies flushed variant", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          variant="flushed"
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveClass("rounded-none")
+      expect(screen.getByRole("combobox")).toHaveClass("border-x-0")
+    })
+
+    it("has data-variant attribute", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          variant="filled"
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "filled")
+    })
+  })
+
+  // ============================================
+  // CONTROLLED STATE TESTS
+  // ============================================
+  describe("Controlled State", () => {
+    it("respects controlled value", () => {
+      const { rerender } = render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          value={["apple"]}
+          onChange={() => {}}
+        />
+      )
+
+      expect(screen.getByText("Apple")).toBeInTheDocument()
+
+      rerender(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          value={["banana"]}
+          onChange={() => {}}
+        />
+      )
+      expect(screen.getByText("Banana")).toBeInTheDocument()
+      expect(screen.queryByText("Apple")).not.toBeInTheDocument()
+    })
+
+    it("respects controlled open state", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          open={true}
+          options={defaultOptions}
+          onOpenChange={() => {}}
+        />
+      )
+
+      expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+    })
+
+    it("calls onOpenChange when open state changes", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={defaultOptions}
+          onOpenChange={handleOpenChange}
+        />
+      )
+
+      await user.click(screen.getByRole("combobox"))
+      expect(handleOpenChange).toHaveBeenCalledWith(true)
+    })
+  })
+
+  // ============================================
+  // DISABLED OPTIONS TESTS
+  // ============================================
+  describe("Disabled Options", () => {
+    it("renders disabled option correctly", async () => {
+      const user = userEvent.setup()
+      const options: MultiSelectOption[] = [
+        { value: "enabled", label: "Enabled" },
+        { value: "disabled", label: "Disabled", disabled: true },
+      ]
+      render(<MultiSelect aria-label="Test multiselect" options={options} />)
+
+      await openMultiSelect(user)
+      const disabledItem = document.querySelector('[data-slot="multi-select-item"][data-disabled="true"]')
+      expect(disabledItem).toBeInTheDocument()
+      expect(disabledItem).toHaveTextContent("Disabled")
+    })
+
+    it("does not select disabled option when clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      const options: MultiSelectOption[] = [
+        { value: "enabled", label: "Enabled" },
+        { value: "disabled", label: "Disabled", disabled: true },
+      ]
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={options}
+          onChange={handleChange}
+        />
+      )
+
+      await openMultiSelect(user)
+      await user.click(screen.getByText("Disabled"))
+
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <MultiSelect aria-label="Test multiselect" options={defaultOptions} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when disabled", async () => {
+      const { container } = render(
+        <MultiSelect
+          disabled
+          aria-label="Test multiselect"
+          options={defaultOptions}
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with selected values", async () => {
+      const { container } = render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          options={defaultOptions}
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("trigger has combobox role", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("has aria-expanded attribute", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "false")
+    })
+
+    it("aria-expanded updates when opened", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      const trigger = screen.getByRole("combobox")
+      expect(trigger).toHaveAttribute("aria-expanded", "false")
+
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(trigger).toHaveAttribute("aria-expanded", "true")
+      })
+    })
+
+    it("has aria-haspopup attribute", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-haspopup", "listbox")
+    })
+
+    it("supports aria-label", () => {
+      render(<MultiSelect aria-label="Choose colors" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toHaveAccessibleName("Choose colors")
+    })
+
+    it("supports aria-labelledby", () => {
+      render(
+        <>
+          <span id="label">Choose Options</span>
+          <MultiSelect aria-labelledby="label" options={defaultOptions} />
+        </>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-labelledby", "label")
+    })
+
+    it("tag remove buttons have accessible labels", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple"]}
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByRole("button", { name: "Remove Apple" })).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("has data-slot on trigger", () => {
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "multi-select")
+    })
+
+    it("has data-slot on content when opened", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      const content = document.querySelector('[data-slot="multi-select-content"]')
+      expect(content).toBeInTheDocument()
+    })
+
+    it("has data-slot on search input", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      expect(screen.getByPlaceholderText("Search...")).toHaveAttribute(
+        "data-slot",
+        "multi-select-input"
+      )
+    })
+
+    it("has data-slot on items", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      await openMultiSelect(user)
+      const items = document.querySelectorAll('[data-slot="multi-select-item"]')
+      expect(items.length).toBe(3)
+    })
+
+    it("has data-slot on tags", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple", "banana"]}
+          options={defaultOptions}
+        />
+      )
+      const tags = document.querySelectorAll('[data-slot="multi-select-tag"]')
+      expect(tags.length).toBe(2)
+    })
+
+    it("preserves custom data attributes", () => {
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          data-field="colors"
+          data-form="settings"
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-field", "colors")
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-form", "settings")
+    })
+  })
+
+  // ============================================
+  // EDGE CASES TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("handles empty options array", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Empty multiselect" options={[]} />)
+
+      await openMultiSelect(user)
+      expect(screen.getByText("No results found.")).toBeInTheDocument()
+    })
+
+    it("handles rapid open/close correctly", async () => {
+      const user = userEvent.setup()
+      render(<MultiSelect aria-label="Test multiselect" options={defaultOptions} />)
+
+      const trigger = screen.getByRole("combobox")
+      await user.click(trigger)
+      await user.keyboard("{Escape}")
+      await user.click(trigger)
+      await user.keyboard("{Escape}")
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByPlaceholderText("Search...")).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"
+      const options: MultiSelectOption[] = [{ value: "long", label: longText }]
+      render(<MultiSelect aria-label="Test multiselect" options={options} />)
+
+      await openMultiSelect(user)
+      expect(screen.getByText(longText)).toBeInTheDocument()
+    })
+
+    it("handles special characters in values", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      const options: MultiSelectOption[] = [
+        { value: "special-chars_123", label: "Special Chars" },
+      ]
+      render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          options={options}
+          onChange={handleChange}
+        />
+      )
+
+      await openMultiSelect(user)
+      await user.click(screen.getByText("Special Chars"))
+
+      expect(handleChange).toHaveBeenCalledWith(["special-chars_123"])
+    })
+
+    it("handles many options", async () => {
+      const user = userEvent.setup()
+      const manyOptions: MultiSelectOption[] = Array.from({ length: 100 }, (_, i) => ({
+        value: `option-${String(i + 1)}`,
+        label: `Option ${String(i + 1)}`,
+      }))
+      render(<MultiSelect aria-label="Test multiselect" options={manyOptions} />)
+
+      await openMultiSelect(user)
+      const items = document.querySelectorAll('[data-slot="multi-select-item"]')
+      expect(items.length).toBe(100)
+    })
+
+    it("maintains value through re-renders", () => {
+      const { rerender } = render(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple"]}
+          options={defaultOptions}
+        />
+      )
+
+      expect(screen.getByText("Apple")).toBeInTheDocument()
+
+      rerender(
+        <MultiSelect
+          aria-label="Test multiselect"
+          defaultValue={["apple"]}
+          options={defaultOptions}
+        />
+      )
+      expect(screen.getByText("Apple")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // 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(
+          <MultiSelect
+            aria-label="Test multiselect"
+            options={defaultOptions}
+            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(
+          <MultiSelect
+            aria-label="Test multiselect"
+            options={defaultOptions}
+            variant={variant}
+          />
+        )
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+})