@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/inputs/SelectDropdown.spec.js

@@ -0,0 +1,512 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, beforeEach } from "vitest";
+import SelectDropdown from "./SelectDropdown.svelte";
+
+const sampleOptions = [
+  { label: "Option 1", value: "opt1" },
+  { label: "Option 2", value: "opt2" },
+  { label: "Option 3", value: "opt3" },
+  { label: "Option 4", value: "opt4" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component, container } = render(SelectDropdown, {
+    props: {
+      options: sampleOptions,
+      ...args,
+    },
+  });
+  return { user, component, container };
+}
+
+describe("SelectDropdown Component Tests", () => {
+  beforeEach(() => {
+    // Clear any existing event listeners
+    document.body.innerHTML = "";
+  });
+
+  test("Renders with default placeholder", () => {
+    setupTest();
+    expect(screen.getByRole("button", { name: /select/i })).toBeInTheDocument();
+    expect(screen.getByText("Select")).toBeInTheDocument();
+  });
+
+  test("Renders with custom placeholder", () => {
+    setupTest({ placeholder: "Choose an option" });
+    expect(screen.getByText("Choose an option")).toBeInTheDocument();
+  });
+
+  test("Shows selected option label", () => {
+    setupTest({ selected: sampleOptions[0] });
+    expect(screen.getByText("Option 1")).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();
+    expect(screen.getByText("Option 4")).toBeInTheDocument();
+  });
+
+  test("Displays all options in dropdown", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(4);
+  });
+
+  test("Selects option on click", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const option2 = screen.getByRole("option", { name: "Option 2" });
+    await user.click(option2);
+
+    // Should show selected option in trigger
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+  });
+
+  test("Closes dropdown after selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const option1 = screen.getByRole("option", { name: "Option 1" });
+    await user.click(option1);
+
+    // Dropdown should be closed
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Calls onselect callback when option is selected", async () => {
+    const onSelectSpy = vi.fn();
+    const { user } = setupTest({ onselect: onSelectSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const option2 = screen.getByRole("option", { name: "Option 2" });
+    await user.click(option2);
+
+    expect(onSelectSpy).toHaveBeenCalledWith(sampleOptions[1]);
+  });
+
+  test("Does not open dropdown when disabled", 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("Applies disabled styles when disabled", () => {
+    setupTest({ disabled: true });
+    const trigger = screen.getByRole("button");
+
+    expect(trigger).toHaveClass("opacity-50");
+    expect(trigger).toHaveClass("cursor-not-allowed");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = setupTest({ class: "custom-class" });
+    const dropdown = container.querySelector(".relative");
+
+    expect(dropdown).toHaveClass("custom-class");
+  });
+
+  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("Navigates options with ArrowDown key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
+
+    const options = screen.getAllByRole("option");
+    await user.keyboard("{ArrowDown}");
+
+    // First option should receive focus
+    expect(options[0]).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+    // Second option should receive focus
+    expect(options[1]).toHaveFocus();
+  });
+
+  test("Navigates options with ArrowUp key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
+
+    const options = screen.getAllByRole("option");
+    await user.keyboard("{ArrowUp}");
+
+    // Should wrap to last option
+    expect(options[3]).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}");
+    // Should move to third option
+    expect(options[2]).toHaveFocus();
+  });
+
+  test("Navigates to first option with Home key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
+
+    const options = screen.getAllByRole("option");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Home}");
+
+    expect(options[0]).toHaveFocus();
+  });
+
+  test("Navigates to last option with End key", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
+
+    const options = screen.getAllByRole("option");
+    await user.keyboard("{End}");
+
+    expect(options[3]).toHaveFocus();
+  });
+
+  test("Closes dropdown on Tab key", 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();
+  });
+
+  test("Returns focus to trigger after Escape", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.keyboard("{Escape}");
+
+    expect(trigger).toHaveFocus();
+  });
+
+  test("Returns focus to trigger after selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const option1 = screen.getByRole("option", { name: "Option 1" });
+    await user.click(option1);
+
+    await waitFor(() => expect(trigger).toHaveFocus());
+  });
+
+  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 the dropdown
+    await user.click(document.body);
+
+    await waitFor(() => {
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+
+  test("Does not close dropdown when clicking inside container", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Click on the trigger again
+    await user.click(trigger);
+
+    // Should toggle closed
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Highlights selected option in dropdown", async () => {
+    const { user } = setupTest({ selected: sampleOptions[1] });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const selectedOption = screen.getByRole("option", { name: "Option 2" });
+    expect(selectedOption).toHaveAttribute("aria-selected", "true");
+    expect(selectedOption).toHaveClass("bg-blue-50");
+  });
+
+  test("Toggles dropdown on successive clicks", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    // Open
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Close
+    await user.click(trigger);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    // Open again
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  test("Sets aria-haspopup attribute on trigger", () => {
+    setupTest();
+    const trigger = screen.getByRole("button");
+
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+  });
+
+  test("Sets aria-expanded based on dropdown state", 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");
+  });
+
+  test("Rotates chevron icon when dropdown is open", async () => {
+    const { user, container } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    const chevron = container.querySelector("svg");
+    expect(chevron).not.toHaveClass("rotate-180");
+
+    await user.click(trigger);
+    expect(chevron).toHaveClass("rotate-180");
+  });
+
+  test("Handles empty options array", () => {
+    setupTest({ options: [] });
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  test("Updates displayed value when selected prop changes", async () => {
+    const { container } = render(SelectDropdown, {
+      props: {
+        options: sampleOptions,
+        selected: sampleOptions[0],
+      },
+    });
+
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+
+    // Re-render with new selected prop (Svelte 5 compatible approach)
+    container.innerHTML = "";
+    render(SelectDropdown, {
+      props: {
+        options: sampleOptions,
+        selected: sampleOptions[2],
+      },
+      target: container,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("Option 3")).toBeInTheDocument();
+    });
+  });
+
+  test("Shows all options even when one is selected", async () => {
+    const { user } = setupTest({ selected: sampleOptions[0] });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(4);
+  });
+
+  test("Does not interfere with keyboard events outside dropdown", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    // Don't open dropdown
+    await user.keyboard("{ArrowDown}");
+
+    // Dropdown should not open
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Wraps focus correctly with ArrowDown", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
+
+    const options = screen.getAllByRole("option");
+
+    // Navigate to last item
+    await user.keyboard("{End}");
+    expect(options[3]).toHaveFocus();
+
+    // Press ArrowDown - should wrap to first
+    await user.keyboard("{ArrowDown}");
+    expect(options[0]).toHaveFocus();
+  });
+
+  test("Wraps focus correctly with ArrowUp", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
+
+    const options = screen.getAllByRole("option");
+
+    // First option
+    await user.keyboard("{Home}");
+    expect(options[0]).toHaveFocus();
+
+    // Press ArrowUp - should wrap to last
+    await user.keyboard("{ArrowUp}");
+    expect(options[3]).toHaveFocus();
+  });
+
+  test("Applies correct styling classes to dropdown menu", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const menu = screen.getByRole("listbox");
+    expect(menu).toHaveClass("absolute");
+    expect(menu).toHaveClass("z-10");
+    expect(menu).toHaveClass("rounded-lg");
+    expect(menu).toHaveClass("shadow-lg");
+  });
+
+  test("Truncates long selected option labels", () => {
+    setupTest({
+      selected: { label: "Very long option name that should be truncated", value: "long" },
+    });
+    const span = screen.getByText("Very long option name that should be truncated");
+    expect(span).toHaveClass("truncate");
+  });
+
+  test("Allows null selected value", () => {
+    setupTest({ selected: null });
+    expect(screen.getByText("Select")).toBeInTheDocument();
+  });
+
+  test("Handles option selection with Enter key", async () => {
+    const onSelectSpy = vi.fn();
+    const { user } = setupTest({ onselect: onSelectSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeInTheDocument());
+
+    await user.keyboard("{ArrowDown}");
+    const options = screen.getAllByRole("option");
+
+    // Simulate Enter key on focused option
+    await fireEvent.click(options[0]);
+
+    expect(onSelectSpy).toHaveBeenCalledWith(sampleOptions[0]);
+  });
+
+  test("Maintains dropdown position with max-height scroll", async () => {
+    const manyOptions = Array.from({ length: 20 }, (_, i) => ({
+      label: `Option ${i + 1}`,
+      value: `opt${i + 1}`,
+    }));
+
+    const { user } = setupTest({ options: manyOptions });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const menu = screen.getByRole("listbox");
+    expect(menu).toHaveClass("max-h-60");
+    expect(menu).toHaveClass("overflow-y-auto");
+  });
+
+  test("Initializes focusedIndex to -1 when opening dropdown", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    // No option should be focused initially
+    const options = screen.getAllByRole("option");
+    options.forEach(option => {
+      expect(option).not.toHaveFocus();
+    });
+  });
+
+  test("Opens and closes dropdown instances independently", async () => {
+    const { user: user1 } = setupTest({ placeholder: "Dropdown 1" });
+    const { user: user2 } = setupTest({ placeholder: "Dropdown 2" });
+
+    const trigger1 = screen.getByRole("button", { name: "Dropdown 1" });
+    const trigger2 = screen.getByRole("button", { name: "Dropdown 2" });
+
+    // Open first dropdown
+    await user1.click(trigger1);
+    expect(screen.getAllByRole("listbox")).toHaveLength(1);
+
+    // Opening second dropdown closes first (click-outside behavior)
+    await user2.click(trigger2);
+
+    // Should have exactly one listbox open (the second one)
+    const listboxes = screen.getAllByRole("listbox");
+    expect(listboxes).toHaveLength(1);
+  });
+
+  test("Maintains proper z-index for dropdown overlay", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const menu = screen.getByRole("listbox");
+    expect(menu).toHaveClass("z-10");
+  });
+});

