@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/stories/PatternsGallery.spec.js

@@ -0,0 +1,514 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import { expect, describe, it, beforeEach, afterEach, vi } from 'vitest';
+import PatternsGallery from './PatternsGallery.svelte';
+
+// Mock SvelteKit modules
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: (fn) => {
+      fn({ url: { pathname: '/' } });
+      return () => {};
+    }
+  }
+}));
+
+vi.mock('$app/paths', () => ({
+  base: ''
+}));
+
+// Mock fetch for any API calls
+const mockFetch = vi.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve([]),
+  })
+);
+
+global.fetch = mockFetch;
+
+describe('PatternsGallery', () => {
+  beforeEach(() => {
+    // Reset dark mode class before each test
+    document.documentElement.classList.remove('dark');
+  });
+
+  afterEach(() => {
+    // Cleanup after each test
+    document.documentElement.classList.remove('dark');
+  });
+
+  describe('Component Rendering', () => {
+    it('renders the main gallery container', () => {
+      render(PatternsGallery);
+      const heading = screen.getByText('Patterns Gallery');
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('renders the subtitle', () => {
+      render(PatternsGallery);
+      const subtitle = screen.getByText('Layout & flow components (Layer 3)');
+      expect(subtitle).toBeInTheDocument();
+    });
+
+    it('renders dark mode toggle button', () => {
+      render(PatternsGallery);
+      const toggleButton = screen.getByRole('button', { name: /Dark/i });
+      expect(toggleButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Dark Mode Toggle', () => {
+    it('starts in light mode', () => {
+      render(PatternsGallery);
+      const toggleButton = screen.getByRole('button', { name: /Dark/i });
+      expect(toggleButton).toHaveTextContent('🌙 Dark');
+    });
+
+    it('toggles to dark mode when clicked', async () => {
+      render(PatternsGallery);
+      const toggleButton = screen.getByRole('button', { name: /Dark/i });
+
+      await fireEvent.click(toggleButton);
+
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+      expect(toggleButton).toHaveTextContent('☀️ Light');
+    });
+
+    it('toggles back to light mode', async () => {
+      render(PatternsGallery);
+      const toggleButton = screen.getByRole('button', { name: /Dark/i });
+
+      // Toggle to dark
+      await fireEvent.click(toggleButton);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+      // Toggle back to light
+      await fireEvent.click(toggleButton);
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
+      expect(toggleButton).toHaveTextContent('🌙 Dark');
+    });
+  });
+
+  describe('Page Patterns Section', () => {
+    it('renders PageHeader section', () => {
+      render(PatternsGallery);
+      const heading = screen.getByText('PageHeader');
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('renders PageHeader description', () => {
+      render(PatternsGallery);
+      const description = screen.getByText('Page title with optional actions and breadcrumb');
+      expect(description).toBeInTheDocument();
+    });
+
+    it('renders multiple PageHeader examples', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Page Title')).toBeInTheDocument();
+      expect(screen.getByText('With Subtitle')).toBeInTheDocument();
+      expect(screen.getByText('With Actions')).toBeInTheDocument();
+    });
+
+    it('renders SectionHeader section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('SectionHeader')).toBeInTheDocument();
+      expect(screen.getByText('Section dividers with optional description')).toBeInTheDocument();
+    });
+
+    it('renders SectionHeader examples', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Basic Section')).toBeInTheDocument();
+      expect(screen.getByText('With Description')).toBeInTheDocument();
+      expect(screen.getByText('With Action')).toBeInTheDocument();
+    });
+
+    it('renders PageLoader section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('PageLoader')).toBeInTheDocument();
+      expect(screen.getByText('Full-page loading indicator')).toBeInTheDocument();
+    });
+
+    it('shows PageLoader when button is clicked', async () => {
+      const { container } = render(PatternsGallery);
+      const button = screen.getByRole('button', { name: /Show PageLoader/i });
+
+      await fireEvent.click(button);
+
+      // PageLoader should be visible (contains a Spinner which has role="status")
+      await waitFor(() => {
+        const spinner = container.querySelector('[role="status"]');
+        expect(spinner).toBeInTheDocument();
+      }, { timeout: 100 });
+    });
+
+    it('hides PageLoader after 2 seconds', async () => {
+      const { container } = render(PatternsGallery);
+      const button = screen.getByRole('button', { name: /Show PageLoader/i });
+
+      await fireEvent.click(button);
+
+      // Wait for PageLoader to appear
+      await waitFor(() => {
+        const spinner = container.querySelector('[role="status"]');
+        expect(spinner).toBeInTheDocument();
+      }, { timeout: 100 });
+
+      // Wait for it to disappear
+      await waitFor(() => {
+        const spinner = container.querySelector('[role="status"]');
+        expect(spinner).not.toBeInTheDocument();
+      }, { timeout: 2500 });
+    });
+  });
+
+  describe('Form Patterns Section', () => {
+    it('renders FormSection heading', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('FormSection')).toBeInTheDocument();
+      expect(screen.getByText('Grouped form fields with title and description')).toBeInTheDocument();
+    });
+
+    it('renders FormSection example', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Personal Information')).toBeInTheDocument();
+      expect(screen.getByText('Enter your personal details')).toBeInTheDocument();
+    });
+
+    it('renders FormGrid section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('FormGrid')).toBeInTheDocument();
+      expect(screen.getByText('Responsive grid layout for form fields')).toBeInTheDocument();
+    });
+
+    it('renders FormGrid with 2 columns', () => {
+      render(PatternsGallery);
+      expect(screen.getByPlaceholderText('John')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Doe')).toBeInTheDocument();
+    });
+
+    it('renders FormGrid with 3 columns', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('3 Columns')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('New York')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('NY')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('10001')).toBeInTheDocument();
+    });
+
+    it('renders FormActions section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('FormActions')).toBeInTheDocument();
+      expect(screen.getByText('Form submit/cancel button group')).toBeInTheDocument();
+    });
+
+    it('renders FormActions examples', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Default (right-aligned)')).toBeInTheDocument();
+      expect(screen.getByText('With loading state')).toBeInTheDocument();
+      expect(screen.getByText('Delete confirmation')).toBeInTheDocument();
+    });
+
+    it('renders FormValidationSummary section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('FormValidationSummary')).toBeInTheDocument();
+      expect(screen.getByText('Summary of form validation errors')).toBeInTheDocument();
+    });
+  });
+
+  describe('Data Patterns Section', () => {
+    it('renders DataTable section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('DataTable')).toBeInTheDocument();
+      expect(screen.getByText('Tabular data display with sorting and actions')).toBeInTheDocument();
+    });
+
+    it('renders DataTable with sample data', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.getByText('john@example.com')).toBeInTheDocument();
+      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+      expect(screen.getByText('jane@example.com')).toBeInTheDocument();
+      expect(screen.getByText('Bob Wilson')).toBeInTheDocument();
+      expect(screen.getByText('bob@example.com')).toBeInTheDocument();
+    });
+
+    it('renders DataTable status columns', () => {
+      render(PatternsGallery);
+      const statuses = screen.getAllByText(/Active|Pending|Inactive/);
+      expect(statuses.length).toBeGreaterThan(0);
+    });
+
+    it('renders DataList section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('DataList')).toBeInTheDocument();
+      expect(screen.getByText('Vertical list of items with primary/secondary text')).toBeInTheDocument();
+    });
+
+    it('renders DataList items', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Primary text 1')).toBeInTheDocument();
+      expect(screen.getByText('Secondary text')).toBeInTheDocument();
+      expect(screen.getByText('Primary text 2')).toBeInTheDocument();
+      expect(screen.getByText('More details here')).toBeInTheDocument();
+      expect(screen.getByText('Primary text 3')).toBeInTheDocument();
+      expect(screen.getByText('Additional info')).toBeInTheDocument();
+    });
+
+    it('renders DataGrid section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('DataGrid')).toBeInTheDocument();
+      expect(screen.getByText('Responsive grid of cards')).toBeInTheDocument();
+    });
+
+    it('renders DataGrid items', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Description for item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+      expect(screen.getByText('Description for item 2')).toBeInTheDocument();
+      expect(screen.getByText('Item 6')).toBeInTheDocument();
+      expect(screen.getByText('Description for item 6')).toBeInTheDocument();
+    });
+  });
+
+  describe('Layout Patterns Section', () => {
+    it('renders Stack section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Stack')).toBeInTheDocument();
+      expect(screen.getByText('Vertical spacing utility')).toBeInTheDocument();
+    });
+
+    it('renders Stack items', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Stack Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Stack Item 2')).toBeInTheDocument();
+      expect(screen.getByText('Stack Item 3')).toBeInTheDocument();
+    });
+
+    it('renders Grid section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Grid')).toBeInTheDocument();
+      expect(screen.getByText('Responsive grid layout utility')).toBeInTheDocument();
+    });
+
+    it('renders Grid with 8 items', () => {
+      render(PatternsGallery);
+      for (let i = 1; i <= 8; i++) {
+        const items = screen.getAllByText(i.toString());
+        expect(items.length).toBeGreaterThan(0);
+      }
+    });
+
+    it('renders Sidebar section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Sidebar')).toBeInTheDocument();
+      expect(screen.getByText('Sidebar + main content layout')).toBeInTheDocument();
+    });
+
+    it('renders Sidebar navigation', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Navigation')).toBeInTheDocument();
+      // These may appear in multiple places (Header and Sidebar)
+      expect(screen.getAllByText('Dashboard').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Settings').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Profile').length).toBeGreaterThan(0);
+    });
+
+    it('renders Sidebar main content', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Main content area')).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation Patterns Section', () => {
+    it('renders Header section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Header')).toBeInTheDocument();
+      expect(screen.getByText('Top navigation bar with logo, nav links, and user menu')).toBeInTheDocument();
+    });
+
+    it('renders BottomNav section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('BottomNav')).toBeInTheDocument();
+      expect(screen.getByText('Mobile bottom navigation')).toBeInTheDocument();
+    });
+  });
+
+  describe('PageLayout Section', () => {
+    it('renders PageLayout section', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('PageLayout')).toBeInTheDocument();
+      expect(screen.getByText('Complete page structure with breadcrumb, title, and content')).toBeInTheDocument();
+    });
+
+    it('renders PageLayout example', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('PageLayout Demo')).toBeInTheDocument();
+      expect(screen.getByText('Example page layout')).toBeInTheDocument();
+    });
+
+    it('renders PageLayout content', () => {
+      render(PatternsGallery);
+      expect(screen.getByText(/Main page content goes here/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling and Classes', () => {
+    it('applies light mode background by default', () => {
+      const { container } = render(PatternsGallery);
+      const mainDiv = container.querySelector('.min-h-screen');
+      expect(mainDiv).toHaveClass('bg-gray-50');
+    });
+
+    it('applies dark mode background when dark mode is toggled', async () => {
+      const { container } = render(PatternsGallery);
+      const toggleButton = screen.getByRole('button', { name: /Dark/i });
+
+      await fireEvent.click(toggleButton);
+
+      const mainDiv = container.querySelector('.min-h-screen');
+      expect(mainDiv).toHaveClass('bg-gray-900');
+    });
+
+    it('applies correct section styling in light mode', () => {
+      const { container } = render(PatternsGallery);
+      const sections = container.querySelectorAll('section');
+      expect(sections.length).toBeGreaterThan(0);
+      expect(sections[0]).toHaveClass('bg-white');
+    });
+  });
+
+  describe('Sample Data Rendering', () => {
+    it('renders all table rows', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+      expect(screen.getByText('Bob Wilson')).toBeInTheDocument();
+    });
+
+    it('renders all grid items', () => {
+      render(PatternsGallery);
+      for (let i = 1; i <= 6; i++) {
+        expect(screen.getByText(`Item ${i}`)).toBeInTheDocument();
+        expect(screen.getByText(`Description for item ${i}`)).toBeInTheDocument();
+      }
+    });
+
+    it('renders all list items', () => {
+      render(PatternsGallery);
+      expect(screen.getByText('Primary text 1')).toBeInTheDocument();
+      expect(screen.getByText('Primary text 2')).toBeInTheDocument();
+      expect(screen.getByText('Primary text 3')).toBeInTheDocument();
+    });
+  });
+
+  describe('Interactive Elements', () => {
+    it('renders action buttons in examples', () => {
+      render(PatternsGallery);
+      expect(screen.getByRole('button', { name: 'Add New' })).toBeInTheDocument();
+    });
+
+    it('renders View All link button', () => {
+      render(PatternsGallery);
+      expect(screen.getByRole('button', { name: 'View All' })).toBeInTheDocument();
+    });
+
+    it('renders form action buttons', () => {
+      render(PatternsGallery);
+      expect(screen.getByRole('button', { name: 'Save Changes' })).toBeInTheDocument();
+      const cancelButtons = screen.getAllByRole('button', { name: 'Cancel' });
+      expect(cancelButtons.length).toBeGreaterThan(0);
+    });
+
+    it('renders PageLoader trigger button', () => {
+      render(PatternsGallery);
+      expect(screen.getByRole('button', { name: /Show PageLoader/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('renders all major sections', () => {
+      const { container } = render(PatternsGallery);
+      const sections = container.querySelectorAll('section');
+
+      // Should have multiple sections for all the pattern categories
+      expect(sections.length).toBeGreaterThanOrEqual(15);
+    });
+
+    it('renders main heading', () => {
+      render(PatternsGallery);
+      const h1 = screen.getByRole('heading', { level: 1, name: 'Patterns Gallery' });
+      expect(h1).toBeInTheDocument();
+    });
+
+    it('renders multiple section headings', () => {
+      render(PatternsGallery);
+      const h2s = screen.getAllByRole('heading', { level: 2 });
+      expect(h2s.length).toBeGreaterThan(10);
+    });
+
+    it('renders all pattern category headings', () => {
+      render(PatternsGallery);
+
+      // Page patterns
+      expect(screen.getByText('PageHeader')).toBeInTheDocument();
+      expect(screen.getByText('SectionHeader')).toBeInTheDocument();
+      expect(screen.getByText('PageLoader')).toBeInTheDocument();
+
+      // Form patterns
+      expect(screen.getByText('FormSection')).toBeInTheDocument();
+      expect(screen.getByText('FormGrid')).toBeInTheDocument();
+      expect(screen.getByText('FormActions')).toBeInTheDocument();
+      expect(screen.getByText('FormValidationSummary')).toBeInTheDocument();
+
+      // Data patterns
+      expect(screen.getByText('DataTable')).toBeInTheDocument();
+      expect(screen.getByText('DataList')).toBeInTheDocument();
+      expect(screen.getByText('DataGrid')).toBeInTheDocument();
+
+      // Layout patterns
+      expect(screen.getByText('Stack')).toBeInTheDocument();
+      expect(screen.getByText('Grid')).toBeInTheDocument();
+      expect(screen.getByText('Sidebar')).toBeInTheDocument();
+
+      // Navigation patterns
+      expect(screen.getByText('Header')).toBeInTheDocument();
+      expect(screen.getByText('BottomNav')).toBeInTheDocument();
+
+      // Page layout
+      expect(screen.getByText('PageLayout')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has accessible button labels', () => {
+      render(PatternsGallery);
+
+      // Dark mode toggle should have accessible text
+      const darkModeButton = screen.getByRole('button', { name: /Dark/i });
+      expect(darkModeButton).toBeInTheDocument();
+
+      // Action buttons
+      expect(screen.getByRole('button', { name: 'Add New' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'View All' })).toBeInTheDocument();
+    });
+
+    it('has main h1 heading', () => {
+      const { container } = render(PatternsGallery);
+
+      // Should have at least one h1 (the main gallery heading, plus examples in PageHeader demos)
+      const h1s = container.querySelectorAll('h1');
+      expect(h1s.length).toBeGreaterThanOrEqual(1);
+
+      // The first h1 should be the main gallery heading
+      expect(h1s[0]).toHaveTextContent('Patterns Gallery');
+    });
+
+    it('has multiple h2 section headings', () => {
+      const { container } = render(PatternsGallery);
+
+      // Should have multiple h2s for sections
+      const h2s = container.querySelectorAll('h2');
+      expect(h2s.length).toBeGreaterThan(10);
+    });
+  });
+});

package/dist/stories/PatternsGallery.stories.svelte

@@ -1,19 +1,19 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import PatternsGallery from './PatternsGallery.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Visual Galleries/Patterns',
-    component: PatternsGallery,
-    parameters: {
-      layout: 'fullscreen',
-      docs: {
-        description: {
-          component: 'Complete visual gallery of all pattern components (Layer 3) - Layout & flow components.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="All Patterns" />
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PatternsGallery from './PatternsGallery.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Visual Galleries/Patterns',
+    component: PatternsGallery,
+    parameters: {
+      layout: 'fullscreen',
+      docs: {
+        description: {
+          component: 'Complete visual gallery of all pattern components (Layer 3) - Layout & flow components.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="All Patterns" />