@getmicdrop/svelte-components 5.5.1 → 5.5.5

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

@@ -1,48 +1,146 @@
-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, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/svelte';
+import ButtonSaveDemo from './ButtonSaveDemo.svelte';
+
+describe('ButtonSaveDemo', () => {
+  // Clean up after each test
+  beforeEach(() => {
+    cleanup();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  // 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');
+    });
+  });
+
+  describe('success state', () => {
+    it('shows success state after timeout', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      // Advance timers past the 1000ms setTimeout
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Button should now be in success state (still disabled)
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('stays in success state after completion', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Button should remain disabled in success state
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('does not retrigger if already loading', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      // First click
+      await fireEvent.click(button);
+
+      // Second click while loading - should be ignored
+      await fireEvent.click(button);
+
+      // Should still be in loading state
+      expect(button).toHaveAttribute('disabled');
+    });
+
+    it('does not retrigger if already in success state', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Click while in success state - should be ignored
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('reset functionality', () => {
+    it('reset button clears success state', async () => {
+      render(ButtonSaveDemo);
+      const saveButton = getSaveButton();
+      const resetButton = screen.getByText(/Reset/);
+
+      // Trigger save and complete
+      await fireEvent.click(saveButton);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Click reset
+      await fireEvent.click(resetButton);
+
+      // Save button should be enabled again
+      expect(saveButton).not.toHaveAttribute('disabled');
+    });
+
+    it('allows re-save after reset', async () => {
+      render(ButtonSaveDemo);
+      const saveButton = getSaveButton();
+      const resetButton = screen.getByText(/Reset/);
+
+      // First save cycle
+      await fireEvent.click(saveButton);
+      await vi.advanceTimersByTimeAsync(1100);
+
+      // Reset
+      await fireEvent.click(resetButton);
+
+      // Second save should work
+      await fireEvent.click(saveButton);
+      expect(saveButton).toHaveAttribute('disabled');
+    });
+  });
+});

package/dist/primitives/Button/ButtonSaveDemo.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import Button from "./Button.svelte";
-  import { typography } from "../../tokens/typography";
-
-  let loading = $state(false);
-  let success = $state(false);
-
-  function handleSave() {
-    if (loading || success) return;
-    loading = true;
-    setTimeout(() => {
-      loading = false;
-      success = true;
-    }, 1000);
-  }
-
-  function resetState() {
-    success = false;
-  }
-</script>
-
-<div class="flex gap-4 items-center">
-  <Button onclick={handleSave} {loading} {success}>Save</Button>
-  <button class={`${typography.smMuted} underline`} onclick={resetState}>Reset (simulates user edit)</button>
-</div>
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import { typography } from "../../tokens/typography";
+
+  let loading = $state(false);
+  let success = $state(false);
+
+  function handleSave() {
+    if (loading || success) return;
+    loading = true;
+    setTimeout(() => {
+      loading = false;
+      success = true;
+    }, 1000);
+  }
+
+  function resetState() {
+    success = false;
+  }
+</script>
+
+<div class="flex gap-4 items-center">
+  <Button onclick={handleSave} {loading} {success}>Save</Button>
+  <button class={`${typography.smMuted} underline`} onclick={resetState}>Reset (simulates user edit)</button>
+</div>

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

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

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

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

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');
+    });
+  });
+});