@getmicdrop/svelte-components 5.5.4 → 5.5.5

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

@@ -0,0 +1,202 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/svelte';
+import ButtonVariantShowcase from './ButtonVariantShowcase.svelte';
+
+describe('ButtonVariantShowcase', () => {
+  beforeEach(() => {
+    cleanup();
+    // Reset document class
+    document.documentElement.classList.remove('dark');
+  });
+
+  afterEach(() => {
+    document.documentElement.classList.remove('dark');
+  });
+
+  describe('rendering', () => {
+    it('renders main heading', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Button Variants')).toBeInTheDocument();
+    });
+
+    it('renders variant sections', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('default')).toBeInTheDocument();
+      expect(screen.getByText('alternative')).toBeInTheDocument();
+      expect(screen.getByText('outline')).toBeInTheDocument();
+      expect(screen.getByText('ghost')).toBeInTheDocument();
+      expect(screen.getByText('link')).toBeInTheDocument();
+      expect(screen.getByText('red')).toBeInTheDocument();
+    });
+
+    it('renders toggle section', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('toggle')).toBeInTheDocument();
+    });
+
+    it('renders icon section', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('icon')).toBeInTheDocument();
+    });
+
+    it('renders width sizes section', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Width Sizes')).toBeInTheDocument();
+    });
+
+    it('renders states section', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('States')).toBeInTheDocument();
+    });
+
+    it('renders common patterns section', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Common Patterns')).toBeInTheDocument();
+    });
+  });
+
+  describe('variant descriptions', () => {
+    it('shows variant descriptions', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText(/Primary Blue/)).toBeInTheDocument();
+      expect(screen.getByText(/Secondary action/)).toBeInTheDocument();
+      expect(screen.getByText(/Destructive/)).toBeInTheDocument();
+    });
+  });
+
+  describe('size buttons', () => {
+    it('renders size buttons', () => {
+      render(ButtonVariantShowcase);
+      // Multiple instances of each size exist
+      const xsButtons = screen.getAllByText('xs');
+      expect(xsButtons.length).toBeGreaterThan(0);
+    });
+
+    it('renders full width button', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('full')).toBeInTheDocument();
+    });
+
+    it('renders half width buttons', () => {
+      render(ButtonVariantShowcase);
+      const halfButtons = screen.getAllByText('half');
+      expect(halfButtons.length).toBe(2);
+    });
+  });
+
+  describe('state buttons', () => {
+    it('renders disabled button', () => {
+      render(ButtonVariantShowcase);
+      const disabledButton = screen.getByText('Disabled');
+      expect(disabledButton).toBeInTheDocument();
+    });
+
+    it('renders loading button', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Loading')).toBeInTheDocument();
+    });
+
+    it('renders success button', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Success')).toBeInTheDocument();
+    });
+  });
+
+  describe('toggle variant', () => {
+    it('renders active toggle button', () => {
+      render(ButtonVariantShowcase);
+      // Multiple active buttons exist
+      const activeButtons = screen.getAllByText('active');
+      expect(activeButtons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('icon variant', () => {
+    it('renders icon buttons with × symbol', () => {
+      render(ButtonVariantShowcase);
+      const closeButtons = screen.getAllByText('×');
+      expect(closeButtons.length).toBe(4); // xs, sm, md, lg
+    });
+  });
+
+  describe('dark mode toggle', () => {
+    it('starts in light mode', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('🌙 Dark')).toBeInTheDocument();
+    });
+
+    it('toggles to dark mode on click', async () => {
+      render(ButtonVariantShowcase);
+      const toggleButton = screen.getByText('🌙 Dark');
+
+      await fireEvent.click(toggleButton);
+
+      expect(screen.getByText('☀️ Light')).toBeInTheDocument();
+    });
+
+    it('adds dark class to document on toggle', async () => {
+      render(ButtonVariantShowcase);
+      const toggleButton = screen.getByText('🌙 Dark');
+
+      await fireEvent.click(toggleButton);
+
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+
+    it('removes dark class when toggled back', async () => {
+      render(ButtonVariantShowcase);
+      const toggleButton = screen.getByText('🌙 Dark');
+
+      await fireEvent.click(toggleButton);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+      await fireEvent.click(screen.getByText('☀️ Light'));
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
+    });
+  });
+
+  describe('common patterns', () => {
+    it('renders cancel/save pattern', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Cancel / Save')).toBeInTheDocument();
+    });
+
+    it('renders delete confirmation pattern', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Delete Confirmation')).toBeInTheDocument();
+    });
+
+    it('renders toggle group pattern', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Toggle Group')).toBeInTheDocument();
+    });
+
+    it('renders delete button', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
+
+    it('renders save button', () => {
+      render(ButtonVariantShowcase);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+  });
+
+  describe('styling', () => {
+    it('has min-h-screen class on container', () => {
+      const { container } = render(ButtonVariantShowcase);
+      const mainDiv = container.querySelector('.min-h-screen');
+      expect(mainDiv).toBeInTheDocument();
+    });
+
+    it('changes background in dark mode', async () => {
+      const { container } = render(ButtonVariantShowcase);
+      const toggleButton = screen.getByText('🌙 Dark');
+
+      await fireEvent.click(toggleButton);
+
+      const mainDiv = container.querySelector('.min-h-screen');
+      expect(mainDiv.className).toContain('bg-gray-900');
+    });
+  });
+});

package/dist/primitives/Card.spec.js

@@ -14,7 +14,7 @@ describe("Card Component Tests", () => {
     const card = container.querySelector("div");
     expect(card).toHaveClass("bg-white");
     expect(card).toHaveClass("rounded-lg");
-    expect(card).toHaveClass("shadow");
+    expect(card).toHaveClass("shadow-md");
   });
 
   test("Applies custom className", () => {

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

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

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

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

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

@@ -0,0 +1,252 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Checkbox from './Checkbox.svelte';
+
+describe('Checkbox Component', () => {
+  test('renders a checkbox input', () => {
+    const { container } = render(Checkbox);
+    expect(container.querySelector('input[type="checkbox"]')).toBeInTheDocument();
+  });
+
+  test('renders with label element', () => {
+    const { container } = render(Checkbox);
+    expect(container.querySelector('label')).toBeInTheDocument();
+  });
+
+  test('checkbox is inside label', () => {
+    const { container } = render(Checkbox);
+    expect(container.querySelector('label input[type="checkbox"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className to label', () => {
+    const { container } = render(Checkbox, { props: { class: 'custom-checkbox' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-checkbox');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Checkbox, { props: { 'data-testid': 'my-checkbox' } });
+    const label = container.querySelector('[data-testid="my-checkbox"]');
+    expect(label).toBeInTheDocument();
+  });
+});
+
+describe('Checkbox Props', () => {
+  test('checked defaults to false', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).not.toBeChecked();
+  });
+
+  test('checked can be set to true', () => {
+    const { container } = render(Checkbox, { props: { checked: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeChecked();
+  });
+
+  test('name prop is applied to input', () => {
+    const { container } = render(Checkbox, { props: { name: 'agree' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('name', 'agree');
+  });
+
+  test('value prop is applied to input', () => {
+    const { container } = render(Checkbox, { props: { value: 'yes' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('value', 'yes');
+  });
+
+  test('disabled prop disables the input', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+});
+
+describe('Checkbox Colors', () => {
+  test('default color is blue', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-blue-600');
+  });
+
+  test('red color applies text-red-600', () => {
+    const { container } = render(Checkbox, { props: { color: 'red' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-red-600');
+  });
+
+  test('green color applies text-green-600', () => {
+    const { container } = render(Checkbox, { props: { color: 'green' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-green-600');
+  });
+
+  test('purple color applies text-purple-600', () => {
+    const { container } = render(Checkbox, { props: { color: 'purple' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-purple-600');
+  });
+
+  test('orange color applies text-orange-500', () => {
+    const { container } = render(Checkbox, { props: { color: 'orange' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-orange-500');
+  });
+
+  test('yellow color applies text-yellow-400', () => {
+    const { container } = render(Checkbox, { props: { color: 'yellow' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-yellow-400');
+  });
+});
+
+describe('Checkbox Input Styling', () => {
+  test('has w-4 and h-4 size', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('w-4');
+    expect(input).toHaveClass('h-4');
+  });
+
+  test('has rounded corners', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('rounded');
+  });
+
+  test('has bg-gray-100 background', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('bg-gray-100');
+  });
+
+  test('has border-gray-300 border', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('border-gray-300');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('has dark mode border', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('dark:border-gray-600');
+  });
+
+  test('has focus:outline-none', () => {
+    const { container } = render(Checkbox);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('focus:outline-none');
+  });
+
+  test('has cursor-pointer when not disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: false } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('cursor-pointer');
+  });
+
+  test('has cursor-not-allowed when disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('cursor-not-allowed');
+  });
+
+  test('has opacity-50 when disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('opacity-50');
+  });
+});
+
+describe('Checkbox Label Styling', () => {
+  test('label has inline-flex layout', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('inline-flex');
+  });
+
+  test('label has items-center alignment', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('items-center');
+  });
+
+  test('label has gap-2 spacing', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('gap-2');
+  });
+
+  test('label has select-none', () => {
+    const { container } = render(Checkbox);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('select-none');
+  });
+
+  test('label has cursor-pointer when not disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: false } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-pointer');
+  });
+
+  test('label has cursor-not-allowed when disabled', () => {
+    const { container } = render(Checkbox, { props: { disabled: true } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-not-allowed');
+  });
+});
+
+describe('Checkbox Event Handling', () => {
+  test('calls onchange when checked state changes', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Checkbox, { props: { onchange, value: 'test' } });
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(onchange).toHaveBeenCalledWith({ checked: true, value: 'test' });
+  });
+
+  test('calls onclick when clicked', async () => {
+    const user = userEvent.setup();
+    const onclick = vi.fn();
+    const { container } = render(Checkbox, { props: { onclick } });
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('calls onfocus when focused', async () => {
+    const user = userEvent.setup();
+    const onfocus = vi.fn();
+    const { container } = render(Checkbox, { props: { onfocus } });
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(onfocus).toHaveBeenCalled();
+  });
+});
+
+describe('Checkbox Toggle Behavior', () => {
+  test('clicking toggles checked state', async () => {
+    const user = userEvent.setup();
+    const { container } = render(Checkbox, { props: { checked: false } });
+
+    const input = container.querySelector('input');
+    expect(input).not.toBeChecked();
+
+    await user.click(input);
+    expect(input).toBeChecked();
+
+    await user.click(input);
+    expect(input).not.toBeChecked();
+  });
+});