@jmruthers/pace-core 0.5.1 → 0.5.4

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,948 @@
+/**
+ * @file Select Component Tests
+ * @description Comprehensive test suite for Select component and its sub-components
+ * @package @jmruthers/pace-core
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { 
+  Select, 
+  SelectTrigger, 
+  SelectValue, 
+  SelectContent, 
+  SelectItem, 
+  SelectGroup, 
+  SelectLabel, 
+  SelectSeparator 
+} from './Select';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Search: ({ className, ...props }: any) => <div data-testid="search-icon" className={className} {...props} />,
+  X: ({ className, ...props }: any) => <div data-testid="x-icon" className={className} {...props} />,
+  ChevronDown: ({ className, ...props }: any) => <div data-testid="chevron-down" className={className} {...props} />,
+  Check: ({ className, ...props }: any) => <div data-testid="check-icon" className={className} {...props} />,
+}));
+
+// Mock Button component
+vi.mock('../Button/Button', () => ({
+  Button: React.forwardRef<HTMLButtonElement, any>(({ children, onClick, onKeyDown, ...props }, ref) => (
+    <button ref={ref} onClick={onClick} onKeyDown={onKeyDown} {...props}>
+      {children}
+    </button>
+  )),
+}));
+
+// Mock cn utility
+vi.mock('../../utils/cn', () => ({
+  cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
+}));
+
+describe('Select Component', () => {
+  const defaultOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  const renderSelect = (props: any = {}, options = defaultOptions) => {
+    return renderWithProviders(
+      <Select {...props}>
+        <SelectTrigger>
+          <SelectValue placeholder="Select an option..." />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map(option => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders with default props', () => {
+      renderSelect();
+      
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+      expect(screen.getByTestId('select-value')).toBeInTheDocument();
+      expect(screen.getByText('Select an option...')).toBeInTheDocument();
+    });
+
+    it('renders with custom placeholder', () => {
+      renderSelect({}, []);
+      
+      const selectValue = screen.getByTestId('select-value');
+      expect(selectValue).toHaveTextContent('Select an option...');
+    });
+
+    it('renders with custom className', () => {
+      renderSelect({ className: 'custom-select' });
+      
+      expect(screen.getByTestId('select-root')).toHaveClass('custom-select');
+    });
+
+    it('renders with disabled state', () => {
+      renderSelect({ disabled: true });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toBeDisabled();
+    });
+
+    it('renders with default value', () => {
+      renderSelect({ defaultValue: 'option1' });
+      
+      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option1');
+    });
+
+    it('renders with controlled value', () => {
+      renderSelect({ value: 'option2' });
+      
+      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option2');
+    });
+  });
+
+  describe('Trigger Component', () => {
+    it('renders trigger with proper ARIA attributes', () => {
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toHaveAttribute('role', 'combobox');
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+      expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
+    });
+
+    it('shows chevron icon', () => {
+      renderSelect();
+      
+      expect(screen.getByTestId('chevron-down')).toBeInTheDocument();
+    });
+
+    it('rotates chevron when open', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const chevron = screen.getByTestId('chevron-down');
+      expect(chevron).toHaveClass('rotate-180');
+    });
+
+    it('handles asChild prop correctly', () => {
+      renderWithProviders(
+        <Select>
+          <SelectTrigger asChild>
+            <button>Custom Trigger</button>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      expect(screen.getByText('Custom Trigger')).toBeInTheDocument();
+      expect(screen.getByTestId('chevron-down')).toBeInTheDocument();
+    });
+  });
+
+  describe('Value Component', () => {
+    it('shows placeholder when no value selected', () => {
+      renderSelect();
+      
+      expect(screen.getByText('Select an option...')).toBeInTheDocument();
+    });
+
+    it('shows selected text when value is selected', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const option = screen.getByText('Option 1');
+      await user.click(option);
+      
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    it('shows custom children when provided', () => {
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue>
+              <span>Custom Value Display</span>
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      expect(screen.getByText('Custom Value Display')).toBeInTheDocument();
+    });
+  });
+
+  describe('Content Component', () => {
+    it('renders content when open', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+    });
+
+    it('does not render content when closed', () => {
+      renderSelect();
+      
+      expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
+    });
+
+    it('renders all options', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+      expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent className="custom-content">
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-content')).toHaveClass('custom-content');
+    });
+
+    it('renders with custom maxHeight', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent maxHeight="10rem">
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const content = screen.getByTestId('select-content');
+      // Check that the maxHeight is applied via the style prop
+      expect(content.style.maxHeight).toBe('10rem');
+    });
+  });
+
+  describe('Item Component', () => {
+    it('renders item with proper attributes', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const item = screen.getByText('Option 1');
+      expect(item).toHaveAttribute('data-value', 'option1');
+      expect(item).toHaveAttribute('role', 'option');
+      expect(item).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('shows check icon when selected', async () => {
+      const user = userEvent.setup();
+      renderSelect({ defaultValue: 'option1' });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const item = screen.getByText('Option 1');
+      expect(item).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+    });
+
+    it('handles disabled state', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="disabled" disabled>
+              Disabled Option
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const item = screen.getByText('Disabled Option');
+      expect(item).toHaveAttribute('data-disabled', 'true');
+      expect(item).toHaveClass('pointer-events-none', 'opacity-50');
+    });
+
+    it('handles custom onClick', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="test" onClick={onClick}>
+              Test Option
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const item = screen.getByText('Test Option');
+      await user.click(item);
+      
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('opens dropdown on trigger click', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('closes dropdown on item selection', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const option = screen.getByText('Option 1');
+      await user.click(option);
+      
+      await waitFor(() => {
+        expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
+      });
+    });
+
+    it('updates value on item selection', async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      renderSelect({ onValueChange });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const option = screen.getByText('Option 2');
+      await user.click(option);
+      
+      expect(onValueChange).toHaveBeenCalledWith('option2');
+    });
+
+    it('closes dropdown on outside click', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      
+      // Click outside
+      await user.click(document.body);
+      
+      await waitFor(() => {
+        expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('opens dropdown on Enter key', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      trigger.focus();
+      await user.keyboard('{Enter}');
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('opens dropdown on Space key', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      trigger.focus();
+      await user.keyboard(' ');
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('opens dropdown on ArrowDown key', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      trigger.focus();
+      await user.keyboard('{ArrowDown}');
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('opens dropdown on ArrowUp key', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      trigger.focus();
+      await user.keyboard('{ArrowUp}');
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('closes dropdown on Escape key', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      
+      await user.keyboard('{Escape}');
+      
+      await waitFor(() => {
+        expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
+      });
+    });
+
+    it('selects item on click', async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      renderSelect({ onValueChange });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const item = screen.getByText('Option 1');
+      await user.click(item);
+      
+      expect(onValueChange).toHaveBeenCalledWith('option1');
+    });
+
+    it('selects different item on click', async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      renderSelect({ onValueChange });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const item = screen.getByText('Option 2');
+      await user.click(item);
+      
+      expect(onValueChange).toHaveBeenCalledWith('option2');
+    });
+  });
+
+  describe('Search Functionality', () => {
+    it('renders search input when searchable is true', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectItem value="test1">Test Option 1</SelectItem>
+            <SelectItem value="test2">Test Option 2</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+    });
+
+    it('filters options based on search term', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="cherry">Cherry</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const searchInput = screen.getByTestId('select-search-input');
+      await user.type(searchInput, 'app');
+      
+      expect(screen.getByText('Apple')).toBeInTheDocument();
+      expect(screen.queryByText('Banana')).not.toBeInTheDocument();
+      expect(screen.queryByText('Cherry')).not.toBeInTheDocument();
+    });
+
+    it('shows clear search button when search term exists', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const searchInput = screen.getByTestId('select-search-input');
+      await user.type(searchInput, 'test');
+      
+      expect(screen.getByTestId('select-clear-search')).toBeInTheDocument();
+    });
+
+    it('clears search when clear button is clicked', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const searchInput = screen.getByTestId('select-search-input');
+      await user.type(searchInput, 'app');
+      
+      expect(screen.queryByText('Banana')).not.toBeInTheDocument();
+      
+      const clearButton = screen.getByTestId('select-clear-search');
+      await user.click(clearButton);
+      
+      expect(screen.getByText('Apple')).toBeInTheDocument();
+      expect(screen.getByText('Banana')).toBeInTheDocument();
+    });
+
+    it('clears search on Escape key', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const searchInput = screen.getByTestId('select-search-input');
+      await user.type(searchInput, 'app');
+      await user.keyboard('{Escape}');
+      
+      expect(screen.getByText('Apple')).toBeInTheDocument();
+      expect(screen.getByText('Banana')).toBeInTheDocument();
+    });
+
+    it('focuses search input when dropdown opens', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const searchInput = screen.getByTestId('select-search-input');
+      expect(searchInput).toHaveFocus();
+    });
+  });
+
+  describe('Controlled vs Uncontrolled', () => {
+    it('works in uncontrolled mode', async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      renderSelect({ onValueChange });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const option = screen.getByText('Option 1');
+      await user.click(option);
+      
+      expect(onValueChange).toHaveBeenCalledWith('option1');
+      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option1');
+    });
+
+    it('works in controlled mode', async () => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      const onOpenChange = vi.fn();
+      
+      renderSelect({ 
+        value: 'option2', 
+        onValueChange, 
+        open: true, 
+        onOpenChange 
+      });
+      
+      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option2');
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      
+      const option = screen.getByText('Option 1');
+      await user.click(option);
+      
+      expect(onValueChange).toHaveBeenCalledWith('option1');
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('handles controlled open state', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+      
+      renderSelect({ open: false, onOpenChange });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('Additional Components', () => {
+    it('renders SelectGroup', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="group1">Group Item 1</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-group')).toBeInTheDocument();
+      expect(screen.getByText('Group Item 1')).toBeInTheDocument();
+    });
+
+    it('renders SelectLabel', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectLabel>Group Label</SelectLabel>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-label')).toBeInTheDocument();
+      expect(screen.getByText('Group Label')).toBeInTheDocument();
+    });
+
+    it('renders SelectSeparator', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="item1">Item 1</SelectItem>
+            <SelectSeparator />
+            <SelectItem value="item2">Item 2</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-separator')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty options list', () => {
+      renderSelect({}, []);
+      
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('handles rapid open/close cycles', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      
+      // Rapid clicks
+      await user.click(trigger);
+      await user.click(trigger);
+      await user.click(trigger);
+      
+      // Should be open after odd number of clicks
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('handles disabled trigger', async () => {
+      const user = userEvent.setup();
+      renderSelect({ disabled: true });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toBeDisabled();
+      
+      await user.click(trigger);
+      
+      expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
+    });
+
+    it('handles keyboard navigation on disabled trigger', async () => {
+      const user = userEvent.setup();
+      renderSelect({ disabled: true });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      trigger.focus();
+      
+      await user.keyboard('{Enter}');
+      
+      expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
+    });
+
+    it('handles multiple select instances', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <div>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Select 1" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="a">Option A</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Select 2" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="b">Option B</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      );
+      
+      const triggers = screen.getAllByTestId('select-trigger');
+      
+      // Open first select
+      await user.click(triggers[0]);
+      expect(screen.getByText('Option A')).toBeInTheDocument();
+      
+      // Open second select (should close first)
+      await user.click(triggers[1]);
+      expect(screen.queryByText('Option A')).not.toBeInTheDocument();
+      expect(screen.getByText('Option B')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toHaveAttribute('role', 'combobox');
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+      expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
+    });
+
+    it('updates ARIA attributes when opened', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('has proper listbox role on content', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const content = screen.getByTestId('select-content');
+      expect(content).toHaveAttribute('role', 'listbox');
+    });
+
+    it('has proper option roles on items', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const items = screen.getAllByRole('option');
+      expect(items).toHaveLength(3);
+      
+      items.forEach(item => {
+        expect(item).toHaveAttribute('role', 'option');
+      });
+    });
+
+    it('has proper aria-selected on items', async () => {
+      const user = userEvent.setup();
+      renderSelect({ defaultValue: 'option2' });
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const items = screen.getAllByRole('option');
+      expect(items[0]).toHaveAttribute('aria-selected', 'false');
+      expect(items[1]).toHaveAttribute('aria-selected', 'true');
+      expect(items[2]).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('has proper search input accessibility', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectItem value="test">Test</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+      
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      const searchInput = screen.getByTestId('select-search-input');
+      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
+    });
+  });
+
+  describe('Performance', () => {
+    it('does not re-render unnecessarily with stable props', () => {
+      const stableProps = {
+        defaultValue: 'option1',
+        disabled: false,
+      };
+      
+      const { rerender } = renderSelect(stableProps);
+      const initialRoot = screen.getByTestId('select-root');
+      
+      // Re-render with same props
+      rerender(
+        <Select {...stableProps}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option..." />
+          </SelectTrigger>
+          <SelectContent>
+            {defaultOptions.map(option => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+      
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+  });
+});