@jmruthers/pace-core 0.5.1 → 0.5.4

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

@@ -0,0 +1,466 @@
+/**
+ * @file Input Component Tests
+ * @description Comprehensive tests for Input and InputGroup components
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Input, InputGroup } from './Input';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+describe('Input Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<Input />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveProperty('type', 'text');
+    });
+
+    it('renders with custom placeholder', () => {
+      renderWithProviders(<Input placeholder="Enter your name" />);
+      expect(screen.getByPlaceholderText('Enter your name')).toBeInTheDocument();
+    });
+
+    it('renders with custom type', () => {
+      renderWithProviders(<Input type="email" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('type', 'email');
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Input className="custom-class" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('custom-class');
+    });
+
+    it('renders with value', () => {
+      renderWithProviders(<Input value="test value" />);
+      expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
+    });
+
+    it('renders with defaultValue', () => {
+      renderWithProviders(<Input defaultValue="default value" />);
+      expect(screen.getByDisplayValue('default value')).toBeInTheDocument();
+    });
+  });
+
+  // Variant tests
+  describe('Variants', () => {
+    it('renders with default variant', () => {
+      renderWithProviders(<Input variant="default" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('border-input');
+    });
+
+    it('renders with destructive variant', () => {
+      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');
+    });
+  });
+
+  // Size tests
+  describe('Sizes', () => {
+    it('renders with small size', () => {
+      renderWithProviders(<Input size="sm" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('h-8', 'px-2', 'py-1', 'text-xs');
+    });
+
+    it('renders with medium size (default)', () => {
+      renderWithProviders(<Input size="md" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('h-9', 'px-3', 'py-2', 'text-sm');
+    });
+
+    it('renders with large size', () => {
+      renderWithProviders(<Input size="lg" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('h-10', 'px-4', 'py-3', 'text-base');
+    });
+  });
+
+  // Event handling tests
+  describe('Event Handling', () => {
+    it('handles onChange events', async () => {
+      const handleChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Input onChange={handleChange} />);
+      
+      const input = screen.getByRole('textbox');
+      await user.type(input, 'test input');
+      
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('handles onFocus events', async () => {
+      const handleFocus = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Input onFocus={handleFocus} />);
+      
+      const input = screen.getByRole('textbox');
+      await user.click(input);
+      
+      expect(handleFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles onBlur events', async () => {
+      const handleBlur = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Input onBlur={handleBlur} />);
+      
+      const input = screen.getByRole('textbox');
+      await user.click(input);
+      await user.tab();
+      
+      expect(handleBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles onKeyDown events', async () => {
+      const handleKeyDown = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(<Input onKeyDown={handleKeyDown} />);
+      
+      const input = screen.getByRole('textbox');
+      await user.type(input, 'a');
+      
+      expect(handleKeyDown).toHaveBeenCalled();
+    });
+  });
+
+  // State management tests
+  describe('State Management', () => {
+    it('handles controlled state', () => {
+      const { rerender } = renderWithProviders(
+        <Input value="initial" />
+      );
+      
+      expect(screen.getByDisplayValue('initial')).toBeInTheDocument();
+      
+      rerender(<Input value="updated" />);
+      expect(screen.getByDisplayValue('updated')).toBeInTheDocument();
+    });
+
+    it('handles uncontrolled state', () => {
+      renderWithProviders(<Input defaultValue="default" />);
+      expect(screen.getByDisplayValue('default')).toBeInTheDocument();
+    });
+
+    it('handles disabled state', () => {
+      renderWithProviders(<Input disabled />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeDisabled();
+      expect(input).toHaveClass('disabled:cursor-not-allowed', 'disabled:opacity-50');
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<Input aria-label="Test input" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-label', 'Test input');
+    });
+
+    it('supports aria-describedby', () => {
+      renderWithProviders(
+        <div>
+          <Input aria-describedby="help-text" />
+          <div id="help-text">This is help text</div>
+        </div>
+      );
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-describedby', 'help-text');
+    });
+
+    it('supports aria-invalid for error states', () => {
+      renderWithProviders(<Input aria-invalid="true" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('is keyboard accessible', () => {
+      renderWithProviders(<Input />);
+      const input = screen.getByRole('textbox');
+      expect(input).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('supports screen readers with proper focus management', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<Input />);
+      
+      const input = screen.getByRole('textbox');
+      await user.click(input);
+      
+      expect(input).toHaveFocus();
+    });
+  });
+
+  // Error handling tests
+  describe('Error Handling', () => {
+    it('handles error state styling', () => {
+      renderWithProviders(<Input error={true} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
+    });
+
+    it('handles invalid input gracefully', () => {
+      renderWithProviders(<Input type="email" value="invalid-email" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveValue('invalid-email');
+    });
+  });
+
+  // Integration tests
+  describe('Integration', () => {
+    it('works with forms', async () => {
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <Input name="test-input" />
+          <button type="submit">Submit</button>
+        </form>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Submit' }));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with 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('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLInputElement>();
+      renderWithProviders(<Input ref={ref} />);
+      
+      expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
+  });
+});
+
+describe('InputGroup Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(
+        <InputGroup>
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(
+        <InputGroup className="custom-group">
+          <Input placeholder="Input 1" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('custom-group');
+    });
+  });
+
+  // Orientation tests
+  describe('Orientation', () => {
+    it('renders with vertical orientation (default)', () => {
+      renderWithProviders(
+        <InputGroup orientation="vertical">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('flex-col');
+    });
+
+    it('renders with horizontal orientation', () => {
+      renderWithProviders(
+        <InputGroup orientation="horizontal">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('flex-row', 'items-end');
+    });
+  });
+
+  // Spacing tests
+  describe('Spacing', () => {
+    it('applies small spacing for vertical orientation', () => {
+      renderWithProviders(
+        <InputGroup orientation="vertical" spacing="sm">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('space-y-2');
+    });
+
+    it('applies medium spacing for vertical orientation (default)', () => {
+      renderWithProviders(
+        <InputGroup orientation="vertical" spacing="md">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('space-y-4');
+    });
+
+    it('applies large spacing for vertical orientation', () => {
+      renderWithProviders(
+        <InputGroup orientation="vertical" spacing="lg">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('space-y-6');
+    });
+
+    it('applies small spacing for horizontal orientation', () => {
+      renderWithProviders(
+        <InputGroup orientation="horizontal" spacing="sm">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('space-x-2');
+    });
+
+    it('applies medium spacing for horizontal orientation (default)', () => {
+      renderWithProviders(
+        <InputGroup orientation="horizontal" spacing="md">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('space-x-4');
+    });
+
+    it('applies large spacing for horizontal orientation', () => {
+      renderWithProviders(
+        <InputGroup orientation="horizontal" spacing="lg">
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const group = screen.getByPlaceholderText('Input 1').parentElement;
+      expect(group).toHaveClass('space-x-6');
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>();
+      renderWithProviders(
+        <InputGroup ref={ref}>
+          <Input placeholder="Input 1" />
+        </InputGroup>
+      );
+      
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+
+    it('maintains proper focus order', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <InputGroup>
+          <Input placeholder="Input 1" />
+          <Input placeholder="Input 2" />
+        </InputGroup>
+      );
+      
+      const input1 = screen.getByPlaceholderText('Input 1');
+      const input2 = screen.getByPlaceholderText('Input 2');
+      
+      await user.click(input1);
+      expect(input1).toHaveFocus();
+      
+      await user.tab();
+      expect(input2).toHaveFocus();
+    });
+  });
+
+  // Integration tests
+  describe('Integration', () => {
+    it('works with multiple inputs', () => {
+      renderWithProviders(
+        <InputGroup>
+          <Input placeholder="First Name" />
+          <Input placeholder="Last Name" />
+          <Input placeholder="Email" type="email" />
+        </InputGroup>
+      );
+      
+      expect(screen.getByPlaceholderText('First Name')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Last Name')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
+    });
+
+    it('works with different input types', () => {
+      renderWithProviders(
+        <InputGroup>
+          <Input placeholder="Text" type="text" />
+          <Input placeholder="Email" type="email" />
+          <Input placeholder="Password" type="password" />
+        </InputGroup>
+      );
+      
+      expect(screen.getByPlaceholderText('Text')).toHaveAttribute('type', 'text');
+      expect(screen.getByPlaceholderText('Email')).toHaveAttribute('type', 'email');
+      expect(screen.getByPlaceholderText('Password')).toHaveAttribute('type', 'password');
+    });
+  });
+});