@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/stories/ButtonShowcase.spec.js

@@ -0,0 +1,499 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import { expect, describe, it, beforeEach, afterEach, vi } from 'vitest';
+import ButtonShowcase from './ButtonShowcase.svelte';
+
+describe('ButtonShowcase', () => {
+  let container;
+
+  beforeEach(() => {
+    // Clear dark mode class before each test
+    document.documentElement.classList.remove('dark');
+  });
+
+  afterEach(() => {
+    // Clean up after each test
+    document.documentElement.classList.remove('dark');
+  });
+
+  describe('Component Rendering', () => {
+    it('renders the component successfully', () => {
+      const { container } = render(ButtonShowcase);
+      expect(container).toBeTruthy();
+    });
+
+    it('renders the main heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Button Catalog')).toBeInTheDocument();
+    });
+
+    it('renders the description text', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText(/Real buttons as they appear in the app/)).toBeInTheDocument();
+      expect(screen.getByText(/Use these nicknames when telling Claude what button you want/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Dark Mode Toggle', () => {
+    it('renders dark mode toggle button', () => {
+      render(ButtonShowcase);
+      const toggleButton = screen.getByText('Dark Mode');
+      expect(toggleButton).toBeInTheDocument();
+    });
+
+    it('toggles to light mode when clicked', async () => {
+      render(ButtonShowcase);
+      const toggleButton = screen.getByText('Dark Mode').closest('button');
+
+      await fireEvent.click(toggleButton);
+
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+      expect(screen.getByText('Light Mode')).toBeInTheDocument();
+    });
+
+    it('toggles back to dark mode when clicked twice', async () => {
+      render(ButtonShowcase);
+      const toggleButton = screen.getByText('Dark Mode').closest('button');
+
+      await fireEvent.click(toggleButton);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+      const lightModeButton = screen.getByText('Light Mode').closest('button');
+      await fireEvent.click(lightModeButton);
+
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
+      expect(screen.getByText('Dark Mode')).toBeInTheDocument();
+    });
+  });
+
+  describe('Login Page Buttons Section', () => {
+    it('renders the Login Page section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Login Page')).toBeInTheDocument();
+    });
+
+    it('renders login button with description', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Log in').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Login button"').length).toBeGreaterThan(0);
+      expect(screen.getByText(/Primary login action/)).toBeInTheDocument();
+    });
+
+    it('renders magic link button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Send me a login link')).toBeInTheDocument();
+      expect(screen.getAllByText('"Magic link button"').length).toBeGreaterThan(0);
+    });
+
+    it('renders create account button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Create account')).toBeInTheDocument();
+      expect(screen.getByText('"Signup button"')).toBeInTheDocument();
+    });
+
+    it('displays section location info', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Found on: /login, /signup, /forgot-password')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Buttons Section', () => {
+    it('renders the Form Buttons section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Form Buttons (Interactive - Click to see behavior!)')).toBeInTheDocument();
+    });
+
+    it('renders Save Changes button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Save Changes')).toBeInTheDocument();
+      expect(screen.getAllByText('"Save button with feedback"').length).toBeGreaterThan(0);
+    });
+
+    it('shows loading state when Save Changes is clicked', async () => {
+      vi.useFakeTimers();
+      render(ButtonShowcase);
+
+      const saveButton = screen.getByText('Save Changes').closest('button');
+      await fireEvent.click(saveButton);
+
+      // Component should show loading state
+      expect(saveButton).toHaveAttribute('disabled');
+
+      vi.useRealTimers();
+    });
+
+    it('shows success state after loading completes', async () => {
+      vi.useFakeTimers();
+      render(ButtonShowcase);
+
+      const saveButton = screen.getByText('Save Changes').closest('button');
+      await fireEvent.click(saveButton);
+
+      // Fast-forward through loading (1500ms)
+      vi.advanceTimersByTime(1500);
+      await waitFor(() => {
+        expect(screen.getByText('Saved!')).toBeInTheDocument();
+      });
+
+      vi.useRealTimers();
+    });
+
+    it('renders simple save button', () => {
+      render(ButtonShowcase);
+      const saveButtons = screen.getAllByText('Save');
+      expect(saveButtons.length).toBeGreaterThan(0);
+      expect(screen.getByText('"Simple save button"')).toBeInTheDocument();
+    });
+
+    it('renders Cancel/Save pair', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Cancel').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Cancel/Save pair"').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Modal/Dialog Buttons Section', () => {
+    it('renders the Modal section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Modal / Dialog Buttons')).toBeInTheDocument();
+    });
+
+    it('renders Confirm modal buttons', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Confirm').length).toBeGreaterThan(0);
+      expect(screen.getByText('"Confirm modal"')).toBeInTheDocument();
+    });
+
+    it('renders Delete confirmation buttons', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Delete').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Delete confirmation"').length).toBeGreaterThan(0);
+    });
+
+    it('renders Remove confirmation buttons', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('No, keep it')).toBeInTheDocument();
+      expect(screen.getByText('Yes, remove')).toBeInTheDocument();
+      expect(screen.getByText('"Remove confirmation"')).toBeInTheDocument();
+    });
+
+    it('renders Done button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Done')).toBeInTheDocument();
+      expect(screen.getByText('"Done button"')).toBeInTheDocument();
+    });
+  });
+
+  describe('Action Buttons Section', () => {
+    it('renders the Action Buttons section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Action Buttons')).toBeInTheDocument();
+    });
+
+    it('renders Invite button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Invite')).toBeInTheDocument();
+      expect(screen.getByText('"Invite button"')).toBeInTheDocument();
+    });
+
+    it('shows loading and success states for Invite button', async () => {
+      vi.useFakeTimers();
+      render(ButtonShowcase);
+
+      const inviteButton = screen.getByText('Invite').closest('button');
+      await fireEvent.click(inviteButton);
+
+      expect(inviteButton).toHaveAttribute('disabled');
+
+      // Fast-forward through loading
+      vi.advanceTimersByTime(1500);
+      await waitFor(() => {
+        expect(screen.getByText('Invited!')).toBeInTheDocument();
+      });
+
+      vi.useRealTimers();
+    });
+
+    it('renders Add Performer button with icon', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Add Performer')).toBeInTheDocument();
+      expect(screen.getAllByText('"Add button with icon"').length).toBeGreaterThan(0);
+    });
+
+    it('renders Edit button', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Edit').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Edit button"').length).toBeGreaterThan(0);
+    });
+
+    it('renders View Details button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('View Details')).toBeInTheDocument();
+      expect(screen.getByText('"View button" or "Details button"')).toBeInTheDocument();
+    });
+
+    it('renders Back button with icon', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Back').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Back button"').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Danger/Warning Buttons Section', () => {
+    it('renders the Danger section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Danger / Warning Buttons')).toBeInTheDocument();
+    });
+
+    it('renders solid red Delete button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('"Delete button" (solid red)')).toBeInTheDocument();
+    });
+
+    it('renders red outline Remove button', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Remove').length).toBeGreaterThan(0);
+      expect(screen.getByText('"Remove button" (red outline)')).toBeInTheDocument();
+    });
+
+    it('renders Delete Event button with icon', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Delete Event')).toBeInTheDocument();
+      expect(screen.getByText('"Delete with icon"')).toBeInTheDocument();
+    });
+
+    it('renders Sign out button', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Sign out').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Sign out button"').length).toBeGreaterThan(0);
+    });
+
+    it('renders Cancel subscription button', () => {
+      render(ButtonShowcase);
+      expect(screen.getAllByText('Cancel subscription').length).toBeGreaterThan(0);
+      expect(screen.getByText('"Cancel subscription"')).toBeInTheDocument();
+    });
+  });
+
+  describe('Toggle/Filter Buttons Section', () => {
+    it('renders the Toggle section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Toggle / Filter Buttons')).toBeInTheDocument();
+    });
+
+    it('renders filter tabs group', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Upcoming')).toBeInTheDocument();
+      expect(screen.getByText('Past')).toBeInTheDocument();
+      expect(screen.getAllByText('All').length).toBeGreaterThan(0);
+      expect(screen.getByText('"Filter tabs" or "Toggle group"')).toBeInTheDocument();
+    });
+
+    it('renders small filter toggles', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Active')).toBeInTheDocument();
+      expect(screen.getByText('Inactive')).toBeInTheDocument();
+      expect(screen.getByText('"Small filter toggles"')).toBeInTheDocument();
+    });
+  });
+
+  describe('Link-Style Buttons Section', () => {
+    it('renders the Link-Style section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Link-Style Buttons')).toBeInTheDocument();
+    });
+
+    it('renders Forgot password link button', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+      expect(screen.getByText('"Link button" or "Text link"')).toBeInTheDocument();
+    });
+
+    it('renders Learn more link', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Learn more')).toBeInTheDocument();
+      expect(screen.getByText('"Learn more link"')).toBeInTheDocument();
+    });
+  });
+
+  describe('Size Comparison Section', () => {
+    it('renders the Size Comparison section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Size Comparison')).toBeInTheDocument();
+    });
+
+    it('renders all button sizes', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Extra Small')).toBeInTheDocument();
+      expect(screen.getByText('Small')).toBeInTheDocument();
+      expect(screen.getByText('Medium')).toBeInTheDocument();
+      expect(screen.getByText('Large')).toBeInTheDocument();
+      expect(screen.getByText('Extra Large')).toBeInTheDocument();
+    });
+
+    it('displays size descriptions', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('xs - Compact UI')).toBeInTheDocument();
+      expect(screen.getByText('sm - Table rows')).toBeInTheDocument();
+      expect(screen.getByText('md - Default')).toBeInTheDocument();
+      expect(screen.getByText('lg - Emphasis')).toBeInTheDocument();
+      expect(screen.getByText('xl - Hero buttons')).toBeInTheDocument();
+    });
+
+    it('renders full-width button examples', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Full-width buttons (for forms)')).toBeInTheDocument();
+      expect(screen.getByText('Submit Application')).toBeInTheDocument();
+      expect(screen.getByText('xl-medium - Login/signup forms')).toBeInTheDocument();
+      expect(screen.getByText('full - Larger form submit')).toBeInTheDocument();
+    });
+  });
+
+  describe('Quick Nickname Reference Section', () => {
+    it('renders the Quick Nickname Reference section heading', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Quick Nickname Reference')).toBeInTheDocument();
+    });
+
+    it('renders the reference table', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Say this to Claude')).toBeInTheDocument();
+      expect(screen.getByText("You'll get")).toBeInTheDocument();
+      expect(screen.getByText("Where it's used")).toBeInTheDocument();
+    });
+
+    it('renders table rows with button nicknames', () => {
+      const { container } = render(ButtonShowcase);
+      // Check that the table exists and has content
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+
+      // Check a few key entries in the table
+      expect(screen.getAllByText('"Login button"').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Magic link button"').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('"Save button with feedback"').length).toBeGreaterThan(0);
+    });
+
+    it('displays usage context in table', () => {
+      render(ButtonShowcase);
+      expect(screen.getByText('Login page, signup')).toBeInTheDocument();
+      expect(screen.getByText('Profile, settings forms')).toBeInTheDocument();
+      expect(screen.getByText('Any form footer')).toBeInTheDocument();
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('uses proper spacing and layout classes', () => {
+      const { container } = render(ButtonShowcase);
+      const mainDiv = container.querySelector('.p-8.space-y-12');
+      expect(mainDiv).toBeInTheDocument();
+    });
+
+    it('renders all sections with proper section tags', () => {
+      const { container } = render(ButtonShowcase);
+      const sections = container.querySelectorAll('section');
+      // Should have 9 main sections
+      expect(sections.length).toBeGreaterThanOrEqual(9);
+    });
+
+    it('has background styling for light mode', () => {
+      const { container } = render(ButtonShowcase);
+      const mainDiv = container.querySelector('.bg-gray-50');
+      expect(mainDiv).toBeInTheDocument();
+    });
+
+    it('includes dark mode styling classes', () => {
+      const { container } = render(ButtonShowcase);
+      const darkModeElements = container.querySelectorAll('.dark\\:bg-gray-900, .dark\\:text-white');
+      expect(darkModeElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Interactive Features', () => {
+    it('maintains state for save button loading', async () => {
+      vi.useFakeTimers();
+      render(ButtonShowcase);
+
+      const saveButton = screen.getByText('Save Changes').closest('button');
+
+      // Initial state - not loading
+      expect(saveButton).not.toHaveAttribute('disabled');
+
+      // Click to trigger loading
+      await fireEvent.click(saveButton);
+      expect(saveButton).toHaveAttribute('disabled');
+
+      vi.useRealTimers();
+    });
+
+    it('resets success state after timeout', async () => {
+      vi.useFakeTimers();
+      render(ButtonShowcase);
+
+      const saveButton = screen.getByText('Save Changes').closest('button');
+      await fireEvent.click(saveButton);
+
+      // Fast-forward to success state
+      vi.advanceTimersByTime(1500);
+      await waitFor(() => {
+        expect(screen.getByText('Saved!')).toBeInTheDocument();
+      });
+
+      // Fast-forward through success display duration
+      vi.advanceTimersByTime(2000);
+      await waitFor(() => {
+        expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
+      });
+
+      vi.useRealTimers();
+    });
+
+    it('handles multiple button interactions independently', async () => {
+      vi.useFakeTimers();
+      render(ButtonShowcase);
+
+      const saveButton = screen.getByText('Save Changes').closest('button');
+      const inviteButton = screen.getByText('Invite').closest('button');
+
+      // Click both buttons
+      await fireEvent.click(saveButton);
+      await fireEvent.click(inviteButton);
+
+      // Both should be disabled during loading
+      expect(saveButton).toHaveAttribute('disabled');
+      expect(inviteButton).toHaveAttribute('disabled');
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe('Section Presence', () => {
+    it('renders all major section headings', () => {
+      render(ButtonShowcase);
+
+      const expectedSections = [
+        'Login Page',
+        'Form Buttons (Interactive - Click to see behavior!)',
+        'Modal / Dialog Buttons',
+        'Action Buttons',
+        'Danger / Warning Buttons',
+        'Toggle / Filter Buttons',
+        'Link-Style Buttons',
+        'Size Comparison',
+        'Quick Nickname Reference'
+      ];
+
+      expectedSections.forEach(section => {
+        expect(screen.getByText(section)).toBeInTheDocument();
+      });
+    });
+
+    it('displays location hints for each section', () => {
+      render(ButtonShowcase);
+
+      expect(screen.getByText('Found on: /login, /signup, /forgot-password')).toBeInTheDocument();
+      expect(screen.getByText('Found on: Performer Profile, Venue Settings, any edit form')).toBeInTheDocument();
+      expect(screen.getByText('Found on: Confirmation dialogs, edit modals, delete warnings')).toBeInTheDocument();
+      expect(screen.getByText('Found on: Table rows, cards, toolbars')).toBeInTheDocument();
+    });
+  });
+});

package/dist/stories/PatternsGallery.spec.d.ts

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

package/dist/stories/PatternsGallery.spec.d.ts.map

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