@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,572 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { screen, 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, testUserWorkflow, testDataFlow } 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,
-});
-
-// Test components for different scenarios
-const AsyncComponent = ({ shouldFail = false }: { shouldFail?: boolean }) => {
-  const [data, setData] = useState<{ id: number; name: string } | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        if (shouldFail) {
-          throw new Error('API request failed');
-        }
-        setData({ id: 1, name: 'Test Data' });
-      } catch (err) {
-        setError(err as Error);
-      }
-    };
-
-    fetchData();
-  }, [shouldFail]);
-
-  if (error) throw error;
-  if (!data) return <div>Loading...</div>;
-  return <div data-testid="async-data">{data.name}</div>;
-};
-
-const ConditionalErrorComponent = ({ condition, errorMessage = 'Conditional error' }: { condition: boolean; errorMessage?: string }) => {
-  if (condition) {
-    throw new Error(errorMessage);
-  }
-  return <div data-testid="conditional-success">Success</div>;
-};
-
-const NestedErrorComponent = ({ level = 0, maxLevel = 2 }: { level?: number; maxLevel?: number }) => {
-  if (level >= maxLevel) {
-    throw new Error(`Error at level ${level}`);
-  }
-  return (
-    <div data-testid={`level-${level}`}>
-      <NestedErrorComponent level={level + 1} maxLevel={maxLevel} />
-    </div>
-  );
-};
-
-const FormComponent = ({ onSubmit, hasError = false }: { onSubmit: (data: any) => void; hasError?: boolean }) => {
-  const [formData, setFormData] = useState({ name: '', email: '' });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (hasError) {
-      throw new Error('Form submission failed');
-    }
-    onSubmit(formData);
-  };
-
-  if (hasError) {
-    throw new Error('Form validation error');
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <input
-        type="text"
-        value={formData.name}
-        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-        placeholder="Name"
-      />
-      <button type="submit">Submit</button>
-    </form>
-  );
-};
-
-const DataTableComponent = ({ data, hasError = false }: { data: Array<{ id: number; name: string }>; hasError?: boolean }) => {
-  if (hasError) {
-    throw new Error('Data table rendering failed');
-  }
-
-  if (!data || data.length === 0) {
-    return <div>No data available</div>;
-  }
-
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Name</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data.map((item) => (
-          <tr key={item.id}>
-            <td>{item.id}</td>
-            <td>{item.name}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};
-
-describe('ErrorBoundary Integration', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    Object.values(consoleSpy).forEach(spy => spy.mockClear());
-    reloadSpy.mockClear();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  describe('Real-world Application Scenarios', () => {
-    it('handles API failure in async component', async () => {
-      const onError = vi.fn();
-      
-      renderWithProviders(
-        <ErrorBoundary onError={onError} componentName="AsyncComponent">
-          <AsyncComponent shouldFail={true} />
-        </ErrorBoundary>
-      );
-
-      await waitFor(() => {
-        expect(screen.getByText('API request failed')).toBeInTheDocument();
-      });
-
-      expect(onError).toHaveBeenCalledWith(
-        expect.any(Error),
-        expect.any(Object),
-        expect.stringMatching(/^error_\d+_[a-z0-9]+$/)
-      );
-    });
-
-    it('handles form validation errors', () => {
-      const onSubmit = vi.fn();
-      
-      renderWithProviders(
-        <ErrorBoundary componentName="FormComponent">
-          <FormComponent onSubmit={onSubmit} hasError={true} />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText('Form validation error')).toBeInTheDocument();
-      expect(screen.getByText('Error in FormComponent')).toBeInTheDocument();
-    });
-
-    it('handles data table rendering failures', () => {
-      renderWithProviders(
-        <ErrorBoundary componentName="DataTable">
-          <DataTableComponent data={[]} hasError={true} />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText('Data table rendering failed')).toBeInTheDocument();
-      expect(screen.getByText('Error in DataTable')).toBeInTheDocument();
-    });
-
-    it('handles nested component error boundaries', () => {
-      const outerOnError = vi.fn();
-      const innerOnError = vi.fn();
-
-      renderWithProviders(
-        <ErrorBoundary onError={outerOnError} componentName="OuterBoundary">
-          <div data-testid="outer-content">
-            <ErrorBoundary onError={innerOnError} componentName="InnerBoundary">
-              <ConditionalErrorComponent condition={true} />
-            </ErrorBoundary>
-          </div>
-        </ErrorBoundary>
-      );
-
-      // Only inner boundary should catch the error
-      expect(innerOnError).toHaveBeenCalled();
-      expect(outerOnError).not.toHaveBeenCalled();
-      expect(screen.getByText('Conditional error')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Recovery and Retry Scenarios', () => {
-    it('handles successful recovery after retry', async () => {
-      let shouldFail = true;
-      const TestComponent = () => {
-        if (shouldFail) {
-          throw new Error('Temporary error');
-        }
-        return <div data-testid="recovered">Component recovered</div>;
-      };
-
-      const onError = vi.fn();
-      
-      renderWithProviders(
-        <ErrorBoundary onError={onError} enableRetry={true} maxRetries={3}>
-          <TestComponent />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText('Temporary error')).toBeInTheDocument();
-      expect(onError).toHaveBeenCalledTimes(1);
-
-      // Fix the component
-      shouldFail = false;
-      await user.click(screen.getByRole('button', { name: /retry \(1\/3\)/i }));
-
-      expect(screen.getByTestId('recovered')).toBeInTheDocument();
-      expect(screen.queryByText('Temporary error')).not.toBeInTheDocument();
-    });
-
-    it('handles multiple retry attempts with eventual failure', async () => {
-      // Use a component that always throws initially, then succeeds after retries
-      let shouldThrow = true;
-      const TestComponent = () => {
-        if (shouldThrow) {
-          throw new Error('Initial error');
-        }
-        return <div data-testid="success">Success after retries</div>;
-      };
-
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={5}>
-          <TestComponent />
-        </ErrorBoundary>
-      );
-
-      // First error
-      expect(screen.getByText('Initial error')).toBeInTheDocument();
-      await user.click(screen.getByRole('button', { name: /retry \(1\/5\)/i }));
-
-      // Still throws
-      expect(screen.getByText('Initial error')).toBeInTheDocument();
-      await user.click(screen.getByRole('button', { name: /retry \(2\/5\)/i }));
-
-      // Make it succeed
-      shouldThrow = false;
-      await user.click(screen.getByRole('button', { name: /retry \(3\/5\)/i }));
-
-      // Success
-      expect(screen.getByTestId('success')).toBeInTheDocument();
-    });
-
-    it('handles max retries reached scenario', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true} maxRetries={2}>
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      await user.click(screen.getByRole('button', { name: /retry \(1\/2\)/i }));
-      await user.click(screen.getByRole('button', { name: /retry \(2\/2\)/i }));
-
-      expect(screen.getByText(/Maximum retry attempts reached/)).toBeInTheDocument();
-      expect(screen.getByText(/Please reload the page or contact support/)).toBeInTheDocument();
-    });
-  });
-
-  describe('Component Interaction Patterns', () => {
-    it('handles error boundaries in complex component trees', () => {
-      const onError1 = vi.fn();
-      const onError2 = vi.fn();
-      const onError3 = vi.fn();
-
-      renderWithProviders(
-        <div>
-          <ErrorBoundary onError={onError1} componentName="Level1">
-            <div data-testid="level1">
-              <ErrorBoundary onError={onError2} componentName="Level2">
-                <div data-testid="level2">
-                  <ErrorBoundary onError={onError3} componentName="Level3">
-                    <ConditionalErrorComponent condition={true} />
-                  </ErrorBoundary>
-                </div>
-              </ErrorBoundary>
-            </div>
-          </ErrorBoundary>
-        </div>
-      );
-
-      // Only the innermost boundary should catch the error
-      expect(onError3).toHaveBeenCalled();
-      expect(onError2).not.toHaveBeenCalled();
-      expect(onError1).not.toHaveBeenCalled();
-    });
-
-    it('handles sibling error boundaries', () => {
-      const onError1 = vi.fn();
-      const onError2 = vi.fn();
-
-      renderWithProviders(
-        <div>
-          <ErrorBoundary onError={onError1} componentName="Sibling1">
-            <ConditionalErrorComponent condition={true} errorMessage="Error 1" />
-          </ErrorBoundary>
-          <ErrorBoundary onError={onError2} componentName="Sibling2">
-            <ConditionalErrorComponent condition={true} errorMessage="Error 2" />
-          </ErrorBoundary>
-        </div>
-      );
-
-      expect(onError1).toHaveBeenCalled();
-      expect(onError2).toHaveBeenCalled();
-      expect(screen.getByText('Error 1')).toBeInTheDocument();
-      expect(screen.getByText('Error 2')).toBeInTheDocument();
-    });
-
-    it('handles error boundaries with custom fallbacks', () => {
-      const CustomFallback1 = () => <div data-testid="fallback1">Custom Error 1</div>;
-      const CustomFallback2 = () => <div data-testid="fallback2">Custom Error 2</div>;
-
-      renderWithProviders(
-        <div>
-          <ErrorBoundary fallback={<CustomFallback1 />}>
-            <ConditionalErrorComponent condition={true} />
-          </ErrorBoundary>
-          <ErrorBoundary fallback={<CustomFallback2 />}>
-            <ConditionalErrorComponent condition={true} />
-          </ErrorBoundary>
-        </div>
-      );
-
-      expect(screen.getByTestId('fallback1')).toBeInTheDocument();
-      expect(screen.getByTestId('fallback2')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Reporting and Monitoring', () => {
-    it('tracks multiple errors with unique IDs', () => {
-      const onError1 = vi.fn();
-      const onError2 = vi.fn();
-
-      renderWithProviders(
-        <div>
-          <ErrorBoundary onError={onError1} componentName="Component1">
-            <ConditionalErrorComponent condition={true} />
-          </ErrorBoundary>
-          <ErrorBoundary onError={onError2} componentName="Component2">
-            <ConditionalErrorComponent condition={true} />
-          </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('reports errors with component context', () => {
-      const onError = vi.fn();
-
-      renderWithProviders(
-        <ErrorBoundary onError={onError} componentName="UserProfile">
-          <ConditionalErrorComponent condition={true} errorMessage="User data failed to load" />
-        </ErrorBoundary>
-      );
-
-      expect(onError).toHaveBeenCalledWith(
-        expect.objectContaining({
-          message: 'User data failed to load'
-        }),
-        expect.any(Object),
-        expect.stringMatching(/^error_\d+_[a-z0-9]+$/)
-      );
-    });
-
-    it('disables error reporting when configured', () => {
-      renderWithProviders(
-        <ErrorBoundary enableReporting={false} componentName="TestComponent">
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      expect(consoleSpy.warn).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Performance and Memory Management', () => {
-    it('handles cleanup on unmount', () => {
-      const { unmount } = renderWithProviders(
-        <ErrorBoundary>
-          <div>Test content</div>
-        </ErrorBoundary>
-      );
-
-      expect(() => unmount()).not.toThrow();
-    });
-
-    it('handles multiple error boundaries without memory leaks', () => {
-      const { rerender } = renderWithProviders(
-        <ErrorBoundary componentName="Test1">
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      rerender(
-        <ErrorBoundary componentName="Test2">
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      // Create a new error boundary with a working component
-      rerender(
-        <ErrorBoundary componentName="Test3" key="new-boundary">
-          <ConditionalErrorComponent condition={false} />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByTestId('conditional-success')).toBeInTheDocument();
-    });
-  });
-
-  describe('Development vs Production Behavior', () => {
-    const originalEnv = process.env.NODE_ENV;
-
-    afterEach(() => {
-      process.env.NODE_ENV = originalEnv;
-    });
-
-    it('shows detailed error information in development', () => {
-      process.env.NODE_ENV = 'development';
-
-      renderWithProviders(
-        <ErrorBoundary componentName="DevComponent">
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText('Error Details (Development)')).toBeInTheDocument();
-      expect(screen.getByText(/Error ID:/)).toBeInTheDocument();
-    });
-
-    it('hides detailed error information in production', () => {
-      process.env.NODE_ENV = 'production';
-
-      renderWithProviders(
-        <ErrorBoundary componentName="ProdComponent">
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      expect(screen.queryByText('Error Details (Development)')).not.toBeInTheDocument();
-      expect(screen.queryByText(/Error ID:/)).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Complex Error Scenarios', () => {
-    it('handles errors in deeply nested components', () => {
-      renderWithProviders(
-        <ErrorBoundary componentName="DeepNested">
-          <NestedErrorComponent maxLevel={5} />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText('Error at level 5')).toBeInTheDocument();
-    });
-
-    it('handles errors with different error types', () => {
-      const TypeErrorComponent = () => {
-        throw new TypeError('Type error occurred');
-      };
-
-      const ReferenceErrorComponent = () => {
-        throw new ReferenceError('Reference error occurred');
-      };
-
-      const { rerender } = renderWithProviders(
-        <ErrorBoundary componentName="TypeErrorTest">
-          <TypeErrorComponent />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText(/Type error occurred/)).toBeInTheDocument();
-
-      // Create a new error boundary instance
-      rerender(
-        <ErrorBoundary componentName="ReferenceErrorTest" key="new-error-boundary">
-          <ReferenceErrorComponent />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText(/Reference error occurred/)).toBeInTheDocument();
-    });
-
-    it('handles errors with complex error messages', () => {
-      const ComplexErrorComponent = () => {
-        const error = new Error('Complex error with special characters: !@#$%^&*()');
-        error.stack = 'Stack trace with multiple lines\nLine 2\nLine 3';
-        throw error;
-      };
-
-      renderWithProviders(
-        <ErrorBoundary componentName="ComplexError">
-          <ComplexErrorComponent />
-        </ErrorBoundary>
-      );
-
-      expect(screen.getByText('Complex error with special characters: !@#$%^&*()')).toBeInTheDocument();
-    });
-  });
-
-  describe('User Interaction Patterns', () => {
-    it('handles user interactions during error state', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true}>
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      // User clicks reload button
-      await user.click(screen.getByRole('button', { name: /reload page/i }));
-      expect(reloadSpy).toHaveBeenCalledTimes(1);
-
-      // User clicks retry button
-      await user.click(screen.getByRole('button', { name: /retry \(1\/3\)/i }));
-      // Note: The retry functionality should work, but console.log might not be called in test environment
-      expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument();
-    });
-
-    it('handles keyboard navigation in error state', async () => {
-      renderWithProviders(
-        <ErrorBoundary enableRetry={true}>
-          <ConditionalErrorComponent condition={true} />
-        </ErrorBoundary>
-      );
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      const reloadButton = screen.getByRole('button', { name: /reload page/i });
-
-      // Tab navigation
-      retryButton.focus();
-      expect(retryButton).toHaveFocus();
-
-      reloadButton.focus();
-      expect(reloadButton).toHaveFocus();
-
-      // Keyboard activation
-      await user.keyboard('{Enter}');
-      expect(reloadSpy).toHaveBeenCalledTimes(1);
-    });
-  });
-});