@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/Dropdown/Dropdown.spec.js

@@ -0,0 +1,366 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
+import Dropdown from './Dropdown.svelte';
+
+describe('Dropdown Component', () => {
+  test('does not render when open is false', () => {
+    const { container } = render(Dropdown, { props: { open: false } });
+    expect(container.querySelector('[role="menu"]')).not.toBeInTheDocument();
+  });
+
+  test('renders when open is true', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+
+  test('has role="menu"', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toBeInTheDocument();
+  });
+
+  test('applies default ariaLabel', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveAttribute('aria-label', 'Menu');
+  });
+
+  test('applies custom ariaLabel', () => {
+    const { container } = render(Dropdown, { props: { open: true, ariaLabel: 'Options' } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveAttribute('aria-label', 'Options');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Dropdown, { props: { open: true, class: 'custom-dropdown' } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('custom-dropdown');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Dropdown, { props: { open: true, 'data-testid': 'my-dropdown' } });
+    const menu = container.querySelector('[data-testid="my-dropdown"]');
+    expect(menu).toBeInTheDocument();
+  });
+});
+
+describe('Dropdown Styling', () => {
+  test('has absolute positioning', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('absolute');
+  });
+
+  test('has z-10 for stacking', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('z-10');
+  });
+
+  test('has bg-white background', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('bg-white');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('has rounded-lg border radius', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('rounded-lg');
+  });
+
+  test('has shadow-lg for elevation', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('shadow-lg');
+  });
+
+  test('has w-44 default width', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('w-44');
+  });
+
+  test('has divider classes', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toHaveClass('divide-y');
+    expect(menu).toHaveClass('divide-gray-100');
+  });
+});
+
+describe('Dropdown List', () => {
+  test('contains ul element', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toBeInTheDocument();
+  });
+
+  test('ul has py-2 padding', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('py-2');
+  });
+
+  test('ul has text-sm sizing', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('text-sm');
+  });
+
+  test('ul has text-gray-700 color', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('text-gray-700');
+  });
+
+  test('ul has dark mode text color', () => {
+    const { container } = render(Dropdown, { props: { open: true } });
+    const ul = container.querySelector('ul');
+    expect(ul).toHaveClass('dark:text-gray-200');
+  });
+});
+
+describe('Dropdown Props', () => {
+  test('open defaults to false', () => {
+    const { container } = render(Dropdown);
+    expect(container.querySelector('[role="menu"]')).not.toBeInTheDocument();
+  });
+
+  test('placement defaults to bottom', () => {
+    // Placement affects positioning classes
+    const { container } = render(Dropdown, { props: { open: true } });
+    const menu = container.querySelector('[role="menu"]');
+    // Default bottom placement should exist without explicit placement classes from other positions
+    expect(menu).toBeInTheDocument();
+  });
+
+  test('activeUrl can be set', () => {
+    // activeUrl is passed via context to child items
+    const { container } = render(Dropdown, { props: { open: true, activeUrl: '/test' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+});
+
+describe('Dropdown Callbacks', () => {
+  test('onclose callback prop is accepted', () => {
+    const onclose = vi.fn();
+    const { container } = render(Dropdown, { props: { open: true, onclose } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+    // The onclose callback is triggered by keyboard/click events, tested in integration
+  });
+});
+
+describe('Dropdown Keyboard Navigation', () => {
+  let cleanup;
+
+  beforeEach(() => {
+    // Clean up any existing event listeners
+    cleanup = null;
+  });
+
+  afterEach(() => {
+    if (cleanup) {
+      cleanup();
+    }
+  });
+
+  test('Escape key closes dropdown and calls onclose', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    expect(ul).toBeInTheDocument();
+
+    // Simulate Escape key from within the dropdown ul (dropdownRef)
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    document.dispatchEvent(event);
+
+    expect(onclose).toHaveBeenCalled();
+  });
+
+  test('Tab key closes dropdown and calls onclose', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+
+    // Simulate Tab key from within the dropdown ul (dropdownRef)
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    document.dispatchEvent(event);
+
+    expect(onclose).toHaveBeenCalled();
+  });
+
+  test('ArrowDown key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('ArrowUp key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('Home key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('End key prevents default', async () => {
+    const result = render(Dropdown, { props: { open: true } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+    const event = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true });
+    Object.defineProperty(event, 'target', { value: ul, enumerable: true });
+    const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  test('keyboard events do not trigger when dropdown is closed', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: false, onclose } });
+    cleanup = result.unmount;
+
+    // Simulate Escape key when closed
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    document.dispatchEvent(event);
+
+    // onclose should not be called when dropdown is already closed
+    expect(onclose).not.toHaveBeenCalled();
+  });
+});
+
+describe('Dropdown Click Outside', () => {
+  let cleanup;
+
+  afterEach(() => {
+    if (cleanup) {
+      cleanup();
+    }
+  });
+
+  test('clicking outside closes dropdown and calls onclose', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const menu = result.container.querySelector('[role="menu"]');
+    expect(menu).toBeInTheDocument();
+
+    // Click outside the dropdown
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+
+    const clickEvent = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: outsideElement, enumerable: true });
+    document.dispatchEvent(clickEvent);
+
+    expect(onclose).toHaveBeenCalled();
+
+    document.body.removeChild(outsideElement);
+  });
+
+  test('clicking inside dropdown does not close it', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: true, onclose } });
+    cleanup = result.unmount;
+
+    const ul = result.container.querySelector('ul');
+
+    // Click inside the dropdown (on the ul element which is a child)
+    const clickEvent = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: ul, enumerable: true });
+    document.dispatchEvent(clickEvent);
+
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  test('does not handle click outside when dropdown is closed', async () => {
+    const onclose = vi.fn();
+    const result = render(Dropdown, { props: { open: false, onclose } });
+    cleanup = result.unmount;
+
+    // Click outside
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+
+    const clickEvent = new MouseEvent('mousedown', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: outsideElement, enumerable: true });
+    document.dispatchEvent(clickEvent);
+
+    expect(onclose).not.toHaveBeenCalled();
+
+    document.body.removeChild(outsideElement);
+  });
+});
+
+describe('Dropdown Context', () => {
+  test('sets up dropdown context with activeUrl', () => {
+    const { container } = render(Dropdown, { props: { open: true, activeUrl: '/test-url' } });
+    expect(container.querySelector('[role="menu"]')).toBeInTheDocument();
+  });
+
+  test('context close function calls onclose', () => {
+    const onclose = vi.fn();
+    render(Dropdown, { props: { open: true, onclose } });
+    // Context is tested through integration with child components
+    expect(onclose).not.toHaveBeenCalled(); // Not called until context.close() is invoked
+  });
+});
+
+describe('Dropdown Lifecycle', () => {
+  test('cleans up event listeners on destroy', () => {
+    const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
+    const result = render(Dropdown, { props: { open: true } });
+
+    result.unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('mousedown', expect.any(Function), true);
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
+
+    removeEventListenerSpy.mockRestore();
+  });
+});

