@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/recipes/inputs/Search.spec.d.ts

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

package/dist/recipes/inputs/Search.spec.d.ts.map

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

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

@@ -0,0 +1,177 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Search from './Search.svelte';
+
+describe('Search Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(Search);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('wrapper has relative class', () => {
+    const { container } = render(Search);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('relative');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Search, { props: { class: 'custom-search' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-search');
+  });
+
+  test('renders a search input', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input[type="search"]');
+    expect(input).toBeInTheDocument();
+  });
+
+  test('renders a search icon', () => {
+    const { container } = render(Search);
+    const icon = container.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+  });
+});
+
+describe('Search Placeholder', () => {
+  test('default placeholder is "Search"', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Search');
+  });
+
+  test('custom placeholder is displayed', () => {
+    const { container } = render(Search, { props: { placeholder: 'Search events...' } });
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Search events...');
+  });
+});
+
+describe('Search Props', () => {
+  test('name prop is passed to input', () => {
+    const { container } = render(Search, { props: { name: 'search-query' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('name', 'search-query');
+  });
+
+  test('id prop is passed to input', () => {
+    const { container } = render(Search, { props: { id: 'main-search' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('id', 'main-search');
+  });
+
+  test('disabled prop disables input', () => {
+    const { container } = render(Search, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+
+  test('input is not disabled by default', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).not.toBeDisabled();
+  });
+
+  test('disabled applies opacity class', () => {
+    const { container } = render(Search, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('opacity-50');
+  });
+});
+
+describe('Search Size', () => {
+  test('default size is lg', () => {
+    const { container } = render(Search);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-11');
+  });
+
+  test('size sm applies h-8', () => {
+    const { container } = render(Search, { props: { size: 'sm' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-8');
+  });
+
+  test('size md applies h-10', () => {
+    const { container } = render(Search, { props: { size: 'md' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-10');
+  });
+
+  test('size lg applies h-11', () => {
+    const { container } = render(Search, { props: { size: 'lg' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-11');
+  });
+});
+
+describe('Search Input Styling', () => {
+  test('has gray background', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('bg-gray-50');
+  });
+
+  test('has rounded corners', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('rounded-lg');
+  });
+
+  test('has border', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('border');
+    expect(input).toHaveClass('border-gray-300');
+  });
+
+  test('has focus ring', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('focus:ring-4');
+    expect(input).toHaveClass('focus:ring-blue-300');
+  });
+});
+
+describe('Search Icon Positioning', () => {
+  test('icon is in absolute positioned container', () => {
+    const { container } = render(Search);
+    const iconContainer = container.querySelector('.absolute');
+    expect(iconContainer).toBeInTheDocument();
+  });
+
+  test('icon container has left positioning', () => {
+    const { container } = render(Search);
+    const iconContainer = container.querySelector('.absolute.inset-y-0.left-0');
+    expect(iconContainer).toBeInTheDocument();
+  });
+
+  test('icon is not clickable', () => {
+    const { container } = render(Search);
+    const iconContainer = container.querySelector('.pointer-events-none');
+    expect(iconContainer).toBeInTheDocument();
+  });
+});
+
+describe('Search Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(Search, {
+      props: {
+        placeholder: 'Find venues...',
+        name: 'venue-search',
+        id: 'venue-search-input',
+        size: 'md',
+        disabled: true,
+        class: 'custom-search'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-search');
+    expect(wrapper).toHaveClass('h-10');
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Find venues...');
+    expect(input).toHaveAttribute('name', 'venue-search');
+    expect(input).toHaveAttribute('id', 'venue-search-input');
+    expect(input).toBeDisabled();
+  });
+});

package/dist/recipes/inputs/SelectDropdown.spec.d.ts

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

package/dist/recipes/inputs/SelectDropdown.spec.d.ts.map

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

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");
+  });
+});