@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/primitives/Input/Select.spec.js

@@ -1,218 +1,632 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Select from "./Select.svelte";
-
-// Mock transitions to be instant for testing
-vi.mock('../../utils/transitions.js', () => ({
-  bloom: () => ({ duration: 0, delay: 0, css: () => '' }),
-  safeSlide: () => ({ duration: 0, delay: 0, css: () => '' }),
-}));
-
-const sampleItems = [
-  { name: "Option 1", value: "opt1" },
-  { name: "Option 2", value: "opt2" },
-  { name: "Option 3", value: "opt3" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Select, {
-    props: {
-      items: sampleItems,
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("Select Component Tests", () => {
-  test("Renders select with label", () => {
-    setupTest({
-      label: "Test Label",
-      id: "test-select",
-    });
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-  });
-
-  test("Shows placeholder when no value selected", () => {
-    setupTest({
-      placeholder: "Select an option",
-    });
-    expect(screen.getByText("Select an option")).toBeInTheDocument();
-  });
-
-  test("Opens dropdown on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.getByText("Option 3")).toBeInTheDocument();
-  });
-
-  test("Selects item on click", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 2"));
-
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Closes dropdown after selection", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 1"));
-
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Shows selected value", () => {
-    setupTest({
-      value: "opt2",
-    });
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Dispatches change event on selection", async () => {
-    const changeSpy = vi.fn();
-    const { user } = setupTest({
-      onchange: changeSpy,
-    });
-
-    const trigger = screen.getByRole("button");
-    await user.click(trigger);
-    await user.click(screen.getByText("Option 3"));
-
-    expect(changeSpy).toHaveBeenCalled();
-    expect(changeSpy.mock.calls[0][0]).toEqual({
-      value: "opt3",
-      item: { name: "Option 3", value: "opt3" },
-    });
-  });
-
-  test("Shows required indicator when required", () => {
-    setupTest({
-      label: "Required Field",
-      required: true,
-    });
-    expect(screen.getByText("*")).toBeInTheDocument();
-  });
-
-  test("Displays error state", () => {
-    setupTest({
-      error: "This field is required",
-    });
-    expect(screen.getByText("This field is required")).toBeInTheDocument();
-  });
-
-  test("Disables select when disabled prop is true", async () => {
-    const { user } = setupTest({
-      disabled: true,
-    });
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toBeDisabled();
-    await user.click(trigger);
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Navigates options with keyboard", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard("{Enter}");
-
-    // Second option should be selected (started at 0, moved down twice)
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-  });
-
-  test("Closes dropdown on Escape key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    await user.keyboard("{Escape}");
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Opens dropdown with Enter key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    trigger.focus();
-    await user.keyboard("{Enter}");
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Opens dropdown with Space key", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    trigger.focus();
-    await user.keyboard(" ");
-
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-  });
-
-  test("Applies focus ring on focus", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-    expect(trigger).toHaveClass("focus:ring-4");
-    expect(trigger).toHaveClass("focus:ring-blue-300");
-  });
-
-  test("Closes dropdown when clicking outside", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-    expect(screen.getByRole("listbox")).toBeInTheDocument();
-
-    // Click outside by clicking on body
-    await user.click(document.body);
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-  });
-
-  test("Marks selected option with aria-selected", async () => {
-    const { user } = setupTest({
-      value: "opt1",
-    });
-    const trigger = screen.getByRole("button");
-
-    await user.click(trigger);
-
-    // The selected option should have aria-selected="true"
-    const options = screen.getAllByRole("option");
-    const selectedOption = options.find(opt => opt.getAttribute("aria-selected") === "true");
-    expect(selectedOption).toBeInTheDocument();
-    expect(selectedOption).toHaveTextContent("Option 1");
-  });
-
-  test("Sets aria-expanded correctly", async () => {
-    const { user } = setupTest();
-    const trigger = screen.getByRole("button");
-
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Select from "./Select.svelte";
+
+// Mock transitions to be instant for testing
+vi.mock('../../utils/transitions.js', () => ({
+  bloom: () => ({ duration: 0, delay: 0, css: () => '' }),
+  safeSlide: () => ({ duration: 0, delay: 0, css: () => '' }),
+}));
+
+const sampleItems = [
+  { name: "Option 1", value: "opt1" },
+  { name: "Option 2", value: "opt2" },
+  { name: "Option 3", value: "opt3" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Select, {
+    props: {
+      items: sampleItems,
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("Select Component Tests", () => {
+  test("Renders select with label", () => {
+    setupTest({
+      label: "Test Label",
+      id: "test-select",
+    });
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+  });
+
+  test("Shows placeholder when no value selected", () => {
+    setupTest({
+      placeholder: "Select an option",
+    });
+    expect(screen.getByText("Select an option")).toBeInTheDocument();
+  });
+
+  test("Opens dropdown on click", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+    expect(screen.getByText("Option 3")).toBeInTheDocument();
+  });
+
+  test("Selects item on click", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 2"));
+
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Closes dropdown after selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 1"));
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Shows selected value", () => {
+    setupTest({
+      value: "opt2",
+    });
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Dispatches change event on selection", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({
+      onchange: changeSpy,
+    });
+
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 3"));
+
+    expect(changeSpy).toHaveBeenCalled();
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt3",
+      item: { name: "Option 3", value: "opt3" },
+    });
+  });
+
+  test("Shows required indicator when required", () => {
+    setupTest({
+      label: "Required Field",
+      required: true,
+    });
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+
+  test("Displays error state", () => {
+    setupTest({
+      error: "This field is required",
+    });
+    expect(screen.getByText("This field is required")).toBeInTheDocument();
+  });
+
+  test("Disables select when disabled prop is true", async () => {
+    const { user } = setupTest({
+      disabled: true,
+    });
+    const trigger = screen.getByRole("button");
+
+    expect(trigger).toBeDisabled();
+    await user.click(trigger);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Navigates options with keyboard", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    // Second option should be selected (started at 0, moved down twice)
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Closes dropdown on Escape key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Opens dropdown with Enter key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Opens dropdown with Space key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard(" ");
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Applies focus ring on focus", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("focus:ring-4");
+    expect(trigger).toHaveClass("focus:ring-blue-300");
+  });
+
+  test("Closes dropdown when clicking outside", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Click outside by clicking on body
+    await user.click(document.body);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Marks selected option with aria-selected", async () => {
+    const { user } = setupTest({
+      value: "opt1",
+    });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    // The selected option should have aria-selected="true"
+    const options = screen.getAllByRole("option");
+    const selectedOption = options.find(opt => opt.getAttribute("aria-selected") === "true");
+    expect(selectedOption).toBeInTheDocument();
+    expect(selectedOption).toHaveTextContent("Option 1");
+  });
+
+  test("Sets aria-expanded correctly", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+});
+
+describe("Keyboard Navigation - ArrowUp", () => {
+  test("ArrowUp moves focus index up within bounds", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    // Navigate down twice then up once
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowUp}");
+    await user.keyboard("{Enter}");
+
+    // Started at index from click (items.findIndex matching value, or -1 => ArrowDown goes to 0, then 1, ArrowUp to 0)
+    expect(changeSpy).toHaveBeenCalled();
+    // After open: focusedIndex = -1 (no value), ArrowDown -> 0, ArrowDown -> 1, ArrowUp -> 0, Enter selects opt1
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt1",
+      item: { name: "Option 1", value: "opt1" },
+    });
+  });
+
+  test("ArrowUp does not go below index 0", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    // ArrowDown to index 0, then ArrowUp should stay at 0
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowUp}");
+    await user.keyboard("{Enter}");
+
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt1",
+      item: { name: "Option 1", value: "opt1" },
+    });
+  });
+
+  test("ArrowUp does nothing when dropdown is closed", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{ArrowUp}");
+    // Dropdown should still be closed
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Keyboard Navigation - Tab", () => {
+  test("Tab key closes the dropdown", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    await user.keyboard("{Tab}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Keyboard Navigation - ArrowDown when closed", () => {
+  test("ArrowDown opens dropdown and focuses first item", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+    // Should open the dropdown
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Enter should select the first item (focusedIndex = 0)
+    await user.keyboard("{Enter}");
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt1",
+      item: { name: "Option 1", value: "opt1" },
+    });
+  });
+});
+
+describe("Keyboard Navigation - ArrowDown bounds at end", () => {
+  test("ArrowDown does not exceed items length", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    // Navigate down many times past end
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    // Should be clamped to last item (index 2)
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt3",
+      item: { name: "Option 3", value: "opt3" },
+    });
+  });
+});
+
+describe("Keyboard - disabled state", () => {
+  test("Keyboard events are ignored when disabled", async () => {
+    const { user } = setupTest({ disabled: true });
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    await user.keyboard("{ArrowDown}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    await user.keyboard(" ");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - no label rendering", () => {
+  test("Does not render label element when label is empty", () => {
+    const { user } = setupTest({
+      label: "",
+    });
+    expect(screen.queryByRole("label")).not.toBeInTheDocument();
+  });
+
+  test("Renders label without required asterisk when not required", () => {
+    setupTest({
+      label: "My Label",
+      required: false,
+    });
+    expect(screen.getByText("My Label")).toBeInTheDocument();
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - error border styling", () => {
+  test("Trigger has error border when error is set", () => {
+    setupTest({ error: "Required" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("border-red-500");
+  });
+
+  test("Trigger has normal border when no error", () => {
+    setupTest({ error: "" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("border-gray-300");
+  });
+});
+
+describe("Select - disabled styling", () => {
+  test("Disabled trigger has opacity and cursor classes", () => {
+    setupTest({ disabled: true });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("opacity-50");
+    expect(trigger).toHaveClass("cursor-not-allowed");
+  });
+
+  test("Enabled trigger does not have disabled classes", () => {
+    setupTest({ disabled: false });
+    const trigger = screen.getByRole("button");
+    expect(trigger).not.toHaveClass("opacity-50");
+    expect(trigger).not.toHaveClass("cursor-not-allowed");
+  });
+});
+
+describe("Select - size variants", () => {
+  test("Applies small size class", () => {
+    setupTest({ size: "sm" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("h-9");
+  });
+
+  test("Applies medium size class (default)", () => {
+    setupTest({ size: "md" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("h-10");
+  });
+
+  test("Applies large size class", () => {
+    setupTest({ size: "lg" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("h-12");
+  });
+});
+
+describe("Select - dropdown chevron rotation", () => {
+  test("Chevron rotates when dropdown is open", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    // When closed, chevron should not have rotate-180
+    const chevron = trigger.querySelector('svg');
+    expect(chevron).not.toHaveClass("rotate-180");
+
+    await user.click(trigger);
+    // When open, chevron should have rotate-180
+    expect(chevron).toHaveClass("rotate-180");
+  });
+});
+
+describe("Select - option hover highlight", () => {
+  test("Mouseenter on option updates focused index styling", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const options = screen.getAllByRole("option");
+
+    // Hover over the third option
+    await fireEvent.mouseEnter(options[2]);
+
+    // The hovered option should have the focused styling
+    expect(options[2]).toHaveClass("bg-gray-100");
+  });
+});
+
+describe("Select - trigger refocuses after selection", () => {
+  test("Trigger element receives focus after item selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 2"));
+
+    expect(trigger).toHaveFocus();
+  });
+});
+
+describe("Select - click outside when already closed", () => {
+  test("Does not error when clicking outside while dropdown is closed", async () => {
+    const { user } = setupTest();
+    // Just clicking body when dropdown is closed should be fine
+    await user.click(document.body);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - opening focuses current selected value", () => {
+  test("Opens with currently selected item focused", async () => {
+    const { user } = setupTest({ value: "opt2" });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const options = screen.getAllByRole("option");
+
+    // opt2 is at index 1, so the focused option should have bg-gray-100
+    expect(options[1]).toHaveClass("bg-gray-100");
+  });
+});
+
+describe("Select - Enter/Space to select focused item", () => {
+  test("Enter key selects the currently focused item", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    // Open with Enter
+    trigger.focus();
+    await user.keyboard("{Enter}");
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Move down and select
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: "opt2",
+      item: { name: "Option 2", value: "opt2" },
+    });
+  });
+
+  test("Space key selects the currently focused item", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    // Open
+    trigger.focus();
+    await user.keyboard(" ");
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Navigate to index 0, then select with Space
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard(" ");
+
+    expect(changeSpy).toHaveBeenCalled();
+  });
+});
+
+describe("Select - other select instance closing", () => {
+  test("Closes when another select instance opens", async () => {
+    const { user } = setupTest({ id: "select-1" });
+    const trigger1 = screen.getByRole("button");
+
+    await user.click(trigger1);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Simulate another select opening by dispatching the custom event
+    window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId: 'other-instance' } }));
+
+    // The Svelte reactive update may need a tick; use waitFor
+    const { waitFor } = await import("@testing-library/svelte");
+    await waitFor(() => {
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+
+  test("Does not close when the same instance dispatches select-opened", async () => {
+    // We cannot easily test this from the outside since instanceId is internal,
+    // but we can verify the dropdown stays open after its own click
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Clicking the same trigger toggles it closed and open
+    await user.click(trigger);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - no error text", () => {
+  test("Does not render error paragraph when error is empty", () => {
+    setupTest({ error: "" });
+    // The trigger should be present with normal border
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("border-gray-300");
+    // There should be no error paragraph element
+    const errorParagraph = document.querySelector('p');
+    expect(errorParagraph).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - portal mode", () => {
+  test("Portal mode renders dropdown via portal when open", async () => {
+    const { user } = setupTest({ portal: true });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    // Portal dropdown should be rendered (it uses use:portalAction to move to body)
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toBeInTheDocument();
+    // Portal dropdown has 'fixed' class instead of 'absolute'
+    expect(listbox).toHaveClass("fixed");
+  });
+
+  test("Portal mode renders items correctly", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ portal: true, onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(3);
+
+    // Select an item in portal mode
+    await user.click(screen.getByText("Option 3"));
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: "opt3",
+      item: { name: "Option 3", value: "opt3" },
+    });
+  });
+
+  test("Portal dropdown is not rendered when closed", () => {
+    setupTest({ portal: true });
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Non-portal dropdown has absolute positioning", async () => {
+    const { user } = setupTest({ portal: false });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toHaveClass("absolute");
+    expect(listbox).not.toHaveClass("fixed");
+  });
+});
+
+describe("Select - option id attributes", () => {
+  test("Options have correct id attributes based on select id", async () => {
+    const { user } = setupTest({ id: "my-select" });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options[0]).toHaveAttribute("id", "my-select-option-0");
+    expect(options[1]).toHaveAttribute("id", "my-select-option-1");
+    expect(options[2]).toHaveAttribute("id", "my-select-option-2");
+  });
+
+  test("Options use name for id when id is not provided", async () => {
+    const { user } = setupTest({ name: "my-field", id: "" });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options[0]).toHaveAttribute("id", "my-field-option-0");
+  });
+});