@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,1121 +0,0 @@
-import { userEvent } from '@testing-library/user-event';
-import React from 'react';
-import { screen, waitFor, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import { Input, InputGroup } from '../Input';
-import { renderWithProviders, testComponentRendering, testComponentAccessibility, testComponentEvents, testFormComponent } from '../../../__tests__/shared';
-
-describe('Input Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders input element', () => {
-      renderWithProviders(<Input />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('renders with placeholder', () => {
-      renderWithProviders(<Input placeholder="Enter text" />);
-      const input = screen.getByPlaceholderText('Enter text');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('renders with value', () => {
-      renderWithProviders(<Input value="test value" onChange={() => {}} />);
-      const input = screen.getByDisplayValue('test value');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('renders with type attribute', () => {
-      renderWithProviders(<Input type="email" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('type', 'email');
-    });
-
-    it('renders disabled input', () => {
-      renderWithProviders(<Input disabled />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeDisabled();
-    });
-
-    it('renders required input', () => {
-      renderWithProviders(<Input required />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeRequired();
-    });
-
-    it('renders readOnly input', () => {
-      renderWithProviders(<Input readOnly />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('readOnly');
-    });
-  });
-
-  describe('Variants', () => {
-    it('applies default variant styling', () => {
-      renderWithProviders(<Input variant="default" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('border-input');
-    });
-
-    it('applies destructive variant styling', () => {
-      renderWithProviders(<Input variant="destructive" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
-    });
-
-    it('applies destructive styling when error is true', () => {
-      renderWithProviders(<Input error={true} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
-    });
-
-    it('overrides default variant when error is true', () => {
-      renderWithProviders(<Input variant="default" error={true} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
-    });
-  });
-
-  describe('Sizes', () => {
-    it('applies small size styling', () => {
-      renderWithProviders(<Input size="sm" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('h-8', 'px-2', 'py-1', 'text-xs');
-    });
-
-    it('applies medium size styling (default)', () => {
-      renderWithProviders(<Input size="md" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('h-9', 'px-3', 'py-2', 'text-sm');
-    });
-
-    it('applies large size styling', () => {
-      renderWithProviders(<Input size="lg" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('h-10', 'px-4', 'py-3', 'text-base');
-    });
-
-    it('defaults to medium size when no size is specified', () => {
-      renderWithProviders(<Input />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('h-9', 'px-3', 'py-2', 'text-sm');
-    });
-  });
-
-  describe('Styling', () => {
-    it('applies default styling classes', () => {
-      renderWithProviders(<Input />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass(
-        'flex',
-        'h-9',
-        'w-full',
-        'rounded-md',
-        'border',
-        'border-input',
-        'bg-background',
-        'px-3',
-        'py-2',
-        'text-sm',
-        'ring-offset-background'
-      );
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<Input className="custom-input" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('custom-input');
-    });
-
-    it('applies focus styles', () => {
-      renderWithProviders(<Input />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-2', 'focus-visible:ring-ring', 'focus-visible:ring-offset-2');
-    });
-
-    it('applies disabled styles', () => {
-      renderWithProviders(<Input disabled />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('disabled:cursor-not-allowed', 'disabled:opacity-50');
-    });
-
-    it('applies file input styles', () => {
-      renderWithProviders(<Input type="file" />);
-      const input = screen.getByDisplayValue('');
-      expect(input).toHaveClass('file:border-0', 'file:bg-transparent', 'file:text-sm', 'file:font-medium');
-    });
-
-    it('applies placeholder styles', () => {
-      renderWithProviders(<Input placeholder="Enter text" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('placeholder:text-muted-foreground');
-    });
-  });
-
-  describe('Interactions', () => {
-    it('handles onChange event', () => {
-      const handleChange = vi.fn();
-      renderWithProviders(<Input onChange={handleChange} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.change(input, { target: { value: 'new value' } });
-      
-      expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('handles onFocus event', () => {
-      const handleFocus = vi.fn();
-      renderWithProviders(<Input onFocus={handleFocus} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.focus(input);
-      
-      expect(handleFocus).toHaveBeenCalled();
-    });
-
-    it('handles onBlur event', () => {
-      const handleBlur = vi.fn();
-      renderWithProviders(<Input onBlur={handleBlur} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.blur(input);
-      
-      expect(handleBlur).toHaveBeenCalled();
-    });
-
-    it('handles onKeyDown event', () => {
-      const handleKeyDown = vi.fn();
-      renderWithProviders(<Input onKeyDown={handleKeyDown} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.keyDown(input, { key: 'Enter' });
-      
-      expect(handleKeyDown).toHaveBeenCalled();
-    });
-
-    it('handles onKeyUp event', () => {
-      const handleKeyUp = vi.fn();
-      renderWithProviders(<Input onKeyUp={handleKeyUp} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.keyUp(input, { key: 'Enter' });
-      
-      expect(handleKeyUp).toHaveBeenCalled();
-    });
-
-
-
-    it('handles onClick event', () => {
-      const handleClick = vi.fn();
-      renderWithProviders(<Input onClick={handleClick} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.click(input);
-      
-      expect(handleClick).toHaveBeenCalled();
-    });
-
-    it('handles onDoubleClick event', () => {
-      const handleDoubleClick = vi.fn();
-      renderWithProviders(<Input onDoubleClick={handleDoubleClick} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.doubleClick(input);
-      
-      expect(handleDoubleClick).toHaveBeenCalled();
-    });
-
-    it('handles onInput event', () => {
-      const handleInput = vi.fn();
-      renderWithProviders(<Input onInput={handleInput} />);
-      
-      const input = screen.getByRole('textbox');
-      fireEvent.input(input, { target: { value: 'new value' } });
-      
-      expect(handleInput).toHaveBeenCalled();
-    });
-  });
-
-  describe('Form Integration', () => {
-    it('works with form labels', () => {
-      renderWithProviders(
-        <div>
-          <label htmlFor="test-input">Test Label</label>
-          <Input id="test-input" />
-        </div>
-      );
-      
-      const input = screen.getByLabelText('Test Label');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('supports form submission', () => {
-      const handleSubmit = vi.fn();
-      renderWithProviders(
-        <form onSubmit={handleSubmit}>
-          <Input name="test-field" />
-          <button type="submit">Submit</button>
-        </form>
-      );
-      
-      const form = screen.getByRole('button', { name: 'Submit' }).closest('form');
-      if (form) {
-        fireEvent.submit(form);
-        expect(handleSubmit).toHaveBeenCalled();
-      }
-    });
-
-    it('works with form validation', () => {
-      renderWithProviders(<Input required aria-describedby="error" aria-invalid="true" />);
-      const input = screen.getByRole('textbox');
-      
-      expect(input).toBeRequired();
-      expect(input).toHaveAttribute('aria-describedby', 'error');
-      expect(input).toHaveAttribute('aria-invalid', 'true');
-    });
-
-    it('supports form reset', () => {
-      const TestForm = () => {
-        const [value, setValue] = React.useState('initial');
-        return (
-          <form>
-            <Input value={value} onChange={(e) => setValue(e.target.value)} />
-            <button type="reset" onClick={() => setValue('')}>Reset</button>
-          </form>
-        );
-      };
-
-      renderWithProviders(<TestForm />);
-      const input = screen.getByRole('textbox');
-      const resetButton = screen.getByRole('button', { name: 'Reset' });
-      
-      fireEvent.change(input, { target: { value: 'new value' } });
-      expect(input).toHaveValue('new value');
-      
-      fireEvent.click(resetButton);
-      expect(input).toHaveValue('');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has correct role', () => {
-      renderWithProviders(<Input />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('supports aria-label', () => {
-      renderWithProviders(<Input aria-label="Search input" />);
-      const input = screen.getByLabelText('Search input');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('supports aria-describedby', () => {
-      renderWithProviders(<Input aria-describedby="help-text" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-describedby', 'help-text');
-    });
-
-    it('supports aria-invalid', () => {
-      renderWithProviders(<Input aria-invalid="true" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-invalid', 'true');
-    });
-
-    it('supports aria-required', () => {
-      renderWithProviders(<Input aria-required="true" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-required', 'true');
-    });
-
-    it('supports aria-disabled', () => {
-      renderWithProviders(<Input aria-disabled="true" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-disabled', 'true');
-    });
-
-    it('supports aria-readonly', () => {
-      renderWithProviders(<Input aria-readonly="true" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-readonly', 'true');
-    });
-
-    it('supports aria-placeholder', () => {
-      renderWithProviders(<Input aria-placeholder="Enter text" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-placeholder', 'Enter text');
-    });
-  });
-
-  describe('Different Input Types', () => {
-    it('renders email input', () => {
-      renderWithProviders(<Input type="email" placeholder="Enter email" />);
-      const input = screen.getByPlaceholderText('Enter email');
-      expect(input).toHaveAttribute('type', 'email');
-    });
-
-    it('renders password input', () => {
-      renderWithProviders(<Input type="password" placeholder="Enter password" />);
-      const input = screen.getByPlaceholderText('Enter password');
-      expect(input).toHaveAttribute('type', 'password');
-    });
-
-    it('renders number input', () => {
-      renderWithProviders(<Input type="number" placeholder="Enter number" />);
-      const input = screen.getByPlaceholderText('Enter number');
-      expect(input).toHaveAttribute('type', 'number');
-    });
-
-    it('renders search input', () => {
-      renderWithProviders(<Input type="search" placeholder="Search..." />);
-      const input = screen.getByPlaceholderText('Search...');
-      expect(input).toHaveAttribute('type', 'search');
-    });
-
-    it('renders tel input', () => {
-      renderWithProviders(<Input type="tel" placeholder="Enter phone" />);
-      const input = screen.getByPlaceholderText('Enter phone');
-      expect(input).toHaveAttribute('type', 'tel');
-    });
-
-    it('renders url input', () => {
-      renderWithProviders(<Input type="url" placeholder="Enter URL" />);
-      const input = screen.getByPlaceholderText('Enter URL');
-      expect(input).toHaveAttribute('type', 'url');
-    });
-
-    it('renders date input', () => {
-      renderWithProviders(<Input type="date" />);
-      const input = screen.getByDisplayValue('');
-      expect(input).toHaveAttribute('type', 'date');
-    });
-
-    it('renders time input', () => {
-      renderWithProviders(<Input type="time" />);
-      const input = screen.getByDisplayValue('');
-      expect(input).toHaveAttribute('type', 'time');
-    });
-
-    it('renders file input', () => {
-      renderWithProviders(<Input type="file" />);
-      const input = screen.getByDisplayValue('');
-      expect(input).toHaveAttribute('type', 'file');
-    });
-
-    it('renders hidden input', () => {
-      renderWithProviders(<Input type="hidden" />);
-      const input = screen.getByDisplayValue('');
-      expect(input).toHaveAttribute('type', 'hidden');
-    });
-  });
-
-  describe('Controlled Component', () => {
-    it('maintains controlled value', () => {
-      const TestComponent = () => {
-        const [value, setValue] = React.useState('');
-        return (
-          <Input 
-            value={value} 
-            onChange={(e) => setValue(e.target.value)} 
-            placeholder="Enter text"
-          />
-        );
-      };
-
-      renderWithProviders(<TestComponent />);
-      const input = screen.getByPlaceholderText('Enter text');
-      
-      expect(input).toHaveValue('');
-      
-      fireEvent.change(input, { target: { value: 'new value' } });
-      expect(input).toHaveValue('new value');
-    });
-
-    it('handles empty string value', () => {
-      renderWithProviders(<Input value="" onChange={() => {}} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue('');
-    });
-
-    it('handles null value', () => {
-      renderWithProviders(<Input value={null as any} onChange={() => {}} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue('');
-    });
-
-    it('handles undefined value', () => {
-      renderWithProviders(<Input value={undefined as any} onChange={() => {}} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue('');
-    });
-  });
-
-  describe('Ref Forwarding', () => {
-    it('forwards ref correctly', () => {
-      const ref = vi.fn();
-      renderWithProviders(<Input ref={ref} />);
-      expect(ref).toHaveBeenCalled();
-    });
-
-    it('allows focus via ref', () => {
-      const TestComponent = () => {
-        const inputRef = React.useRef<HTMLInputElement>(null);
-        
-        React.useEffect(() => {
-          inputRef.current?.focus();
-        }, []);
-        
-        return <Input ref={inputRef} />;
-      };
-
-      renderWithProviders(<TestComponent />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('allows programmatic value setting via ref', () => {
-      const TestComponent = () => {
-        const inputRef = React.useRef<HTMLInputElement>(null);
-        
-        React.useEffect(() => {
-          if (inputRef.current) {
-            inputRef.current.value = 'programmatic value';
-          }
-        }, []);
-        
-        return <Input ref={inputRef} />;
-      };
-
-      renderWithProviders(<TestComponent />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue('programmatic value');
-    });
-  });
-
-  describe('Props Spreading', () => {
-    it('spreads additional props', () => {
-      renderWithProviders(
-        <Input 
-          data-testid="custom-input"
-          aria-label="Custom input"
-          maxLength={10}
-          autoComplete="off"
-        />
-      );
-      
-      const input = screen.getByTestId('custom-input');
-      expect(input).toHaveAttribute('aria-label', 'Custom input');
-      expect(input).toHaveAttribute('maxLength', '10');
-      expect(input).toHaveAttribute('autoComplete', 'off');
-    });
-
-    it('handles data attributes', () => {
-      renderWithProviders(<Input data-testid="test-input" data-custom="value" />);
-      const input = screen.getByTestId('test-input');
-      expect(input).toHaveAttribute('data-custom', 'value');
-    });
-
-    it('handles style prop', () => {
-      renderWithProviders(<Input style={{ backgroundColor: 'red' }} />);
-      const input = screen.getByRole('textbox');
-      // Note: Inline styles might not be applied in test environment
-      expect(input).toHaveAttribute('style');
-    });
-
-    it('handles id prop', () => {
-      renderWithProviders(<Input id="test-id" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('id', 'test-id');
-    });
-
-    it('handles name prop', () => {
-      renderWithProviders(<Input name="test-name" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('name', 'test-name');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles very long values', () => {
-      const longValue = 'a'.repeat(10000);
-      renderWithProviders(<Input value={longValue} onChange={() => {}} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue(longValue);
-    });
-
-    it('handles special characters in value', () => {
-      const specialValue = '!@#$%^&*()_+-=[]{}|;:,.<>?';
-      renderWithProviders(<Input value={specialValue} onChange={() => {}} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue(specialValue);
-    });
-
-    it('handles unicode characters', () => {
-      const unicodeValue = '🎉🚀🌟💫✨';
-      renderWithProviders(<Input value={unicodeValue} onChange={() => {}} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue(unicodeValue);
-    });
-
-    it('handles empty className', () => {
-      renderWithProviders(<Input className="" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('handles undefined className', () => {
-      renderWithProviders(<Input className={undefined} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('handles null className', () => {
-      renderWithProviders(<Input className={null as any} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance', () => {
-    it('does not re-render unnecessarily', () => {
-      const renderCount = vi.fn();
-      const TestComponent = React.memo(() => {
-        renderCount();
-        return <Input placeholder="Test" />;
-      });
-
-      const { rerender } = renderWithProviders(<TestComponent />);
-      rerender(<TestComponent />);
-      
-      // Should only render once due to memo
-      expect(renderCount).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles rapid value changes', () => {
-      const TestComponent = () => {
-        const [value, setValue] = React.useState('');
-        return (
-          <Input 
-            value={value} 
-            onChange={(e) => setValue(e.target.value)} 
-            placeholder="Test"
-          />
-        );
-      };
-
-      renderWithProviders(<TestComponent />);
-      const input = screen.getByPlaceholderText('Test');
-      
-      // Rapid changes
-      for (let i = 0; i < 10; i++) {
-        fireEvent.change(input, { target: { value: `value-${i}` } });
-      }
-      
-      expect(input).toHaveValue('value-9');
-    });
-  });
-
-  it('renders without crashing', () => {
-    renderWithProviders(<Input />);
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-  });
-
-  it('renders with provided value', () => {
-    renderWithProviders(<Input value="test value" onChange={() => {}} />);
-    expect(screen.getByRole('textbox')).toHaveValue('test value');
-  });
-});
-
-describe('InputGroup Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders InputGroup with children', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="First name" />
-          <Input placeholder="Last name" />
-        </InputGroup>
-      );
-      
-      expect(screen.getByPlaceholderText('First name')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Last name')).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(
-        <InputGroup className="custom-group">
-          <Input placeholder="Test" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('Test').parentElement;
-      expect(group).toHaveClass('custom-group');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = vi.fn();
-      renderWithProviders(
-        <InputGroup ref={ref}>
-          <Input placeholder="Test" />
-        </InputGroup>
-      );
-      
-      expect(ref).toHaveBeenCalled();
-    });
-  });
-
-  describe('Orientation', () => {
-    it('applies vertical orientation by default', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('flex-col');
-    });
-
-    it('applies horizontal orientation', () => {
-      renderWithProviders(
-        <InputGroup orientation="horizontal">
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('flex-row', 'items-end');
-    });
-
-    it('applies vertical orientation explicitly', () => {
-      renderWithProviders(
-        <InputGroup orientation="vertical">
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('flex-col');
-    });
-  });
-
-  describe('Spacing', () => {
-    it('applies small spacing', () => {
-      renderWithProviders(
-        <InputGroup spacing="sm">
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('space-y-2');
-    });
-
-    it('applies medium spacing by default', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('space-y-4');
-    });
-
-    it('applies large spacing', () => {
-      renderWithProviders(
-        <InputGroup spacing="lg">
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('space-y-6');
-    });
-
-    it('applies horizontal spacing when orientation is horizontal', () => {
-      renderWithProviders(
-        <InputGroup orientation="horizontal" spacing="lg">
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('space-x-6');
-    });
-  });
-
-  describe('Combined Orientation and Spacing', () => {
-    it('applies correct classes for horizontal with small spacing', () => {
-      renderWithProviders(
-        <InputGroup orientation="horizontal" spacing="sm">
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('flex', 'flex-row', 'items-end', 'space-x-2');
-    });
-
-    it('applies correct classes for vertical with large spacing', () => {
-      renderWithProviders(
-        <InputGroup orientation="vertical" spacing="lg">
-          <Input placeholder="First" />
-          <Input placeholder="Second" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('First').parentElement;
-      expect(group).toHaveClass('flex', 'flex-col', 'space-y-6');
-    });
-  });
-
-  describe('Props Spreading', () => {
-    it('spreads additional props to div element', () => {
-      renderWithProviders(
-        <InputGroup data-testid="test-group" aria-label="Input group">
-          <Input placeholder="Test" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByTestId('test-group');
-      expect(group).toHaveAttribute('aria-label', 'Input group');
-    });
-
-    it('handles style prop', () => {
-      renderWithProviders(
-        <InputGroup style={{ backgroundColor: 'blue' }}>
-          <Input placeholder="Test" />
-        </InputGroup>
-      );
-      
-      const group = screen.getByPlaceholderText('Test').parentElement;
-      // Note: Inline styles might not be applied in test environment
-      expect(group).toHaveAttribute('style');
-    });
-  });
-
-  describe('Complex Children', () => {
-    it('renders with mixed content', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="Email" type="email" />
-          <div>Some text</div>
-          <Input placeholder="Password" type="password" />
-        </InputGroup>
-      );
-      
-      expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
-      expect(screen.getByText('Some text')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
-    });
-
-    it('renders with conditional children', () => {
-      const TestComponent = ({ showSecond }: { showSecond: boolean }) => (
-        <InputGroup>
-          <Input placeholder="First" />
-          {showSecond && <Input placeholder="Second" />}
-        </InputGroup>
-      );
-
-      const { rerender } = renderWithProviders(<TestComponent showSecond={false} />);
-      expect(screen.getByPlaceholderText('First')).toBeInTheDocument();
-      expect(screen.queryByPlaceholderText('Second')).not.toBeInTheDocument();
-
-      rerender(<TestComponent showSecond={true} />);
-      expect(screen.getByPlaceholderText('First')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Second')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('renders with no children', () => {
-      renderWithProviders(<InputGroup>{}</InputGroup>);
-      // Should not crash
-      expect(document.querySelector('div')).toBeInTheDocument();
-    });
-
-    it('renders with single child', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="Single" />
-        </InputGroup>
-      );
-      
-      expect(screen.getByPlaceholderText('Single')).toBeInTheDocument();
-    });
-
-    it('handles many children', () => {
-      renderWithProviders(
-        <InputGroup>
-          {Array.from({ length: 10 }, (_, i) => (
-            <Input key={i} placeholder={`Input ${i}`} />
-          ))}
-        </InputGroup>
-      );
-      
-      for (let i = 0; i < 10; i++) {
-        expect(screen.getByPlaceholderText(`Input ${i}`)).toBeInTheDocument();
-      }
-    });
-
-    it('handles invalid orientation value', () => {
-      renderWithProviders(
-        <InputGroup orientation={'invalid' as any}>
-          <Input placeholder="Test" />
-        </InputGroup>
-      );
-      
-      // Should default to vertical
-      const group = screen.getByPlaceholderText('Test').parentElement;
-      expect(group).toHaveClass('flex-col');
-    });
-
-    it('handles invalid spacing value', () => {
-      renderWithProviders(
-        <InputGroup spacing={'invalid' as any}>
-          <Input placeholder="Test" />
-        </InputGroup>
-      );
-      
-      // Should default to medium spacing
-      const group = screen.getByPlaceholderText('Test').parentElement;
-      expect(group).toHaveClass('flex', 'flex-col');
-    });
-  });
-
-  describe('Integration with Input Component', () => {
-    it('works with different Input variants', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="Default" variant="default" />
-          <Input placeholder="Destructive" variant="destructive" />
-        </InputGroup>
-      );
-      
-      expect(screen.getByPlaceholderText('Default')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Destructive')).toBeInTheDocument();
-    });
-
-    it('works with different Input sizes', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="Small" size="sm" />
-          <Input placeholder="Medium" size="md" />
-          <Input placeholder="Large" size="lg" />
-        </InputGroup>
-      );
-      
-      expect(screen.getByPlaceholderText('Small')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Medium')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Large')).toBeInTheDocument();
-    });
-
-    it('works with Input error states', () => {
-      renderWithProviders(
-        <InputGroup>
-          <Input placeholder="Normal" />
-          <Input placeholder="Error" error={true} />
-        </InputGroup>
-      );
-      
-      expect(screen.getByPlaceholderText('Normal')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Error')).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance', () => {
-    it('does not re-render unnecessarily', () => {
-      const renderCount = vi.fn();
-      const TestComponent = React.memo(() => {
-        renderCount();
-        return (
-          <InputGroup>
-            <Input placeholder="Test" />
-          </InputGroup>
-        );
-      });
-
-      const { rerender } = renderWithProviders(<TestComponent />);
-      rerender(<TestComponent />);
-      
-      // Should only render once due to memo
-      expect(renderCount).toHaveBeenCalledTimes(1);
-    });
-  });
-describe('Input 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('Input component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Input 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(
-      'Input 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('Input prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-
-  // Shared Utilities Tests
-  describe('Input - Shared Utilities Tests', () => {
-    testComponentRendering(Input, [
-      {
-        name: 'default input',
-        props: {},
-        expectedText: '',
-        expectedRole: 'textbox'
-      },
-      {
-        name: 'input with placeholder',
-        props: { placeholder: 'Enter text' },
-        expectedText: '',
-        expectedRole: 'textbox'
-      },
-      {
-        name: 'input with value',
-        props: { value: 'test value', onChange: () => {} },
-        expectedText: '',
-        expectedRole: 'textbox'
-      }
-    ]);
-
-    testComponentAccessibility(Input, {
-      placeholder: 'Accessible input'
-    }, {
-      requiredAttributes: [],
-      shouldBeKeyboardAccessible: false,
-      shouldHaveValidRole: false,
-      shouldHaveValidAriaLabel: false
-    });
-
-    testComponentEvents(Input, {
-      placeholder: 'Clickable input'
-    }, [
-      {
-        name: 'change event',
-        event: 'change',
-        element: 'textbox',
-        expectedBehavior: () => {
-          expect(screen.getByRole('textbox')).toBeInTheDocument();
-        }
-      }
-    ]);
-
-    testFormComponent(Input, {
-      validationTests: [
-        {
-          name: 'required validation',
-          inputValue: '',
-          expectedError: 'This field is required',
-          shouldBeValid: false
-        }
-      ],
-      submissionTests: [
-        {
-          name: 'successful input',
-          formData: { input: 'test value' },
-          expectedBehavior: () => {
-            expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
-          }
-        }
-      ]
-    });
-  });
-});
-});