@getmicdrop/svelte-components 5.17.1 → 5.17.4

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

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

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

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import DropdownDivider from './DropdownDivider.svelte';
+
+describe('DropdownDivider', () => {
+  test('renders a list item', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('li')).toBeInTheDocument();
+  });
+
+  test('has role="separator"', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[role="separator"]')).toBeInTheDocument();
+  });
+
+  test('has aria-hidden="true"', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
+  });
+
+  test('has border styling', () => {
+    const { container } = render(DropdownDivider);
+    expect(container.querySelector('[class*="border"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(DropdownDivider, { props: { class: 'my-divider' } });
+    expect(container.querySelector('.my-divider')).toBeInTheDocument();
+  });
+});

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

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, fireEvent } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { expect, describe, test, vi } from 'vitest';
 import DropdownItem from './DropdownItem.svelte';
+import DropdownItemTestWrapper from './DropdownItemTestWrapper.svelte';
 
 describe('DropdownItem Component', () => {
   test('renders as button by default (no href)', () => {
@@ -180,3 +181,156 @@ describe('DropdownItem Button Type', () => {
     expect(button).toHaveAttribute('type', 'button');
   });
 });
+
+describe('DropdownItem Disabled Click on Link (line 32)', () => {
+  test('preventDefault is called when clicking a disabled link item', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { href: '/test', disabled: true, onclick, label: 'Disabled Link' }
+    });
+
+    const anchor = container.querySelector('a');
+    expect(anchor).toBeInTheDocument();
+    // Click the disabled link - handleClick should call preventDefault and return early
+    await user.click(anchor);
+    expect(onclick).not.toHaveBeenCalled();
+  });
+
+  test('preventDefault is called via fireEvent on disabled link', async () => {
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { href: '/somewhere', disabled: true, label: 'Disabled' }
+    });
+
+    const anchor = container.querySelector('a');
+    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
+    const spy = vi.spyOn(clickEvent, 'preventDefault');
+    anchor.dispatchEvent(clickEvent);
+    expect(spy).toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Context Close (line 37)', () => {
+  test('calls context.close() when non-link item is clicked with context', async () => {
+    const user = userEvent.setup();
+    const closeFn = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        withContext: true,
+        contextClose: closeFn,
+        label: 'Close Item'
+      }
+    });
+
+    const button = container.querySelector('button');
+    await user.click(button);
+    expect(closeFn).toHaveBeenCalled();
+  });
+
+  test('does not call context.close() when item has href', async () => {
+    const user = userEvent.setup();
+    const closeFn = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        href: '/test',
+        withContext: true,
+        contextClose: closeFn,
+        label: 'Link Item'
+      }
+    });
+
+    const anchor = container.querySelector('a');
+    await user.click(anchor);
+    // context.close() should NOT be called for link items (href is truthy)
+    expect(closeFn).not.toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Keydown Handling (lines 41-44)', () => {
+  test('Enter key triggers handleClick on button item', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { onclick, label: 'Keyboard Item' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: 'Enter' });
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('Space key triggers handleClick on button item', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { onclick, label: 'Keyboard Item' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: ' ' });
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('Enter key triggers handleClick on link item', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { href: '/test', onclick, label: 'Keyboard Link' }
+    });
+
+    const anchor = container.querySelector('a');
+    await fireEvent.keyDown(anchor, { key: 'Enter' });
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('other keys do not trigger handleClick', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { onclick, label: 'Keyboard Item' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: 'Tab' });
+    expect(onclick).not.toHaveBeenCalled();
+  });
+
+  test('Enter key on disabled item calls preventDefault', async () => {
+    const onclick = vi.fn();
+    const { container } = render(DropdownItemTestWrapper, {
+      props: { disabled: true, onclick, label: 'Disabled' }
+    });
+
+    const button = container.querySelector('button');
+    await fireEvent.keyDown(button, { key: 'Enter' });
+    expect(onclick).not.toHaveBeenCalled();
+  });
+});
+
+describe('DropdownItem Active URL Styling', () => {
+  test('applies active classes when activeUrl matches href', () => {
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        href: '/dashboard',
+        withContext: true,
+        contextActiveUrl: '/dashboard',
+        label: 'Dashboard'
+      }
+    });
+
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveClass('bg-blue-50');
+    expect(anchor).toHaveClass('text-blue-700');
+  });
+
+  test('applies default classes when activeUrl does not match href', () => {
+    const { container } = render(DropdownItemTestWrapper, {
+      props: {
+        href: '/settings',
+        withContext: true,
+        contextActiveUrl: '/dashboard',
+        label: 'Settings'
+      }
+    });
+
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveClass('text-gray-700');
+    expect(anchor).not.toHaveClass('bg-blue-50');
+  });
+});

