@jmruthers/pace-core 0.2.4

package/src/components/Select/__tests__/Select.real-world.test.tsx

@@ -0,0 +1,1046 @@
+/**
+ * @file Select Component Real-World Scenario Tests
+ * @package @jmruthers/pace-core
+ * @module Components/Select/Select.real-world
+ * @since 0.1.0
+ * 
+ * Tests for real-world scenarios and complex use cases of the Select component.
+ * This file focuses on practical applications, form integration, dynamic data,
+ * and complex filtering scenarios that developers might encounter in production.
+ */
+
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import React from 'react';
+import { 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, afterEach } from 'vitest';
+import '@testing-library/jest-dom';
+import { renderWithProviders, testDataGenerators  } 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 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 - Real-World Scenarios', () => {
+  const user = userEvent.setup();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+
+  describe('E-commerce Product Selection', () => {
+    it('handles product category selection with search', async () => {
+      const onCategoryChange = vi.fn();
+      const categories = [
+        { id: 'electronics', name: 'Electronics', count: 150 },
+        { id: 'clothing', name: 'Clothing & Fashion', count: 300 },
+        { id: 'books', name: 'Books & Media', count: 500 },
+        { id: 'home', name: 'Home & Garden', count: 200 },
+        { id: 'sports', name: 'Sports & Outdoors', count: 100 },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onCategoryChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a category" />
+          </SelectTrigger>
+          <SelectContent searchable searchPlaceholder="Search categories...">
+            {categories.map((category) => (
+              <SelectItem key={category.id} value={category.id}>
+                {category.name} ({category.count})
+              </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');
+      
+      // Search for electronics
+      fireEvent.change(searchInput, { target: { value: 'electronics' } });
+      expect(searchInput).toHaveValue('electronics');
+      
+      // Search for clothing
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'clothing' } });
+      expect(searchInput).toHaveValue('clothing');
+    });
+
+    it('handles product filtering with complex criteria', async () => {
+      const onProductChange = vi.fn();
+      const products = [
+        { id: 'laptop-1', name: 'MacBook Pro', brand: 'Apple', price: 1299, category: 'laptops' },
+        { id: 'laptop-2', name: 'Dell XPS 13', brand: 'Dell', price: 999, category: 'laptops' },
+        { id: 'phone-1', name: 'iPhone 15', brand: 'Apple', price: 799, category: 'phones' },
+        { id: 'phone-2', name: 'Samsung Galaxy', brand: 'Samsung', price: 699, category: 'phones' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onProductChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a product" />
+          </SelectTrigger>
+          <SelectContent searchable searchStrategy="fuzzy">
+            {products.map((product) => (
+              <SelectItem key={product.id} value={product.id}>
+                {product.brand} {product.name} - ${product.price}
+              </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');
+      
+      // Search by brand
+      fireEvent.change(searchInput, { target: { value: 'Apple' } });
+      expect(searchInput).toHaveValue('Apple');
+      
+      // Search by price range
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: '999' } });
+      expect(searchInput).toHaveValue('999');
+    });
+  });
+
+  describe('User Management System', () => {
+    it('handles user role selection with permissions', async () => {
+      const onRoleChange = vi.fn();
+      const roles = [
+        { id: 'admin', name: 'Administrator', permissions: ['read', 'write', 'delete'] },
+        { id: 'manager', name: 'Manager', permissions: ['read', 'write'] },
+        { id: 'user', name: 'User', permissions: ['read'] },
+        { id: 'guest', name: 'Guest', permissions: [] },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onRoleChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select user role" />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectGroup>
+              <SelectLabel>Administrative Roles</SelectLabel>
+              {roles.filter(role => role.permissions.includes('delete')).map(role => (
+                <SelectItem key={role.id} value={role.id}>
+                  {role.name} - Full Access
+                </SelectItem>
+              ))}
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Standard Roles</SelectLabel>
+              {roles.filter(role => !role.permissions.includes('delete')).map(role => (
+                <SelectItem key={role.id} value={role.id}>
+                  {role.name} - Limited Access
+                </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');
+      
+      // Search for admin role
+      fireEvent.change(searchInput, { target: { value: 'admin' } });
+      expect(searchInput).toHaveValue('admin');
+      
+      // Search for manager role
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'manager' } });
+      expect(searchInput).toHaveValue('manager');
+    });
+
+    it('handles department selection with hierarchy', async () => {
+      const onDepartmentChange = vi.fn();
+      const departments = {
+        'Engineering': [
+          { id: 'frontend', name: 'Frontend Development' },
+          { id: 'backend', name: 'Backend Development' },
+          { id: 'devops', name: 'DevOps' },
+        ],
+        'Design': [
+          { id: 'ui-ux', name: 'UI/UX Design' },
+          { id: 'graphic', name: 'Graphic Design' },
+        ],
+        'Marketing': [
+          { id: 'digital', name: 'Digital Marketing' },
+          { id: 'content', name: 'Content Marketing' },
+        ],
+      };
+
+      renderWithProviders(
+        <Select onValueChange={onDepartmentChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select department" />
+          </SelectTrigger>
+          <SelectContent searchable>
+            {Object.entries(departments).map(([parent, children]) => (
+              <React.Fragment key={parent}>
+                <SelectLabel>{parent}</SelectLabel>
+                <SelectGroup>
+                  {children.map((dept) => (
+                    <SelectItem key={dept.id} value={dept.id}>
+                      {dept.name}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+                <SelectSeparator />
+              </React.Fragment>
+            ))}
+          </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');
+      
+      // Search for engineering departments
+      fireEvent.change(searchInput, { target: { value: 'frontend' } });
+      expect(searchInput).toHaveValue('frontend');
+      
+      // Search for design departments
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'design' } });
+      expect(searchInput).toHaveValue('design');
+    });
+  });
+
+  describe('Form Integration Scenarios', () => {
+    it('handles form validation with select', async () => {
+      const handleSubmit = vi.fn((e: React.FormEvent) => {
+        e.preventDefault();
+      });
+
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="country">Country:</label>
+          <Select name="country" required>
+            <SelectTrigger id="country">
+              <SelectValue placeholder="Select your country" />
+            </SelectTrigger>
+            <SelectContent searchable>
+              <SelectItem value="us">United States</SelectItem>
+              <SelectItem value="ca">Canada</SelectItem>
+              <SelectItem value="uk">United Kingdom</SelectItem>
+              <SelectItem value="au">Australia</SelectItem>
+            </SelectContent>
+          </Select>
+          <button type="submit">Submit</button>
+        </form>
+      );
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      await user.click(submitButton);
+
+      expect(handleSubmit).toHaveBeenCalled();
+    });
+
+    it('handles dynamic form fields based on selection', async () => {
+      const states = {
+        us: ['California', 'New York', 'Texas'],
+        ca: ['Ontario', 'Quebec', 'British Columbia'],
+        uk: ['England', 'Scotland', 'Wales'],
+        au: ['New South Wales', 'Victoria', 'Queensland'],
+      };
+
+      renderWithProviders(
+        <div>
+          <label htmlFor="country">Country:</label>
+          <Select>
+            <SelectTrigger id="country">
+              <SelectValue placeholder="Select country" />
+            </SelectTrigger>
+            <SelectContent searchable>
+              <SelectItem value="us">United States</SelectItem>
+              <SelectItem value="ca">Canada</SelectItem>
+              <SelectItem value="uk">United Kingdom</SelectItem>
+              <SelectItem value="au">Australia</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      );
+
+      // Test that the form renders correctly
+      expect(screen.getByLabelText('Country:')).toBeInTheDocument();
+    });
+  });
+
+  describe('Data Visualization Dashboard', () => {
+    it('handles chart type selection with descriptions', async () => {
+      const onChartTypeChange = vi.fn();
+      const chartTypes = [
+        { id: 'line', name: 'Line Chart', description: 'Shows trends over time' },
+        { id: 'bar', name: 'Bar Chart', description: 'Compares categories' },
+        { id: 'pie', name: 'Pie Chart', description: 'Shows proportions' },
+        { id: 'scatter', name: 'Scatter Plot', description: 'Shows correlations' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onChartTypeChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select chart type" />
+          </SelectTrigger>
+          <SelectContent searchable>
+            {chartTypes.map((chart) => (
+              <SelectItem key={chart.id} value={chart.id}>
+                <div>
+                  <strong>{chart.name}</strong>
+                  <br />
+                  <small>{chart.description}</small>
+                </div>
+              </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');
+      
+      // Search for chart types
+      fireEvent.change(searchInput, { target: { value: 'line' } });
+      expect(searchInput).toHaveValue('line');
+      
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'trends' } });
+      expect(searchInput).toHaveValue('trends');
+    });
+
+    it('handles time period selection for analytics', async () => {
+      const onPeriodChange = vi.fn();
+      const periods = [
+        { id: '1h', name: 'Last Hour', description: 'Real-time data' },
+        { id: '24h', name: 'Last 24 Hours', description: 'Daily trends' },
+        { id: '7d', name: 'Last 7 Days', description: 'Weekly patterns' },
+        { id: '30d', name: 'Last 30 Days', description: 'Monthly trends' },
+        { id: '90d', name: 'Last 90 Days', description: 'Quarterly analysis' },
+        { id: '1y', name: 'Last Year', description: 'Annual comparison' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onPeriodChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select time period" />
+          </SelectTrigger>
+          <SelectContent searchable searchStrategy="fuzzy">
+            {periods.map((period) => (
+              <SelectItem key={period.id} value={period.id}>
+                {period.name} - {period.description}
+              </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');
+      
+      // Search for time periods
+      fireEvent.change(searchInput, { target: { value: 'hour' } });
+      expect(searchInput).toHaveValue('hour');
+      
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'month' } });
+      expect(searchInput).toHaveValue('month');
+    });
+  });
+
+  describe('Content Management System', () => {
+    it('handles content type selection with metadata', async () => {
+      const onContentTypeChange = vi.fn();
+      const contentTypes = [
+        { id: 'article', name: 'Article', icon: '📄', fields: ['title', 'body', 'author'] },
+        { id: 'page', name: 'Page', icon: '📑', fields: ['title', 'content', 'slug'] },
+        { id: 'product', name: 'Product', icon: '🛍️', fields: ['name', 'price', 'description'] },
+        { id: 'event', name: 'Event', icon: '📅', fields: ['title', 'date', 'location'] },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onContentTypeChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select content type" />
+          </SelectTrigger>
+          <SelectContent searchable>
+            {contentTypes.map((type) => (
+              <SelectItem key={type.id} value={type.id}>
+                <span>{type.icon}</span>
+                <span>{type.name}</span>
+                <small>({type.fields.length} fields)</small>
+              </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');
+      
+      // Search for content types
+      fireEvent.change(searchInput, { target: { value: 'article' } });
+      expect(searchInput).toHaveValue('article');
+      
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'product' } });
+      expect(searchInput).toHaveValue('product');
+    });
+
+    it('handles template selection with preview', async () => {
+      const onTemplateChange = vi.fn();
+      const templates = [
+        { id: 'blog-post', name: 'Blog Post', category: 'Content', description: 'Standard blog post template' },
+        { id: 'landing-page', name: 'Landing Page', category: 'Marketing', description: 'High-converting landing page' },
+        { id: 'product-page', name: 'Product Page', category: 'E-commerce', description: 'Detailed product showcase' },
+        { id: 'contact-form', name: 'Contact Form', category: 'Forms', description: 'Lead generation form' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onTemplateChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select template" />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectGroup>
+              <SelectLabel>Content</SelectLabel>
+              {templates.filter(t => t.category === 'Content').map(template => (
+                <SelectItem key={template.id} value={template.id}>
+                  {template.name} - {template.description}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Marketing</SelectLabel>
+              {templates.filter(t => t.category === 'Marketing').map(template => (
+                <SelectItem key={template.id} value={template.id}>
+                  {template.name} - {template.description}
+                </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');
+      
+      // Search for templates
+      fireEvent.change(searchInput, { target: { value: 'blog' } });
+      expect(searchInput).toHaveValue('blog');
+      
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'landing' } });
+      expect(searchInput).toHaveValue('landing');
+    });
+  });
+
+  describe('API Integration Scenarios', () => {
+    it('handles dynamic data loading with search', async () => {
+      const onUserChange = vi.fn();
+      const users = [
+        { id: '1', name: 'User 1', email: 'user1@example.com', role: 'admin' },
+        { id: '2', name: 'User 2', email: 'user2@example.com', role: 'user' },
+        { id: '3', name: 'User 3', email: 'user3@example.com', role: 'manager' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onUserChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select user" />
+          </SelectTrigger>
+          <SelectContent searchable searchFields={['name', 'email']}>
+            {users.map((user) => (
+              <SelectItem key={user.id} value={user.id}>
+                {user.name} ({user.email})
+              </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');
+      
+      // Search by name
+      fireEvent.change(searchInput, { target: { value: 'User 1' } });
+      expect(searchInput).toHaveValue('User 1');
+      
+      // Search by email
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'user2@example.com' } });
+      expect(searchInput).toHaveValue('user2@example.com');
+    });
+
+    it('handles pagination with search', async () => {
+      const onPageChange = vi.fn();
+      const currentPage = 1;
+      const itemsPerPage = 10;
+      
+      // Simulate paginated data
+      const allItems = Array.from({ length: 100 }, (_, i) => ({
+        id: i + 1,
+        name: `Item ${i + 1}`,
+        category: i % 3 === 0 ? 'A' : i % 3 === 1 ? 'B' : 'C',
+      }));
+
+      const startIndex = (currentPage - 1) * itemsPerPage;
+      const endIndex = startIndex + itemsPerPage;
+      const currentItems = allItems.slice(startIndex, endIndex);
+
+      renderWithProviders(
+        <div>
+          <Select onValueChange={onPageChange}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select page" />
+            </SelectTrigger>
+            <SelectContent searchable>
+              {currentItems.map((item) => (
+                <SelectItem key={item.id} value={item.id.toString()}>
+                  {item.name} (Category {item.category})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          
+          <div>
+            Page {currentPage} of {Math.ceil(allItems.length / itemsPerPage)}
+          </div>
+        </div>
+      );
+
+      // Click trigger to open the select
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      const searchInput = screen.getByTestId('select-search-input');
+      
+      // Search in current page
+      fireEvent.change(searchInput, { target: { value: 'Item 1' } });
+      expect(searchInput).toHaveValue('Item 1');
+    });
+  });
+
+  describe('Complex Filtering Scenarios', () => {
+    it('handles multi-criteria filtering', async () => {
+      const onFilterChange = vi.fn();
+      const filters = [
+        { id: 'price-low', name: 'Price: Low to High', type: 'price', value: 'asc' },
+        { id: 'price-high', name: 'Price: High to Low', type: 'price', value: 'desc' },
+        { id: 'name-asc', name: 'Name: A to Z', type: 'name', value: 'asc' },
+        { id: 'name-desc', name: 'Name: Z to A', type: 'name', value: 'desc' },
+        { id: 'date-new', name: 'Date: Newest First', type: 'date', value: 'desc' },
+        { id: 'date-old', name: 'Date: Oldest First', type: 'date', value: 'asc' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onFilterChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select filter" />
+          </SelectTrigger>
+          <SelectContent searchable>
+            <SelectGroup>
+              <SelectLabel>Price Filters</SelectLabel>
+              {filters.filter(f => f.type === 'price').map(filter => (
+                <SelectItem key={filter.id} value={filter.id}>
+                  {filter.name}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Name Filters</SelectLabel>
+              {filters.filter(f => f.type === 'name').map(filter => (
+                <SelectItem key={filter.id} value={filter.id}>
+                  {filter.name}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Date Filters</SelectLabel>
+              {filters.filter(f => f.type === 'date').map(filter => (
+                <SelectItem key={filter.id} value={filter.id}>
+                  {filter.name}
+                </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');
+      
+      // Search for price filters
+      fireEvent.change(searchInput, { target: { value: 'price' } });
+      expect(searchInput).toHaveValue('price');
+      
+      // Search for name filters
+      await user.clear(searchInput);
+      fireEvent.change(searchInput, { target: { value: 'name' } });
+      expect(searchInput).toHaveValue('name');
+    });
+
+    it('handles conditional filtering based on context', async () => {
+      const onSubcategoryChange = vi.fn();
+
+      const categories = {
+        'electronics': [
+          { id: 'laptops', name: 'Laptops', available: true },
+          { id: 'phones', name: 'Phones', available: true },
+          { id: 'tablets', name: 'Tablets', available: false },
+        ],
+        'clothing': [
+          { id: 'shirts', name: 'Shirts', available: true },
+          { id: 'pants', name: 'Pants', available: true },
+          { id: 'shoes', name: 'Shoes', available: true },
+        ],
+        'books': [
+          { id: 'fiction', name: 'Fiction', available: true },
+          { id: 'non-fiction', name: 'Non-Fiction', available: true },
+          { id: 'academic', name: 'Academic', available: false },
+        ],
+      };
+
+      renderWithProviders(
+        <div>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Select category" />
+            </SelectTrigger>
+            <SelectContent searchable>
+              <SelectItem value="electronics">Electronics</SelectItem>
+              <SelectItem value="clothing">Clothing</SelectItem>
+              <SelectItem value="books">Books</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      );
+
+      // Test that the form renders correctly
+      expect(screen.getByText('Select category')).toBeInTheDocument();
+    });
+  });
+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();
+  });
+});
+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();
+    });
+  });
+});
+});