@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/DarkModeToggle.spec.js

@@ -69,40 +69,44 @@ describe("DarkModeToggle Component Tests", () => {
 
   test("Contains sun icon SVG", () => {
     const { container } = setupTest();
-    const sunIcon = container.querySelector(".sun-icon");
+    const sunIcon = container.querySelector('span.text-amber-500 svg');
     expect(sunIcon).toBeInTheDocument();
   });
 
   test("Contains moon icon SVG", () => {
     const { container } = setupTest();
-    const moonIcon = container.querySelector(".moon-icon");
+    const moonIcon = container.querySelector('span:not(.text-amber-500) svg');
     expect(moonIcon).toBeInTheDocument();
   });
 
-  test("Contains auto icon container", () => {
+  test("Contains auto mode split icon", () => {
     const { container } = setupTest();
-    const autoIcon = container.querySelector(".auto-icon-container");
-    expect(autoIcon).toBeInTheDocument();
+    // In auto mode, there should be a div with absolute positioning containing the split icon
+    const autoDiv = container.querySelector('div.absolute.inset-0');
+    expect(autoDiv).toBeInTheDocument();
   });
 
   test("Auto icon is visible in auto mode (default)", () => {
     const { container } = setupTest();
-    const autoIcon = container.querySelector(".auto-icon-container");
-    expect(autoIcon).toBeInTheDocument();
+    const autoDiv = container.querySelector('div.absolute.inset-0');
+    expect(autoDiv).toBeInTheDocument();
   });
 
-  test("Sun and moon icons are hidden in auto mode", () => {
+  test("Sun and moon single icons have hidden classes in auto mode", () => {
     const { container } = setupTest();
-    const sunIcon = container.querySelector(".sun-icon");
-    const moonIcon = container.querySelector(".moon-icon");
-    expect(sunIcon).toHaveClass("hidden");
-    expect(moonIcon).toHaveClass("hidden");
+    // In auto mode, the main sun/moon icons should have opacity-0 and scale-0 classes
+    const sunIcon = container.querySelector('span.text-amber-500');
+    const moonIcon = container.querySelectorAll('span')[1]; // Second span is moon
+    expect(sunIcon).toHaveClass('opacity-0');
+    expect(sunIcon).toHaveClass('scale-0');
+    expect(moonIcon).toHaveClass('opacity-0');
+    expect(moonIcon).toHaveClass('scale-0');
   });
 
-  test("Button has theme-toggle-btn class", () => {
+  test("Button has relative class for positioning", () => {
     setupTest();
     const button = screen.getByRole("button");
-    expect(button).toHaveClass("theme-toggle-btn");
+    expect(button).toHaveClass("relative");
   });
 
   test("Button has focus outline removed", () => {
@@ -111,44 +115,47 @@ describe("DarkModeToggle Component Tests", () => {
     expect(button).toHaveClass("focus:outline-none");
   });
 
-  test("Button blurs after touch to remove focus state", async () => {
-    setupTest();
+  test("Button click handler is called on interaction", async () => {
+    const { user } = setupTest();
     const button = screen.getByRole("button");
 
-    // Simulate touchend
-    const blurSpy = vi.spyOn(button, "blur");
-    fireEvent.touchEnd(button);
+    // Verify button is interactive
+    await user.click(button);
 
-    expect(blurSpy).toHaveBeenCalled();
+    // After click, localStorage should be updated (auto -> light)
+    expect(localStorageMock.setItem).toHaveBeenCalled();
   });
 
   test("SVG icons have correct dimensions", () => {
     const { container } = setupTest();
-    const sunIconSvg = container.querySelector(".sun-icon svg");
-    const moonIconSvg = container.querySelector(".moon-icon svg");
-
-    expect(sunIconSvg).toHaveAttribute("width", "20");
-    expect(sunIconSvg).toHaveAttribute("height", "20");
-    expect(moonIconSvg).toHaveAttribute("width", "20");
-    expect(moonIconSvg).toHaveAttribute("height", "20");
+    const svgs = container.querySelectorAll('svg');
+    // All SVGs should have width and height of either 20 (main icons) or 12 (auto mode icons)
+    expect(svgs.length).toBeGreaterThan(0);
+    svgs.forEach(svg => {
+      const width = svg.getAttribute('width');
+      const height = svg.getAttribute('height');
+      expect(['20', '12']).toContain(width);
+      expect(['20', '12']).toContain(height);
+    });
   });
 
-  test("Sun icon has correct class for color", () => {
+  test("Sun icon has correct color class", () => {
     const { container } = setupTest();
-    const sunIcon = container.querySelector(".sun-icon");
-    expect(sunIcon).toHaveClass("sun-icon");
+    const sunIcon = container.querySelector('span.text-amber-500');
+    expect(sunIcon).toHaveClass("text-amber-500");
   });
 
-  test("Moon icon has correct class for color", () => {
-    const { container } = setupTest();
-    const moonIcon = container.querySelector(".moon-icon");
-    expect(moonIcon).toHaveClass("moon-icon");
+  test("Button has overflow hidden for auto icon", () => {
+    setupTest();
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("overflow-hidden");
   });
 
-  test("Auto icon container has correct class", () => {
+  test("Auto mode div has absolute positioning", () => {
     const { container } = setupTest();
-    const autoIcon = container.querySelector(".auto-icon-container");
-    expect(autoIcon).toHaveClass("auto-icon-container");
+    const autoDiv = container.querySelector('div.absolute.inset-0');
+    expect(autoDiv).toHaveClass("absolute");
+    expect(autoDiv).toHaveClass("inset-0");
   });
 });
 
@@ -203,23 +210,32 @@ describe("DarkModeToggle 3-State Cycle", () => {
     const { user, container } = setupTest();
     const button = screen.getByRole("button");
 
-    // Initially auto - auto icon container should exist
-    expect(container.querySelector(".auto-icon-container")).toBeInTheDocument();
+    // Initially auto - auto div should exist
+    expect(container.querySelector("div.absolute.inset-0")).toBeInTheDocument();
 
     // Click 1: auto -> light
     await user.click(button);
-    expect(container.querySelector(".sun-icon")).not.toHaveClass("hidden");
-    expect(container.querySelector(".auto-icon-container")).not.toBeInTheDocument();
+    const sunSpan = container.querySelector('span.text-amber-500');
+    // In light mode, sun should be visible (no opacity-0 class)
+    expect(sunSpan.classList.contains("opacity-0")).toBe(false);
+    expect(container.querySelector("div.absolute.inset-0")).not.toBeInTheDocument();
 
     // Click 2: light -> dark
     await user.click(button);
-    expect(container.querySelector(".moon-icon")).not.toHaveClass("hidden");
-    expect(container.querySelector(".sun-icon")).toHaveClass("hidden");
+    // Find the direct child spans of the button (not nested spans)
+    const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
+    const moonSpan = buttonSpans.find(
+      span => !span.classList.contains('text-amber-500')
+    );
+    // In dark mode, moon should be visible (no opacity-0)
+    expect(moonSpan.classList.contains("opacity-0")).toBe(false);
+    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
 
     // Click 3: dark -> auto
     await user.click(button);
-    expect(container.querySelector(".auto-icon-container")).toBeInTheDocument();
-    expect(container.querySelector(".moon-icon")).toHaveClass("hidden");
+    expect(container.querySelector("div.absolute.inset-0")).toBeInTheDocument();
+    // After returning to auto, both icons should be hidden
+    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
   });
 
   test("Dark class applied when switching to dark mode", async () => {
@@ -264,22 +280,39 @@ describe("DarkModeToggle Initial State", () => {
 
   test("Initializes to auto mode when no localStorage value", () => {
     const { container } = setupTest();
-    const autoIcon = container.querySelector(".auto-icon-container");
-    expect(autoIcon).toBeInTheDocument();
+    const autoDiv = container.querySelector("div.absolute.inset-0");
+    expect(autoDiv).toBeInTheDocument();
   });
 
   test("Initializes to dark mode when localStorage has 'dark'", () => {
     localStorageMock.store.theme = "dark";
     const { container } = setupTest();
-    const moonIcon = container.querySelector(".moon-icon");
-    expect(moonIcon).not.toHaveClass("hidden");
+    const button = screen.getByRole("button");
+    const buttonSpans = Array.from(button.querySelectorAll(':scope > span'));
+    const moonSpan = buttonSpans.find(
+      span => !span.classList.contains('text-amber-500')
+    );
+    // In dark mode, moon should be visible (no opacity-0)
+    expect(moonSpan.classList.contains("opacity-0")).toBe(false);
+    // Sun should be hidden
+    const sunSpan = container.querySelector('span.text-amber-500');
+    expect(sunSpan.classList.contains("opacity-0")).toBe(true);
   });
 
   test("Initializes to light mode when localStorage has 'light'", () => {
     localStorageMock.store.theme = "light";
     const { container } = setupTest();
-    const sunIcon = container.querySelector(".sun-icon");
-    expect(sunIcon).not.toHaveClass("hidden");
+    const button = screen.getByRole("button");
+    const sunSpan = container.querySelector('span.text-amber-500');
+    // In light mode, sun should be visible (no opacity-0)
+    expect(sunSpan.classList.contains("opacity-0")).toBe(false);
+    // Moon should be hidden - need to check all spans that have transition-all
+    const allSpansWithTransition = Array.from(button.querySelectorAll('span.transition-all'));
+    const moonSpan = allSpansWithTransition.find(
+      span => !span.classList.contains('text-amber-500')
+    );
+    expect(moonSpan).toBeDefined();
+    expect(moonSpan.classList.contains("opacity-0")).toBe(true);
   });
 
   test("Reads from localStorage on mount", () => {

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

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

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

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

package/dist/primitives/Drawer/Drawer.spec.js

@@ -0,0 +1,212 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
+import Drawer from './Drawer.svelte';
+
+describe('Drawer Component', () => {
+  beforeEach(() => {
+    // Reset body overflow before each test
+    document.body.style.overflow = '';
+  });
+
+  afterEach(() => {
+    // Clean up body overflow after each test
+    document.body.style.overflow = '';
+  });
+
+  test('does not render when show is false and hidden is true', () => {
+    const { container } = render(Drawer, { props: { show: false, hidden: true } });
+    expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
+  });
+
+  test('renders when show is true', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('renders when hidden is false', () => {
+    const { container } = render(Drawer, { props: { hidden: false } });
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('has role="dialog" and aria-modal="true"', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+  });
+
+  test('renders title when provided', () => {
+    render(Drawer, { props: { show: true, title: 'Test Drawer', id: 'test-drawer' } });
+    expect(screen.getByText('Test Drawer')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Drawer, { props: { show: true, class: 'custom-drawer' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('custom-drawer');
+  });
+
+  test('renders backdrop by default when visible', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const backdrop = container.querySelector('[role="presentation"]');
+    expect(backdrop).toBeInTheDocument();
+  });
+
+  test('does not render backdrop when backdrop is false', () => {
+    const { container } = render(Drawer, { props: { show: true, backdrop: false } });
+    const backdrop = container.querySelector('[role="presentation"]');
+    expect(backdrop).not.toBeInTheDocument();
+  });
+
+  test('passes through id prop', () => {
+    const { container } = render(Drawer, { props: { show: true, id: 'my-drawer' } });
+    const dialog = container.querySelector('#my-drawer');
+    expect(dialog).toBeInTheDocument();
+  });
+});
+
+describe('Drawer Placements', () => {
+  test('left placement has left-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'left' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('left-0');
+  });
+
+  test('right placement has right-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'right' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('right-0');
+  });
+
+  test('top placement has top-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'top' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('top-0');
+  });
+
+  test('bottom placement has bottom-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'bottom' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('bottom-0');
+  });
+});
+
+describe('Drawer Widths', () => {
+  test('sm width applies w-64', () => {
+    const { container } = render(Drawer, { props: { show: true, width: 'sm' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-64');
+  });
+
+  test('md width applies w-80 (default)', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-80');
+  });
+
+  test('lg width applies w-96', () => {
+    const { container } = render(Drawer, { props: { show: true, width: 'lg' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-96');
+  });
+
+  test('full width applies w-full', () => {
+    const { container } = render(Drawer, { props: { show: true, width: 'full' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-full');
+  });
+});
+
+describe('Drawer Accessibility', () => {
+  test('has tabindex="-1" for focus management', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('has aria-labelledby when title and id are provided', () => {
+    const { container } = render(Drawer, { props: { show: true, title: 'Test', id: 'test-drawer' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute('aria-labelledby', 'test-drawer-label');
+  });
+});
+
+describe('Drawer Styling', () => {
+  test('has fixed positioning', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('fixed');
+  });
+
+  test('has z-40 for stacking', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('z-40');
+  });
+
+  test('has flex flex-col layout', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('flex');
+    expect(dialog).toHaveClass('flex-col');
+  });
+
+  test('has bg-white background', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('bg-white');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('dark:bg-gray-800');
+  });
+});
+
+describe('Drawer Edge Mode', () => {
+  test('shows edge trigger when edge=true, placement=bottom, and not visible', () => {
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: false, hidden: true } });
+    const edgeTrigger = container.querySelector('.cursor-pointer');
+    expect(edgeTrigger).toBeInTheDocument();
+  });
+
+  test('hides edge trigger when drawer is visible', () => {
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: true } });
+    // Edge trigger should not be visible when drawer is open
+    const edgeTriggers = container.querySelectorAll('.cursor-pointer.fixed');
+    // The drawer itself might have cursor classes, so check for the specific edge trigger pattern
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+});
+
+describe('Drawer Callbacks', () => {
+  test('onclose prop is accepted', () => {
+    const onclose = vi.fn();
+    const { container } = render(Drawer, {
+      props: { show: true, closeOnBackdropClick: true, onclose }
+    });
+    // Verify drawer renders with onclose callback
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('closeOnBackdropClick prop defaults to true', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    // Drawer renders with default closeOnBackdropClick behavior
+    expect(container.querySelector('[role="presentation"]')).toBeInTheDocument();
+  });
+
+  test('closeOnEscape prop defaults to true', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    // Drawer accepts closeOnEscape prop
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('onopen prop is accepted', () => {
+    const onopen = vi.fn();
+    const { container } = render(Drawer, {
+      props: { show: true, onopen }
+    });
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+});

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

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

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

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