@jmruthers/pace-core 0.2.6 → 0.4.1

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

@@ -1,1101 +0,0 @@
-/**
- * @file Enhanced Select Component Tests
- * @package @jmruthers/pace-core
- * @module Components/Select/Select.enhanced
- * @since 0.1.0
- * 
- * Enhanced tests for the Select component that complement existing test coverage
- * with additional edge cases, advanced scenarios, and specific functionality testing.
- * This file focuses on areas that may not be fully covered in existing tests.
- */
-
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders, rerenderWithProviders } from '../../../__tests__/shared';
-import {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-} from '../Select';
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  Search: () => <div data-testid="search-icon">🔍</div>,
-  X: () => <div data-testid="clear-icon">✕</div>,
-  ChevronDown: () => <div data-testid="chevron-down-icon">▼</div>,
-  Check: () => <div data-testid="check-icon">✓</div>,
-}));
-
-// Enhanced mock for Radix UI Select with more realistic behavior
-vi.mock('@radix-ui/react-select', async () => {
-  const actual = await vi.importActual('@radix-ui/react-select');
-  return {
-    ...actual,
-    Root: ({ children, onValueChange, value, defaultValue, disabled, ...props }: any) => (
-      <div 
-        data-testid="select-root" 
-        data-value={value || defaultValue}
-        data-disabled={disabled}
-        {...props}
-      >
-        {children}
-      </div>
-    ),
-    Trigger: React.forwardRef(({ children, disabled, onClick, ...props }: any, ref) => (
-      <button
-        ref={ref}
-        data-testid="select-trigger"
-        disabled={disabled}
-        onClick={(e) => {
-          if (!disabled) {
-            onClick?.(e);
-            // Simulate opening the dropdown
-            const event = new CustomEvent('select-open');
-            document.dispatchEvent(event);
-          }
-        }}
-        {...props}
-      >
-        {children}
-      </button>
-    )),
-    Content: ({ children, searchable, position, ...props }: any) => {
-      const [searchValue, setSearchValue] = React.useState('');
-      const [isOpen, setIsOpen] = React.useState(false);
-      
-      React.useEffect(() => {
-        const handleOpen = () => setIsOpen(true);
-        const handleClose = () => setIsOpen(false);
-        
-        document.addEventListener('select-open', handleOpen);
-        document.addEventListener('select-close', handleClose);
-        
-        return () => {
-          document.removeEventListener('select-open', handleOpen);
-          document.removeEventListener('select-close', handleClose);
-        };
-      }, []);
-
-      return (
-        <div 
-          data-testid="select-content" 
-          data-searchable={searchable}
-          data-position={position}
-          data-open={isOpen}
-          {...props}
-        >
-          {searchable && (
-            <div data-testid="search-container">
-              <div data-testid="search-icon">🔍</div>
-              <input
-                data-testid="select-search-input"
-                type="text"
-                placeholder="Search..."
-                aria-label="Search options"
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Escape') {
-                    setSearchValue('');
-                  }
-                }}
-              />
-              {searchValue && (
-                <button 
-                  data-testid="select-clear-search" 
-                  aria-label="Clear search" 
-                  type="button"
-                  onClick={() => setSearchValue('')}
-                >
-                  ✕
-                </button>
-              )}
-            </div>
-          )}
-          <div data-testid="select-viewport">
-            {children}
-          </div>
-        </div>
-      );
-    },
-    Viewport: ({ children, ...props }: any) => (
-      <div data-testid="select-viewport" {...props}>
-        {children}
-      </div>
-    ),
-    Item: ({ children, value, disabled, onClick, ...props }: any) => (
-      <div
-        data-testid="select-item"
-        role="option"
-        data-value={value}
-        aria-disabled={disabled}
-        onClick={() => {
-          if (!disabled) {
-            onClick?.();
-            // Simulate value change
-            const event = new CustomEvent('select-value-change', { detail: value });
-            document.dispatchEvent(event);
-          }
-        }}
-        {...props}
-      >
-        {children}
-      </div>
-    ),
-    ItemText: ({ children, ...props }: any) => (
-      <span data-testid="select-item-text" {...props}>
-        {children}
-      </span>
-    ),
-    ItemIndicator: ({ children, ...props }: any) => (
-      <span data-testid="select-item-indicator" {...props}>
-        {children}
-      </span>
-    ),
-    Value: ({ children, placeholder, ...props }: any) => (
-      <span data-testid="select-value" data-placeholder={placeholder} {...props}>
-        {children || placeholder}
-      </span>
-    ),
-    Label: ({ children, ...props }: any) => (
-      <div data-testid="select-label" {...props}>
-        {children}
-      </div>
-    ),
-    Group: ({ children, ...props }: any) => (
-      <div data-testid="select-group" {...props}>
-        {children}
-      </div>
-    ),
-    Separator: ({ ...props }: any) => (
-      <div data-testid="select-separator" {...props} />
-    ),
-    Icon: ({ children, ...props }: any) => (
-      <span data-testid="select-icon" {...props}>
-        {children}
-      </span>
-    ),
-    Portal: ({ children }: any) => <>{children}</>,
-  };
-});
-
-describe('Select Component - Enhanced Tests', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllTimers();
-  });
-
-  describe('Advanced Search Functionality', () => {
-    it('handles complex search patterns with special characters', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="contains">
-            <SelectItem value="c++">C++ Programming</SelectItem>
-            <SelectItem value="c#">C# Programming</SelectItem>
-            <SelectItem value="react-js">React.js Framework</SelectItem>
-            <SelectItem value="node-js">Node.js Runtime</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Test special characters
-      fireEvent.change(searchInput, { target: { value: '++' } });
-      expect(searchInput).toHaveValue('++');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: '#' } });
-      expect(searchInput).toHaveValue('#');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: '.js' } });
-      expect(searchInput).toHaveValue('.js');
-    });
-
-    it('handles unicode and emoji search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="apple">🍎 Apple</SelectItem>
-            <SelectItem value="banana">🍌 Banana</SelectItem>
-            <SelectItem value="cherry">🍒 Cherry</SelectItem>
-            <SelectItem value="grapes">🍇 Grapes</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Test emoji search
-      fireEvent.change(searchInput, { target: { value: '🍎' } });
-      expect(searchInput).toHaveValue('🍎');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'Apple' } });
-      expect(searchInput).toHaveValue('Apple');
-    });
-
-    it('handles case-sensitive search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable caseSensitive>
-            <SelectItem value="Apple">Apple</SelectItem>
-            <SelectItem value="apple">apple</SelectItem>
-            <SelectItem value="APPLE">APPLE</SelectItem>
-            <SelectItem value="aPpLe">aPpLe</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'Apple' } });
-      expect(searchInput).toHaveValue('Apple');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'apple' } });
-      expect(searchInput).toHaveValue('apple');
-    });
-
-    it('handles fuzzy search with typos', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="fuzzy">
-            <SelectItem value="javascript">JavaScript</SelectItem>
-            <SelectItem value="typescript">TypeScript</SelectItem>
-            <SelectItem value="python">Python</SelectItem>
-            <SelectItem value="react">React</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Test fuzzy matching with typos
-      fireEvent.change(searchInput, { target: { value: 'javascrpt' } }); // Missing 'i'
-      expect(searchInput).toHaveValue('javascrpt');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'typescrpt' } }); // Missing 'i'
-      expect(searchInput).toHaveValue('typescrpt');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'pythn' } }); // Missing 'o'
-      expect(searchInput).toHaveValue('pythn');
-    });
-
-    it('handles exact match search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="exact">
-            <SelectItem value="react">React</SelectItem>
-            <SelectItem value="react-native">React Native</SelectItem>
-            <SelectItem value="react-query">React Query</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'React Native' } });
-      expect(searchInput).toHaveValue('React Native');
-    });
-
-    it('handles startsWith search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="startsWith">
-            <SelectItem value="react">React</SelectItem>
-            <SelectItem value="react-native">React Native</SelectItem>
-            <SelectItem value="react-query">React Query</SelectItem>
-            <SelectItem value="vue">Vue.js</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'Vue' } });
-      expect(searchInput).toHaveValue('Vue');
-    });
-  });
-
-  describe('Advanced Keyboard Navigation', () => {
-    it('handles complex keyboard shortcuts', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Focus the search input first
-      searchInput.focus();
-      
-      // Wait for focus to be set
-      await waitFor(() => {
-        expect(searchInput).toHaveFocus();
-      });
-      
-      // Test that search input maintains focus
-      expect(searchInput).toHaveFocus();
-      
-      fireEvent.change(searchInput, { target: { value: 'test' } });
-      await user.keyboard('{Escape}');
-      expect(searchInput).toHaveValue('');
-    });
-
-    it('handles rapid keyboard input', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Rapid typing
-      fireEvent.change(searchInput, { target: { value: 'abcdefghijklmnopqrstuvwxyz' } });
-      expect(searchInput).toHaveValue('abcdefghijklmnopqrstuvwxyz');
-      
-      // Rapid clearing
-      await user.clear(searchInput);
-      expect(searchInput).toHaveValue('');
-    });
-
-    it('handles keyboard navigation in search results', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Navigate with arrow keys
-      await user.keyboard('{ArrowDown}');
-      await user.keyboard('{ArrowUp}');
-      await user.keyboard('{ArrowLeft}');
-      await user.keyboard('{ArrowRight}');
-      
-      // Test that no errors occur
-      expect(searchInput).toBeInTheDocument();
-    });
-  });
-
-  describe('Advanced Search Configuration', () => {
-    it('handles custom search fields configuration', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchFields={['value']}>
-            <SelectItem value="react">React Framework</SelectItem>
-            <SelectItem value="vue">Vue Framework</SelectItem>
-            <SelectItem value="angular">Angular Framework</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'react' } });
-      expect(searchInput).toHaveValue('react');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'vue' } });
-      expect(searchInput).toHaveValue('vue');
-    });
-
-    it('handles custom filter function', async () => {
-      const customFilter = vi.fn((options, searchTerm) => 
-        options.filter(option => 
-          option.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          option.value.toLowerCase().includes(searchTerm.toLowerCase())
-        )
-      );
-
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable filterFunction={customFilter}>
-            <SelectItem value="react">React</SelectItem>
-            <SelectItem value="vue">Vue</SelectItem>
-            <SelectItem value="angular">Angular</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'react' } });
-      expect(searchInput).toHaveValue('react');
-      // Note: The mock doesn't actually call the filter function, so we just test the input works
-    });
-
-    it('handles debounced search with different delays', async () => {
-      const { rerender } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable debounceMs={100}>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'test' } });
-      expect(searchInput).toHaveValue('test');
-
-      // Test with different debounce delay
-      rerenderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable debounceMs={500}>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const newSearchInput = screen.getByTestId('select-search-input');
-      await user.clear(newSearchInput);
-      fireEvent.change(newSearchInput, { target: { value: 'new' } });
-      expect(newSearchInput).toHaveValue('new');
-    });
-  });
-
-  describe('Advanced Component Behavior', () => {
-    it('handles dynamic option updates', async () => {
-      const { rerender } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      expect(screen.getAllByTestId('select-item')).toHaveLength(2);
-
-      // Update options
-      rerenderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option3">Option 3</SelectItem>
-            <SelectItem value="option4">Option 4</SelectItem>
-            <SelectItem value="option5">Option 5</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Open the select to render the new options
-      const newTriggers = screen.getAllByTestId('select-trigger');
-      const newTrigger = newTriggers[newTriggers.length - 1]; // Get the latest one
-      await user.click(newTrigger);
-
-      // Wait for the new options to be rendered
-      await waitFor(() => {
-        expect(screen.getAllByTestId('select-item')).toHaveLength(3);
-      });
-    });
-
-    it('handles controlled vs uncontrolled behavior', () => {
-      // Test uncontrolled
-      const { rerender } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      expect(screen.getByTestId('select-root')).toBeInTheDocument();
-
-      // Test controlled
-      rerenderWithProviders(
-        <Select value="option2">
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const selectRoots = screen.getAllByTestId('select-root');
-      expect(selectRoots[selectRoots.length - 1]).toHaveAttribute('data-value', 'option2');
-    });
-
-    it('handles disabled state propagation', async () => {
-      renderWithProviders(
-        <Select disabled>
-          <SelectTrigger disabled>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2" disabled>Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const root = screen.getByTestId('select-root');
-      const trigger = screen.getByTestId('select-trigger');
-
-      // The disabled state is handled by the trigger being disabled, not a data attribute
-      // expect(root).toHaveAttribute('data-disabled', 'true');
-      expect(trigger).toBeDisabled();
-      
-      // When disabled, the select should not open, so we just test the disabled state
-      expect(trigger).toBeDisabled();
-      expect(trigger).toHaveAttribute('aria-disabled', 'true');
-    });
-
-    it('handles custom positioning', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent position="item-aligned">
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const content = screen.getByTestId('select-content');
-      // The positioning is handled by CSS classes, not data attributes in our mock
-      expect(content).toBeInTheDocument();
-    });
-  });
-
-  describe('Advanced Search Scenarios', () => {
-    it('handles large dataset search performance', async () => {
-      const largeOptions = Array.from({ length: 1000 }, (_, i) => (
-        <SelectItem key={i} value={`option-${i}`}>
-          Option {i + 1} - {Math.random().toString(36).substring(7)}
-        </SelectItem>
-      ));
-
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable debounceMs={50}>
-            {largeOptions}
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Test search performance with large dataset
-      fireEvent.change(searchInput, { target: { value: 'Option 500' } });
-      expect(searchInput).toHaveValue('Option 500');
-      
-      // Should not cause performance issues
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-
-    it('handles search with grouped options', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectGroup>
-              <SelectLabel>Frontend</SelectLabel>
-              <SelectItem value="react">React</SelectItem>
-              <SelectItem value="vue">Vue</SelectItem>
-              <SelectItem value="angular">Angular</SelectItem>
-            </SelectGroup>
-            <SelectSeparator />
-            <SelectGroup>
-              <SelectLabel>Backend</SelectLabel>
-              <SelectItem value="node">Node.js</SelectItem>
-              <SelectItem value="python">Python</SelectItem>
-              <SelectItem value="java">Java</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'Node' } });
-      expect(searchInput).toHaveValue('Node');
-    });
-
-    it('handles search highlighting with complex content', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable highlightMatches>
-            <SelectItem value="complex1">
-              <span>🚀</span>
-              <strong>React</strong>
-              <span>Framework</span>
-            </SelectItem>
-            <SelectItem value="complex2">
-              <span>⚡</span>
-              <strong>Vue</strong>
-              <span>Framework</span>
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'Framework' } });
-      expect(searchInput).toHaveValue('Framework');
-    });
-  });
-
-  describe('Edge Cases and Error Handling', () => {
-    it('handles empty search results gracefully', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable noResultsText="No matching options found">
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'xyz123' } });
-
-      // Should handle no results gracefully
-      expect(searchInput).toHaveValue('xyz123');
-    });
-
-    it('handles rapid search input changes', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable debounceMs={100}>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Rapid typing and clearing
-      fireEvent.change(searchInput, { target: { value: 'a' } });
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'b' } });
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'c' } });
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'd' } });
-      
-      expect(searchInput).toHaveValue('d');
-    });
-
-    it('handles search with special regex characters', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="regex-test">Regex Test</SelectItem>
-            <SelectItem value="special-chars">Special Characters: .*+?^${}()|[\]\\</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Test special regex characters (using fireEvent to avoid userEvent parsing issues)
-      fireEvent.change(searchInput, { target: { value: '.*+?^${}()|[\\]\\\\' } });
-      expect(searchInput).toHaveValue('.*+?^${}()|[\\]\\\\');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'Regex' } });
-      expect(searchInput).toHaveValue('Regex');
-    });
-
-    it('handles search with very long input', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Very long search term
-      const longSearchTerm = 'a'.repeat(1000);
-      fireEvent.change(searchInput, { target: { value: longSearchTerm } });
-      expect(searchInput).toHaveValue(longSearchTerm);
-    });
-
-    it('handles search with unicode normalization', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="cafe">café</SelectItem>
-            <SelectItem value="cafe-normal">café</SelectItem>
-            <SelectItem value="umlaut">über</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Test unicode characters
-      fireEvent.change(searchInput, { target: { value: 'café' } });
-      expect(searchInput).toHaveValue('café');
-      
-      await user.clear(searchInput);
-      fireEvent.change(searchInput, { target: { value: 'über' } });
-      expect(searchInput).toHaveValue('über');
-    });
-  });
-
-  describe('Performance and Memory Tests', () => {
-    it('handles memory cleanup on unmount', () => {
-      const { unmount } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Should render without errors
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-      
-      // Should unmount without memory leaks
-      unmount();
-    });
-
-    it('handles rapid mount/unmount cycles', () => {
-      const { unmount } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Test that component renders without errors
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-      
-      // Test unmount
-      unmount();
-    });
-
-    it('handles search with maximum height constraints', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable maxHeight="10rem">
-            {Array.from({ length: 100 }, (_, i) => (
-              <SelectItem key={i} value={`option-${i}`}>
-                Option {i + 1}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const content = screen.getByTestId('select-content');
-      expect(content).toBeInTheDocument();
-      // The mock doesn't set data-searchable attribute, so we just test that it renders
-    });
-  });
-
-  describe('Accessibility Enhancements', () => {
-    it('provides proper ARIA live regions for search', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'test' } });
-
-      // Should have proper ARIA attributes
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-      expect(searchInput).toHaveAttribute('type', 'text');
-    });
-
-    it('handles screen reader announcements correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'option' } });
-
-      // Should handle search announcements
-      expect(searchInput).toHaveValue('option');
-    });
-
-    it('provides proper focus management', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      
-      // Click trigger to open the select
-      await user.click(trigger);
-      
-      const searchInput = screen.getByTestId('select-search-input');
-
-      // Test focus management
-      trigger.focus();
-      expect(trigger).toHaveFocus();
-
-      searchInput.focus();
-      expect(searchInput).toHaveFocus();
-    });
-  });
-});