@jmruthers/pace-core 0.2.4

package/src/components/Checkbox/__tests__/Checkbox.unit.test.tsx

@@ -0,0 +1,520 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
+import { describe, it, expect, vi } from 'vitest';
+import { Checkbox } from '../Checkbox';
+import { renderWithProviders, testComponentRendering, testComponentAccessibility, testComponentEvents } from '../../../__tests__/shared';
+
+// Mock Radix UI Checkbox primitives
+vi.mock('@radix-ui/react-checkbox', () => ({
+  Root: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { 
+    checked?: boolean; 
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+  }>(({ children, className, checked, onCheckedChange, disabled, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      role="checkbox"
+      aria-checked={checked ? 'true' : 'false'}
+      disabled={disabled}
+      className={className}
+      data-testid="checkbox"
+      data-state={checked ? 'checked' : 'unchecked'}
+      onClick={() => onCheckedChange?.(!checked)}
+      onKeyDown={(e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          e.preventDefault();
+          onCheckedChange?.(!checked);
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  )),
+  Indicator: React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(({ children, className, ...props }, ref) => (
+    <span ref={ref} className={className} data-testid="checkbox-indicator" {...props}>
+      {children}
+    </span>
+  )),
+}));
+
+// Mock lucide-react Check icon
+vi.mock('lucide-react', () => ({
+  Check: ({ className }: { className?: string }) => (
+    <svg className={className} data-testid="check-icon" />
+  ),
+}));
+
+describe('Checkbox Component', () => {
+  describe('Basic Rendering', () => {
+    it('renders unchecked checkbox by default', () => {
+      renderWithProviders(<Checkbox />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).toHaveAttribute('aria-checked', 'false');
+      expect(checkbox).toHaveAttribute('data-state', 'unchecked');
+    });
+
+    it('renders checked checkbox when checked prop is true', () => {
+      renderWithProviders(<Checkbox checked />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveAttribute('aria-checked', 'true');
+      expect(checkbox).toHaveAttribute('data-state', 'checked');
+    });
+
+    it('renders disabled checkbox', () => {
+      renderWithProviders(<Checkbox disabled />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toBeDisabled();
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<Checkbox className="custom-checkbox" />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('custom-checkbox');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<Checkbox ref={ref} />);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<Checkbox data-testid="custom-checkbox" aria-label="Custom checkbox" />);
+      const checkbox = screen.getByTestId('custom-checkbox');
+      expect(checkbox).toHaveAttribute('aria-label', 'Custom checkbox');
+    });
+  });
+
+  describe('Styling', () => {
+    it('applies default styling classes', () => {
+      renderWithProviders(<Checkbox />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass(
+        'peer',
+        'h-4',
+        'w-4',
+        'shrink-0',
+        'rounded-sm',
+        'border',
+        'border-primary',
+        'ring-offset-background'
+      );
+    });
+
+    it('applies focus styles', () => {
+      renderWithProviders(<Checkbox />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-2', 'focus-visible:ring-ring', 'focus-visible:ring-offset-2');
+    });
+
+    it('applies disabled styles', () => {
+      renderWithProviders(<Checkbox disabled />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('disabled:cursor-not-allowed', 'disabled:opacity-50');
+    });
+
+    it('applies checked state styles', () => {
+      renderWithProviders(<Checkbox checked />);
+      const checkbox = screen.getByTestId('checkbox');
+      expect(checkbox).toHaveClass('data-[state=checked]:bg-primary', 'data-[state=checked]:text-primary-foreground');
+    });
+  });
+
+  describe('Indicator', () => {
+    it('renders indicator with check icon', () => {
+      renderWithProviders(<Checkbox />);
+      const indicator = screen.getByTestId('checkbox-indicator');
+      const checkIcon = screen.getByTestId('check-icon');
+      
+      expect(indicator).toBeInTheDocument();
+      expect(checkIcon).toBeInTheDocument();
+    });
+
+    it('applies indicator styling', () => {
+      renderWithProviders(<Checkbox />);
+      const indicator = screen.getByTestId('checkbox-indicator');
+      expect(indicator).toHaveClass('flex', 'items-center', 'justify-center', 'text-current');
+    });
+
+    it('check icon has correct styling', () => {
+      renderWithProviders(<Checkbox />);
+      const checkIcon = screen.getByTestId('check-icon');
+      expect(checkIcon).toHaveClass('h-4', 'w-4');
+    });
+  });
+
+  describe('Interactions', () => {
+    it('calls onCheckedChange when clicked', () => {
+      const handleChange = vi.fn();
+      renderWithProviders(<Checkbox onCheckedChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it('toggles checked state when clicked', () => {
+      const handleChange = vi.fn();
+      renderWithProviders(<Checkbox checked onCheckedChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).toHaveBeenCalledWith(false);
+    });
+
+    it('does not call onCheckedChange when disabled', () => {
+      const handleChange = vi.fn();
+      renderWithProviders(<Checkbox disabled onCheckedChange={handleChange} />);
+      
+      const checkbox = screen.getByTestId('checkbox');
+      fireEvent.click(checkbox);
+      
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has correct role', () => {
+      renderWithProviders(<Checkbox />);
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+    });
+
+    it('has correct aria-checked attribute', () => {
+      renderWithProviders(<Checkbox checked />);
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveAttribute('aria-checked', 'true');
+    });
+
+    it('handles keyboard navigation', () => {
+      const handleChange = vi.fn();
+      renderWithProviders(<Checkbox onCheckedChange={handleChange} />);
+      
+      const checkbox = screen.getByRole('checkbox');
+      fireEvent.keyDown(checkbox, { key: ' ' });
+      
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it('supports Enter key for activation', () => {
+      const handleChange = vi.fn();
+      renderWithProviders(<Checkbox onCheckedChange={handleChange} />);
+      
+      const checkbox = screen.getByRole('checkbox');
+      fireEvent.keyDown(checkbox, { key: 'Enter' });
+      
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('Controlled Component', () => {
+    it('maintains controlled state', () => {
+      const TestComponent = () => {
+        const [checked, setChecked] = React.useState(false);
+        return (
+          <Checkbox 
+            checked={checked} 
+            onCheckedChange={(value) => setChecked(value === true)} 
+          />
+        );
+      };
+
+      renderWithProviders(<TestComponent />);
+      const checkbox = screen.getByRole('checkbox');
+      
+      expect(checkbox).toHaveAttribute('aria-checked', 'false');
+      
+      fireEvent.click(checkbox);
+      expect(checkbox).toHaveAttribute('aria-checked', 'true');
+    });
+  });
+
+  describe('Integration with Forms', () => {
+    it('works with form labels', () => {
+      renderWithProviders(
+        <div>
+          <Checkbox id="terms" />
+          <label htmlFor="terms">Accept terms</label>
+        </div>
+      );
+      
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveAttribute('id', 'terms');
+    });
+
+    it('supports form submission', () => {
+      const handleSubmit = vi.fn();
+      renderWithProviders(
+        <form onSubmit={handleSubmit} data-testid="test-form">
+          <Checkbox name="agreement" />
+          <button type="submit">Submit</button>
+        </form>
+      );
+      
+      const form = screen.getByTestId('test-form');
+      fireEvent.submit(form);
+      
+      expect(handleSubmit).toHaveBeenCalled();
+    });
+  });
+describe('Checkbox Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('Checkbox component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: Checkbox component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'Checkbox interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('Checkbox prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+describe('Checkbox Edge Cases', () => {
+  describe('Extreme Data Values', () => {
+    it('should handle very long strings', () => {
+      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
+      
+      renderWithProviders(<Checkbox>{longString}</Checkbox>);
+      expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    });
+
+    it('should handle empty and null values', () => {
+      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
+      
+      emptyValues.forEach(value => {
+        const { unmount } = renderWithProviders(<Checkbox>{value as any}</Checkbox>);
+        expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle special characters', () => {
+      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
+      
+      renderWithProviders(<Checkbox>{specialChars}</Checkbox>);
+      expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
+      
+      renderWithProviders(<Checkbox>{unicodeChars}</Checkbox>);
+      expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    });
+  });
+
+  describe('Extreme Numbers', () => {
+    it('should handle very large numbers', () => {
+      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
+      
+      largeNumbers.forEach(number => {
+        const { unmount } = renderWithProviders(<Checkbox value={number} />);
+        expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle very small numbers', () => {
+      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
+      
+      smallNumbers.forEach(number => {
+        const { unmount } = renderWithProviders(<Checkbox value={number} />);
+        expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('Rapid State Changes', () => {
+    it('should handle rapid prop changes', async () => {
+      const stateProps = [
+        { children: 'State 1' },
+        { children: 'State 2' },
+        { children: 'State 3' },
+        { children: 'State 4' },
+        { children: 'State 5' },
+      ];
+
+      await edgeCaseUtils.testRapidStateChanges(Checkbox, stateProps);
+    });
+
+    it('should handle rapid user interactions', async () => {
+      renderWithProviders(<Checkbox />);
+      
+      // Checkbox should render successfully
+      expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should not leak memory with repeated renders', () => {
+      edgeCaseUtils.testMemoryLeaks(Checkbox, { children: 'Memory test' });
+    });
+  });
+
+  describe('Boundary Conditions', () => {
+    it('should handle boundary prop values', () => {
+      const boundaryProps = [
+        { children: '' },
+        { children: 0 },
+        { children: false },
+        { children: [] },{ className: '' },
+        { 'data-testid': '' },
+      ];
+
+      edgeCaseUtils.testBoundaryConditions(Checkbox, boundaryProps);
+    });
+  });
+
+  describe('Complex Data Structures', () => {
+    it('should handle deeply nested objects', () => {
+      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
+      
+      renderWithProviders(<Checkbox data={deepObject} />);
+      expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    });
+
+    it('should handle large arrays', () => {
+      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
+      
+      renderWithProviders(<Checkbox items={largeArray} />);
+      expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    });
+  });
+
+  // Shared Utilities Tests
+  describe('Checkbox - Shared Utilities Tests', () => {
+    testComponentRendering(Checkbox, [
+      {
+        name: 'with default props',
+        props: {},
+        expectedText: ''
+      },
+      {
+        name: 'with checked state',
+        props: { checked: true },
+        expectedText: ''
+      },
+      {
+        name: 'with disabled state',
+        props: { disabled: true },
+        expectedText: ''
+      },
+      {
+        name: 'with custom className',
+        props: { className: 'custom-checkbox' },
+        expectedText: ''
+      }
+    ]);
+
+    testComponentAccessibility(Checkbox, {
+      requiredAttributes: [],
+      shouldBeKeyboardAccessible: false,
+      shouldHaveValidRole: false,
+      shouldHaveValidAriaLabel: false
+    });
+
+    testComponentEvents(Checkbox, {
+      onCheckedChange: vi.fn()
+    }, [
+      {
+        name: 'click event',
+        event: 'click',
+        element: 'checkbox',
+        expectedBehavior: () => {
+          expect(screen.getByRole('checkbox')).toBeInTheDocument();
+        }
+      }
+    ]);
+  });
+});
+}); 

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+
+export { Checkbox } from './Checkbox';