@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,837 +0,0 @@
-/**
- * @file Comprehensive Select Component Tests
- * @package @jmruthers/pace-core
- * @module Components/Select/Select.comprehensive
- * @since 0.1.0
- * 
- * Comprehensive tests for the Select component that test actual functionality
- * including search features, keyboard navigation, accessibility, and edge cases.
- */
-
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } 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>,
-}));
-
-// No need to mock Radix UI since we're using a custom Select component
-
-describe('Select Component - Comprehensive Tests', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllTimers();
-  });
-
-  describe('Basic Select Functionality', () => {
-    it('renders basic select with trigger and content', 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>
-      );
-
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-      expect(screen.getByTestId('select-value')).toBeInTheDocument();
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-      
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    });
-
-    it('handles value changes correctly', async () => {
-      const onValueChange = vi.fn();
-      
-      // Listen for value change events
-      document.addEventListener('select-value-change', (e: any) => {
-        onValueChange(e.detail);
-      });
-
-      renderWithProviders(
-        <Select onValueChange={onValueChange}>
-          <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');
-      fireEvent.click(trigger);
-
-      const options = screen.getAllByTestId('select-item');
-      await user.click(options[0]);
-
-      expect(onValueChange).toHaveBeenCalledWith('option1');
-    });
-
-    it('supports controlled value', () => {
-      renderWithProviders(
-        <Select value="option1">
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option1');
-    });
-
-    it('supports default value', () => {
-      renderWithProviders(
-        <Select defaultValue="option2">
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      expect(screen.getByTestId('select-root')).toHaveAttribute('data-value', 'option2');
-    });
-  });
-
-  describe('Searchable Select Functionality', () => {
-    it('renders search input when searchable is true', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="cherry">Cherry</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-      expect(screen.getByTestId('search-icon')).toBeInTheDocument();
-    });
-
-    it('filters options based on search input', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchPlaceholder="Search fruits...">
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="cherry">Cherry</SelectItem>
-            <SelectItem value="orange">Orange</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      // Wait for the select to open and search input to appear
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-
-      fireEvent.input(searchInput, { target: { value: 'app' } });
-
-      // Wait for debounced search
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('app');
-      });
-    });
-
-    it('supports different search strategies', async () => {
-      // Test contains search strategy
-      const { rerender } = 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');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-
-    it('supports fuzzy search strategy', async () => {
-      // Test fuzzy search strategy in a separate test
-      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>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'bnn' } }); // Fuzzy match for banana
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('bnn');
-      });
-    });
-
-    it('shows no results message when no matches found', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable noResultsText="No fruits found">
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'xyz' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('xyz');
-      });
-    });
-
-    it('supports case sensitive search', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable caseSensitive>
-            <SelectItem value="Apple">Apple</SelectItem>
-            <SelectItem value="apple">apple</SelectItem>
-            <SelectItem value="BANANA">BANANA</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-
-    it('calls onSearchChange callback', async () => {
-      const onSearchChange = vi.fn();
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable 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');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'test' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('test');
-      });
-    });
-
-    it('supports custom filter function', async () => {
-      const customFilter = vi.fn((options, searchTerm) => 
-        options.filter(option => option.label.includes(searchTerm.toUpperCase()))
-      );
-
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable filterFunction={customFilter}>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="cherry">Cherry</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-
-    it('supports clear search functionality', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable showClearButton>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'test' } });
-
-      // Wait for the clear button to appear
-      const clearButton = await waitFor(() => {
-        return screen.getByTestId('select-clear-search');
-      });
-
-      fireEvent.click(clearButton);
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('');
-      });
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    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 first
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      // Test / key to focus search
-      await user.keyboard('/');
-      
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('supports Ctrl+F to focus search', 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 first
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      // Test Ctrl+F to focus search
-      await user.keyboard('{Control>}f{/Control}');
-      
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('supports Escape to clear search', 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');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'test' } });
-      searchInput.focus();
-      await user.keyboard('{Escape}');
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('');
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('provides proper ARIA attributes', () => {
-      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');
-      expect(trigger).toBeInTheDocument();
-    });
-
-    it('announces search results to screen readers', 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');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-
-    it('provides proper labels 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');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-  });
-
-  describe('Grouped Options', () => {
-    it('renders grouped options correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Fruits</SelectLabel>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-            </SelectGroup>
-            <SelectSeparator />
-            <SelectGroup>
-              <SelectLabel>Vegetables</SelectLabel>
-              <SelectItem value="carrot">Carrot</SelectItem>
-              <SelectItem value="lettuce">Lettuce</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      expect(screen.getAllByTestId('select-label')).toHaveLength(2);
-      expect(screen.getAllByTestId('select-group')).toHaveLength(2);
-      expect(screen.getAllByTestId('select-item')).toHaveLength(4);
-      expect(screen.getByTestId('select-separator')).toBeInTheDocument();
-    });
-
-    it('filters grouped options correctly', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectGroup>
-              <SelectLabel>Fruits</SelectLabel>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-            </SelectGroup>
-            <SelectSeparator />
-            <SelectGroup>
-              <SelectLabel>Vegetables</SelectLabel>
-              <SelectItem value="carrot">Carrot</SelectItem>
-              <SelectItem value="lettuce">Lettuce</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-  });
-
-  describe('Performance and Edge Cases', () => {
-    it('handles large option sets 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={100}>
-              {manyOptions}
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('handles empty children gracefully', () => {
-      expect(() => {
-        renderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent>
-              {/* Empty content */}
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('handles null and undefined values', () => {
-      expect(() => {
-        renderWithProviders(
-          <Select value={null as any}>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }).not.toThrow();
-    });
-
-    it('handles rapid search input changes', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable debounceMs={50}>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      
-      // Rapidly type and clear
-      fireEvent.input(searchInput, { target: { value: 'a' } });
-      fireEvent.input(searchInput, { target: { value: '' } });
-      fireEvent.input(searchInput, { target: { value: 'b' } });
-      fireEvent.input(searchInput, { target: { value: '' } });
-      fireEvent.input(searchInput, { target: { value: 'c' } });
-
-      // Should not throw errors
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('handles custom max height', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable maxHeight="10rem">
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const content = screen.getByTestId('select-content');
-      expect(content).toBeInTheDocument();
-    });
-  });
-
-  describe('Search Highlighting', () => {
-    it('highlights matching text in search results', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable highlightMatches>
-            <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');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-
-    it('disables highlighting when highlightMatches is false', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable highlightMatches={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');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-  });
-
-  describe('Search Field Configuration', () => {
-    it('searches in label field by default', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="fruit1">Apple</SelectItem>
-            <SelectItem value="fruit2">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'Apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('Apple');
-      });
-    });
-
-    it('searches in value field when configured', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable searchFields={['value']}>
-            <SelectItem value="apple">Red Fruit</SelectItem>
-            <SelectItem value="banana">Yellow Fruit</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      fireEvent.click(trigger);
-
-      const searchInput = await waitFor(() => {
-        return screen.getByTestId('select-search-input');
-      });
-      fireEvent.input(searchInput, { target: { value: 'apple' } });
-
-      await waitFor(() => {
-        expect(searchInput).toHaveValue('apple');
-      });
-    });
-  });
-});