package/dist/recipes/inputs/SelectDropdown.svelte

@@ -24,7 +24,7 @@
     disabled = false,
     onselect,
   }: Props = $props();
-
+
   let isOpen = $state(false);
   let triggerRef = $state<HTMLButtonElement>();
   let menuRef = $state<HTMLDivElement>();
@@ -111,59 +111,59 @@
         break;
     }
   }
-
-  $effect(() => {
-    if (typeof window !== "undefined") {
-      // Use mousedown for click-outside to capture before click completes
-      document.addEventListener("mousedown", handleClickOutside, true);
-      document.addEventListener("keydown", handleKeyDown);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside, true);
-        document.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-  });
-</script>
-
-<div bind:this={containerRef} class="relative inline-block text-left {className}">
-  <button
-    bind:this={triggerRef}
-    type="button"
-    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    onclick={toggleDropdown}
-    aria-haspopup="listbox"
-    aria-expanded={isOpen}
-    aria-label={placeholder}
-    {disabled}
-  >
-    <span class="truncate">
-      {selected?.label || placeholder}
-    </span>
-    <ChevronDownOutline class="w-4 h-4 ml-2 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-  </button>
-
-  {#if isOpen}
-    <div
-      bind:this={menuRef}
-      class="absolute z-10 mt-1 w-full bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-gray-700 dark:divide-gray-600 max-h-60 overflow-y-auto"
-      role="listbox"
-      aria-label={placeholder}
-    >
-      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-        {#each options as option}
-          <li>
-            <button
-              type="button"
-              class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white {selected?.value === option.value ? 'bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white' : ''}"
-              onclick={() => selectOption(option)}
-              role="option"
-              aria-selected={selected?.value === option.value}
-            >
-              {option.label}
-            </button>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  {/if}
-</div>
+
+  $effect(() => {
+    if (typeof window !== "undefined") {
+      // Use mousedown for click-outside to capture before click completes
+      document.addEventListener("mousedown", handleClickOutside, true);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside, true);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  });
+</script>
+
+<div bind:this={containerRef} class="relative inline-block text-left {className}">
+  <button
+    bind:this={triggerRef}
+    type="button"
+    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    onclick={toggleDropdown}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={placeholder}
+    {disabled}
+  >
+    <span class="truncate">
+      {selected?.label || placeholder}
+    </span>
+    <ChevronDownOutline class="w-4 h-4 ml-2 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+  </button>
+
+  {#if isOpen}
+    <div
+      bind:this={menuRef}
+      class="absolute z-10 mt-1 w-full bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-gray-700 dark:divide-gray-600 max-h-60 overflow-y-auto"
+      role="listbox"
+      aria-label={placeholder}
+    >
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        {#each options as option}
+          <li>
+            <button
+              type="button"
+              class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white {selected?.value === option.value ? 'bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white' : ''}"
+              onclick={() => selectOption(option)}
+              role="option"
+              aria-selected={selected?.value === option.value}
+            >
+              {option.label}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</div>

package/dist/recipes/modals/AlertModal.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AlertModal.spec.d.ts.map

package/dist/recipes/modals/AlertModal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.spec.js"],"names":[],"mappings":""}