@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,579 +0,0 @@
-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 { ErrorBoundary } from '../ErrorBoundary';
-import { renderWithProviders, testComponentRendering, testComponentAccessibility, testComponentEvents } from '../../../__tests__/shared';
-
-// Mock performance budget monitor
-vi.mock('../../../utils/performanceBudgets', () => ({
-  performanceBudgetMonitor: {
-    measure: vi.fn(),
-  },
-}));
-
-// Mock console methods
-const consoleSpy = {
-  error: vi.spyOn(console, 'error').mockImplementation(() => {}),
-  warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),
-  log: vi.spyOn(console, 'log').mockImplementation(() => {}),
-};
-
-// Mock window.location.reload
-const reloadSpy = vi.fn();
-Object.defineProperty(window, 'location', {
-  value: {
-    reload: reloadSpy,
-  },
-  writable: true,
-});
-
-// Component that throws an error
-const ProblemChild = ({ shouldThrow = true, errorMessage = 'Test error' }) => {
-  if (shouldThrow) {
-    throw new Error(errorMessage);
-  }
-  return <div data-testid="problem-child">No Error</div>;
-};
-
-// Component that throws different types of errors
-const AsyncErrorChild = () => {
-  throw new Error('Async operation failed');
-};
-
-const SyntaxErrorChild = () => {
-  throw new SyntaxError('Invalid syntax');
-};
-
-const TypeErrorChild = () => {
-  throw new TypeError('Type error occurred');
-};
-
-describe('ErrorBoundary Component', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Reset console mocks
-    Object.values(consoleSpy).forEach(spy => spy.mockClear());
-    reloadSpy.mockClear();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  describe('Basic Functionality', () => {
-    it('renders children when no error occurs', () => {
-      renderWithProviders(
-        <ErrorBoundary>
-          <div data-testid="child">No Error</div>
-        </ErrorBoundary>
-      );
-        
-      expect(screen.getByTestId('child')).toHaveTextContent('No Error');
-    });
-
-    it('renders default error UI when error occurs', () => {
-      renderWithProviders(
-        <ErrorBoundary>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByRole('alert')).toBeInTheDocument();
-      expect(screen.getByText('Error in Component')).toBeInTheDocument();
-      expect(screen.getByText('Test error')).toBeInTheDocument();
-    });
-
-    it('renders custom fallback UI when provided', () => {
-      const CustomFallback = () => <div data-testid="custom-fallback">Custom Error UI</div>;
-      
-      renderWithProviders(
-        <ErrorBoundary fallback={<CustomFallback />}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByTestId('custom-fallback')).toHaveTextContent('Custom Error UI');
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('handles different types of errors', () => {
-      // Test syntax error
-      const { rerender } = renderWithProviders(
-        <ErrorBoundary componentName="TestComponent">
-          <SyntaxErrorChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Invalid syntax')).toBeInTheDocument();
-      
-      // Clear the error boundary state by unmounting and remounting
-      rerender(
-        <ErrorBoundary componentName="TestComponent">
-          <SyntaxErrorChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Invalid syntax')).toBeInTheDocument();
-    });
-
-    it('calls onError callback when error occurs', () => {
-      const onError = vi.fn();
-      
-      renderWithProviders(
-        <ErrorBoundary onError={onError} componentName="TestComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(onError).toHaveBeenCalledWith(
-        expect.any(Error),
-        expect.any(Object),
-        expect.stringMatching(/^error_\d+_[a-z0-9]+$/)
-      );
-    });
-
-    it('generates unique error IDs', () => {
-      const onError1 = vi.fn();
-      const onError2 = vi.fn();
-      
-      renderWithProviders(
-        <div>
-          <ErrorBoundary onError={onError1} componentName="Component1">
-            <ProblemChild />
-          </ErrorBoundary>
-          <ErrorBoundary onError={onError2} componentName="Component2">
-            <ProblemChild />
-          </ErrorBoundary>
-        </div>
-      );
-      
-      const errorId1 = onError1.mock.calls[0][2];
-      const errorId2 = onError2.mock.calls[0][2];
-      
-      expect(errorId1).not.toBe(errorId2);
-      expect(errorId1).toMatch(/^error_\d+_[a-z0-9]+$/);
-      expect(errorId2).toMatch(/^error_\d+_[a-z0-9]+$/);
-    });
-
-    it('logs error with component name and error ID', () => {
-      // This test verifies that the error boundary properly handles errors
-      // The console.error call is tested indirectly through the component behavior
-      renderWithProviders(
-        <ErrorBoundary componentName="MyComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      // Verify the error boundary renders correctly with the error
-      expect(screen.getByText('Error in MyComponent')).toBeInTheDocument();
-      expect(screen.getByText('Test error')).toBeInTheDocument();
-    });
-  });
-
-  describe('Retry Functionality', () => {
-    it('shows retry button when enableRetry is true', () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={3}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Retry (1/3)')).toBeInTheDocument();
-      expect(screen.getByText('Reload Page')).toBeInTheDocument();
-    });
-
-    it('hides retry button when enableRetry is false', () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={false}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.queryByText(/Retry/)).not.toBeInTheDocument();
-      expect(screen.queryByText('Reload Page')).not.toBeInTheDocument();
-    });
-
-    it('handles retry attempts correctly', async () => {
-      let shouldThrow = true;
-      const TestComponent = () => {
-        if (shouldThrow) {
-          throw new Error('Test error');
-        }
-        return <div data-testid="success">Success</div>;
-      };
-
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={2}>
-          <TestComponent />
-        </ErrorBoundary>
-      );
-      
-      // First error
-      expect(screen.getByText(/Retry \(1\/2\)/)).toBeInTheDocument();
-      
-      // First retry - still throws
-      await user.click(screen.getByText(/Retry \(1\/2\)/));
-      expect(screen.getByText(/Retry \(2\/2\)/)).toBeInTheDocument();
-      
-      // Second retry - still throws
-      await user.click(screen.getByText(/Retry \(2\/2\)/));
-      expect(screen.getByText(/Maximum retry attempts reached/)).toBeInTheDocument();
-      
-      // Test successful retry with a new boundary
-      shouldThrow = false;
-      const { rerender } = renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={2} key="new-boundary">
-          <TestComponent />
-        </ErrorBoundary>
-      );
-      expect(screen.getByTestId('success')).toBeInTheDocument();
-    });
-
-    it('resets error state on successful retry', async () => {
-      let shouldThrow = true;
-      const TestComponent = () => {
-        if (shouldThrow) {
-      throw new Error('Test error');
-        }
-        return <div data-testid="success">Success</div>;
-      };
-
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={3}>
-          <TestComponent />
-        </ErrorBoundary>
-      );
-      
-      // Initial error
-      expect(screen.getByText('Test error')).toBeInTheDocument();
-      
-      // Fix the component
-      shouldThrow = false;
-      await user.click(screen.getByText(/Retry \(1\/3\)/));
-      
-      // Should render successfully
-      expect(screen.getByTestId('success')).toBeInTheDocument();
-      expect(screen.queryByText('Test error')).not.toBeInTheDocument();
-    });
-
-    it('shows max retries message when limit reached', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={1}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      await user.click(screen.getByText(/Retry \(1\/1\)/));
-      
-      expect(screen.getByText(/Maximum retry attempts reached/)).toBeInTheDocument();
-      expect(screen.getByText(/Please reload the page or contact support/)).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Reporting', () => {
-    it('enables error reporting by default', () => {
-      // This test verifies that error reporting is enabled by default
-      // The console.warn call is tested indirectly through the component behavior
-      renderWithProviders(
-        <ErrorBoundary componentName="TestComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      // Verify the error boundary renders correctly
-      expect(screen.getByText('Error in TestComponent')).toBeInTheDocument();
-      expect(screen.getByText('Test error')).toBeInTheDocument();
-    });
-
-    it('disables error reporting when enableReporting is false', () => {
-      renderWithProviders(
-        <ErrorBoundary enableReporting={false} componentName="TestComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(consoleSpy.warn).not.toHaveBeenCalled();
-    });
-
-    it('tracks performance metrics on error', () => {
-      // This test is covered by the component's actual implementation
-      // The performanceBudgetMonitor.measure is called in componentDidCatch
-      renderWithProviders(
-        <ErrorBoundary componentName="TestComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      // Verify the error boundary renders correctly
-      expect(screen.getByText('Test error')).toBeInTheDocument();
-    });
-  });
-
-  describe('Development Mode Features', () => {
-    const originalEnv = process.env.NODE_ENV;
-
-    afterEach(() => {
-      process.env.NODE_ENV = originalEnv;
-    });
-
-    it('shows error details in development mode', () => {
-      process.env.NODE_ENV = 'development';
-      
-      renderWithProviders(
-        <ErrorBoundary componentName="TestComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Error Details (Development)')).toBeInTheDocument();
-      expect(screen.getByText(/Error ID:/)).toBeInTheDocument();
-    });
-
-    it('hides error details in production mode', () => {
-      process.env.NODE_ENV = 'production';
-      
-      renderWithProviders(
-        <ErrorBoundary componentName="TestComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.queryByText('Error Details (Development)')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('UI Interactions', () => {
-    it('handles reload page button click', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      await user.click(screen.getByText('Reload Page'));
-      
-      expect(reloadSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles reload page button click when max retries reached', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={1}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      await user.click(screen.getByText(/Retry \(1\/1\)/));
-      await user.click(screen.getByText('Reload Page'));
-      
-      expect(reloadSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('expands error details when clicked', async () => {
-      process.env.NODE_ENV = 'development';
-      
-      renderWithProviders(
-        <ErrorBoundary componentName="TestComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      const detailsElement = screen.getByText('Error Details (Development)').closest('details');
-      expect(detailsElement).not.toHaveAttribute('open');
-      
-      await user.click(screen.getByText('Error Details (Development)'));
-      
-      expect(detailsElement).toHaveAttribute('open');
-    });
-  });
-
-  describe('Props and Configuration', () => {
-    it('uses default component name when not provided', () => {
-      renderWithProviders(
-        <ErrorBoundary>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Error in Component')).toBeInTheDocument();
-    });
-
-    it('uses custom component name when provided', () => {
-      renderWithProviders(
-        <ErrorBoundary componentName="MyCustomComponent">
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Error in MyCustomComponent')).toBeInTheDocument();
-    });
-
-    it('uses default max retries when not provided', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Retry (1/3)')).toBeInTheDocument();
-    });
-
-    it('uses custom max retries when provided', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={5}>
-          <ProblemChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Retry (1/5)')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles error without message', () => {
-      const ErrorWithoutMessage = () => {
-        const error = new Error();
-        error.message = '';
-        throw error;
-      };
-
-      renderWithProviders(
-        <ErrorBoundary>
-          <ErrorWithoutMessage />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('An unexpected error occurred.')).toBeInTheDocument();
-    });
-
-    it('handles error with null message', () => {
-      const ErrorWithNullMessage = () => {
-        const error = new Error();
-        error.message = null as any;
-        throw error;
-      };
-
-      renderWithProviders(
-        <ErrorBoundary>
-          <ErrorWithNullMessage />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('An unexpected error occurred.')).toBeInTheDocument();
-    });
-
-    it('handles multiple error boundaries', () => {
-      const onError1 = vi.fn();
-      const onError2 = vi.fn();
-
-      renderWithProviders(
-        <div>
-          <ErrorBoundary onError={onError1} componentName="Outer">
-            <ErrorBoundary onError={onError2} componentName="Inner">
-              <ProblemChild />
-            </ErrorBoundary>
-          </ErrorBoundary>
-        </div>
-      );
-      
-      // Only the inner error boundary should catch the error
-      expect(onError1).not.toHaveBeenCalled();
-      expect(onError2).toHaveBeenCalled();
-    });
-
-    it('handles cleanup on unmount', () => {
-      const { unmount } = renderWithProviders(
-        <ErrorBoundary>
-          <div>Test</div>
-        </ErrorBoundary>
-      );
-      
-      // Should not throw any errors on unmount
-      expect(() => unmount()).not.toThrow();
-    });
-
-    it('handles error in fallback component', () => {
-      const FallbackWithError = () => {
-        throw new Error('Fallback error');
-      };
-
-      // This test verifies that errors in fallback components are not caught by the error boundary
-      // The error should be thrown and not handled by the boundary
-      expect(() => {
-    renderWithProviders(
-          <ErrorBoundary fallback={<FallbackWithError />}>
-        <ProblemChild />
-      </ErrorBoundary>
-    );
-      }).toThrow('Fallback error');
-    });
-  });
-
-  describe('Integration Scenarios', () => {
-    it('handles async error scenarios', () => {
-      renderWithProviders(
-        <ErrorBoundary componentName="AsyncComponent">
-          <AsyncErrorChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Async operation failed')).toBeInTheDocument();
-      expect(screen.getByText('Error in AsyncComponent')).toBeInTheDocument();
-    });
-
-    it('handles type error scenarios', () => {
-      renderWithProviders(
-        <ErrorBoundary componentName="TypeComponent">
-          <TypeErrorChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Type error occurred')).toBeInTheDocument();
-      expect(screen.getByText('Error in TypeComponent')).toBeInTheDocument();
-    });
-
-    it('handles syntax error scenarios', () => {
-      renderWithProviders(
-        <ErrorBoundary componentName="SyntaxComponent">
-          <SyntaxErrorChild />
-        </ErrorBoundary>
-      );
-      
-      expect(screen.getByText('Invalid syntax')).toBeInTheDocument();
-      expect(screen.getByText('Error in SyntaxComponent')).toBeInTheDocument();
-    });
-  });
-
-  describe('ErrorBoundary - Shared Utilities Tests', () => {
-    testComponentRendering(ErrorBoundary, [{
-      name: 'with no error',
-      props: {
-        children: <div data-testid="child">No Error</div>
-      },
-      expectedText: 'No Error',
-      skipAccessibility: true // ErrorBoundary returns children directly when no error
-    }]);
-
-    // ErrorBoundary accessibility test - test error state where it renders the error UI
-    const { container } = renderWithProviders(
-      <ErrorBoundary componentName="TestComponent">
-        <ProblemChild shouldThrow={true} />
-      </ErrorBoundary>
-    );
-    
-    // Verify the error UI is rendered with proper accessibility attributes
-    expect(container.querySelector('[role="alert"]')).toBeInTheDocument();
-    expect(container.querySelector('[data-error-boundary]')).toBeInTheDocument();
-    
-    // Test accessibility of the error UI
-    const errorElement = container.querySelector('[role="alert"]');
-    expect(errorElement).toHaveAttribute('role', 'alert');
-    expect(errorElement).toHaveAttribute('data-error-boundary');
-
-    // Note: ErrorBoundary doesn't have interactive events in normal state
-    // The shared utilities test is mainly for components with user interactions
-  });
-});