@getmicdrop/svelte-components 5.17.1 → 5.17.4

package/dist/primitives/BottomSheet/BottomSheet.spec.js

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, fireEvent, cleanup } from '@testing-library/svelte';
 import BottomSheet from './BottomSheet.svelte';
 import BottomSheetWrapper from './BottomSheetWrapper.test.svelte';
+import BottomSheetWithActions from './BottomSheetWithActions.test.svelte';
 
 describe('BottomSheet Component', () => {
   beforeEach(() => {
@@ -133,4 +134,105 @@ describe('BottomSheet Component', () => {
 
     expect(document.body.style.overflow).toBe('');
   });
+
+  it('renders actions slot when provided', () => {
+    const { container } = render(BottomSheetWithActions, { props: { open: true } });
+    // The actions area should contain our buttons
+    const saveBtn = container.querySelector('button');
+    expect(saveBtn).toBeTruthy();
+    // Check both action buttons are rendered
+    const buttons = container.querySelectorAll('button');
+    const buttonTexts = Array.from(buttons).map(b => b.textContent);
+    expect(buttonTexts).toContain('Save');
+    expect(buttonTexts).toContain('Cancel');
+  });
+
+  it('does not render actions area when no actions snippet is provided', () => {
+    const { container } = render(BottomSheet, { props: { open: true } });
+    // The actions footer area should not exist if no actions snippet
+    const actionsArea = container.querySelector('.border-t.border-gray-200');
+    expect(actionsArea).toBeFalsy();
+  });
+
+  it('applies alwaysSheet class when alwaysSheet is true', () => {
+    const { container } = render(BottomSheet, {
+      props: { open: true, alwaysSheet: true }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    // When alwaysSheet is true, backdrop should NOT have md:items-center
+    expect(backdrop.classList.contains('md:items-center')).toBe(false);
+  });
+
+  it('applies responsive classes when alwaysSheet is false', () => {
+    const { container } = render(BottomSheet, {
+      props: { open: true, alwaysSheet: false }
+    });
+    const backdrop = container.querySelector('.fixed.inset-0');
+    // When alwaysSheet is false, backdrop should have md:items-center
+    expect(backdrop.classList.contains('md:items-center')).toBe(true);
+  });
+
+  it('does not close on backdrop click when target is not currentTarget', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    // Click the inner sheet panel (not the backdrop itself)
+    const sheetPanel = container.querySelector('.bg-white');
+    await fireEvent.click(sheetPanel);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('does not call onclose on Escape when key is not Escape', async () => {
+    let closeCalled = false;
+    const onclose = () => {
+      closeCalled = true;
+    };
+
+    render(BottomSheet, { props: { open: true, onclose } });
+
+    await fireEvent.keyDown(window, { key: 'Enter' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('handles open toggling from true to false via effect', async () => {
+    const { rerender } = render(BottomSheetWithActions, { props: { open: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await rerender({ open: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('does not close when clicking on the handle bar inside the sheet', async () => {
+    let closeCalled = false;
+    const onclose = () => { closeCalled = true; };
+
+    const { container } = render(BottomSheet, {
+      props: { open: true, onclose }
+    });
+    // Click the handle bar (a child of the backdrop)
+    const handleBar = container.querySelector('.w-10.h-1.bg-gray-300');
+    await fireEvent.click(handleBar);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('restores body overflow when initially rendered as closed', async () => {
+    // Render initially closed - the $effect should set overflow to ''
+    render(BottomSheet, { props: { open: false } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('cleans up overflow on destroy when document is available', () => {
+    document.body.style.overflow = 'hidden';
+    const { unmount } = render(BottomSheetWithActions, { props: { open: true } });
+    unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
 });

package/dist/primitives/BottomSheet/BottomSheetWithActions.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import BottomSheet from './BottomSheet.svelte';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    alwaysSheet?: boolean;
+    onclose?: () => void;
+  }
+
+  let { open = false, title = '', alwaysSheet = false, onclose }: Props = $props();
+</script>
+
+<BottomSheet bind:open {title} {alwaysSheet} {onclose}>
+  <div>Test content</div>
+  {#snippet actions()}
+    <button>Save</button>
+    <button>Cancel</button>
+  {/snippet}
+</BottomSheet>

package/dist/primitives/BottomSheet/BottomSheetWithActions.test.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    open?: boolean;
+    title?: string;
+    alwaysSheet?: boolean;
+    onclose?: () => void;
+}
+declare const BottomSheetWithActions: import("svelte").Component<Props, {}, "">;
+type BottomSheetWithActions = ReturnType<typeof BottomSheetWithActions>;
+export default BottomSheetWithActions;
+//# sourceMappingURL=BottomSheetWithActions.test.svelte.d.ts.map

package/dist/primitives/BottomSheet/BottomSheetWithActions.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetWithActions.test.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheetWithActions.test.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAkBH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/primitives/Button/ButtonGroup.spec.d.ts

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

package/dist/primitives/Button/ButtonGroup.spec.d.ts.map

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

package/dist/primitives/Button/ButtonGroup.spec.js

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import ButtonGroup from './ButtonGroup.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('ButtonGroup', () => {
+  test('renders with role="group"', () => {
+    const { container } = render(ButtonGroup);
+    expect(container.querySelector('[role="group"]')).toBeInTheDocument();
+  });
+
+  test('has inline-flex layout', () => {
+    const { container } = render(ButtonGroup);
+    expect(container.querySelector('.inline-flex')).toBeInTheDocument();
+  });
+
+  test('has rounded styling', () => {
+    const { container } = render(ButtonGroup);
+    expect(container.querySelector('[class*="rounded"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ButtonGroup, { props: { class: 'my-group' } });
+    expect(container.querySelector('.my-group')).toBeInTheDocument();
+  });
+
+  test('renders children content when provided', () => {
+    const { container } = render(ButtonGroup, {
+      props: { children: textSnippet('Group content') }
+    });
+    expect(container.querySelector('[role="group"]').textContent).toBe('Group content');
+  });
+
+  test('renders empty group when no children provided', () => {
+    const { container } = render(ButtonGroup);
+    expect(container.querySelector('[role="group"]').textContent).toBe('');
+  });
+});

package/dist/primitives/Checkbox/Checkbox.spec.js

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
 import { expect, describe, test, vi } from 'vitest';
 import Checkbox from './Checkbox.svelte';
 
@@ -235,6 +236,37 @@ describe('Checkbox Event Handling', () => {
   });
 });
 
+describe('Checkbox Color Fallback', () => {
+  test('falls back to blue when an invalid color is provided', () => {
+    const { container } = render(Checkbox, { props: { color: 'invalid-color' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-blue-600');
+  });
+});
+
+describe('Checkbox Children Snippet', () => {
+  test('renders children snippet text inside a span', () => {
+    const { container } = render(Checkbox, {
+      props: {
+        children: createRawSnippet(() => ({
+          render: () => `<span>Accept terms</span>`
+        }))
+      }
+    });
+    const span = container.querySelector('label > span');
+    expect(span).toBeInTheDocument();
+    expect(span).toHaveClass('text-sm');
+    expect(span).toHaveClass('font-medium');
+    expect(span.textContent).toContain('Accept terms');
+  });
+
+  test('does not render label span when no children provided', () => {
+    const { container } = render(Checkbox);
+    const spans = container.querySelectorAll('label > span');
+    expect(spans.length).toBe(0);
+  });
+});
+
 describe('Checkbox Toggle Behavior', () => {
   test('clicking toggles checked state', async () => {
     const user = userEvent.setup();