@jmruthers/pace-core 0.2.4

package/src/components/Button/__tests__/Button.comprehensive.test.tsx

@@ -0,0 +1,721 @@
+/**
+ * @file Button Comprehensive Tests
+ * @description Comprehensive test coverage for Button, ButtonGroup, and IconButton components
+ */
+
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import '@testing-library/jest-dom';
+import { Button, ButtonGroup, IconButton } from '../Button';
+import { Settings, Plus, Trash2 } from 'lucide-react';
+import { renderWithProviders, testComponentRendering, testComponentAccessibility, testComponentEvents } from '../../../__tests__/shared';
+
+// Mock Tooltip to passthrough
+vi.mock('../../Tooltip', () => ({
+  Tooltip: ({ children, content }: { children: React.ReactNode; content?: string }) => (
+    <div data-testid="tooltip" data-content={content}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock Lucide React icons
+vi.mock('lucide-react', () => ({
+  Settings: () => <span data-testid="settings-icon">⚙️</span>,
+  Plus: () => <span data-testid="plus-icon">➕</span>,
+  Trash2: () => <span data-testid="trash-icon">🗑️</span>,
+}));
+
+describe('Button Component - Comprehensive Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test using shared component testing utilities
+  describe('Button - Shared Utilities Tests', () => {
+    testComponentRendering(Button, [
+      {
+        name: 'default button',
+        props: { children: 'Click me' },
+        expectedText: 'Click me'
+      },
+      {
+        name: 'primary variant',
+        props: { variant: 'default', children: 'Primary Button' },
+        expectedText: 'Primary Button'
+      },
+      {
+        name: 'destructive variant',
+        props: { variant: 'destructive', children: 'Delete' },
+        expectedText: 'Delete'
+      },
+      {
+        name: 'disabled state',
+        props: { disabled: true, children: 'Disabled' },
+        expectedText: 'Disabled'
+      }
+    ]);
+
+    testComponentAccessibility(Button, {
+      requiredAttributes: [],
+      shouldBeKeyboardAccessible: false,
+      shouldHaveValidRole: false,
+      shouldHaveValidAriaLabel: false
+    }, {
+      children: 'Accessible Button'
+    });
+
+    testComponentEvents(Button, {
+      children: 'Clickable Button'
+    }, [
+      {
+        name: 'click event',
+        event: 'click',
+        element: 'button',
+        expectedBehavior: () => {
+          // Button should be clickable
+          expect(screen.getByRole('button')).toBeInTheDocument();
+        }
+      }
+    ]);
+  });
+
+  describe('Button - asChild functionality', () => {
+    it('should render as Slot when asChild is true', () => {
+      renderWithProviders(
+        <Button asChild>
+          <a href="/test">Link Button</a>
+        </Button>
+      );
+      
+      const link = screen.getByRole('link', { name: 'Link Button' });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', '/test');
+    });
+
+    it('should not set type attribute when asChild is true', () => {
+      renderWithProviders(
+        <Button asChild type="submit">
+          <div>Div Button</div>
+        </Button>
+      );
+      
+      const div = screen.getByText('Div Button');
+      expect(div).not.toHaveAttribute('type');
+    });
+
+    it('should set type attribute when asChild is false', () => {
+      renderWithProviders(<Button type="submit">Submit Button</Button>);
+      
+      const button = screen.getByRole('button', { name: 'Submit Button' });
+      expect(button).toHaveAttribute('type', 'submit');
+    });
+
+    it('should default to button type when asChild is false and no type specified', () => {
+      renderWithProviders(<Button>Default Button</Button>);
+      
+      const button = screen.getByRole('button', { name: 'Default Button' });
+      expect(button).toHaveAttribute('type', 'button');
+    });
+  });
+
+  describe('Button - Edge Cases and Error Handling', () => {
+    it('should handle undefined children', () => {
+      renderWithProviders(<Button>{undefined}</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should handle boolean children', () => {
+      renderWithProviders(<Button>{true}</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should handle number children', () => {
+      renderWithProviders(<Button>{42}</Button>);
+      expect(screen.getByRole('button')).toHaveTextContent('42');
+    });
+
+    it('should handle array children', () => {
+      renderWithProviders(<Button>{['Hello', ' ', 'World']}</Button>);
+      expect(screen.getByRole('button')).toHaveTextContent('Hello World');
+    });
+
+    it('should handle complex children with multiple elements', () => {
+      renderWithProviders(
+        <Button>
+          <span>Icon</span>
+          <span>Text</span>
+        </Button>
+      );
+      expect(screen.getByRole('button')).toHaveTextContent('IconText');
+    });
+
+    it('should handle disabled state with aria-disabled', () => {
+      renderWithProviders(<Button disabled>Disabled Button</Button>);
+      const button = screen.getByRole('button', { name: 'Disabled Button' });
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toBeDisabled();
+    });
+
+    it('should not have aria-disabled when not disabled', () => {
+      renderWithProviders(<Button>Enabled Button</Button>);
+      const button = screen.getByRole('button', { name: 'Enabled Button' });
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('Button - All Variants and Sizes', () => {
+    const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+    const sizes = ['default', 'sm', 'lg', 'icon'] as const;
+
+    variants.forEach(variant => {
+      it(`should render ${variant} variant correctly`, () => {
+        renderWithProviders(<Button variant={variant}>{variant} Button</Button>);
+        expect(screen.getByRole('button', { name: `${variant} Button` })).toBeInTheDocument();
+      });
+    });
+
+    sizes.forEach(size => {
+      it(`should render ${size} size correctly`, () => {
+        renderWithProviders(<Button size={size}>{size} Button</Button>);
+        expect(screen.getByRole('button', { name: `${size} Button` })).toBeInTheDocument();
+      });
+    });
+
+    it('should handle all variant and size combinations', () => {
+      variants.forEach(variant => {
+        sizes.forEach(size => {
+          const { unmount } = renderWithProviders(
+            <Button variant={variant} size={size}>
+              {variant}-{size}
+            </Button>
+          );
+          expect(screen.getByRole('button', { name: `${variant}-${size}` })).toBeInTheDocument();
+          unmount();
+        });
+      });
+    });
+  });
+
+  describe('Button - Event Handling', () => {
+    it('should handle onMouseEnter event', async () => {
+      const user = userEvent.setup();
+      const handleMouseEnter = vi.fn();
+      renderWithProviders(<Button onMouseEnter={handleMouseEnter}>Hover Button</Button>);
+      
+      await user.hover(screen.getByRole('button', { name: 'Hover Button' }));
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle onMouseLeave event', async () => {
+      const user = userEvent.setup();
+      const handleMouseLeave = vi.fn();
+      renderWithProviders(<Button onMouseLeave={handleMouseLeave}>Hover Button</Button>);
+      
+      const button = screen.getByRole('button', { name: 'Hover Button' });
+      await user.hover(button);
+      await user.unhover(button);
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle onFocus event', async () => {
+      const user = userEvent.setup();
+      const handleFocus = vi.fn();
+      renderWithProviders(<Button onFocus={handleFocus}>Focus Button</Button>);
+      
+      const button = screen.getByRole('button', { name: 'Focus Button' });
+      await user.tab();
+      expect(handleFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle onBlur event', async () => {
+      const user = userEvent.setup();
+      const handleBlur = vi.fn();
+      renderWithProviders(<Button onBlur={handleBlur}>Blur Button</Button>);
+      
+      const button = screen.getByRole('button', { name: 'Blur Button' });
+      button.focus();
+      await user.tab();
+      expect(handleBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle onKeyDown event', async () => {
+      const user = userEvent.setup();
+      const handleKeyDown = vi.fn();
+      renderWithProviders(<Button onKeyDown={handleKeyDown}>Key Button</Button>);
+      
+      const button = screen.getByRole('button', { name: 'Key Button' });
+      button.focus();
+      await user.keyboard('{Enter}');
+      expect(handleKeyDown).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onClick when disabled', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      renderWithProviders(<Button onClick={handleClick} disabled>Disabled Button</Button>);
+      
+      await user.click(screen.getByRole('button', { name: 'Disabled Button' }));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('ButtonGroup Component - Comprehensive Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('ButtonGroup - Basic Rendering', () => {
+    it('should render with default props', () => {
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const group = screen.getByRole('group');
+      expect(group).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      renderWithProviders(
+        <ButtonGroup className="custom-group">
+          <Button>Button 1</Button>
+        </ButtonGroup>
+      );
+      
+      const group = screen.getByRole('group');
+      expect(group).toHaveClass('custom-group');
+    });
+  });
+
+  describe('ButtonGroup - Orientation', () => {
+    it('should render horizontal by default', () => {
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const group = screen.getByRole('group');
+      expect(group).toHaveClass('flex-row', 'items-center');
+    });
+
+    it('should render vertical when orientation is vertical', () => {
+      renderWithProviders(
+        <ButtonGroup orientation="vertical">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const group = screen.getByRole('group');
+      expect(group).toHaveClass('flex-col');
+    });
+  });
+
+  describe('ButtonGroup - Spacing', () => {
+    const spacingTests = [
+      { spacing: 'none', expectedClass: '' },
+      { spacing: 'sm', expectedClass: 'space-x-1' },
+      { spacing: 'md', expectedClass: 'space-x-2' },
+      { spacing: 'lg', expectedClass: 'space-x-4' },
+    ];
+
+    spacingTests.forEach(({ spacing, expectedClass }) => {
+      it(`should apply ${spacing} spacing for horizontal orientation`, () => {
+        renderWithProviders(
+          <ButtonGroup spacing={spacing as any}>
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+          </ButtonGroup>
+        );
+        
+        const group = screen.getByRole('group');
+        if (expectedClass) {
+          expect(group).toHaveClass(expectedClass);
+        } else {
+          expect(group).not.toHaveClass('space-x-1', 'space-x-2', 'space-x-4');
+        }
+      });
+    });
+
+    it('should apply vertical spacing for vertical orientation', () => {
+      renderWithProviders(
+        <ButtonGroup orientation="vertical" spacing="md">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const group = screen.getByRole('group');
+      expect(group).toHaveClass('space-y-2');
+    });
+  });
+
+  describe('ButtonGroup - Variant and Size Propagation', () => {
+    it('should apply variant to child buttons', () => {
+      renderWithProviders(
+        <ButtonGroup variant="destructive">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        // Check for destructive variant classes
+        expect(button).toHaveClass('bg-acc-600', 'text-acc-50');
+      });
+    });
+
+    it('should apply size to child buttons', () => {
+      renderWithProviders(
+        <ButtonGroup size="lg">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        // Check for lg size classes
+        expect(button).toHaveClass('h-10', 'px-8');
+      });
+    });
+
+    it('should not override existing variant on child buttons', () => {
+      renderWithProviders(
+        <ButtonGroup variant="destructive">
+          <Button variant="outline">Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const button1 = screen.getByRole('button', { name: 'Button 1' });
+      const button2 = screen.getByRole('button', { name: 'Button 2' });
+      
+      expect(button1).toHaveClass('border', 'border-main-300'); // outline variant
+      expect(button2).toHaveClass('bg-acc-600', 'text-acc-50'); // destructive variant from group
+    });
+
+    it('should not override existing size on child buttons', () => {
+      renderWithProviders(
+        <ButtonGroup size="lg">
+          <Button size="sm">Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const button1 = screen.getByRole('button', { name: 'Button 1' });
+      const button2 = screen.getByRole('button', { name: 'Button 2' });
+      
+      expect(button1).toHaveClass('h-8', 'px-3'); // sm size
+      expect(button2).toHaveClass('h-10', 'px-8'); // lg size from group
+    });
+  });
+
+  describe('ButtonGroup - Children Handling', () => {
+    it('should handle non-Button children', () => {
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <span>Non-button child</span>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
+      expect(screen.getByText('Non-button child')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
+    });
+
+    it('should handle empty children', () => {
+      renderWithProviders(<ButtonGroup>{null}</ButtonGroup>);
+      const group = screen.getByRole('group');
+      expect(group).toBeInTheDocument();
+    });
+
+    it('should handle children with displayName that is not Button', () => {
+      const CustomButton = () => <button>Custom</button>;
+      CustomButton.displayName = 'CustomButton';
+      
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <CustomButton />
+        </ButtonGroup>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
+    });
+
+    it('should handle children with function type but no displayName', () => {
+      const CustomButton = () => <button>Custom</button>;
+      
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <CustomButton />
+        </ButtonGroup>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
+    });
+
+    it('should handle children that are not React elements', () => {
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          {'String child'}
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
+      expect(screen.getByText('String child')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
+    });
+  });
+});
+
+describe('IconButton Component - Comprehensive Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('IconButton - Basic Rendering', () => {
+    it('should render with icon and aria-label', () => {
+      renderWithProviders(<IconButton icon={<Settings />} aria-label="Settings" />);
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveAttribute('aria-label', 'Settings');
+      expect(screen.getByTestId('settings-icon')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          className="custom-icon-button" 
+        />
+      );
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toHaveClass('custom-icon-button');
+    });
+
+    it('should default to icon size', () => {
+      renderWithProviders(<IconButton icon={<Settings />} aria-label="Settings" />);
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toHaveClass('h-8', 'w-8');
+    });
+
+    it('should allow custom size', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          size="lg" 
+        />
+      );
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toHaveClass('h-10');
+    });
+  });
+
+  describe('IconButton - Tooltip Functionality', () => {
+    it('should render with tooltip when provided', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          tooltip="Open settings" 
+        />
+      );
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toBeInTheDocument();
+      
+      const tooltip = screen.getByTestId('tooltip');
+      expect(tooltip).toBeInTheDocument();
+      expect(tooltip).toHaveAttribute('data-content', 'Open settings');
+    });
+
+    it('should not render tooltip when not provided', () => {
+      renderWithProviders(<IconButton icon={<Settings />} aria-label="Settings" />);
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toBeInTheDocument();
+      expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument();
+    });
+
+    it('should render without tooltip wrapper when tooltip is not provided', () => {
+      renderWithProviders(<IconButton icon={<Settings />} aria-label="Settings" />);
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toBeInTheDocument();
+      expect(button.parentElement).not.toHaveAttribute('data-testid', 'tooltip');
+    });
+  });
+
+  describe('IconButton - Event Handling', () => {
+    it('should handle click events', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          onClick={handleClick} 
+        />
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Settings' }));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle disabled state', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          disabled 
+        />
+      );
+      
+      const button = screen.getByRole('button', { name: 'Settings' });
+      expect(button).toBeDisabled();
+    });
+
+    it('should not call onClick when disabled', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          onClick={handleClick} 
+          disabled 
+        />
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Settings' }));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('IconButton - Different Icons', () => {
+    it('should render with different icons', () => {
+      const { rerender } = renderWithProviders(
+        <IconButton icon={<Settings />} aria-label="Settings" />
+      );
+      expect(screen.getByTestId('settings-icon')).toBeInTheDocument();
+
+      rerender(<IconButton icon={<Plus />} aria-label="Add" />);
+      expect(screen.getByTestId('plus-icon')).toBeInTheDocument();
+
+      rerender(<IconButton icon={<Trash2 />} aria-label="Delete" />);
+      expect(screen.getByTestId('trash-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('IconButton - Props Forwarding', () => {
+    it('should forward all button props', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          data-testid="custom-icon-button"
+          title="Custom title"
+        />
+      );
+      
+      const button = screen.getByTestId('custom-icon-button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveAttribute('title', 'Custom title');
+    });
+
+    it('should forward ref correctly', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      renderWithProviders(
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          ref={ref} 
+        />
+      );
+      
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+});
+
+describe('Button Components - Integration Tests', () => {
+  it('should work together in a complex layout', () => {
+    renderWithProviders(
+      <div>
+        <ButtonGroup variant="outline" spacing="md">
+          <Button>Save</Button>
+          <Button variant="destructive">Delete</Button>
+        </ButtonGroup>
+        <IconButton 
+          icon={<Settings />} 
+          aria-label="Settings" 
+          tooltip="Open settings" 
+        />
+      </div>
+    );
+    
+    expect(screen.getByRole('group')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument();
+    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+  });
+
+  it('should handle keyboard navigation between components', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <div>
+        <Button>First Button</Button>
+        <IconButton icon={<Settings />} aria-label="Settings" />
+        <ButtonGroup>
+          <Button>Group Button 1</Button>
+          <Button>Group Button 2</Button>
+        </ButtonGroup>
+      </div>
+    );
+    
+    const firstButton = screen.getByRole('button', { name: 'First Button' });
+    const iconButton = screen.getByRole('button', { name: 'Settings' });
+    const groupButton1 = screen.getByRole('button', { name: 'Group Button 1' });
+    const groupButton2 = screen.getByRole('button', { name: 'Group Button 2' });
+    
+    firstButton.focus();
+    expect(document.activeElement).toBe(firstButton);
+    
+    await user.tab();
+    expect(document.activeElement).toBe(iconButton);
+    
+    await user.tab();
+    expect(document.activeElement).toBe(groupButton1);
+    
+    await user.tab();
+    expect(document.activeElement).toBe(groupButton2);
+  });
+});