@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,1121 @@
+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-10', 'px-3', 'py-2', 'text-sm');
+    });
+
+    it('applies large size styling', () => {
+      renderWithProviders(<Input size="lg" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('h-12', '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-10', '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-10',
+        '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();
+          }
+        }
+      ]
+    });
+  });
+});
+});