@jmruthers/pace-core 0.5.114 → 0.5.116

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

@@ -0,0 +1,451 @@
+/**
+ * @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/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>
+      );
+
+      // Alert component uses role="alert", not data-testid
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      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>
+      );
+
+      const details = screen.getByText('Error Details');
+      expect(details).toBeInTheDocument();
+    });
+
+    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
+      // So we check that the details section exists but stack trace is not shown
+      expect(screen.getByText('Error Details')).toBeInTheDocument();
+      // Stack trace should not be visible when showErrorDetails is false
+      expect(screen.queryByText(/Stack Trace/i)).not.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();
+    });
+  });
+
+  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>
+      );
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+
+      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>
+      );
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+
+      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>
+      );
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      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>
+      );
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+
+      const retryButton = screen.getByRole('button', { name: /retry/i });
+      await user.click(retryButton);
+
+      // Trigger another error
+      rerender(
+        <DataTableErrorBoundary showRetryButton={true}>
+          <ThrowError shouldThrow={true} message="Second error" />
+        </DataTableErrorBoundary>
+      );
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+
+    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();
+  });
+});
+