@jmruthers/pace-core 0.4.1 → 0.5.3

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

@@ -0,0 +1,662 @@
+/**
+ * @file Button Component Tests
+ * @description Comprehensive test suite for Button, ButtonGroup, and IconButton components
+ * @example Excellent test patterns and best practices following testing guidelines
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Button, ButtonGroup, IconButton } from './Button';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock Tooltip component since it's used by IconButton
+vi.mock('../Tooltip', () => ({
+  Tooltip: ({ children, content }: { children: React.ReactNode; content: string }) => (
+    <div data-testid="tooltip" title={content}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock icon component for testing
+const MockIcon = () => <span data-testid="mock-icon">⚙️</span>;
+
+describe('Button Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with text content', () => {
+      renderWithProviders(<Button>Click me</Button>);
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Button className="custom-class">Styled button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('custom-class');
+    });
+
+    it('renders with data-testid', () => {
+      renderWithProviders(<Button data-testid="test-button">Test</Button>);
+      expect(screen.getByTestId('test-button')).toBeInTheDocument();
+    });
+
+    it('renders with children elements', () => {
+      renderWithProviders(
+        <Button>
+          <span>Icon</span> Text
+        </Button>
+      );
+      expect(screen.getByRole('button')).toHaveTextContent('Icon Text');
+    });
+  });
+
+  describe('Variants', () => {
+    const variants = [
+      'default',
+      'destructive', 
+      'outline',
+      'secondary',
+      'ghost',
+      'link'
+    ] as const;
+
+    variants.forEach((variant) => {
+      it(`renders ${variant} variant correctly`, () => {
+        renderWithProviders(<Button variant={variant}>Test {variant}</Button>);
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('inline-flex', 'items-center', 'justify-center');
+      });
+    });
+  });
+
+  describe('Sizes', () => {
+    const sizes = ['default', 'sm', 'lg', 'icon'] as const;
+
+    sizes.forEach((size) => {
+      it(`renders ${size} size correctly`, () => {
+        renderWithProviders(<Button size={size}>Test {size}</Button>);
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('inline-flex', 'items-center', 'justify-center');
+      });
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('handles click events', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Button onClick={handleClick}>Click me</Button>);
+      
+      await user.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when disabled', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Button onClick={handleClick} disabled>Disabled</Button>);
+      
+      await user.click(screen.getByRole('button'));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('handles keyboard events', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Button onClick={handleClick}>Click me</Button>);
+      
+      screen.getByRole('button').focus();
+      await user.keyboard('{Enter}');
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles space key activation', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Button onClick={handleClick}>Space me</Button>);
+      
+      screen.getByRole('button').focus();
+      await user.keyboard(' ');
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('State Management', () => {
+    it('can be disabled', () => {
+      renderWithProviders(<Button disabled>Disabled button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('has correct type attribute', () => {
+      renderWithProviders(<Button type="submit">Submit</Button>);
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+    });
+
+    it('defaults to button type', () => {
+      renderWithProviders(<Button>Default button</Button>);
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+    });
+  });
+
+  describe('Composition (asChild)', () => {
+    it('renders as child element when asChild is true', () => {
+      renderWithProviders(
+        <Button asChild>
+          <a href="/test">Link button</a>
+        </Button>
+      );
+      expect(screen.getByRole('link')).toBeInTheDocument();
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/test');
+    });
+
+    it('does not set type attribute when asChild is true', () => {
+      renderWithProviders(
+        <Button asChild type="submit">
+          <a href="/test">Link button</a>
+        </Button>
+      );
+      const link = screen.getByRole('link');
+      expect(link).not.toHaveAttribute('type');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<Button aria-label="Custom label">Button</Button>);
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Custom label');
+    });
+
+    it('is focusable by default', () => {
+      renderWithProviders(<Button>Focusable button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('is not focusable when disabled', () => {
+      renderWithProviders(<Button disabled>Disabled button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('supports focus-visible styling', () => {
+      renderWithProviders(<Button>Focusable button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-1');
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with form submission', async () => {
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <Button type="submit">Submit</Button>
+        </form>
+      );
+      
+      await user.click(screen.getByRole('button'));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with React.forwardRef', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      renderWithProviders(<Button ref={ref}>Ref button</Button>);
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles invalid props gracefully', () => {
+      // @ts-expect-error Testing invalid prop
+      renderWithProviders(<Button invalidProp="test">Button</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('ButtonGroup Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with children buttons', () => {
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      expect(screen.getByRole('group')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(
+        <ButtonGroup className="custom-group">
+          <Button>Test</Button>
+        </ButtonGroup>
+      );
+      expect(screen.getByRole('group')).toHaveClass('custom-group');
+    });
+  });
+
+  describe('Orientation', () => {
+    it('renders 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('renders vertical when specified', () => {
+      renderWithProviders(
+        <ButtonGroup orientation="vertical">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const group = screen.getByRole('group');
+      expect(group).toHaveClass('flex-col');
+    });
+  });
+
+  describe('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(`applies ${spacing} spacing correctly`, () => {
+        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('applies vertical spacing when orientation is vertical', () => {
+      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('Variant and Size Inheritance', () => {
+    it('applies variant to child buttons', () => {
+      renderWithProviders(
+        <ButtonGroup variant="outline">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toHaveClass('border', 'border-main-300');
+      });
+    });
+
+    it('applies 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 => {
+        expect(button).toHaveClass('h-10');
+      });
+    });
+
+    it('preserves individual button props over group props', () => {
+      renderWithProviders(
+        <ButtonGroup variant="outline" size="sm">
+          <Button variant="destructive" size="lg">Special Button</Button>
+          <Button>Regular Button</Button>
+        </ButtonGroup>
+      );
+      
+      const specialButton = screen.getByRole('button', { name: 'Special Button' });
+      const regularButton = screen.getByRole('button', { name: 'Regular Button' });
+      
+      // Special button should keep its own props
+      expect(specialButton).toHaveClass('h-10'); // lg size
+      
+      // Regular button should inherit group props
+      expect(regularButton).toHaveClass('h-8'); // sm size
+    });
+  });
+
+  describe('Non-Button Children', () => {
+    it('renders non-button children without modification', () => {
+      renderWithProviders(
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <span>Separator</span>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      );
+      
+      expect(screen.getByText('Separator')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Button 2' })).toBeInTheDocument();
+    });
+  });
+});
+
+describe('IconButton Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with icon and aria-label', () => {
+      renderWithProviders(
+        <IconButton icon={<MockIcon />} aria-label="Settings" />
+      );
+      
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Settings');
+      expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<MockIcon />} 
+          aria-label="Test" 
+          className="custom-icon-button"
+        />
+      );
+      
+      expect(screen.getByRole('button')).toHaveClass('custom-icon-button');
+    });
+
+    it('defaults to icon size', () => {
+      renderWithProviders(
+        <IconButton icon={<MockIcon />} aria-label="Test" />
+      );
+      
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-8', 'w-8');
+    });
+  });
+
+  describe('Tooltip Integration', () => {
+    it('renders with tooltip when provided', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<MockIcon />} 
+          aria-label="Settings"
+          tooltip="Open settings"
+        />
+      );
+      
+      expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+      expect(screen.getByTestId('tooltip')).toHaveAttribute('title', 'Open settings');
+    });
+
+    it('renders without tooltip when not provided', () => {
+      renderWithProviders(
+        <IconButton icon={<MockIcon />} aria-label="Settings" />
+      );
+      
+      expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('handles click events', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <IconButton 
+          icon={<MockIcon />} 
+          aria-label="Click me"
+          onClick={handleClick}
+        />
+      );
+      
+      await user.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when disabled', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <IconButton 
+          icon={<MockIcon />} 
+          aria-label="Disabled"
+          onClick={handleClick}
+          disabled
+        />
+      );
+      
+      await user.click(screen.getByRole('button'));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('requires aria-label', () => {
+      // This should be caught by TypeScript, but testing runtime behavior
+      renderWithProviders(
+        <IconButton 
+          icon={<MockIcon />} 
+          aria-label="Required label"
+        />
+      );
+      
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Required label');
+    });
+
+    it('is focusable by default', () => {
+      renderWithProviders(
+        <IconButton icon={<MockIcon />} aria-label="Focusable" />
+      );
+      
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('is not focusable when disabled', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<MockIcon />} 
+          aria-label="Disabled"
+          disabled
+        />
+      );
+      
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Composition', () => {
+    it('works with React.forwardRef', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      renderWithProviders(
+        <IconButton 
+          ref={ref}
+          icon={<MockIcon />} 
+          aria-label="Ref button"
+        />
+      );
+      
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it('renders as button with icon (asChild not supported by IconButton)', () => {
+      renderWithProviders(
+        <IconButton 
+          icon={<MockIcon />} 
+          aria-label="Settings button"
+        />
+      );
+      
+      // IconButton always renders as a button with the icon
+      // It doesn't support asChild prop - that's a limitation of the current implementation
+      expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Settings button');
+    });
+  });
+
+  describe('Size Variants', () => {
+    it('supports different sizes', () => {
+      const sizes = ['sm', 'default', 'lg'] as const;
+      
+      sizes.forEach((size) => {
+        const { unmount } = renderWithProviders(
+          <IconButton 
+            icon={<MockIcon />} 
+            aria-label={`${size} button`}
+            size={size}
+          />
+        );
+        
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+});
+
+describe('Button Component Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Complex Scenarios', () => {
+    it('handles rapid clicking without issues', async () => {
+      const handleClick = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Button onClick={handleClick}>Rapid click</Button>);
+      
+      const button = screen.getByRole('button');
+      
+      // Rapid clicks
+      for (let i = 0; i < 5; i++) {
+        await user.click(button);
+      }
+      
+      expect(handleClick).toHaveBeenCalledTimes(5);
+    });
+
+    it('handles keyboard navigation correctly', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <div>
+          <Button>First</Button>
+          <Button>Second</Button>
+          <Button>Third</Button>
+        </div>
+      );
+      
+      const firstButton = screen.getByRole('button', { name: 'First' });
+      const secondButton = screen.getByRole('button', { name: 'Second' });
+      const thirdButton = screen.getByRole('button', { name: 'Third' });
+      
+      firstButton.focus();
+      expect(document.activeElement).toBe(firstButton);
+      
+      await user.keyboard('{Tab}');
+      expect(document.activeElement).toBe(secondButton);
+      
+      await user.keyboard('{Tab}');
+      expect(document.activeElement).toBe(thirdButton);
+    });
+
+    it('works in a complex form scenario', async () => {
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      const handleCancel = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <input type="text" placeholder="Name" />
+          <ButtonGroup>
+            <Button type="button" onClick={handleCancel}>Cancel</Button>
+            <Button type="submit">Submit</Button>
+          </ButtonGroup>
+        </form>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Cancel' }));
+      expect(handleCancel).toHaveBeenCalledTimes(1);
+      
+      await user.click(screen.getByRole('button', { name: 'Submit' }));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty children gracefully', () => {
+      renderWithProviders(<Button></Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('handles very long text content', () => {
+      const longText = 'This is a very long button text that might cause layout issues but should be handled gracefully by the component';
+      renderWithProviders(<Button>{longText}</Button>);
+      expect(screen.getByRole('button')).toHaveTextContent(longText);
+    });
+
+    it('handles special characters in text', () => {
+      const specialText = 'Button with special chars: !@#$%^&*()_+-=[]{}|;:,.<>?';
+      renderWithProviders(<Button>{specialText}</Button>);
+      expect(screen.getByRole('button')).toHaveTextContent(specialText);
+    });
+  });
+});