@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,890 +0,0 @@
-/**
- * @file Select Component Utility Tests
- * @package @jmruthers/pace-core
- * @module Components/Select/Select.utils
- * @since 0.1.0
- * 
- * Tests for utility functions and hooks used in the Select component
- * including search algorithms, text highlighting, and option parsing.
- */
-
-import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
-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 to avoid jsdom compatibility issues
-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, ...props }: any) => (
-      <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"
-            />
-            <button data-testid="select-clear-search" aria-label="Clear search">
-              ✕
-            </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, ...props }: any) => (
-      <div
-        data-testid="select-item"
-        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, ...props }: any) => (
-      <span data-testid="select-value" {...props}>
-        {children}
-      </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 Utility Functions', () => {
-  let user: ReturnType<typeof userEvent.setup>;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    user = userEvent.setup();
-  });
-
-  describe('Text Extraction Utilities', () => {
-    it('extracts text from simple string children', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="test">Simple Text</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      expect(item).toHaveTextContent('Simple Text');
-    });
-
-    it('extracts text from complex React elements', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="test">
-              <span>🍎</span>
-              <strong>Apple</strong>
-              <span>(Fruit)</span>
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      expect(item).toHaveTextContent('🍎Apple(Fruit)');
-    });
-
-    it('handles array of React elements', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="test">
-              {[
-                <span key="1">Part 1</span>,
-                " and ",
-                <span key="2">Part 2</span>
-              ]}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      expect(item).toHaveTextContent('Part 1 and Part 2');
-    });
-
-    it('handles null and undefined children', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="test">{null}</SelectItem>
-            <SelectItem value="test2">{undefined}</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const items = screen.getAllByTestId('select-item');
-      expect(items).toHaveLength(2);
-    });
-  });
-
-  describe('Search Algorithm Tests', () => {
-    it('performs contains search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="contains">
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      // The search functionality is tested in the comprehensive tests
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-
-    it('performs startsWith search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="startsWith">
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-
-    it('performs fuzzy search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="fuzzy">
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-
-    it('performs exact search correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchStrategy="exact">
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-  });
-
-  describe('Debounce Hook Tests', () => {
-    it('debounces search input correctly', async () => {
-      const onSearchChange = vi.fn();
-      
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable debounceMs={100} onSearchChange={onSearchChange}>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</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');
-      
-      // Type rapidly
-      searchInput.focus();
-      searchInput.value = 'a';
-      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-      
-      searchInput.value = 'ap';
-      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-      
-      searchInput.value = 'app';
-      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-
-      // Should not call immediately due to debouncing
-      expect(onSearchChange).not.toHaveBeenCalledWith('app');
-    });
-  });
-
-  describe('Option Parsing Tests', () => {
-    it('parses simple options correctly', async () => {
-      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);
-      
-      const items = screen.getAllByTestId('select-item');
-      expect(items).toHaveLength(2);
-      expect(items[0]).toHaveAttribute('data-value', 'option1');
-      expect(items[1]).toHaveAttribute('data-value', 'option2');
-    });
-
-    it('parses grouped options correctly', async () => {
-      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);
-      
-      const items = screen.getAllByTestId('select-item');
-      expect(items).toHaveLength(2);
-    });
-
-    it('handles options with complex children', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="complex">
-              <span>🚀</span>
-              <strong>Complex</strong>
-              <span>Option</span>
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      expect(item).toHaveTextContent('🚀ComplexOption');
-    });
-  });
-
-  describe('Text Highlighting Tests', () => {
-    it('highlights matching text in simple strings', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable highlightMatches>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</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');
-      searchInput.value = 'app';
-      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
-
-      // The highlighting functionality is tested in the comprehensive tests
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-
-    it('handles case insensitive highlighting', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable highlightMatches caseSensitive={false}>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-  });
-
-  describe('Keyboard Navigation Tests', () => {
-    it('supports global keyboard shortcuts', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Test that keyboard event listeners are set up
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-
-    it('handles search input keyboard events', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</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 that the input can receive keyboard events
-      searchInput.focus();
-      expect(searchInput).toHaveFocus();
-    });
-  });
-
-  describe('Accessibility Utility Tests', () => {
-    it('provides proper ARIA attributes for search input', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</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');
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-
-    it('provides screen reader announcements', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // The search input should be present and accessible
-      const searchInput = screen.getByTestId('select-search-input');
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-
-    it('provides proper roles for accessibility', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <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 content = screen.getByTestId('select-content');
-      
-      expect(trigger).toBeInTheDocument();
-      expect(content).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance Utility Tests', () => {
-    it('handles large datasets efficiently', () => {
-      const manyOptions = Array.from({ length: 100 }, (_, i) => (
-        <SelectItem key={i} value={`option-${i}`}>
-          Option {i + 1}
-        </SelectItem>
-      ));
-
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent searchable debounceMs={50}>
-              {manyOptions}
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('memoizes option parsing correctly', 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);
-
-      // Re-render with same options
-      rerender(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const items = screen.getAllByTestId('select-item');
-      expect(items).toHaveLength(2);
-    });
-  });
-
-  describe('Error Handling Tests', () => {
-    it('handles invalid search strategies gracefully', () => {
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent searchable searchStrategy="invalid" as any>
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('handles invalid search fields gracefully', () => {
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent searchable searchFields={['invalid'] as any}>
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('handles negative debounce values', () => {
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent searchable debounceMs={-100}>
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('handles null and undefined children gracefully', () => {
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent>
-              {null}
-              {undefined}
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-  });
-
-  describe('Type Safety Tests', () => {
-    it('enforces proper TypeScript types for search props', () => {
-      const validSearchProps = {
-        searchable: true,
-        searchPlaceholder: "Search...",
-        searchStrategy: "contains" as const,
-        caseSensitive: false,
-        debounceMs: 300,
-        showClearButton: true,
-        searchFields: ['label', 'value'] as const,
-        maxHeight: "20rem",
-        highlightMatches: true,
-        noResultsText: "No results found",
-        onSearchChange: vi.fn(),
-        filterFunction: vi.fn(),
-      };
-
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent {...validSearchProps}>
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('handles optional search props correctly', () => {
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent searchable>
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-  });
-
-
-describe('Select Edge Cases', () => {
-  describe('Extreme Data Values', () => {
-    it('should handle very long strings', () => {
-      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
-      
-      const { container } = renderWithProviders(<Select>{longString}</Select>);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-
-    it('should handle empty and null values', () => {
-      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
-      
-      emptyValues.forEach(value => {
-        const { container, unmount } = renderWithProviders(<Select>{value as any}</Select>);
-        expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle special characters', () => {
-      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
-      
-      const { container } = renderWithProviders(<Select>{specialChars}</Select>);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-
-    it('should handle unicode characters', () => {
-      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
-      
-      const { container } = renderWithProviders(<Select>{unicodeChars}</Select>);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-  });
-
-  describe('Extreme Numbers', () => {
-    it('should handle very large numbers', () => {
-      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
-      
-      largeNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Select value={number} />);
-        expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle very small numbers', () => {
-      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
-      
-      smallNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Select value={number} />);
-        expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-        unmount();
-      });
-    });
-  });
-
-  describe('Rapid State Changes', () => {
-    it('should handle rapid prop changes', async () => {
-      const stateProps = [
-        { children: 'State 1' },
-        { children: 'State 2' },
-        { children: 'State 3' },
-        { children: 'State 4' },
-        { children: 'State 5' },
-      ];
-
-      await edgeCaseUtils.testRapidStateChanges(Select, stateProps);
-    });
-
-    it('should handle rapid user interactions', async () => {
-      const { container } = renderWithProviders(<Select />);
-      
-      const select = container.querySelector('[data-testid="select-root"]');
-      expect(select).toBeInTheDocument();
-      
-      // Rapidly interact with the component
-      for (let i = 0; i < 10; i++) {
-        if (select) {
-          fireEvent.click(select);
-        }
-        await new Promise(resolve => setTimeout(resolve, 0));
-      }
-      
-      expect(select).toBeInTheDocument();
-    });
-  });
-
-  describe('Memory Management', () => {
-    it('should not leak memory with repeated renders', () => {
-      edgeCaseUtils.testMemoryLeaks(Select, { children: 'Memory test' });
-    });
-  });
-
-  describe('Boundary Conditions', () => {
-    it('should handle boundary prop values', () => {
-      const boundaryProps = [
-        { children: '' },
-        { children: 0 },
-        { children: false },
-        { children: [] },{ className: '' },
-        { 'data-testid': '' },
-      ];
-
-      edgeCaseUtils.testBoundaryConditions(Select, boundaryProps);
-    });
-  });
-
-  describe('Complex Data Structures', () => {
-    it('should handle deeply nested objects', () => {
-      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
-      
-      const { container } = renderWithProviders(<Select data={deepObject} />);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-
-    it('should handle large arrays', () => {
-      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
-      
-      const { container } = renderWithProviders(<Select items={largeArray} />);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-  });
-});
-});