package/dist/primitives/Dropdown/DropdownItemTestWrapper.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import DropdownItem from "./DropdownItem.svelte";
+
+  interface Props {
+    href?: string;
+    disabled?: boolean;
+    class?: string;
+    onclick?: (event: MouseEvent | KeyboardEvent) => void;
+    /** Context values */
+    contextActiveUrl?: string;
+    contextClose?: (() => void) | undefined;
+    /** Whether to set dropdown context at all */
+    withContext?: boolean;
+    /** Label text for the item */
+    label?: string;
+  }
+
+  let {
+    href = undefined,
+    disabled = false,
+    class: className = '',
+    onclick,
+    contextActiveUrl = '',
+    contextClose = undefined,
+    withContext = false,
+    label = 'Item'
+  }: Props = $props();
+
+  // Context is set once at component init with initial prop values.
+  // The Svelte warning about capturing initial values is expected here
+  // since setContext must be called synchronously during component creation.
+  if (withContext) {
+    setContext("dropdown", {
+      get activeUrl() { return contextActiveUrl; },
+      close: contextClose
+    });
+  }
+</script>
+
+<DropdownItem {href} {disabled} class={className} {onclick}>
+  {label}
+</DropdownItem>

package/dist/primitives/Dropdown/DropdownItemTestWrapper.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    href?: string;
+    disabled?: boolean;
+    class?: string;
+    onclick?: (event: MouseEvent | KeyboardEvent) => void;
+    /** Context values */
+    contextActiveUrl?: string;
+    contextClose?: (() => void) | undefined;
+    /** Whether to set dropdown context at all */
+    withContext?: boolean;
+    /** Label text for the item */
+    label?: string;
+}
+declare const DropdownItemTestWrapper: import("svelte").Component<Props, {}, "">;
+type DropdownItemTestWrapper = ReturnType<typeof DropdownItemTestWrapper>;
+export default DropdownItemTestWrapper;
+//# sourceMappingURL=DropdownItemTestWrapper.svelte.d.ts.map

package/dist/primitives/Dropdown/DropdownItemTestWrapper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItemTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/DropdownItemTestWrapper.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACtD,qBAAqB;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACxC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/primitives/Helper/Helper.spec.d.ts

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

package/dist/primitives/Helper/Helper.spec.d.ts.map

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

package/dist/primitives/Helper/Helper.spec.js

@@ -0,0 +1,57 @@
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Helper from './Helper.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Helper', () => {
+  test('renders a paragraph element', () => {
+    const { container } = render(Helper);
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+
+  test('default color has gray text', () => {
+    const { container } = render(Helper);
+    expect(container.querySelector('[class*="gray"]')).toBeInTheDocument();
+  });
+
+  test('red color has red text', () => {
+    const { container } = render(Helper, { props: { color: 'red' } });
+    expect(container.querySelector('[class*="red"]')).toBeInTheDocument();
+  });
+
+  test('green color has green text', () => {
+    const { container } = render(Helper, { props: { color: 'green' } });
+    expect(container.querySelector('[class*="green"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Helper, { props: { class: 'my-helper' } });
+    expect(container.querySelector('.my-helper')).toBeInTheDocument();
+  });
+
+  test('renders children content when provided', () => {
+    const { container } = render(Helper, {
+      props: { children: textSnippet('Helper text content') }
+    });
+    expect(container.querySelector('p').textContent).toBe('Helper text content');
+  });
+
+  test('renders empty paragraph when no children provided', () => {
+    const { container } = render(Helper);
+    expect(container.querySelector('p').textContent).toBe('');
+  });
+
+  test('handles unknown color gracefully', () => {
+    const { container } = render(Helper, { props: { color: 'unknown' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    // Unknown color falls back to empty string via null-coalescing
+    expect(p.className).toContain('mt-1');
+  });
+});