@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Button/Button.spec.js

@@ -1,211 +1,211 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { expect, describe, test, vi } from 'vitest';
-import Button from './Button.svelte';
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onClick = vi.fn();
-  const { component } = render(Button, { props: { ...args } });
-  component.$on('click', onClick);
-  const button = screen.getByRole('button');
-  return {
-    user,
-    component,
-    onClick,
-    button,
-  };
-}
-
-describe('Button Component Tests', () => {
-  test('Renders Button with default props', () => {
-    const { button } = setupTest();
-    expect(button).toBeInTheDocument();
-  });
-
-  test('Handles click event', async () => {
-    const { user, button, onClick } = setupTest();
-    await user.click(button);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-
-  test('Disables button when disabled prop is true', async () => {
-    const { button, onClick } = setupTest({ disabled: true });
-    expect(button).toBeDisabled();
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  test('Renders with before and after icons', () => {
-    const { button } = setupTest({ beforeIcon: 'icon-before.png', afterIcon: 'icon-after.png' });
-
-    const beforeIcon = button.querySelector('img.mr-2');
-    const afterIcon = button.querySelector('img.ml-2');
-
-    expect(beforeIcon).toBeInTheDocument();
-    expect(beforeIcon).toHaveAttribute('src', 'icon-before.png');
-
-    expect(afterIcon).toBeInTheDocument();
-    expect(afterIcon).toHaveAttribute('src', 'icon-after.png');
-  });
-
-  test('Handles custom classes passed via className prop', () => {
-    const { button } = setupTest({ className: 'custom-class' });
-    expect(button).toHaveClass('custom-class');
-  });
-});
-
-describe('Button Variants', () => {
-  test('Default variant is blue-solid', () => {
-    const { button } = setupTest();
-    expect(button).toHaveClass('btn-blue-solid');
-  });
-
-  test('Blue outline variant', () => {
-    const { button } = setupTest({ variant: 'blue-outline' });
-    expect(button).toHaveClass('btn-blue-outline');
-  });
-
-  test('Gray outline variant', () => {
-    const { button } = setupTest({ variant: 'gray-outline' });
-    expect(button).toHaveClass('btn-gray-outline');
-  });
-
-  test('Red solid variant', () => {
-    const { button } = setupTest({ variant: 'red-solid' });
-    expect(button).toHaveClass('btn-red-solid');
-  });
-
-  test('Red outline variant', () => {
-    const { button } = setupTest({ variant: 'red-outline' });
-    expect(button).toHaveClass('btn-red-outline');
-  });
-
-  test('Red text variant', () => {
-    const { button } = setupTest({ variant: 'red-text' });
-    expect(button).toHaveClass('btn-red-text');
-  });
-
-  test('Gray text variant', () => {
-    const { button } = setupTest({ variant: 'gray-text' });
-    expect(button).toHaveClass('btn-gray-text');
-  });
-});
-
-describe('Button Sizes', () => {
-  test('Full width size', () => {
-    const { button } = setupTest({ size: 'full' });
-    expect(button).toHaveClass('w-full');
-  });
-
-  test('Full width on mobile, auto on desktop', () => {
-    const { button } = setupTest({ size: 'full-md-auto' });
-    expect(button).toHaveClass('w-full');
-    expect(button).toHaveClass('md:w-auto');
-  });
-
-  test('Large size', () => {
-    const { button } = setupTest({ size: 'lg' });
-    expect(button).toHaveClass('px-6');
-    expect(button).toHaveClass('py-3');
-  });
-
-  test('Medium size', () => {
-    const { button } = setupTest({ size: 'md' });
-    expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-3');
-  });
-
-  test('Small size', () => {
-    const { button } = setupTest({ size: 'sm' });
-    expect(button).toHaveClass('text-xs');
-    expect(button).toHaveClass('rounded-md');
-  });
-
-  test('Extra small size', () => {
-    const { button } = setupTest({ size: 'xs' });
-    expect(button).toHaveClass('text-xs');
-  });
-
-  test('Nav size', () => {
-    const { button } = setupTest({ size: 'nav' });
-    expect(button).toHaveClass('w-full');
-  });
-
-  test('Half width size', () => {
-    const { button } = setupTest({ size: 'half' });
-    expect(button.className).toMatch(/w-\[48%\]/);
-  });
-});
-
-describe('Button Min Width', () => {
-  test('Small min width', () => {
-    const { button } = setupTest({ minWidth: 'sm' });
-    expect(button.className).toMatch(/min-w-\[100px\]/);
-  });
-
-  test('Action min width', () => {
-    const { button } = setupTest({ minWidth: 'action' });
-    expect(button.className).toMatch(/min-w-\[150px\]/);
-  });
-
-  test('Modal min width', () => {
-    const { button } = setupTest({ minWidth: 'modal' });
-    expect(button.className).toMatch(/min-w-\[130px\]/);
-  });
-});
-
-describe('Button States', () => {
-  test('Loading state disables button', async () => {
-    const { button, onClick } = setupTest({ loading: true });
-
-    expect(button).toBeDisabled();
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  test('Success state shows checkmark and disables button', async () => {
-    const { button, onClick } = setupTest({ success: true });
-
-    expect(button).toBeDisabled();
-    expect(button).toHaveClass('btn-success');
-    await userEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-
-    // Should have checkmark SVG
-    expect(button.querySelector('svg')).toBeInTheDocument();
-  });
-
-  test('Active state for nav items', () => {
-    const { button } = setupTest({ active: true, size: 'nav' });
-    expect(button).toHaveClass('btn-active');
-  });
-
-  test('Responsive class adds microinteraction', () => {
-    const { button } = setupTest({ responsive: true });
-    expect(button).toHaveClass('btn-responsive');
-  });
-});
-
-describe('Button as Link', () => {
-  test('Renders as anchor when href is provided', () => {
-    render(Button, { props: { href: '/test-link' } });
-    const link = screen.getByRole('link');
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', '/test-link');
-  });
-
-  test('Does not render as anchor when href is not provided', () => {
-    setupTest();
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-});
-
-describe('Button Justify', () => {
-  test('Between justify for list-item style', () => {
-    const { button } = setupTest({ justify: 'between' });
-    // justify-between class is prefixed with ! to override default
-    expect(button.className).toMatch(/justify-between/);
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Button from './Button.svelte';
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onClick = vi.fn();
+  const { component } = render(Button, { props: { ...args } });
+  component.$on('click', onClick);
+  const button = screen.getByRole('button');
+  return {
+    user,
+    component,
+    onClick,
+    button,
+  };
+}
+
+describe('Button Component Tests', () => {
+  test('Renders Button with default props', () => {
+    const { button } = setupTest();
+    expect(button).toBeInTheDocument();
+  });
+
+  test('Handles click event', async () => {
+    const { user, button, onClick } = setupTest();
+    await user.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  test('Disables button when disabled prop is true', async () => {
+    const { button, onClick } = setupTest({ disabled: true });
+    expect(button).toBeDisabled();
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Renders with before and after icons', () => {
+    const { button } = setupTest({ beforeIcon: 'icon-before.png', afterIcon: 'icon-after.png' });
+
+    const beforeIcon = button.querySelector('img.mr-2');
+    const afterIcon = button.querySelector('img.ml-2');
+
+    expect(beforeIcon).toBeInTheDocument();
+    expect(beforeIcon).toHaveAttribute('src', 'icon-before.png');
+
+    expect(afterIcon).toBeInTheDocument();
+    expect(afterIcon).toHaveAttribute('src', 'icon-after.png');
+  });
+
+  test('Handles custom classes passed via className prop', () => {
+    const { button } = setupTest({ className: 'custom-class' });
+    expect(button).toHaveClass('custom-class');
+  });
+});
+
+describe('Button Variants', () => {
+  test('Default variant is blue-solid', () => {
+    const { button } = setupTest();
+    expect(button).toHaveClass('btn-blue-solid');
+  });
+
+  test('Blue outline variant', () => {
+    const { button } = setupTest({ variant: 'blue-outline' });
+    expect(button).toHaveClass('btn-blue-outline');
+  });
+
+  test('Gray outline variant', () => {
+    const { button } = setupTest({ variant: 'gray-outline' });
+    expect(button).toHaveClass('btn-gray-outline');
+  });
+
+  test('Red solid variant', () => {
+    const { button } = setupTest({ variant: 'red-solid' });
+    expect(button).toHaveClass('btn-red-solid');
+  });
+
+  test('Red outline variant', () => {
+    const { button } = setupTest({ variant: 'red-outline' });
+    expect(button).toHaveClass('btn-red-outline');
+  });
+
+  test('Red text variant', () => {
+    const { button } = setupTest({ variant: 'red-text' });
+    expect(button).toHaveClass('btn-red-text');
+  });
+
+  test('Gray text variant', () => {
+    const { button } = setupTest({ variant: 'gray-text' });
+    expect(button).toHaveClass('btn-gray-text');
+  });
+});
+
+describe('Button Sizes', () => {
+  test('Full width size', () => {
+    const { button } = setupTest({ size: 'full' });
+    expect(button).toHaveClass('w-full');
+  });
+
+  test('Full width on mobile, auto on desktop', () => {
+    const { button } = setupTest({ size: 'full-md-auto' });
+    expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('md:w-auto');
+  });
+
+  test('Large size', () => {
+    const { button } = setupTest({ size: 'lg' });
+    expect(button).toHaveClass('px-6');
+    expect(button).toHaveClass('py-3');
+  });
+
+  test('Medium size', () => {
+    const { button } = setupTest({ size: 'md' });
+    expect(button).toHaveClass('px-3');
+    expect(button).toHaveClass('py-3');
+  });
+
+  test('Small size', () => {
+    const { button } = setupTest({ size: 'sm' });
+    expect(button).toHaveClass('text-xs');
+    expect(button).toHaveClass('rounded-md');
+  });
+
+  test('Extra small size', () => {
+    const { button } = setupTest({ size: 'xs' });
+    expect(button).toHaveClass('text-xs');
+  });
+
+  test('Nav size', () => {
+    const { button } = setupTest({ size: 'nav' });
+    expect(button).toHaveClass('w-full');
+  });
+
+  test('Half width size', () => {
+    const { button } = setupTest({ size: 'half' });
+    expect(button.className).toMatch(/w-\[48%\]/);
+  });
+});
+
+describe('Button Min Width', () => {
+  test('Small min width', () => {
+    const { button } = setupTest({ minWidth: 'sm' });
+    expect(button.className).toMatch(/min-w-\[100px\]/);
+  });
+
+  test('Action min width', () => {
+    const { button } = setupTest({ minWidth: 'action' });
+    expect(button.className).toMatch(/min-w-\[150px\]/);
+  });
+
+  test('Modal min width', () => {
+    const { button } = setupTest({ minWidth: 'modal' });
+    expect(button.className).toMatch(/min-w-\[130px\]/);
+  });
+});
+
+describe('Button States', () => {
+  test('Loading state disables button', async () => {
+    const { button, onClick } = setupTest({ loading: true });
+
+    expect(button).toBeDisabled();
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  test('Success state shows checkmark and disables button', async () => {
+    const { button, onClick } = setupTest({ success: true });
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass('btn-success');
+    await userEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
+
+    // Should have checkmark SVG
+    expect(button.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('Active state for nav items', () => {
+    const { button } = setupTest({ active: true, size: 'nav' });
+    expect(button).toHaveClass('btn-active');
+  });
+
+  test('Responsive class adds microinteraction', () => {
+    const { button } = setupTest({ responsive: true });
+    expect(button).toHaveClass('btn-responsive');
+  });
+});
+
+describe('Button as Link', () => {
+  test('Renders as anchor when href is provided', () => {
+    render(Button, { props: { href: '/test-link' } });
+    const link = screen.getByRole('link');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/test-link');
+  });
+
+  test('Does not render as anchor when href is not provided', () => {
+    setupTest();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});
+
+describe('Button Justify', () => {
+  test('Between justify for list-item style', () => {
+    const { button } = setupTest({ justify: 'between' });
+    // justify-between class is prefixed with ! to override default
+    expect(button.className).toMatch(/justify-between/);
+  });
+});

package/dist/components/Button/ButtonSaveDemo.spec.js

@@ -1,48 +1,48 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import ButtonSaveDemo from './ButtonSaveDemo.svelte';
-
-describe('ButtonSaveDemo', () => {
-  // Helper to get the Save button specifically (not the Reset button)
-  const getSaveButton = () => screen.getByRole('button', { name: /save|saving|saved/i });
-
-  describe('rendering', () => {
-    it('renders save button', () => {
-      render(ButtonSaveDemo);
-      expect(screen.getByText('Save')).toBeInTheDocument();
-    });
-
-    it('renders as button element', () => {
-      render(ButtonSaveDemo);
-      expect(getSaveButton()).toBeInTheDocument();
-    });
-
-    it('renders reset button', () => {
-      render(ButtonSaveDemo);
-      expect(screen.getByText(/Reset/)).toBeInTheDocument();
-    });
-  });
-
-  describe('save states', () => {
-    it('shows saving state when clicked', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      await fireEvent.click(button);
-
-      // Button should now be in loading state (disabled)
-      expect(button).toHaveAttribute('disabled');
-    });
-  });
-
-  describe('button disabled state', () => {
-    it('is disabled while saving', async () => {
-      render(ButtonSaveDemo);
-      const button = getSaveButton();
-
-      await fireEvent.click(button);
-
-      expect(button).toHaveAttribute('disabled');
-    });
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import ButtonSaveDemo from './ButtonSaveDemo.svelte';
+
+describe('ButtonSaveDemo', () => {
+  // Helper to get the Save button specifically (not the Reset button)
+  const getSaveButton = () => screen.getByRole('button', { name: /save|saving|saved/i });
+
+  describe('rendering', () => {
+    it('renders save button', () => {
+      render(ButtonSaveDemo);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+
+    it('renders as button element', () => {
+      render(ButtonSaveDemo);
+      expect(getSaveButton()).toBeInTheDocument();
+    });
+
+    it('renders reset button', () => {
+      render(ButtonSaveDemo);
+      expect(screen.getByText(/Reset/)).toBeInTheDocument();
+    });
+  });
+
+  describe('save states', () => {
+    it('shows saving state when clicked', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      // Button should now be in loading state (disabled)
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('button disabled state', () => {
+    it('is disabled while saving', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+});