@jmruthers/pace-core 0.2.7 → 0.4.1

package/src/__tests__/shared/componentTestUtils.tsx

@@ -1,475 +0,0 @@
-/**
- * @file Component Test Utilities
- * @package @jmruthers/pace-core
- * @module Tests/Shared/ComponentUtilities
- * @since 0.3.0
- * 
- * Specialized utilities for testing React components with common patterns
- * and best practices for component testing.
- */
-
-import React from 'react';
-import { render, RenderResult, screen, fireEvent, waitFor } from '@testing-library/react';
-import { vi } from 'vitest';
-import { renderWithProviders } from './testUtils.optimized';
-
-// ============================================================================
-// Component Testing Utilities
-// ============================================================================
-
-/**
- * Render a component with common props and test for basic functionality
- */
-export function renderComponent<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T = {} as T,
-  options: {
-    withProviders?: boolean;
-    wrapper?: React.ComponentType<{ children: React.ReactNode }>;
-  } = {}
-): RenderResult {
-  const { withProviders = true, wrapper } = options;
-  
-  const renderFn = withProviders ? renderWithProviders : render;
-  const Wrapper = wrapper;
-  
-  if (Wrapper) {
-    return renderFn(
-      <Wrapper>
-        <Component {...props} />
-      </Wrapper>
-    );
-  }
-  
-  return renderFn(<Component {...props} />);
-}
-
-/**
- * Test component rendering with different prop combinations
- */
-export function testComponentRendering<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  testCases: Array<{
-    name: string;
-    props: T;
-    expectedText?: string;
-    expectedTestId?: string;
-    shouldRender?: boolean;
-  }>
-) {
-  testCases.forEach(({ name, props, expectedText, expectedTestId, shouldRender = true }) => {
-    it(`should render correctly with ${name}`, () => {
-      const { container } = renderComponent(Component, props);
-      
-      if (shouldRender) {
-        expect(container.firstChild).toBeInTheDocument();
-        
-        if (expectedText) {
-          expect(screen.getByText(expectedText)).toBeInTheDocument();
-        }
-        
-        if (expectedTestId) {
-          expect(screen.getByTestId(expectedTestId)).toBeInTheDocument();
-        }
-      } else {
-        expect(container.firstChild).not.toBeInTheDocument();
-      }
-    });
-  });
-}
-
-/**
- * Test component accessibility with common patterns
- */
-export function testComponentAccessibility<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  options: {
-    requiredAttributes?: string[];
-    shouldBeKeyboardAccessible?: boolean;
-    shouldHaveValidRole?: boolean;
-    shouldHaveValidAriaLabel?: boolean;
-  } = {},
-  props: T = {} as T
-) {
-  const {
-    requiredAttributes = [],
-    shouldBeKeyboardAccessible = true,
-    shouldHaveValidRole = true,
-    shouldHaveValidAriaLabel = true,
-  } = options;
-
-  it('should be accessible', () => {
-    const { container } = renderComponent(Component, props);
-    const element = container.firstChild as HTMLElement;
-    
-    if (shouldHaveValidRole) {
-      // For components that might render as fragments, check if the element has a role
-      // or if any child element has a role
-      const hasRole = element?.hasAttribute?.('role') || 
-        (element?.querySelector && element.querySelector('[role]')) ||
-        // For input components, check if they have the textbox role
-        (element?.tagName?.toLowerCase() === 'input' && element.getAttribute('type') !== 'hidden') ||
-        // For InputGroup components, check if they contain input elements
-        (element?.querySelector && element.querySelector('input'));
-      expect(hasRole).toBeTruthy();
-    }
-    
-    if (shouldHaveValidAriaLabel) {
-      const ariaLabel = element.getAttribute('aria-label');
-      const ariaLabelledBy = element.getAttribute('aria-labelledby');
-      // For dialog elements, we need either aria-label or aria-labelledby
-      if (element.tagName.toLowerCase() === 'dialog') {
-        expect(ariaLabel || ariaLabelledBy).toBeTruthy();
-      } else {
-        // For other elements, this is optional
-        if (ariaLabel || ariaLabelledBy) {
-          expect(ariaLabel || ariaLabelledBy).toBeTruthy();
-        }
-      }
-    }
-    
-    if (shouldBeKeyboardAccessible) {
-      // For dialog elements, tabindex is not required as they are naturally focusable
-      // For InputGroup components, check if they contain focusable elements
-      if (element.tagName.toLowerCase() !== 'dialog') {
-        const hasTabIndex = element.hasAttribute('tabindex');
-        const hasFocusableChildren = element.querySelector('input, button, select, textarea, [tabindex]');
-        
-        if (hasTabIndex) {
-          const tabIndex = element.getAttribute('tabindex');
-          expect(tabIndex).not.toBe('-1');
-        } else if (hasFocusableChildren) {
-          // InputGroup with focusable children is accessible
-          expect(hasFocusableChildren).toBeTruthy();
-        } else {
-          // For other components, require tabindex
-          expect(element).toHaveAttribute('tabindex');
-        }
-      }
-    } else {
-      // If shouldBeKeyboardAccessible is false, we don't check for tabindex
-      // This allows components to opt out of keyboard accessibility checks
-    }
-    
-    requiredAttributes.forEach(attr => {
-      if (attr === 'role' && shouldHaveValidRole) {
-        // For role attribute, use the same logic as above
-        const hasRole = element?.hasAttribute?.('role') || 
-          (element?.querySelector && element.querySelector('[role]'));
-        expect(hasRole).toBeTruthy();
-      } else {
-        expect(element).toHaveAttribute(attr);
-      }
-    });
-  });
-}
-
-/**
- * Test component event handling
- */
-export function testComponentEvents<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T = {} as T,
-  events: Array<{
-    name: string;
-    event: string;
-    element: string;
-    expectedBehavior: () => void;
-  }>
-) {
-  events.forEach(({ name, event, element, expectedBehavior }) => {
-    it(`should handle ${name} event`, () => {
-      renderComponent(Component, props);
-      const targetElement = element === 'button' 
-        ? screen.getByRole('button')
-        : element === 'textbox'
-        ? screen.getByRole('textbox')
-        : element === 'checkbox'
-        ? screen.getByRole('checkbox')
-        : screen.getByTestId(element);
-      
-      fireEvent[event as keyof typeof fireEvent](targetElement);
-      expectedBehavior();
-    });
-  });
-}
-
-/**
- * Test component state changes
- */
-export function testComponentState<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T = {} as T,
-  stateTests: Array<{
-    name: string;
-    action: () => void;
-    expectedState: () => void;
-  }>
-) {
-  stateTests.forEach(({ name, action, expectedState }) => {
-    it(`should handle state change: ${name}`, async () => {
-      renderComponent(Component, props);
-      
-      action();
-      await waitFor(expectedState);
-    });
-  });
-}
-
-/**
- * Test component with different screen sizes
- */
-export function testComponentResponsiveness<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T = {} as T,
-  breakpoints: Array<{
-    name: string;
-    width: number;
-    height: number;
-    expectedBehavior: () => void;
-  }>
-) {
-  breakpoints.forEach(({ name, width, height, expectedBehavior }) => {
-    it(`should be responsive at ${name}`, () => {
-      // Mock window dimensions
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: width,
-      });
-      Object.defineProperty(window, 'innerHeight', {
-        writable: true,
-        configurable: true,
-        value: height,
-      });
-      
-      renderComponent(Component, props);
-      expectedBehavior();
-    });
-  });
-}
-
-// ============================================================================
-// Form Component Testing
-// ============================================================================
-
-/**
- * Test form component with common form patterns
- */
-export function testFormComponent<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T = {} as T,
-  formTests: {
-    initialValues?: Record<string, any>;
-    validationTests?: Array<{
-      name: string;
-      inputValue: string;
-      expectedError?: string;
-      shouldBeValid?: boolean;
-    }>;
-    submissionTests?: Array<{
-      name: string;
-      formData: Record<string, any>;
-      expectedBehavior: () => void;
-    }>;
-  } = {}
-) {
-  const { initialValues = {}, validationTests = [], submissionTests = [] } = formTests;
-
-  if (validationTests.length > 0) {
-    describe('form validation', () => {
-      validationTests.forEach(({ name, inputValue, expectedError, shouldBeValid = true }) => {
-        it(`should validate input: ${name}`, async () => {
-          renderComponent(Component, { ...props, initialValues });
-          
-          const input = screen.getByDisplayValue(inputValue) || screen.getByPlaceholderText(name);
-          fireEvent.change(input, { target: { value: inputValue } });
-          fireEvent.blur(input);
-          
-          await waitFor(() => {
-            if (shouldBeValid) {
-              expect(screen.queryByText(expectedError || 'error')).not.toBeInTheDocument();
-            } else {
-              expect(screen.getByText(expectedError || 'error')).toBeInTheDocument();
-            }
-          });
-        });
-      });
-    });
-  }
-
-  if (submissionTests.length > 0) {
-    describe('form submission', () => {
-      submissionTests.forEach(({ name, formData, expectedBehavior }) => {
-        it(`should handle submission: ${name}`, async () => {
-          const onSubmit = vi.fn();
-          renderComponent(Component, { ...props, onSubmit, initialValues: formData });
-          
-          const submitButton = screen.getByRole('button', { name: /submit/i });
-          fireEvent.click(submitButton);
-          
-          await waitFor(() => {
-            expectedBehavior();
-          });
-        });
-      });
-    });
-  }
-}
-
-// ============================================================================
-// Data Table Testing
-// ============================================================================
-
-/**
- * Test DataTable component with common patterns
- */
-export function testDataTableComponent<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T = {} as T,
-  dataTableTests: {
-    data?: any[];
-    columns?: any[];
-    features?: any;
-    actions?: any[];
-  } = {}
-) {
-  const { data = [], columns = [], features = {}, actions = [] } = dataTableTests;
-
-  it('should render data table with provided data', () => {
-    renderComponent(Component, {
-      ...props,
-      data,
-      columns,
-      features,
-      actions,
-    });
-    
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    
-    // Check if there are rows (header + data rows)
-    const rows = screen.queryAllByRole('row');
-    if (data.length > 0) {
-      expect(rows.length).toBeGreaterThan(0);
-    } else {
-      // For empty data, check for empty state or just table structure
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    }
-  });
-
-  it('should handle empty data gracefully', () => {
-    renderComponent(Component, {
-      ...props,
-      data: [],
-      columns,
-      features,
-      actions,
-    });
-    
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    // Check for any empty state indicator
-    const emptyStateText = screen.queryByText(/no data available/i) || 
-                          screen.queryByText(/no data/i) ||
-                          screen.queryByText(/empty/i) ||
-                          screen.queryByText(/0.*rows/i);
-    expect(emptyStateText).toBeInTheDocument();
-  });
-
-  it('should handle loading state', () => {
-    renderComponent(Component, {
-      ...props,
-      data,
-      columns,
-      features: { ...features, loading: true },
-      actions,
-    });
-    
-    // Check for any loading indicator - be more flexible
-    const loadingElements = screen.queryAllByText(/loading/i);
-    const spinnerElements = screen.queryAllByText(/spinner/i);
-    const loadingSpinner = screen.queryByTestId('loading-spinner');
-    const loadingState = screen.queryByTestId('loading-state');
-    
-    // Check if component renders without crashing when loading is true
-    // Some components might not show explicit loading indicators
-    const hasLoadingIndicator = loadingElements.length > 0 || 
-                               spinnerElements.length > 0 || 
-                               loadingSpinner || 
-                               loadingState;
-    
-    // If no explicit loading indicators, just verify the component renders
-    if (!hasLoadingIndicator) {
-      // Just verify the component renders without crashing
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    } else {
-      expect(hasLoadingIndicator).toBeTruthy();
-    }
-  });
-}
-
-// ============================================================================
-// Modal/Dialog Testing
-// ============================================================================
-
-/**
- * Test modal/dialog component with common patterns
- */
-export function testModalComponent<T extends Record<string, any>>(
-  Component: React.ComponentType<T>,
-  props: T = {} as T,
-  modalTests: {
-    isOpen?: boolean;
-    onClose?: () => void;
-    title?: string;
-    content?: string;
-  } = {}
-) {
-  const { isOpen = true, onClose = vi.fn(), title, content } = modalTests;
-
-  it('should render modal when open', () => {
-    renderComponent(Component, { ...props, open: isOpen, onClose });
-    
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-    
-    if (title) {
-      expect(screen.getByText(title)).toBeInTheDocument();
-    }
-    
-    if (content) {
-      expect(screen.getByText(content)).toBeInTheDocument();
-    }
-  });
-
-  it('should close modal when close button is clicked', () => {
-    renderComponent(Component, { ...props, open: isOpen, onClose });
-    
-    const closeButton = screen.getByRole('button', { name: /close/i });
-    fireEvent.click(closeButton);
-    
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('should close modal when escape key is pressed', () => {
-    renderComponent(Component, { ...props, open: isOpen, onClose });
-    
-    fireEvent.keyDown(document, { key: 'Escape' });
-    
-    expect(onClose).toHaveBeenCalled();
-  });
-}
-
-// ============================================================================
-// Export All Utilities
-// ============================================================================
-
-export default {
-  renderComponent,
-  testComponentRendering,
-  testComponentAccessibility,
-  testComponentEvents,
-  testComponentState,
-  testComponentResponsiveness,
-  testFormComponent,
-  testDataTableComponent,
-  testModalComponent,
-};

package/src/__tests__/shared/errorHandlingTestUtils.ts

@@ -1,107 +0,0 @@
-/**
- * @file Shared Error Handling Test Utilities
- * @package @jmruthers/pace-core
- * @module Tests/Shared/ErrorHandling
- * @since 0.4.0
- * 
- * Shared utilities for testing error handling across components to avoid duplication.
- */
-
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from './testUtils.optimized';
-import { TestErrorBoundary } from '../ErrorTesting.enhanced.test';
-
-/**
- * Test component error handling with error boundary
- */
-export const testComponentErrorHandling = (testName: string = 'should handle component errors gracefully') => {
-  it(testName, () => {
-    const ErrorComponent = () => {
-      throw new Error('DataTable component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: DataTable component error')).toBeInTheDocument();
-  });
-};
-
-/**
- * Test async error handling
- */
-export const testAsyncErrorHandling = (testName: string = 'should handle async errors') => {
-  it(testName, async () => {
-    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
-      const [error, setError] = React.useState<Error | null>(null);
-
-      React.useEffect(() => {
-        if (shouldFail) {
-          setError(new Error('Async operation failed'));
-        }
-      }, [shouldFail]);
-
-      if (error) {
-        throw error;
-      }
-
-      return <div>Async component loaded</div>;
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <AsyncErrorComponent shouldFail={true} />
-      </TestErrorBoundary>
-    );
-
-    await screen.findByTestId('error-boundary');
-    expect(screen.getByText('Error: Async operation failed')).toBeInTheDocument();
-  });
-};
-
-/**
- * Test user interaction error handling
- */
-export const testUserInteractionErrorHandling = (testName: string = 'should handle user interaction errors') => {
-  it(testName, async () => {
-    const { user } = await import('@testing-library/user-event');
-    const userEvent = user.setup();
-
-    const InteractiveErrorComponent = () => {
-      const [shouldError, setShouldError] = React.useState(false);
-
-      const handleClick = () => {
-        setShouldError(true);
-      };
-
-      if (shouldError) {
-        throw new Error('User interaction caused error');
-      }
-
-      return (
-        <button onClick={handleClick} data-testid="error-button">
-          Click to cause error
-        </button>
-      );
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <InteractiveErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    const button = screen.getByTestId('error-button');
-    await userEvent.click(button);
-
-    await screen.findByTestId('error-boundary');
-    expect(screen.getByText('Error: User interaction caused error')).toBeInTheDocument();
-  });
-};

package/src/__tests__/shared/index.ts

@@ -1,81 +0,0 @@
-/**
- * @file Shared Test Utilities Index
- * @package @jmruthers/pace-core
- * @module Tests/Shared
- * @since 0.3.0
- * 
- * Central export point for all shared test utilities.
- * This provides a single import point for all test utilities across the project.
- */
-
-// Core test utilities (optimized version)
-export * from './testUtils.optimized';
-export { default as testUtils } from './testUtils.optimized';
-
-// Component testing utilities
-export * from './componentTestUtils';
-export { default as componentTestUtils } from './componentTestUtils';
-
-// Integration testing utilities
-export * from './integrationTestUtils';
-export { default as integrationTestUtils } from './integrationTestUtils';
-
-// Performance testing utilities
-export * from './performanceTestUtils';
-export { default as performanceTestUtils } from './performanceTestUtils';
-
-
-// Re-export commonly used utilities for convenience
-export {
-  renderWithProviders,
-  rerenderWithProviders,
-  renderSimple,
-  createMockSupabaseClient,
-  createMockQueryClient,
-  mockComponents,
-  testDataGenerators,
-  testScenarios,
-  testAssertions,
-  testCleanup,
-  testErrorHandling,
-  testPerformance,
-  testAccessibility,
-  mockHooks,
-} from './testUtils.optimized';
-
-export {
-  renderComponent,
-  testComponentRendering,
-  testComponentAccessibility,
-  testComponentEvents,
-  testComponentState,
-  testComponentResponsiveness,
-  testFormComponent,
-  testDataTableComponent,
-  testModalComponent,
-} from './componentTestUtils';
-
-export {
-  testUserWorkflow,
-  testServiceIntegration,
-  testDataFlow,
-  testPerformanceWithRealData,
-  testAccessibilityIntegration,
-  testStateManagementIntegration,
-  testAPIIntegration,
-  testRealWorldScenarios,
-  testCrossBrowserCompatibility,
-} from './integrationTestUtils';
-
-export {
-  PERFORMANCE_THRESHOLDS,
-  measureRenderPerformance,
-  measureMemoryUsage,
-  measureRerenderPerformance,
-  measureInteractionPerformance,
-  testLargeDatasetPerformance,
-  testPerformanceRegression,
-  testPerformanceUnderLoad,
-  testResponsivePerformance,
-  createPerformanceTestSuite,
-} from './performanceTestUtils';