@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,772 @@
+import React from 'react';
+import { screen, waitFor } 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 { renderWithProviders, rerenderWithProviders } from '../../../__tests__/shared';
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from '../Select';
+import '@testing-library/jest-dom';
+
+// --- CONTEXT-BASED MOCK FOR RADIX SELECT (like in unit test) ---
+const SelectValueChangeContext = React.createContext<((value: string) => void) | undefined>(undefined);
+
+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}>
+        <SelectValueChangeContext.Provider value={onValueChange}>
+          {children}
+        </SelectValueChangeContext.Provider>
+      </div>
+    ),
+    Trigger: React.forwardRef(({ children, disabled, ...props }: any, ref) => (
+      <button
+        ref={ref}
+        data-testid="select-trigger"
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </button>
+    )),
+    Content: ({ children, ...props }: any) => (
+      <div data-testid="select-content" {...props}>
+        {children}
+      </div>
+    ),
+    Viewport: ({ children, ...props }: any) => (
+      <div data-testid="select-viewport" {...props}>
+        {children}
+      </div>
+    ),
+    Group: ({ children, ...props }: any) => (
+      <div data-testid="select-group" {...props}>
+        {children}
+      </div>
+    ),
+    Label: ({ children, ...props }: any) => (
+      <div data-testid="select-label" {...props}>
+        {children}
+      </div>
+    ),
+    Item: ({ children, value, disabled, ...props }: any) => {
+      const onValueChange = React.useContext(SelectValueChangeContext);
+      const handleClick = React.useCallback(() => {
+        if (!disabled && onValueChange) {
+          onValueChange(value);
+        }
+      }, [disabled, onValueChange, value]);
+      
+      return (
+        <div
+          data-testid="select-item"
+          data-value={value}
+          aria-disabled={disabled}
+          onClick={handleClick}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    },
+    Separator: (props: any) => <div data-testid="select-separator" {...props} />,
+    Value: React.forwardRef(({ children, ...props }: any, ref) => (
+      <span ref={ref} data-testid="select-value" {...props}>
+        {children}
+      </span>
+    )),
+    Icon: React.forwardRef(({ children, ...props }: any, ref) => (
+      <span ref={ref} data-testid="select-icon" {...props}>
+        {children}
+      </span>
+    )),
+    ItemIndicator: React.forwardRef(({ children, ...props }: any, ref) => (
+      <span ref={ref} data-testid="select-item-indicator" {...props}>
+        {children}
+      </span>
+    )),
+    ItemText: React.forwardRef(({ children, ...props }: any, ref) => (
+      <span ref={ref} data-testid="select-item-text" {...props}>
+        {children}
+      </span>
+    )),
+  };
+});
+
+const user = userEvent.setup();
+
+describe('Select Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Component Integration', () => {
+    it('renders complete select with all sub-components', async () => {
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectLabel>Options</SelectLabel>
+            <SelectGroup>
+              <SelectItem value="option1">Option 1</SelectItem>
+              <SelectItem value="option2">Option 2</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+      
+      // Click trigger to open the select
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+      expect(screen.getByTestId('select-label')).toHaveTextContent('Options');
+      expect(screen.getAllByTestId('select-item')).toHaveLength(3);
+      expect(screen.getByTestId('select-separator')).toBeInTheDocument();
+    });
+
+    it('handles multiple select groups', async () => {
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectGroup>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectLabel>Vegetables</SelectLabel>
+            <SelectGroup>
+              <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');
+      await user.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();
+    });
+  });
+
+  describe('Value Management', () => {
+    it('handles basic value selection', async () => {
+      const onValueChange = vi.fn();
+      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');
+      await user.click(trigger);
+
+      const options = screen.getAllByTestId('select-item');
+      const option1 = options.find(option => option.getAttribute('data-value') === 'option1');
+      await user.click(option1!);
+
+      expect(onValueChange).toHaveBeenCalledWith('option1');
+    });
+
+    it('handles 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>
+      );
+
+      const select = screen.getByTestId('select-root');
+      expect(select).toHaveAttribute('data-value', 'option2');
+    });
+
+    it('handles 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>
+      );
+
+      const select = screen.getByTestId('select-root');
+      expect(select).toHaveAttribute('data-value', 'option1');
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('handles mouse interactions', async () => {
+      const onValueChange = vi.fn();
+      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');
+      await user.click(trigger);
+
+      const options = screen.getAllByTestId('select-item');
+      const option2 = options.find(option => option.getAttribute('data-value') === 'option2');
+      await user.click(option2!);
+
+      expect(onValueChange).toHaveBeenCalledWith('option2');
+    });
+
+    it('handles keyboard interactions', async () => {
+      const onValueChange = vi.fn();
+      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');
+      
+      // Focus the trigger
+      trigger.focus();
+      expect(trigger).toHaveFocus();
+      
+      // Test that Space or Enter key can potentially open the select
+      // Note: With mocked components, we can only test that the trigger receives focus
+      // and that keyboard events don't cause errors
+      await user.keyboard('{Enter}');
+      await user.keyboard('{Space}');
+      await user.keyboard('{Escape}');
+      
+      // Test should pass if no errors are thrown during keyboard interactions
+      expect(trigger).toBeInTheDocument();
+    });
+
+    it('handles disabled state interactions', async () => {
+      renderWithProviders(
+        <Select disabled>
+          <SelectTrigger disabled>
+            <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).toBeDisabled();
+
+      // Note: In the real Radix Select, clicking a disabled trigger may still render content
+      // but the items should be non-interactive. This test focuses on the trigger being disabled.
+      await user.click(trigger);
+    });
+  });
+
+  describe('Complex Scenarios', () => {
+    it('handles multiple selects on same page', async () => {
+      const onValueChange1 = vi.fn();
+      const onValueChange2 = vi.fn();
+
+      renderWithProviders(
+        <div>
+          <Select onValueChange={onValueChange1}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select first option" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option1">Option 1</SelectItem>
+              <SelectItem value="option2">Option 2</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select onValueChange={onValueChange2}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select second option" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option3">Option 3</SelectItem>
+              <SelectItem value="option4">Option 4</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      );
+
+      const triggers = screen.getAllByTestId('select-trigger');
+
+      await user.click(triggers[0]);
+      const options1 = screen.getAllByTestId('select-item');
+      const option1 = options1.find(option => option.getAttribute('data-value') === 'option1');
+      await user.click(option1!);
+      expect(onValueChange1).toHaveBeenCalledWith('option1');
+
+      await user.click(triggers[1]);
+      const options2 = screen.getAllByTestId('select-item');
+      const option3 = options2.find(option => option.getAttribute('data-value') === 'option3');
+      await user.click(option3!);
+      expect(onValueChange2).toHaveBeenCalledWith('option3');
+    });
+
+    it('handles form integration', async () => {
+      const handleSubmit = vi.fn((e: React.FormEvent) => {
+        if (e && e.preventDefault) {
+          e.preventDefault();
+        }
+      });
+
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <Select name="select">
+            <SelectTrigger>
+              <SelectValue placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option1">Option 1</SelectItem>
+              <SelectItem value="option2">Option 2</SelectItem>
+            </SelectContent>
+          </Select>
+          <button type="submit">Submit</button>
+        </form>
+      );
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      await user.click(submitButton);
+
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles dynamic options', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ];
+
+      const { rerender } = renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+
+      // Click trigger to open the select
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getAllByTestId('select-item')).toHaveLength(3);
+
+      // Update options
+      const newOptions = [
+        { value: 'option4', label: 'Option 4' },
+        { value: 'option5', label: 'Option 5' },
+      ];
+
+      rerenderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            {newOptions.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+
+      // Open the select to render the new options
+      const newTriggers = screen.getAllByTestId('select-trigger');
+      const newTrigger = newTriggers[newTriggers.length - 1]; // Get the latest one
+      await user.click(newTrigger);
+
+      // Wait for the new options to be rendered
+      await waitFor(() => {
+        expect(screen.getAllByTestId('select-item')).toHaveLength(2);
+      });
+    });
+
+    it('handles country selection scenario', async () => {
+      const onCountryChange = vi.fn();
+      const countries = [
+        { code: 'US', name: 'United States' },
+        { code: 'CA', name: 'Canada' },
+        { code: 'UK', name: 'United Kingdom' },
+        { code: 'AU', name: 'Australia' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onCountryChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a country" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectLabel>Countries</SelectLabel>
+            <SelectGroup>
+              {countries.map((country) => (
+                <SelectItem key={country.code} value={country.code}>
+                  {country.name}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      const options = screen.getAllByTestId('select-item');
+      const canadaOption = options.find(option => option.getAttribute('data-value') === 'CA');
+      await user.click(canadaOption!);
+
+      expect(onCountryChange).toHaveBeenCalledWith('CA');
+    });
+
+    it('handles category selection with groups', async () => {
+      const onCategoryChange = vi.fn();
+      const categories = {
+        'Fruits': [
+          { value: 'apple', label: 'Apple' },
+          { value: 'banana', label: 'Banana' },
+          { value: 'orange', label: 'Orange' },
+        ],
+        'Vegetables': [
+          { value: 'carrot', label: 'Carrot' },
+          { value: 'lettuce', label: 'Lettuce' },
+          { value: 'tomato', label: 'Tomato' },
+        ],
+      };
+
+      renderWithProviders(
+        <Select onValueChange={onCategoryChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a category" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(categories).map(([groupName, items]) => (
+              <React.Fragment key={groupName}>
+                <SelectLabel>{groupName}</SelectLabel>
+                <SelectGroup>
+                  {items.map((item) => (
+                    <SelectItem key={item.value} value={item.value}>
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+                <SelectSeparator />
+              </React.Fragment>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      expect(screen.getAllByTestId('select-label')).toHaveLength(2);
+      expect(screen.getAllByTestId('select-item')).toHaveLength(6);
+      expect(screen.getAllByTestId('select-separator')).toHaveLength(2);
+
+      const options = screen.getAllByTestId('select-item');
+      const appleOption = options.find(option => option.getAttribute('data-value') === 'apple');
+      await user.click(appleOption!);
+
+      expect(onCategoryChange).toHaveBeenCalledWith('apple');
+    });
+
+    it('handles language selection with flags', async () => {
+      const onLanguageChange = vi.fn();
+      const languages = [
+        { code: 'en', name: 'English', flag: '🇺🇸' },
+        { code: 'es', name: 'Spanish', flag: '🇪🇸' },
+        { code: 'fr', name: 'French', flag: '🇫🇷' },
+        { code: 'de', name: 'German', flag: '🇩🇪' },
+      ];
+
+      renderWithProviders(
+        <Select onValueChange={onLanguageChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select language" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectLabel>Languages</SelectLabel>
+            <SelectGroup>
+              {languages.map((lang) => (
+                <SelectItem key={lang.code} value={lang.code}>
+                  <span>{lang.flag}</span>
+                  <span>{lang.name}</span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      const options = screen.getAllByTestId('select-item');
+      const spanishOption = options.find(option => option.getAttribute('data-value') === 'es');
+      await user.click(spanishOption!);
+
+      expect(onLanguageChange).toHaveBeenCalledWith('es');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles invalid value gracefully', () => {
+      renderWithProviders(
+        <Select value="invalid-value">
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+
+      const select = screen.getByTestId('select-root');
+      expect(select).toHaveAttribute('data-value', 'invalid-value');
+    });
+
+    it('handles empty options gracefully', async () => {
+      renderWithProviders(
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            {/* No options */}
+          </SelectContent>
+        </Select>
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      
+      // Click trigger to open the select
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('handles rapid value changes', async () => {
+      const onValueChange = vi.fn();
+      renderWithProviders(
+        <Select onValueChange={onValueChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      const options = screen.getAllByTestId('select-item');
+      
+      // Rapidly click different options
+      await user.click(options[0]);
+      
+      // Reopen select for next selection
+      await user.click(trigger);
+      const options2 = screen.getAllByTestId('select-item');
+      await user.click(options2[1]);
+      
+      // Reopen select for final selection
+      await user.click(trigger);
+      const options3 = screen.getAllByTestId('select-item');
+      await user.click(options3[2]);
+
+      // Each option should be called once
+      expect(onValueChange).toHaveBeenCalledTimes(3);
+      expect(onValueChange).toHaveBeenCalledWith('option1');
+      expect(onValueChange).toHaveBeenCalledWith('option2');
+      expect(onValueChange).toHaveBeenCalledWith('option3');
+    });
+  });
+
+
+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"]');
+      
+      // Select should render successfully
+      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();
+    });
+  });
+});
+});