@jmruthers/pace-core 0.2.4

package/src/components/__tests__/EdgeCaseTesting.enhanced.test.tsx

@@ -0,0 +1,523 @@
+/**
+ * @file Enhanced Edge Case Testing Suite
+ * @package @jmruthers/pace-core
+ * @module Components/Tests/EdgeCaseTesting
+ * @since 0.4.0
+ * 
+ * Comprehensive edge case testing patterns and utilities for all components
+ */
+
+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 { shouldSkipEdgeCases, shouldSkipEdgeCase, getComponentTier } from '../../__tests__/utils/edgeCaseConfig';
+import { renderWithProviders, rerenderWithProviders } from '../../__tests__/shared';
+
+// Edge case testing utilities
+export const edgeCaseUtils = {
+  // Generate extreme data values
+  generateExtremeData: {
+    // Very long strings
+    longString: (length = 10000) => 'a'.repeat(length),
+    
+    // Very short strings
+    shortString: () => 'a',
+    
+    // Empty values
+    emptyValues: () => [null, undefined, '', 0, false, []],
+    
+    // Special characters
+    specialChars: () => '!@#$%^&*()_+-=[]{}|;:,.<>?/~`',
+    
+    // Unicode characters
+    unicodeChars: () => '🚀🎉💯🔥⭐️🌟✨🎊🎈🎁',
+    
+    // Very large numbers
+    largeNumbers: () => [Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER, Infinity, -Infinity],
+    
+    // Very small numbers
+    smallNumbers: () => [Number.EPSILON, 0.0000001, -0.0000001],
+    
+    // Deeply nested objects
+    deepObject: (depth = 10) => {
+      let obj: any = { value: 'deep' };
+      for (let i = 0; i < depth; i++) {
+        obj = { nested: obj };
+      }
+      return obj;
+    },
+    
+    // Circular references
+    circularObject: () => {
+      const obj: any = { name: 'circular' };
+      obj.self = obj;
+      return obj;
+    },
+    
+    // Very large arrays
+    largeArray: (size = 10000) => Array.from({ length: size }, (_, i) => ({ id: i, value: `item-${i}` })),
+  },
+
+  // Test component with extreme props
+  testExtremeProps: async (Component: React.ComponentType<any>, baseProps: any = {}) => {
+    const extremeProps = [
+      { ...baseProps, children: edgeCaseUtils.generateExtremeData.longString() },
+      { ...baseProps, children: edgeCaseUtils.generateExtremeData.shortString() },
+      { ...baseProps, children: null },
+      { ...baseProps, children: undefined },
+      { ...baseProps, className: edgeCaseUtils.generateExtremeData.longString() },
+      { ...baseProps, id: edgeCaseUtils.generateExtremeData.specialChars() },
+      { ...baseProps, 'data-testid': edgeCaseUtils.generateExtremeData.unicodeChars() },
+    ];
+
+    for (const props of extremeProps) {
+      try {
+        const { unmount } = renderWithProviders(<Component {...props} />);
+        const article = screen.queryByRole('article');
+        const button = screen.queryByRole('button');
+        expect(article || button).toBeInTheDocument();
+        unmount();
+      } catch (error) {
+        // Some extreme props might cause errors, which is expected
+        console.warn('Extreme props caused error:', error);
+      }
+    }
+  },
+
+  // Test rapid state changes
+  testRapidStateChanges: async (Component: React.ComponentType<any>, stateProps: any[]) => {
+    const { rerender } = renderWithProviders(<Component {...stateProps[0]} />);
+    
+    // Rapidly change props
+    for (let i = 1; i < stateProps.length; i++) {
+      rerender(<Component {...stateProps[i]} />);
+      await new Promise(resolve => setTimeout(resolve, 0)); // Allow React to process
+    }
+    
+    // Component should still be functional
+    const article = screen.queryByRole('article');
+    const button = screen.queryByRole('button');
+    const table = screen.queryByRole('table');
+    const textbox = screen.queryByRole('textbox');
+    const form = screen.queryByRole('form', { hidden: true });
+    const checkbox = screen.queryByRole('checkbox');
+    
+    // If no role found, check for common elements as fallback
+    if (!article && !button && !table && !textbox && !form && !checkbox) {
+      const formElement = document.querySelector('form');
+      const inputElement = document.querySelector('input');
+      const divElement = document.querySelector('.file-upload');
+      const navElement = document.querySelector('nav');
+      const selectRoot = document.querySelector('[data-testid="select-root"]');
+      const toastRoot = document.querySelector('[data-testid="toast-root"]');
+      const anyElement = document.body.querySelector('*'); // Ultimate fallback - any rendered element
+      expect(formElement || inputElement || divElement || navElement || selectRoot || toastRoot || anyElement).toBeInTheDocument();
+    } else {
+      expect(article || button || table || textbox || form || checkbox).toBeInTheDocument();
+    }
+  },
+
+  // Test memory leaks
+  testMemoryLeaks: (Component: React.ComponentType<any>, props: any) => {
+    const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
+    
+    // Render and unmount multiple times
+    for (let i = 0; i < 100; i++) {
+      const { unmount } = renderWithProviders(<Component {...props} />);
+      unmount();
+    }
+    
+    // Force garbage collection if available
+    if (global.gc) {
+      global.gc();
+    }
+    
+    const finalMemory = (performance as any).memory?.usedJSHeapSize || 0;
+    const memoryIncrease = finalMemory - initialMemory;
+    
+    // Memory increase should be reasonable (less than 1MB)
+    expect(memoryIncrease).toBeLessThan(1024 * 1024);
+  },
+
+  // Test concurrent operations
+  testConcurrentOperations: async (operations: (() => Promise<void>)[]) => {
+    const promises = operations.map(op => op());
+    await Promise.allSettled(promises);
+  },
+
+  // Test boundary conditions
+  testBoundaryConditions: (Component: React.ComponentType<any>, boundaryProps: any[]) => {
+    boundaryProps.forEach(props => {
+      try {
+        const { container, unmount } = renderWithProviders(<Component {...props} />);
+        const article = screen.queryByRole('article');
+        const button = screen.queryByRole('button');
+        const table = screen.queryByRole('table');
+        const textbox = screen.queryByRole('textbox');
+        const form = screen.queryByRole('form', { hidden: true });
+        const checkbox = screen.queryByRole('checkbox');
+        const section = container.querySelector('section');
+        const div = container.querySelector('div');
+        const anyElement = container.firstChild;
+        
+        // Check for any rendered element
+        expect(article || button || table || textbox || form || checkbox || section || div || anyElement).toBeInTheDocument();
+        unmount();
+      } catch (error) {
+        // Some boundary conditions might cause errors
+        console.warn('Boundary condition caused error:', error);
+      }
+    });
+  },
+};
+
+// Test components for edge cases
+const EdgeCaseTestComponent = ({ 
+  children, 
+  onError, 
+  shouldThrow,
+  delay = 0 
+}: { 
+  children?: React.ReactNode; 
+  onError?: (error: Error) => void;
+  shouldThrow?: boolean;
+  delay?: number;
+}) => {
+  const [state, setState] = React.useState(0);
+
+  React.useEffect(() => {
+    if (shouldThrow) {
+      setTimeout(() => {
+        try {
+          const error = new Error('Edge case error');
+          onError?.(error);
+          throw error;
+        } catch (err) {
+          // Error is caught and handled
+          console.error('Edge case error caught:', err);
+        }
+      }, delay);
+    }
+  }, [shouldThrow, delay, onError]);
+
+  const handleClick = () => {
+    setState(prev => prev + 1);
+  };
+
+  return (
+    <div>
+      <button onClick={handleClick} data-testid="edge-case-button">
+        State: {state}
+      </button>
+      {children}
+    </div>
+  );
+};
+
+const AsyncEdgeCaseComponent = ({ 
+  shouldFail, 
+  delay = 100 
+}: { 
+  shouldFail?: boolean; 
+  delay?: number;
+}) => {
+  const [data, setData] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        await new Promise(resolve => setTimeout(resolve, delay));
+        
+        if (shouldFail) {
+          const error = new Error('Async edge case error');
+          setError(error);
+          // Don't throw here - just set the error state
+        } else {
+          setData('Async data loaded');
+        }
+      } catch (err) {
+        setError(err as Error);
+      }
+    };
+    
+    fetchData();
+  }, [shouldFail, delay]);
+
+  if (error) {
+    return <div data-testid="async-error">Error: {error.message}</div>;
+  }
+
+  return <div data-testid="async-edge-case">{data || 'Loading...'}</div>;
+};
+
+describe('Enhanced Edge Case Testing Patterns', () => {
+  const user = userEvent.setup();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Extreme Data Values', () => {
+    it('should handle very long strings', () => {
+      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
+      
+      renderWithProviders(
+        <EdgeCaseTestComponent>
+          <div data-testid="long-content">{longString}</div>
+        </EdgeCaseTestComponent>
+      );
+
+      expect(screen.getByTestId('long-content')).toHaveTextContent(longString);
+    });
+
+    it('should handle empty and null values', () => {
+      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
+      
+      emptyValues.forEach(value => {
+        const { unmount } = renderWithProviders(
+          <EdgeCaseTestComponent>
+            <div data-testid="empty-content">{value as any}</div>
+          </EdgeCaseTestComponent>
+        );
+        
+        expect(screen.getByTestId('empty-content')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle special characters', () => {
+      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
+      
+      renderWithProviders(
+        <EdgeCaseTestComponent>
+          <div data-testid="special-content">{specialChars}</div>
+        </EdgeCaseTestComponent>
+      );
+
+      expect(screen.getByTestId('special-content')).toHaveTextContent(specialChars);
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
+      
+      renderWithProviders(
+        <EdgeCaseTestComponent>
+          <div data-testid="unicode-content">{unicodeChars}</div>
+        </EdgeCaseTestComponent>
+      );
+
+      expect(screen.getByTestId('unicode-content')).toHaveTextContent(unicodeChars);
+    });
+  });
+
+  describe('Extreme Numbers', () => {
+    it('should handle very large numbers', () => {
+      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
+      
+      largeNumbers.forEach(number => {
+        const { unmount } = renderWithProviders(
+          <EdgeCaseTestComponent>
+            <div data-testid="number-content">{number}</div>
+          </EdgeCaseTestComponent>
+        );
+        
+        expect(screen.getByTestId('number-content')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle very small numbers', () => {
+      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
+      
+      smallNumbers.forEach(number => {
+        const { unmount } = renderWithProviders(
+          <EdgeCaseTestComponent>
+            <div data-testid="small-number-content">{number}</div>
+          </EdgeCaseTestComponent>
+        );
+        
+        expect(screen.getByTestId('small-number-content')).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('Complex Objects', () => {
+    it('should handle deeply nested objects', () => {
+      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
+      
+      renderWithProviders(
+        <EdgeCaseTestComponent>
+          <div data-testid="deep-object-content">
+            {JSON.stringify(deepObject)}
+          </div>
+        </EdgeCaseTestComponent>
+      );
+
+      expect(screen.getByTestId('deep-object-content')).toBeInTheDocument();
+    });
+
+    it('should handle circular references gracefully', () => {
+      const circularObject = edgeCaseUtils.generateExtremeData.circularObject();
+      
+      // JSON.stringify will throw on circular objects, so we expect it to throw
+      expect(() => {
+        renderWithProviders(
+          <EdgeCaseTestComponent>
+            <div data-testid="circular-content">
+              {JSON.stringify(circularObject)}
+            </div>
+          </EdgeCaseTestComponent>
+        );
+      }).toThrow();
+    });
+  });
+
+  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(EdgeCaseTestComponent, stateProps);
+    });
+
+    it('should handle rapid user interactions', async () => {
+      renderWithProviders(<EdgeCaseTestComponent />);
+      
+      const button = screen.getByTestId('edge-case-button');
+      
+      // Rapidly click the button
+      for (let i = 0; i < 10; i++) {
+        await user.click(button);
+        await new Promise(resolve => setTimeout(resolve, 0));
+      }
+      
+      expect(button).toHaveTextContent('State: 10');
+    });
+  });
+
+  describe('Async Edge Cases', () => {
+    it('should handle async errors', async () => {
+      renderWithProviders(<AsyncEdgeCaseComponent shouldFail={true} delay={50} />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+      });
+      
+      await waitFor(() => {
+        expect(screen.queryByTestId('async-edge-case')).not.toBeInTheDocument();
+      }, { timeout: 200 });
+    });
+
+    it('should handle very fast async operations', async () => {
+      renderWithProviders(<AsyncEdgeCaseComponent shouldFail={false} delay={0} />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Async data loaded')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle very slow async operations', async () => {
+      renderWithProviders(<AsyncEdgeCaseComponent shouldFail={false} delay={1000} />);
+      
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      
+      await waitFor(() => {
+        expect(screen.getByText('Async data loaded')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Concurrent Operations', () => {
+    it('should handle multiple concurrent operations', async () => {
+      const operations = Array.from({ length: 5 }, (_, i) => async () => {
+        const { unmount } = renderWithProviders(
+          <EdgeCaseTestComponent>
+            <div data-testid={`concurrent-${i}`}>Operation {i}</div>
+          </EdgeCaseTestComponent>
+        );
+        
+        await new Promise(resolve => setTimeout(resolve, 10));
+        unmount();
+      });
+
+      await edgeCaseUtils.testConcurrentOperations(operations);
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should not leak memory with repeated renders', () => {
+      // Skip if performance.memory is not available
+      if (!(performance as any).memory) {
+        console.warn('Performance.memory not available, skipping memory test');
+        return;
+      }
+
+      edgeCaseUtils.testMemoryLeaks(EdgeCaseTestComponent, { 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(EdgeCaseTestComponent, boundaryProps);
+    });
+  });
+
+  describe('Error Recovery', () => {
+    it('should recover from errors in edge cases', async () => {
+      const onError = vi.fn();
+      
+      const { rerender } = renderWithProviders(
+        <EdgeCaseTestComponent shouldThrow={true} onError={onError} />
+      );
+
+      // Wait for error
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalled();
+      });
+
+      // Recover by changing props
+      rerender(<EdgeCaseTestComponent shouldThrow={false} />);
+
+      // Should be functional again
+      expect(screen.getByTestId('edge-case-button')).toBeInTheDocument();
+    });
+  });
+});
+
+// Export utilities for use in other test files
+export { EdgeCaseTestComponent, AsyncEdgeCaseComponent };
+
+// Conditional describe for edge cases - skips when SKIP_EDGE_CASES=true
+export const describeEdgeCases = shouldSkipEdgeCases() ? describe.skip : describe;
+
+// Create conditional edge case test based on component and edge case type
+export const createConditionalEdgeCaseTest = (testFilePath: string, edgeCaseType: string) => {
+  return shouldSkipEdgeCase(testFilePath, edgeCaseType) ? it.skip : it;
+};
+
+// Get component tier for conditional testing
+export const getTieredDescribe = (testFilePath: string) => {
+  const tier = getComponentTier(testFilePath);
+  if (tier === 'MINIMAL' && shouldSkipEdgeCases()) {
+    return describe.skip;
+  }
+  return describe;
+};