@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Select/__tests__/Select.search-algorithms.test.tsx

@@ -1,968 +0,0 @@
-/**
- * @file Select Component Search Algorithm Tests
- * @package @jmruthers/pace-core
- * @module Components/Select/Select.search-algorithms
- * @since 0.1.0
- * 
- * Specialized tests for search algorithms and utility functions used in the Select component.
- * This file focuses on testing the core search functionality, fuzzy matching, text highlighting,
- * and option parsing logic in isolation.
- */
-
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders  } from "../../../__tests__/shared";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} 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>,
-}));
-
-// Mock Radix UI Select with enhanced search simulation
-vi.mock('@radix-ui/react-select', async () => {
-  const actual = await vi.importActual('@radix-ui/react-select');
-  return {
-    ...actual,
-    Root: ({ children, onValueChange, value, defaultValue, ...props }: any) => (
-      <div data-testid="select-root" data-value={value || defaultValue} {...props}>
-        {children}
-      </div>
-    ),
-    Trigger: React.forwardRef(({ children, disabled, ...props }: any, ref) => (
-      <button
-        ref={ref}
-        data-testid="select-trigger"
-        disabled={disabled}
-        onClick={() => {
-          // Simulate opening the dropdown
-          const event = new CustomEvent('select-open');
-          document.dispatchEvent(event);
-        }}
-        {...props}
-      >
-        {children}
-      </button>
-    )),
-    Content: ({ children, searchable, searchStrategy, caseSensitive, ...props }: any) => {
-      const [searchValue, setSearchValue] = React.useState('');
-      const [filteredChildren, setFilteredChildren] = React.useState(children);
-      
-      React.useEffect(() => {
-        if (!searchable || !searchValue) {
-          setFilteredChildren(children);
-          return;
-        }
-
-        // Simulate search filtering based on strategy
-        const filterOptions = (children: React.ReactNode, searchTerm: string) => {
-          const options: React.ReactElement[] = [];
-          
-          React.Children.forEach(children, (child) => {
-            if (React.isValidElement(child) && child.type === SelectItem) {
-              const text = child.props.children?.toString() || '';
-              const value = child.props.value || '';
-              
-              let matches = false;
-              const normalizedSearch = caseSensitive ? searchTerm : searchTerm.toLowerCase();
-              const normalizedText = caseSensitive ? text : text.toLowerCase();
-              const normalizedValue = caseSensitive ? value : value.toLowerCase();
-              
-              switch (searchStrategy) {
-                case 'contains':
-                  matches = normalizedText.includes(normalizedSearch) || 
-                           normalizedValue.includes(normalizedSearch);
-                  break;
-                case 'startsWith':
-                  matches = normalizedText.startsWith(normalizedSearch) || 
-                           normalizedValue.startsWith(normalizedSearch);
-                  break;
-                case 'exact':
-                  matches = normalizedText === normalizedSearch || 
-                           normalizedValue === normalizedSearch;
-                  break;
-                case 'fuzzy':
-                  // Simple fuzzy matching simulation
-                  matches = fuzzyMatch(text, searchTerm) || fuzzyMatch(value, searchTerm);
-                  break;
-                default:
-                  matches = normalizedText.includes(normalizedSearch) || 
-                           normalizedValue.includes(normalizedSearch);
-              }
-              
-              if (matches) {
-                options.push(child);
-              }
-            }
-          });
-          
-          return options;
-        };
-
-        const filtered = filterOptions(children, searchValue);
-        setFilteredChildren(filtered);
-      }, [children, searchValue, searchable, searchStrategy, caseSensitive]);
-
-      return (
-        <div data-testid="select-content" data-searchable={searchable} {...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)}
-              />
-              {searchValue && (
-                <button 
-                  data-testid="select-clear-search" 
-                  aria-label="Clear search" 
-                  type="button"
-                  onClick={() => setSearchValue('')}
-                >
-                  ✕
-                </button>
-              )}
-            </div>
-          )}
-          <div data-testid="select-viewport">
-            {filteredChildren}
-          </div>
-        </div>
-      );
-    },
-    Viewport: ({ children, ...props }: any) => (
-      <div data-testid="select-viewport" {...props}>
-        {children}
-      </div>
-    ),
-    Item: ({ children, value, disabled, ...props }: any) => (
-      <div
-        data-testid="select-item"
-        role="option"
-        data-value={value}
-        aria-disabled={disabled}
-        onClick={() => {
-          if (!disabled) {
-            // 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}</>,
-  };
-});
-
-// Fuzzy match function for testing
-const fuzzyMatch = (text: string, pattern: string): boolean => {
-  const textLower = text.toLowerCase();
-  const patternLower = pattern.toLowerCase();
-  
-  let textIndex = 0;
-  let patternIndex = 0;
-  
-  while (textIndex < textLower.length && patternIndex < patternLower.length) {
-    if (textLower[textIndex] === patternLower[patternIndex]) {
-      patternIndex++;
-    }
-    textIndex++;
-  }
-  
-  return patternIndex === patternLower.length;
-};
-
-describe('Select Search Algorithms', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Contains Search Strategy', () => {
-    it('finds options containing search term anywhere in text', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="contains">
-            <SelectItem value="javascript">JavaScript Programming</SelectItem>
-            <SelectItem value="typescript">TypeScript Programming</SelectItem>
-            <SelectItem value="python">Python Programming</SelectItem>
-            <SelectItem value="java">Java Programming</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Search for "script" - should find JavaScript and TypeScript
-      fireEvent.change(searchInput, { target: { value: 'script' } });
-      expect(searchInput).toHaveValue('script');
-      
-      // Should find items containing "script"
-      const items = screen.getAllByTestId('select-item');
-      expect(items.length).toBeGreaterThan(0);
-    });
-
-    it('handles case-insensitive contains search', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="contains" caseSensitive={false}>
-            <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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Case-insensitive search
-      fireEvent.change(searchInput, { target: { value: 'react' } });
-      expect(searchInput).toHaveValue('react');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'REACT' } });
-      expect(searchInput).toHaveValue('REACT');
-    });
-
-    it('handles case-sensitive contains search', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="contains" caseSensitive>
-            <SelectItem value="React">React Framework</SelectItem>
-            <SelectItem value="react">react framework</SelectItem>
-            <SelectItem value="REACT">REACT FRAMEWORK</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Case-sensitive search
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'react' } });
-      expect(searchInput).toHaveValue('react');
-    });
-  });
-
-  describe('StartsWith Search Strategy', () => {
-    it('finds options starting with search term', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="startsWith">
-            <SelectItem value="react">React Framework</SelectItem>
-            <SelectItem value="react-native">React Native</SelectItem>
-            <SelectItem value="react-query">React Query</SelectItem>
-            <SelectItem value="vue">Vue Framework</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Search for "React" - should find all React options
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      // Should find items starting with "React"
-      const items = screen.getAllByTestId('select-item');
-      expect(items.length).toBeGreaterThan(0);
-    });
-
-    it('handles partial word matches', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="startsWith">
-            <SelectItem value="javascript">JavaScript</SelectItem>
-            <SelectItem value="typescript">TypeScript</SelectItem>
-            <SelectItem value="python">Python</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Search for "Java" - should find JavaScript
-      fireEvent.change(searchInput, { target: { value: 'Java' } });
-      expect(searchInput).toHaveValue('Java');
-      
-      // Search for "Type" - should find TypeScript
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'Type' } });
-      expect(searchInput).toHaveValue('Type');
-    });
-  });
-
-  describe('Exact Search Strategy', () => {
-    it('finds options that exactly match search term', 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>
-            <SelectItem value="vue">Vue</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Exact match for "React"
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      // Exact match for "React Native"
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'React Native' } });
-      expect(searchInput).toHaveValue('React Native');
-    });
-
-    it('handles case-sensitive exact matches', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="exact" caseSensitive>
-            <SelectItem value="React">React</SelectItem>
-            <SelectItem value="react">react</SelectItem>
-            <SelectItem value="REACT">REACT</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Case-sensitive exact matches
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'react' } });
-      expect(searchInput).toHaveValue('react');
-    });
-  });
-
-  describe('Fuzzy Search Strategy', () => {
-    it('finds options with fuzzy matching', 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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Fuzzy search with typos
-      fireEvent.change(searchInput, { target: { value: 'javascrpt' } }); // Missing 'i'
-      expect(searchInput).toHaveValue('javascrpt');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'typescrpt' } }); // Missing 'i'
-      expect(searchInput).toHaveValue('typescrpt');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'pythn' } }); // Missing 'o'
-      expect(searchInput).toHaveValue('pythn');
-    });
-
-    it('handles partial fuzzy matches', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="fuzzy">
-            <SelectItem value="react">React</SelectItem>
-            <SelectItem value="react-native">React Native</SelectItem>
-            <SelectItem value="react-query">React Query</SelectItem>
-            <SelectItem value="vue">Vue</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Partial fuzzy matches
-      fireEvent.change(searchInput, { target: { value: 'rc' } }); // Should match React
-      expect(searchInput).toHaveValue('rc');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'rn' } }); // Should match React Native
-      expect(searchInput).toHaveValue('rn');
-    });
-
-    it('handles fuzzy search with special characters', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="fuzzy">
-            <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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Fuzzy search with special characters
-      fireEvent.change(searchInput, { target: { value: 'cpp' } }); // Should match C++
-      expect(searchInput).toHaveValue('cpp');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'cs' } }); // Should match C#
-      expect(searchInput).toHaveValue('cs');
-    });
-  });
-
-  describe('Search Field Configuration', () => {
-    it('searches in label field by default', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchFields={['label']}>
-            <SelectItem value="js">JavaScript</SelectItem>
-            <SelectItem value="ts">TypeScript</SelectItem>
-            <SelectItem value="py">Python</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'JavaScript' } });
-      expect(searchInput).toHaveValue('JavaScript');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'TypeScript' } });
-      expect(searchInput).toHaveValue('TypeScript');
-    });
-
-    it('searches in value field when configured', 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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'react' } });
-      expect(searchInput).toHaveValue('react');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'vue' } });
-      expect(searchInput).toHaveValue('vue');
-    });
-
-    it('searches in multiple fields', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchFields={['label', '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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Search in both label and value
-      fireEvent.change(searchInput, { target: { value: 'react' } });
-      expect(searchInput).toHaveValue('react');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'Framework' } });
-      expect(searchInput).toHaveValue('Framework');
-    });
-  });
-
-  describe('Search Performance', () => {
-    it('handles large datasets efficiently', 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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      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 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>
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Rapid typing and clearing
-      fireEvent.change(searchInput, { target: { value: 'a' } });
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'b' } });
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'c' } });
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'd' } });
-      
-      expect(searchInput).toHaveValue('d');
-    });
-  });
-
-  describe('Search Edge Cases', () => {
-    it('handles empty search term', 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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Empty search should show all options
-      expect(searchInput).toHaveValue('');
-      
-      const items = screen.getAllByTestId('select-item');
-      expect(items).toHaveLength(2);
-    });
-
-    it('handles search with whitespace', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="react">React Framework</SelectItem>
-            <SelectItem value="vue">Vue Framework</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Search with leading/trailing whitespace
-      fireEvent.change(searchInput, { target: { value: '  React  ' } });
-      expect(searchInput).toHaveValue('  React  ');
-    });
-
-    it('handles search with unicode characters', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="cafe">café</SelectItem>
-            <SelectItem value="umlaut">über</SelectItem>
-            <SelectItem value="emoji">🚀 React</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Search with unicode characters
-      fireEvent.change(searchInput, { target: { value: 'café' } });
-      expect(searchInput).toHaveValue('café');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'über' } });
-      expect(searchInput).toHaveValue('über');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: '🚀' } });
-      expect(searchInput).toHaveValue('🚀');
-    });
-
-    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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Search with special regex characters (using fireEvent to avoid userEvent parsing issues)
-      fireEvent.change(searchInput, { target: { value: '.*+?^${}()|[\\]\\\\' } });
-      expect(searchInput).toHaveValue('.*+?^${}()|[\\]\\\\');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'Regex' } });
-      expect(searchInput).toHaveValue('Regex');
-    });
-  });
-
-  describe('Search Result Highlighting', () => {
-    it('handles text highlighting in search results', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable highlightMatches>
-            <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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      // Should highlight matching text
-      const items = screen.getAllByTestId('select-item');
-      expect(items.length).toBeGreaterThan(0);
-    });
-
-    it('handles 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 trigger1 = screen.getByTestId('select-trigger');
-      await user.click(trigger1);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      fireEvent.change(searchInput, { target: { value: 'React' } });
-      expect(searchInput).toHaveValue('React');
-      
-      await user.clear(searchInput, { delay: 0 });
-      fireEvent.change(searchInput, { target: { value: 'Framework' } });
-      expect(searchInput).toHaveValue('Framework');
-    });
-  });
-describe('Select 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('Select component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Select 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(
-      'Select 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('Select prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-});