@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -0,0 +1,752 @@
+/**
+ * @file ErrorBoundary Component Tests
+ * @description Comprehensive tests for ErrorBoundary component
+ * @package @jmruthers/pace-core
+ */
+
+import React from 'react';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ErrorBoundary } from './ErrorBoundary';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock the performance budget monitor
+vi.mock('../../utils/performanceBudgets', () => ({
+  performanceBudgetMonitor: {
+    measure: vi.fn()
+  }
+}));
+
+// Component that throws an error for testing
+const ThrowingComponent = ({ shouldThrow = true, errorMessage = 'Test error' }: { shouldThrow?: boolean; errorMessage?: string }) => {
+  if (shouldThrow) {
+    throw new Error(errorMessage);
+  }
+  return <div>No error</div>;
+};
+
+// Component that throws an error after a delay
+const DelayedErrorComponent = ({ delay = 100 }: { delay?: number }) => {
+  const [shouldThrow, setShouldThrow] = React.useState(false);
+  
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setShouldThrow(true);
+    }, delay);
+    
+    return () => clearTimeout(timer);
+  }, [delay]);
+  
+  if (shouldThrow) {
+    throw new Error('Delayed error');
+  }
+  
+  return <div>Loading...</div>;
+};
+
+// Component that recovers after retry
+const RecoverableComponent = ({ shouldThrow = true }: { shouldThrow?: boolean }) => {
+  const [hasThrown, setHasThrown] = React.useState(false);
+  const [retryCount, setRetryCount] = React.useState(0);
+  
+  React.useEffect(() => {
+    if (shouldThrow && !hasThrown && retryCount === 0) {
+      setHasThrown(true);
+      throw new Error('Recoverable error');
+    }
+  }, [shouldThrow, hasThrown, retryCount]);
+  
+  // Reset when retry count changes (simulating retry)
+  React.useEffect(() => {
+    if (retryCount > 0) {
+      setHasThrown(false);
+    }
+  }, [retryCount]);
+  
+  // Simulate retry by incrementing retry count
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setRetryCount(prev => prev + 1);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+  
+  return <div>Recovered successfully</div>;
+};
+
+describe('ErrorBoundary Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock console methods to avoid noise in tests
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+    vi.spyOn(console, 'log').mockImplementation(() => {});
+    // Mock window.location.reload
+    Object.defineProperty(window, 'location', {
+      value: {
+        reload: vi.fn()
+      },
+      writable: true
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Normal Rendering', () => {
+    it('renders children when no error occurs', () => {
+      renderWithProviders(
+        <ErrorBoundary>
+          <div>Normal content</div>
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByText('Normal content')).toBeInTheDocument();
+    });
+
+    it('renders multiple children when no error occurs', () => {
+      renderWithProviders(
+        <ErrorBoundary>
+          <div>First child</div>
+          <div>Second child</div>
+          <span>Third child</span>
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByText('First child')).toBeInTheDocument();
+      expect(screen.getByText('Second child')).toBeInTheDocument();
+      expect(screen.getByText('Third child')).toBeInTheDocument();
+    });
+
+    it('renders with custom component name', () => {
+      renderWithProviders(
+        <ErrorBoundary componentName="TestComponent">
+          <div>Test content</div>
+        </ErrorBoundary>
+      );
+      
+      expect(screen.getByText('Test content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Catching', () => {
+    it('catches errors and displays fallback UI', async () => {
+      // Suppress console.error for this test
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary componentName="TestComponent">
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error in TestComponent')).toBeInTheDocument();
+        expect(screen.getByText('Test error')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('displays default error message when no error message provided', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent errorMessage="" />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('An unexpected error occurred.')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('uses custom fallback UI when provided', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary 
+          componentName="TestComponent"
+          fallback={<div>Custom error message</div>}
+        >
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Custom error message')).toBeInTheDocument();
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('generates unique error ID for each error', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      const { rerender } = renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        const errorElement = screen.getByText('Error in Component').closest('[data-error-boundary]');
+        const firstErrorId = errorElement?.getAttribute('data-error-boundary');
+        expect(firstErrorId).toBeTruthy();
+      });
+      
+      // Trigger another error
+      rerender(
+        <ErrorBoundary>
+          <ThrowingComponent errorMessage="Second error" />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        const errorElement = screen.getByText('Error in Component').closest('[data-error-boundary]');
+        const secondErrorId = errorElement?.getAttribute('data-error-boundary');
+        expect(secondErrorId).toBeTruthy();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Retry Functionality', () => {
+    it('shows retry button when retry is enabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true} maxRetries={3}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Retry (1/3)')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('hides retry button when retry is disabled', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={false}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.queryByText(/retry/i)).not.toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('increments retry count on retry button click', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true} maxRetries={3}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Retry (1/3)')).toBeInTheDocument();
+      });
+      
+      const retryButton = screen.getByText('Retry (1/3)');
+      fireEvent.click(retryButton);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Retry (2/3)')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('shows max retries message when retry limit is reached', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true} maxRetries={2}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      // Click retry twice to reach max retries
+      await waitFor(() => {
+        expect(screen.getByText('Retry (1/2)')).toBeInTheDocument();
+      });
+      
+      const firstRetryButton = screen.getByText('Retry (1/2)');
+      fireEvent.click(firstRetryButton);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Retry (2/2)')).toBeInTheDocument();
+      });
+      
+      const secondRetryButton = screen.getByText('Retry (2/2)');
+      fireEvent.click(secondRetryButton);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Maximum retry attempts reached. Please reload the page or contact support.')).toBeInTheDocument();
+        expect(screen.queryByText(/Retry \(/)).not.toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('resets error state on retry button click', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      // Wait for error to be caught
+      await waitFor(() => {
+        expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      });
+      
+      // Click retry - this should reset the error state
+      const retryButton = screen.getByText(/retry/i);
+      fireEvent.click(retryButton);
+      
+      // Should show retry count increased
+      await waitFor(() => {
+        expect(screen.getByText('Retry (2/3)')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Error Reporting', () => {
+    it('calls onError callback when error occurs', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const onError = vi.fn();
+      
+      renderWithProviders(
+        <ErrorBoundary onError={onError}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledTimes(1);
+        expect(onError).toHaveBeenCalledWith(
+          expect.any(Error),
+          expect.any(Object), // errorInfo
+          expect.any(String)  // errorId
+        );
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('calls performance monitor when error occurs', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const { performanceBudgetMonitor } = await import('../../utils/performanceBudgets');
+      
+      renderWithProviders(
+        <ErrorBoundary componentName="TestComponent">
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(performanceBudgetMonitor.measure).toHaveBeenCalledWith(
+          'ERROR_BOUNDARY_TRIGGER',
+          1,
+          expect.objectContaining({
+            componentName: 'TestComponent',
+            errorId: expect.any(String),
+            errorMessage: 'Test error'
+          })
+        );
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('logs error with component name and error ID', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary componentName="TestComponent">
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          expect.stringContaining('ErrorBoundary [TestComponent] caught error'),
+          expect.any(Error),
+          expect.any(Object)
+        );
+      });
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA role for error announcements', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        const errorElement = screen.getByText('Error in Component').closest('[role="alert"]');
+        expect(errorElement).toBeInTheDocument();
+        expect(errorElement).toHaveAttribute('role', 'alert');
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('has accessible retry button', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        const retryButton = screen.getByText(/retry/i);
+        expect(retryButton).toBeInTheDocument();
+        expect(retryButton.tagName).toBe('BUTTON');
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('has accessible reload button', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        const reloadButton = screen.getByText('Reload Page');
+        expect(reloadButton).toBeInTheDocument();
+        expect(reloadButton.tagName).toBe('BUTTON');
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('has proper heading structure for screen readers', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary componentName="TestComponent">
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        const heading = screen.getByText('Error in TestComponent');
+        expect(heading).toBeInTheDocument();
+        expect(heading.tagName).toBe('H3');
+      });
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Development vs Production', () => {
+    it('shows error details in development mode', async () => {
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development';
+      
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error Details (Development)')).toBeInTheDocument();
+        expect(screen.getByText(/Error ID:/)).toBeInTheDocument();
+      });
+      
+      process.env.NODE_ENV = originalEnv;
+      consoleSpy.mockRestore();
+    });
+
+    it('hides error details in production mode', async () => {
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+      
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.queryByText('Error Details (Development)')).not.toBeInTheDocument();
+        expect(screen.queryByText(/Error ID:/)).not.toBeInTheDocument();
+      });
+      
+      process.env.NODE_ENV = originalEnv;
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Button Interactions', () => {
+    it('calls window.location.reload when reload button is clicked', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Reload Page')).toBeInTheDocument();
+      });
+      
+      fireEvent.click(screen.getByText('Reload Page'));
+      
+      expect(window.location.reload).toHaveBeenCalledTimes(1);
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('calls window.location.reload when max retries reload button is clicked', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary enableRetry={true} maxRetries={1}>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      // Click retry to reach max retries
+      await waitFor(() => {
+        expect(screen.getByText('Retry (1/1)')).toBeInTheDocument();
+      });
+      
+      fireEvent.click(screen.getByText(/retry/i));
+      
+      await waitFor(() => {
+        expect(screen.getByText(/Maximum retry attempts reached/)).toBeInTheDocument();
+      });
+      
+      fireEvent.click(screen.getByText('Reload Page'));
+      
+      expect(window.location.reload).toHaveBeenCalledTimes(1);
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Error Boundary State Management', () => {
+    it('maintains error state across re-renders', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      const { rerender } = renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      });
+      
+      // Re-render with same props
+      rerender(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      // Error state should be maintained
+      expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('maintains error state when children change (error boundaries do not auto-reset)', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      const { rerender } = renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      });
+      
+      // Change to non-throwing component - error boundary should maintain error state
+      rerender(
+        <ErrorBoundary>
+          <div>New content</div>
+        </ErrorBoundary>
+      );
+      
+      // Error boundary should still show error (this is expected behavior)
+      expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      expect(screen.queryByText('New content')).not.toBeInTheDocument();
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles errors in nested components', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary componentName="Parent">
+          <div>
+            <div>
+              <ThrowingComponent />
+            </div>
+          </div>
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error in Parent')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('handles multiple error boundaries', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary componentName="Outer">
+          <div>Outer content</div>
+          <ErrorBoundary componentName="Inner">
+            <ThrowingComponent />
+          </ErrorBoundary>
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Outer content')).toBeInTheDocument();
+        expect(screen.getByText('Error in Inner')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('handles errors with no component name', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('handles errors with empty error message', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent errorMessage="" />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('An unexpected error occurred.')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Performance and Cleanup', () => {
+    it('cleans up timeouts on unmount', () => {
+      const { unmount } = renderWithProviders(
+        <ErrorBoundary>
+          <div>Test content</div>
+        </ErrorBoundary>
+      );
+      
+      // Should not throw any errors on unmount
+      expect(() => unmount()).not.toThrow();
+    });
+
+    it('handles rapid error state changes', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      const { rerender } = renderWithProviders(
+        <ErrorBoundary>
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      });
+      
+      // Rapidly change between error and non-error states
+      // Note: Error boundaries maintain error state once triggered
+      rerender(
+        <ErrorBoundary>
+          <div>No error</div>
+        </ErrorBoundary>
+      );
+      
+      // Error boundary should still show error (expected behavior)
+      expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      expect(screen.queryByText('No error')).not.toBeInTheDocument();
+      
+      // Create a new error boundary instance to test fresh error catching
+      rerender(
+        <ErrorBoundary key="new-boundary">
+          <ThrowingComponent />
+        </ErrorBoundary>
+      );
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error in Component')).toBeInTheDocument();
+      });
+      
+      consoleSpy.mockRestore();
+    });
+  });
+});