package/dist/primitives/Dropdown/DropdownItem.spec.d.ts

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

package/dist/primitives/Dropdown/DropdownItem.spec.d.ts.map

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

package/dist/primitives/Dropdown/DropdownItem.spec.js

@@ -0,0 +1,182 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import DropdownItem from './DropdownItem.svelte';
+
+describe('DropdownItem Component', () => {
+  test('renders as button by default (no href)', () => {
+    const { container } = render(DropdownItem);
+    expect(container.querySelector('button')).toBeInTheDocument();
+    expect(container.querySelector('a')).not.toBeInTheDocument();
+  });
+
+  test('renders as anchor when href is provided', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test' } });
+    expect(container.querySelector('a')).toBeInTheDocument();
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  test('anchor has correct href attribute', () => {
+    const { container } = render(DropdownItem, { props: { href: '/dashboard' } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('href', '/dashboard');
+  });
+
+  test('has role="menuitem"', () => {
+    const { container } = render(DropdownItem);
+    expect(container.querySelector('[role="menuitem"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(DropdownItem, { props: { class: 'custom-item' } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('custom-item');
+  });
+
+  test('is wrapped in li element', () => {
+    const { container } = render(DropdownItem);
+    expect(container.querySelector('li')).toBeInTheDocument();
+    expect(container.querySelector('li button')).toBeInTheDocument();
+  });
+});
+
+describe('DropdownItem Disabled State', () => {
+  test('button is disabled when disabled prop is true', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toBeDisabled();
+  });
+
+  test('has tabindex=-1 when disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('has tabindex=0 when not disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: false } });
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('tabindex', '0');
+  });
+
+  test('has opacity-50 class when disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('opacity-50');
+  });
+
+  test('has cursor-not-allowed when disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('cursor-not-allowed');
+  });
+
+  test('has cursor-pointer when not disabled', () => {
+    const { container } = render(DropdownItem, { props: { disabled: false } });
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('cursor-pointer');
+  });
+});
+
+describe('DropdownItem Click Handling', () => {
+  test('calls onclick when clicked', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(DropdownItem, { props: { onclick } });
+
+    const button = container.querySelector('button');
+    await user.click(button);
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('does not call onclick when disabled', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(DropdownItem, { props: { onclick, disabled: true } });
+
+    const button = container.querySelector('button');
+    await user.click(button);
+    expect(onclick).not.toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Styling', () => {
+  test('has block and w-full classes', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('block');
+    expect(button).toHaveClass('w-full');
+  });
+
+  test('has text-left alignment', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('text-left');
+  });
+
+  test('has correct padding', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('px-4');
+    expect(button).toHaveClass('py-2');
+  });
+
+  test('has text-sm size', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('has hover styles', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('hover:bg-gray-100');
+  });
+
+  test('has dark mode hover styles', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('dark:hover:bg-gray-600');
+    expect(button).toHaveClass('dark:hover:text-white');
+  });
+
+  test('has default text color', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('text-gray-700');
+  });
+
+  test('has dark mode text color', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('dark:text-gray-200');
+  });
+});
+
+describe('DropdownItem as Link', () => {
+  test('link has role="menuitem"', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test' } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('role', 'menuitem');
+  });
+
+  test('link has correct tabindex when not disabled', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test' } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('tabindex', '0');
+  });
+
+  test('link has tabindex=-1 when disabled', () => {
+    const { container } = render(DropdownItem, { props: { href: '/test', disabled: true } });
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('tabindex', '-1');
+  });
+});
+
+describe('DropdownItem Button Type', () => {
+  test('button has type="button"', () => {
+    const { container } = render(DropdownItem);
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+});

package/dist/primitives/Icons/iconTestUtils.spec.d.ts

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

package/dist/primitives/Icons/iconTestUtils.spec.d.ts.map

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