@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/DataTable/components/__tests__/DataTableErrorBoundary.test.tsx

@@ -1,479 +0,0 @@
-/**
- * @file DataTable Error Boundary Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
- * @since 0.4.0
- * 
- * Comprehensive test suite for DataTableErrorBoundary component following testing guidelines.
- * Tests cover all major functionality, edge cases, and error handling.
- */
-
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { DataTableErrorBoundary, useDataTableErrorBoundary } from '../DataTableErrorBoundary';
-
-// Mock logger
-vi.mock('../../../utils/core/logger', () => ({
-  createLogger: () => ({
-    debug: vi.fn(),
-    info: vi.fn(),
-    warn: vi.fn(),
-    error: vi.fn(),
-  }),
-}));
-
-// Mock Alert components
-vi.mock('../../Alert/Alert', () => ({
-  Alert: ({ children, variant, className }: any) => (
-    <div data-testid="alert" data-variant={variant} className={className}>{children}</div>
-  ),
-  AlertTitle: ({ children }: any) => <div data-testid="alert-title">{children}</div>,
-  AlertDescription: ({ children, className }: any) => (
-    <div data-testid="alert-description" className={className}>{children}</div>
-  ),
-}));
-
-// Mock Button component
-vi.mock('../../Button/Button', () => ({
-  Button: ({ children, onClick, variant, size, className }: any) => (
-    <button
-      onClick={onClick}
-      data-variant={variant}
-      data-size={size}
-      className={className}
-    >
-      {children}
-    </button>
-  ),
-}));
-
-// Component that throws an error
-const ThrowError = ({ shouldThrow, message = 'Test error' }: { shouldThrow: boolean; message?: string }) => {
-  if (shouldThrow) {
-    throw new Error(message);
-  }
-  return <div>No error</div>;
-};
-
-describe('[component] DataTableErrorBoundary', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Suppress console.error for error boundary tests
-    vi.spyOn(console, 'error').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders children when no error occurs', () => {
-      render(
-        <DataTableErrorBoundary>
-          <div>Test content</div>
-        </DataTableErrorBoundary>
-      );
-
-      expect(screen.getByText('Test content')).toBeInTheDocument();
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    });
-
-    it('renders default error UI when error occurs', () => {
-      render(
-        <DataTableErrorBoundary>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      // There may be multiple alerts (outer and inner), use getAllByRole
-      const alerts = screen.getAllByRole('alert');
-      expect(alerts.length).toBeGreaterThan(0);
-      expect(screen.getByText('DataTable Error')).toBeInTheDocument();
-      expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-    });
-
-    it('renders custom fallback when provided', () => {
-      const customFallback = <div data-testid="custom-fallback">Custom error UI</div>;
-
-      render(
-        <DataTableErrorBoundary fallback={customFallback}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Error Display', () => {
-    it('displays error message when available', () => {
-      render(
-        <DataTableErrorBoundary>
-          <ThrowError shouldThrow={true} message="Custom error message" />
-        </DataTableErrorBoundary>
-      );
-
-      expect(screen.getByText('Custom error message')).toBeInTheDocument();
-    });
-
-    it('displays error details in collapsible section', () => {
-      render(
-        <DataTableErrorBoundary showErrorDetails={true}>
-          <ThrowError shouldThrow={true} message="Test error" />
-        </DataTableErrorBoundary>
-      );
-
-      // Check for error details summary
-      const details = screen.getByText('Error Details');
-      expect(details).toBeInTheDocument();
-      // Check that error message is displayed in the details/pre element
-      // The error message is inside a <pre> tag within <details>
-      const preElement = screen.getByText((content, element) => {
-        return element?.tagName.toLowerCase() === 'pre' && content.includes('Test error');
-      }, { selector: 'pre' });
-      expect(preElement).toBeInTheDocument();
-      expect(preElement).toHaveTextContent('Test error');
-    });
-
-    it('hides error details when showErrorDetails is false', () => {
-      render(
-        <DataTableErrorBoundary showErrorDetails={false}>
-          <ThrowError shouldThrow={true} message="Test error" />
-        </DataTableErrorBoundary>
-      );
-
-      // Error details section is shown when error.message exists
-      // showErrorDetails only controls stack trace visibility, not the details section
-      expect(screen.getByText('Error Details')).toBeInTheDocument();
-      // Stack trace should not be visible when showErrorDetails is false
-      expect(screen.queryByText(/Stack Trace/i)).not.toBeInTheDocument();
-      // Error message should still be visible
-      expect(screen.getByText('Test error')).toBeInTheDocument();
-    });
-
-    it('displays stack trace when showErrorDetails is true', () => {
-      render(
-        <DataTableErrorBoundary showErrorDetails={true}>
-          <ThrowError shouldThrow={true} message="Test error" />
-        </DataTableErrorBoundary>
-      );
-
-      // Stack trace should be in the details section
-      expect(screen.getByText('Error Details')).toBeInTheDocument();
-      // Stack trace text should be present when showErrorDetails is true
-      expect(screen.getByText(/Stack Trace/i)).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('calls onError callback when error occurs', () => {
-      const onError = vi.fn();
-
-      render(
-        <DataTableErrorBoundary onError={onError}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      expect(onError).toHaveBeenCalledTimes(1);
-      expect(onError).toHaveBeenCalledWith(
-        expect.any(Error),
-        expect.objectContaining({
-          componentStack: expect.any(String),
-        })
-      );
-    });
-
-    it('does not call onError when no error occurs', () => {
-      const onError = vi.fn();
-
-      render(
-        <DataTableErrorBoundary onError={onError}>
-          <div>No error</div>
-        </DataTableErrorBoundary>
-      );
-
-      expect(onError).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Retry Functionality', () => {
-    it('renders retry button when showRetryButton is true', () => {
-      render(
-        <DataTableErrorBoundary showRetryButton={true}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      expect(retryButton).toBeInTheDocument();
-    });
-
-    it('hides retry button when showRetryButton is false', () => {
-      render(
-        <DataTableErrorBoundary showRetryButton={false}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      expect(screen.queryByRole('button', { name: /retry/i })).not.toBeInTheDocument();
-    });
-
-    it('calls onRetry callback when retry button is clicked', async () => {
-      const user = userEvent.setup();
-      const onRetry = vi.fn();
-
-      render(
-        <DataTableErrorBoundary onRetry={onRetry} showRetryButton={true}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      await user.click(retryButton);
-
-      expect(onRetry).toHaveBeenCalledTimes(1);
-    });
-
-    it('resets error state when retry button is clicked', async () => {
-      const user = userEvent.setup();
-
-      const { rerender } = render(
-        <DataTableErrorBoundary showRetryButton={true}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const alerts = screen.getAllByRole('alert');
-      expect(alerts.length).toBeGreaterThan(0);
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      await user.click(retryButton);
-
-      // After retry, error state is reset after a timeout (100ms)
-      // But the child still throws, so it will be caught again
-      // We need to wait for the retry to complete, then rerender with shouldThrow=false
-      await waitFor(() => {
-        // Wait for the timeout to complete
-      }, { timeout: 200 });
-      
-      // Now rerender with shouldThrow=false to prevent re-throwing
-      rerender(
-        <DataTableErrorBoundary showRetryButton={true}>
-          <ThrowError shouldThrow={false} />
-        </DataTableErrorBoundary>
-      );
-
-      // Now the error should be gone since child doesn't throw
-      await waitFor(() => {
-        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-      }, { timeout: 200 });
-    });
-
-    it('displays retry count in button text', () => {
-      render(
-        <DataTableErrorBoundary showRetryButton={true} maxRetries={3}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      expect(retryButton).toHaveTextContent('1/3');
-    });
-
-    it('hides retry button when max retries reached', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <DataTableErrorBoundary showRetryButton={true} maxRetries={1}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      expect(retryButton).toHaveTextContent('1/1');
-      
-      await user.click(retryButton);
-
-      // After clicking retry, state updates async - wait for the update
-      // The retry increments retryCount, so retryCount becomes 1, which equals maxRetries (1)
-      // So the button should be hidden after state update
-      await waitFor(() => {
-        expect(screen.queryByRole('button', { name: /retry/i })).not.toBeInTheDocument();
-      }, { timeout: 500 });
-    });
-  });
-
-  describe('Reset Functionality', () => {
-    it('renders reset button', () => {
-      render(
-        <DataTableErrorBoundary>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const resetButton = screen.getByRole('button', { name: /reset/i });
-      expect(resetButton).toBeInTheDocument();
-    });
-
-    it('resets error state when reset button is clicked', async () => {
-      const user = userEvent.setup();
-
-      const { rerender } = render(
-        <DataTableErrorBoundary>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const alerts = screen.getAllByRole('alert');
-      expect(alerts.length).toBeGreaterThan(0);
-
-      const resetButton = screen.getByRole('button', { name: /reset/i });
-      
-      // First, rerender with shouldThrow=false before clicking reset
-      // This prevents the error from being re-caught after reset
-      rerender(
-        <DataTableErrorBoundary>
-          <ThrowError shouldThrow={false} />
-        </DataTableErrorBoundary>
-      );
-      
-      // Now click reset - the error state should be cleared
-      await user.click(resetButton);
-
-      // After reset, error state is cleared immediately (no timeout)
-      // Since child doesn't throw, the error should be gone
-      await waitFor(() => {
-        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-      }, { timeout: 300 });
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles errors with no message', () => {
-      const ErrorWithoutMessage = () => {
-        throw new Error();
-      };
-
-      render(
-        <DataTableErrorBoundary>
-          <ErrorWithoutMessage />
-        </DataTableErrorBoundary>
-      );
-
-      // There are multiple alert elements (outer Alert and inner Alert for no message case)
-      const alerts = screen.getAllByRole('alert');
-      expect(alerts.length).toBeGreaterThan(0);
-      expect(screen.getByText('An unexpected error occurred')).toBeInTheDocument();
-    });
-
-    it('handles multiple errors in sequence', async () => {
-      const user = userEvent.setup();
-
-      const { rerender } = render(
-        <DataTableErrorBoundary showRetryButton={true}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const alerts = screen.getAllByRole('alert');
-      expect(alerts.length).toBeGreaterThan(0);
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      await user.click(retryButton);
-
-      // Wait for retry to complete and error state to reset
-      await waitFor(() => {
-        // Wait for the timeout to complete
-      }, { timeout: 200 });
-
-      // Trigger another error - rerender with new error
-      rerender(
-        <DataTableErrorBoundary showRetryButton={true}>
-          <ThrowError shouldThrow={true} message="Second error" />
-        </DataTableErrorBoundary>
-      );
-
-      // Wait for the new error to be caught and displayed
-      await waitFor(() => {
-        const newAlerts = screen.getAllByRole('alert');
-        expect(newAlerts.length).toBeGreaterThan(0);
-        const preElement = document.querySelector('pre');
-        expect(preElement).toHaveTextContent('Second error');
-      }, { timeout: 300 });
-    });
-
-    it('handles cleanup on unmount', () => {
-      const { unmount } = render(
-        <DataTableErrorBoundary>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      expect(() => {
-        unmount();
-      }).not.toThrow();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('provides accessible error message', () => {
-      render(
-        <DataTableErrorBoundary>
-          <ThrowError shouldThrow={true} message="Accessible error" />
-        </DataTableErrorBoundary>
-      );
-
-      expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-      expect(screen.getByText('Accessible error')).toBeInTheDocument();
-    });
-
-    it('provides accessible button labels', () => {
-      render(
-        <DataTableErrorBoundary showRetryButton={true}>
-          <ThrowError shouldThrow={true} />
-        </DataTableErrorBoundary>
-      );
-
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      const resetButton = screen.getByRole('button', { name: /reset/i });
-
-      expect(retryButton).toBeInTheDocument();
-      expect(resetButton).toBeInTheDocument();
-    });
-  });
-});
-
-describe('[hook] useDataTableErrorBoundary', () => {
-  it('initializes with no error', () => {
-    const { result } = renderHook(() => useDataTableErrorBoundary());
-
-    expect(result.current).toHaveProperty('captureError');
-    expect(result.current).toHaveProperty('resetError');
-  });
-
-  it('captures error when captureError is called', () => {
-    const { result } = renderHook(() => useDataTableErrorBoundary());
-
-    const testError = new Error('Test error');
-    result.current.captureError(testError);
-
-    // The hook should capture the error
-    expect(result.current).toBeDefined();
-  });
-
-  it('resets error when resetError is called', () => {
-    const { result } = renderHook(() => useDataTableErrorBoundary());
-
-    result.current.resetError();
-
-    // Should not throw
-    expect(result.current).toBeDefined();
-  });
-});
-