@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,695 +0,0 @@
-/**
- * @file Select Component Performance Tests
- * @package @jmruthers/pace-core
- * @module Components/Select/Select.performance
- * @since 0.1.0
- * 
- * Performance tests for the Select component covering rendering performance,
- * search performance, memory usage, and optimization features.
- */
-
-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, rerenderWithProviders } from '../../../__tests__/shared';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../Select';
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  Search: () => <div data-testid="search-icon">🔍</div>,
-  X: () => <div data-testid="clear-icon">✕</div>,
-  ChevronDown: () => <div data-testid="chevron-down-icon">▼</div>,
-  Check: () => <div data-testid="check-icon">✓</div>,
-}));
-
-// Mock Radix UI Select to avoid jsdom compatibility issues
-vi.mock('@radix-ui/react-select', async () => {
-  const actual = await vi.importActual('@radix-ui/react-select');
-  return {
-    ...actual,
-    Root: ({ children, onValueChange, value, defaultValue, ...props }: any) => (
-      <div data-testid="select-root" data-value={value || defaultValue} {...props}>
-        {children}
-      </div>
-    ),
-    Trigger: React.forwardRef(({ children, disabled, ...props }: any, ref) => (
-      <button
-        ref={ref}
-        data-testid="select-trigger"
-        disabled={disabled}
-        onClick={() => {
-          // Simulate opening the dropdown
-          const event = new CustomEvent('select-open');
-          document.dispatchEvent(event);
-        }}
-        {...props}
-      >
-        {children}
-      </button>
-    )),
-    Content: ({ children, searchable, ...props }: any) => (
-      <div data-testid="select-content" data-searchable={searchable} {...props}>
-        {searchable && (
-          <div data-testid="search-container">
-            <div data-testid="search-icon">🔍</div>
-            <input
-              data-testid="select-search-input"
-              type="text"
-              placeholder="Search..."
-              aria-label="Search options"
-            />
-            <button data-testid="select-clear-search" aria-label="Clear search">
-              ✕
-            </button>
-          </div>
-        )}
-        <div data-testid="select-viewport">
-          {children}
-        </div>
-      </div>
-    ),
-    Viewport: ({ children, ...props }: any) => (
-      <div data-testid="select-viewport" {...props}>
-        {children}
-      </div>
-    ),
-    Item: ({ children, value, disabled, ...props }: any) => (
-      <div
-        data-testid="select-item"
-        data-value={value}
-        aria-disabled={disabled}
-        onClick={() => {
-          if (!disabled) {
-            // Simulate value change
-            const event = new CustomEvent('select-value-change', { detail: value });
-            document.dispatchEvent(event);
-          }
-        }}
-        {...props}
-      >
-        {children}
-      </div>
-    ),
-    ItemText: ({ children, ...props }: any) => (
-      <span data-testid="select-item-text" {...props}>
-        {children}
-      </span>
-    ),
-    ItemIndicator: ({ children, ...props }: any) => (
-      <span data-testid="select-item-indicator" {...props}>
-        {children}
-      </span>
-    ),
-    Value: ({ children, placeholder, ...props }: any) => (
-      <span data-testid="select-value" placeholder={placeholder} {...props}>
-        {children}
-      </span>
-    ),
-    Icon: ({ children, ...props }: any) => (
-      <span data-testid="select-icon" {...props}>
-        {children}
-      </span>
-    ),
-    Portal: ({ children, ...props }: any) => (
-      <div data-testid="select-portal" {...props}>
-        {children}
-      </div>
-    ),
-  };
-});
-
-const user = userEvent.setup();
-
-describe('Select Component - Performance Tests', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllTimers();
-  });
-
-  describe('Rendering Performance', () => {
-    it('renders large option sets efficiently', () => {
-      const startTime = performance.now();
-      
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            {Array.from({ length: 1000 }, (_, i) => (
-              <SelectItem key={i} value={`option-${i}`}>
-                Option {i + 1}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      );
-
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-
-      // Should render large datasets efficiently
-      expect(renderTime).toBeLessThan(1500); // 1.5 seconds - adjusted for test environment
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('handles rapid re-renders efficiently', () => {
-      const { rerender } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const startTime = performance.now();
-      
-      // Perform multiple re-renders
-      for (let i = 0; i < 10; i++) {
-        rerenderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={`option${i}`}>Option {i}</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }
-
-      const endTime = performance.now();
-      const reRenderTime = endTime - startTime;
-
-      // Should handle re-renders efficiently
-      expect(reRenderTime).toBeLessThan(500); // 500ms
-    });
-
-    it('memoizes option parsing correctly', () => {
-      const options = Array.from({ length: 100 }, (_, i) => ({
-        value: `option-${i}`,
-        label: `Option ${i + 1}`,
-      }));
-
-      const startTime = performance.now();
-      
-      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>
-      );
-
-      const endTime = performance.now();
-      const parseTime = endTime - startTime;
-
-      // Should parse options efficiently
-      expect(parseTime).toBeLessThan(200); // 200ms (adjusted for test environment)
-    });
-  });
-
-  describe('Basic Search Functionality', () => {
-    it('renders search input when searchable is true', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-
-    it('does not render search input when searchable is false', () => {
-      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.queryByTestId('select-search-input')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Memory Usage', () => {
-    it('prevents memory leaks in basic functionality', () => {
-      const { unmount } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="test">Test Option</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Should render without errors
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-
-      unmount();
-    });
-
-    it('cleans up event listeners properly', () => {
-      const { unmount } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="test">Test Option</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Should render without errors
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-
-      unmount();
-    });
-  });
-
-  describe('Optimization Features', () => {
-    it('uses memoization for expensive operations', () => {
-      const startTime = performance.now();
-      
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            {Array.from({ length: 10 }, (_, i) => (
-              <SelectItem key={i} value={`option-${i}`}>
-                Option {i + 1}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      );
-
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-
-      // Should render efficiently
-      expect(renderTime).toBeLessThan(1000); // 1 second
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('handles performance optimization props', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent 
-            searchable 
-            debounceMs={100}
-          >
-            {Array.from({ length: 10 }, (_, i) => (
-              <SelectItem key={i} value={`option-${i}`}>
-                Option {i + 1}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
-    });
-  });
-
-  describe('Rendering Optimization', () => {
-    it('handles virtual scrolling for large datasets', () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            {Array.from({ length: 1000 }, (_, i) => (
-              <SelectItem key={i} value={`option-${i}`}>
-                Option {i + 1}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      );
-
-      // Should render without errors
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('optimizes re-renders with React.memo', () => {
-      const { rerender } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const startTime = performance.now();
-      
-      // Re-render with same props
-      rerenderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const endTime = performance.now();
-      const reRenderTime = endTime - startTime;
-
-      // Should re-render efficiently
-      expect(reRenderTime).toBeLessThan(100); // 100ms
-    });
-  });
-
-  describe('Memory Optimization', () => {
-    it('prevents excessive re-renders', () => {
-      const { rerender } = renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const startTime = performance.now();
-      
-      // Perform multiple re-renders
-      for (let i = 0; i < 5; i++) {
-        rerenderWithProviders(
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      }
-
-      const endTime = performance.now();
-      const totalTime = endTime - startTime;
-
-      // Should handle multiple re-renders efficiently
-      expect(totalTime).toBeLessThan(500); // 500ms
-    });
-  });
-
-  describe('Performance Monitoring', () => {
-    it('monitors memory usage during operations', () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            {Array.from({ length: 10 }, (_, i) => (
-              <SelectItem key={i} value={`option-${i}`}>
-                Option {i + 1}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      );
-
-      // Should render without memory issues
-      expect(screen.getByTestId('select-trigger')).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();
-    });
-  });
-});
-});