@jmruthers/pace-core 0.5.110 → 0.5.111

package/src/components/DataTable/components/__tests__/EmptyState.test.tsx

@@ -0,0 +1,434 @@
+/**
+ * @file EmptyState Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for EmptyState component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { EmptyState } from '../EmptyState';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Database: ({ className }: { className?: string }) => (
+    <div data-testid="lucide-database" className={className}>Database</div>
+  ),
+  Search: ({ className }: { className?: string }) => (
+    <div data-testid="lucide-search" className={className}>Search</div>
+  ),
+  Plus: ({ className }: { className?: string }) => (
+    <div data-testid="lucide-plus" className={className}>Plus</div>
+  ),
+  User: ({ className }: { className?: string }) => (
+    <div data-testid="lucide-user" className={className}>User</div>
+  ),
+}));
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, variant, ...props }: any) => (
+    <button onClick={onClick} data-variant={variant} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+describe('[component] EmptyState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default content when no props provided', () => {
+      render(<EmptyState />);
+
+      expect(screen.getByText('No data available')).toBeInTheDocument();
+      expect(screen.getByText('Get started by adding your first entry')).toBeInTheDocument();
+      expect(screen.getByTestId('lucide-database')).toBeInTheDocument();
+    });
+
+    it('renders with custom title', () => {
+      render(<EmptyState title="Custom Title" />);
+
+      expect(screen.getByText('Custom Title')).toBeInTheDocument();
+      expect(screen.queryByText('No data available')).not.toBeInTheDocument();
+    });
+
+    it('renders with custom description', () => {
+      render(<EmptyState description="Custom description" />);
+
+      expect(screen.getByText('Custom description')).toBeInTheDocument();
+      expect(screen.queryByText('Get started by adding your first entry')).not.toBeInTheDocument();
+    });
+
+    it('renders with custom icon component', () => {
+      const CustomIcon = ({ className }: { className?: string }) => (
+        <div data-testid="custom-icon" className={className}>Custom</div>
+      );
+
+      render(<EmptyState icon={CustomIcon} />);
+
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+      expect(screen.queryByTestId('lucide-database')).not.toBeInTheDocument();
+    });
+
+    it('uses default Database icon when no icon provided', () => {
+      render(<EmptyState />);
+
+      expect(screen.getByTestId('lucide-database')).toBeInTheDocument();
+    });
+  });
+
+  describe('Filtered State', () => {
+    it('shows filtered state message when isFiltered is true', () => {
+      render(<EmptyState isFiltered={true} />);
+
+      expect(screen.getByText('No results found')).toBeInTheDocument();
+      expect(screen.getByText('Try adjusting your search or filter criteria')).toBeInTheDocument();
+    });
+
+    it('shows default state message when isFiltered is false', () => {
+      render(<EmptyState isFiltered={false} />);
+
+      expect(screen.getByText('No data available')).toBeInTheDocument();
+      expect(screen.getByText('Get started by adding your first entry')).toBeInTheDocument();
+    });
+
+    it('shows custom title and description even when filtered', () => {
+      render(
+        <EmptyState 
+          isFiltered={true}
+          title="Custom Filter Title"
+          description="Custom filter description"
+        />
+      );
+
+      expect(screen.getByText('Custom Filter Title')).toBeInTheDocument();
+      expect(screen.getByText('Custom filter description')).toBeInTheDocument();
+    });
+  });
+
+  describe('Action Button', () => {
+    it('renders action button when action prop provided', () => {
+      const handleAction = vi.fn();
+      
+      render(
+        <EmptyState 
+          action={{
+            label: 'Create Item',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      const actionButton = screen.getByRole('button', { name: /Create Item/i });
+      expect(actionButton).toBeInTheDocument();
+    });
+
+    it('calls action onClick when action button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleAction = vi.fn();
+      
+      render(
+        <EmptyState 
+          action={{
+            label: 'Create Item',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      const actionButton = screen.getByRole('button', { name: /Create Item/i });
+      await user.click(actionButton);
+
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders Plus icon in action button', () => {
+      const handleAction = vi.fn();
+      
+      render(
+        <EmptyState 
+          action={{
+            label: 'Add New',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      expect(screen.getByTestId('lucide-plus')).toBeInTheDocument();
+    });
+
+    it('does not render action button when action not provided', () => {
+      render(<EmptyState />);
+
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Clear Filters Button', () => {
+    it('renders clear filters button when isFiltered and onClearFilters provided', () => {
+      const handleClearFilters = vi.fn();
+      
+      render(
+        <EmptyState 
+          isFiltered={true}
+          onClearFilters={handleClearFilters}
+        />
+      );
+
+      const clearButton = screen.getByRole('button', { name: /Clear filters/i });
+      expect(clearButton).toBeInTheDocument();
+    });
+
+    it('calls onClearFilters when clear filters button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleClearFilters = vi.fn();
+      
+      render(
+        <EmptyState 
+          isFiltered={true}
+          onClearFilters={handleClearFilters}
+        />
+      );
+
+      const clearButton = screen.getByRole('button', { name: /Clear filters/i });
+      await user.click(clearButton);
+
+      expect(handleClearFilters).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders Search icon in clear filters button', () => {
+      const handleClearFilters = vi.fn();
+      
+      render(
+        <EmptyState 
+          isFiltered={true}
+          onClearFilters={handleClearFilters}
+        />
+      );
+
+      expect(screen.getByTestId('lucide-search')).toBeInTheDocument();
+    });
+
+    it('does not render clear filters button when not filtered', () => {
+      const handleClearFilters = vi.fn();
+      
+      render(
+        <EmptyState 
+          isFiltered={false}
+          onClearFilters={handleClearFilters}
+        />
+      );
+
+      expect(screen.queryByRole('button', { name: /Clear filters/i })).not.toBeInTheDocument();
+    });
+
+    it('does not render clear filters button when onClearFilters not provided', () => {
+      render(<EmptyState isFiltered={true} />);
+
+      expect(screen.queryByRole('button', { name: /Clear filters/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Combined Actions', () => {
+    it('renders both action and clear filters buttons when appropriate', () => {
+      const handleAction = vi.fn();
+      const handleClearFilters = vi.fn();
+      
+      render(
+        <EmptyState 
+          isFiltered={true}
+          onClearFilters={handleClearFilters}
+          action={{
+            label: 'Create Item',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      expect(screen.getByRole('button', { name: /Clear filters/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Create Item/i })).toBeInTheDocument();
+    });
+
+    it('calls correct handler for each button', async () => {
+      const user = userEvent.setup();
+      const handleAction = vi.fn();
+      const handleClearFilters = vi.fn();
+      
+      render(
+        <EmptyState 
+          isFiltered={true}
+          onClearFilters={handleClearFilters}
+          action={{
+            label: 'Create Item',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      await user.click(screen.getByRole('button', { name: /Clear filters/i }));
+      await user.click(screen.getByRole('button', { name: /Create Item/i }));
+
+      expect(handleClearFilters).toHaveBeenCalledTimes(1);
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA role and live region', () => {
+      render(<EmptyState />);
+
+      const container = screen.getByRole('status');
+      expect(container).toBeInTheDocument();
+      expect(container).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('marks icon as decorative with aria-hidden', () => {
+      render(<EmptyState />);
+
+      const icon = screen.getByTestId('lucide-database');
+      // Icon is wrapped in a component that may not have aria-hidden directly
+      // Check that it exists and is accessible
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('uses semantic heading for title', () => {
+      render(<EmptyState title="Custom Title" />);
+
+      const heading = screen.getByRole('heading', { level: 3 });
+      expect(heading).toHaveTextContent('Custom Title');
+    });
+
+    it('provides proper button labels', () => {
+      const handleAction = vi.fn();
+      
+      render(
+        <EmptyState 
+          action={{
+            label: 'Create Item',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      const button = screen.getByRole('button', { name: /Create Item/i });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('Icon Detection', () => {
+    it('identifies Database icon correctly', () => {
+      render(<EmptyState />);
+
+      const icon = screen.getByTestId('lucide-database');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('identifies User icon correctly', () => {
+      const UserIcon = () => <div data-testid="lucide-user">User</div>;
+      
+      render(<EmptyState icon={UserIcon} />);
+
+      const icon = screen.getByTestId('lucide-user');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('uses custom testid for unknown icons', () => {
+      const CustomIcon = () => <div>Custom</div>;
+      
+      render(<EmptyState icon={CustomIcon} />);
+
+      // Should still render but with different testid handling
+      const container = screen.getByRole('status');
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty title string', () => {
+      render(<EmptyState title="" />);
+
+      // Should use default title
+      expect(screen.getByText('No data available')).toBeInTheDocument();
+    });
+
+    it('handles empty description string', () => {
+      render(<EmptyState description="" />);
+
+      // Should use default description
+      expect(screen.getByText('Get started by adding your first entry')).toBeInTheDocument();
+    });
+
+    it('handles action with empty label', () => {
+      const handleAction = vi.fn();
+      
+      render(
+        <EmptyState 
+          action={{
+            label: '',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      // Button should still render
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('handles rapid button clicks', async () => {
+      const user = userEvent.setup();
+      const handleAction = vi.fn();
+      
+      render(
+        <EmptyState 
+          action={{
+            label: 'Create Item',
+            onClick: handleAction,
+          }}
+        />
+      );
+
+      const button = screen.getByRole('button', { name: /Create Item/i });
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(handleAction).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('Layout and Styling', () => {
+    it('renders with centered flex layout', () => {
+      render(<EmptyState />);
+
+      const container = screen.getByRole('status');
+      expect(container).toHaveClass('flex', 'flex-col', 'items-center', 'justify-center');
+    });
+
+    it('applies text-center class', () => {
+      render(<EmptyState />);
+
+      const container = screen.getByRole('status');
+      expect(container).toHaveClass('text-center');
+    });
+
+    it('applies padding', () => {
+      render(<EmptyState />);
+
+      const container = screen.getByRole('status');
+      expect(container).toHaveClass('p-8');
+    });
+  });
+});

package/src/components/DataTable/components/__tests__/LoadingState.test.tsx

@@ -0,0 +1,120 @@
+/**
+ * @file LoadingState Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for LoadingState component following testing guidelines.
+ * Tests cover all major functionality and accessibility.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { LoadingState } from '../LoadingState';
+
+describe('[component] LoadingState', () => {
+  describe('Rendering', () => {
+    it('renders loading spinner and text', () => {
+      render(<LoadingState />);
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('renders with centered layout', () => {
+      render(<LoadingState />);
+
+      // Find the outer container with text-center and p-8 classes
+      const container = screen.getByText('Loading...').parentElement?.parentElement;
+      expect(container).toHaveClass('text-center', 'p-8');
+    });
+
+    it('renders with padding', () => {
+      render(<LoadingState />);
+
+      // Find the outer container with p-8 class
+      const container = screen.getByText('Loading...').parentElement?.parentElement;
+      expect(container).toHaveClass('p-8');
+    });
+
+    it('renders spinner with animation class', () => {
+      render(<LoadingState />);
+
+      const spinner = screen.getByText('Loading...').previousElementSibling;
+      expect(spinner).toHaveClass('animate-spin');
+    });
+
+    it('renders flex container with items centered', () => {
+      render(<LoadingState />);
+
+      const flexContainer = screen.getByText('Loading...').parentElement;
+      expect(flexContainer).toHaveClass('flex', 'items-center', 'justify-center');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides aria-live region for loading state', () => {
+      render(<LoadingState />);
+
+      const loadingText = screen.getByText('Loading...');
+      expect(loadingText).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('announces loading state to screen readers', () => {
+      render(<LoadingState />);
+
+      const loadingText = screen.getByText('Loading...');
+      expect(loadingText).toBeInTheDocument();
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('renders spinner before loading text', () => {
+      render(<LoadingState />);
+
+      const container = screen.getByText('Loading...').parentElement;
+      const spinner = container?.firstElementChild;
+      const text = container?.lastElementChild;
+
+      expect(spinner).toBeInTheDocument();
+      expect(text).toHaveTextContent('Loading...');
+    });
+
+    it('applies space between spinner and text', () => {
+      render(<LoadingState />);
+
+      const container = screen.getByText('Loading...').parentElement;
+      expect(container).toHaveClass('space-x-2');
+    });
+  });
+
+  describe('Styling', () => {
+    it('applies muted foreground color to text', () => {
+      render(<LoadingState />);
+
+      const text = screen.getByText('Loading...');
+      expect(text).toHaveClass('text-muted-foreground');
+    });
+
+    it('spinner has rounded-full class', () => {
+      render(<LoadingState />);
+
+      const spinner = screen.getByText('Loading...').previousElementSibling;
+      expect(spinner).toHaveClass('rounded-full');
+    });
+
+    it('spinner has border styling', () => {
+      render(<LoadingState />);
+
+      const spinner = screen.getByText('Loading...').previousElementSibling;
+      expect(spinner).toHaveClass('border-b-2', 'border-primary');
+    });
+
+    it('spinner has appropriate size', () => {
+      render(<LoadingState />);
+
+      const spinner = screen.getByText('Loading...').previousElementSibling;
+      expect(spinner).toHaveClass('h-6', 'w-6');
+    });
+  });
+});