@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Table/__tests__/Table.accessibility.test.tsx

@@ -1,233 +0,0 @@
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import { userEvent } from '@testing-library/user-event';
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { Table } from '../Table';
-import { renderWithProviders  } from "../../../__tests__/shared";
-
-describe('Table Accessibility', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders with table role for accessibility', () => {
-    renderWithProviders(<Table />);
-    expect(screen.getByRole('table')).toBeInTheDocument();
-  });
-describe('Table Error Handling', () => {
-  const user = userEvent.setup();
-  let restoreConsole: (() => void) | null = null;
-
-  beforeEach(() => {
-    restoreConsole = errorTestingUtils.suppressConsoleErrors();
-  });
-
-  afterEach(() => {
-    if (restoreConsole) {
-      restoreConsole();
-    }
-  });
-
-  it('should handle component errors gracefully', () => {
-    const ErrorComponent = () => {
-      throw new Error('Table component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Table component error')).toBeInTheDocument();
-  });
-
-  it('should handle async errors', async () => {
-    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
-      const [error, setError] = React.useState<Error | null>(null);
-
-      React.useEffect(() => {
-        if (shouldFail) {
-          setError(new Error('Async error'));
-        }
-      }, [shouldFail]);
-
-      if (error) {
-        throw error;
-      }
-
-      return <div>Async component</div>;
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <AsyncErrorComponent shouldFail={true} />
-      </TestErrorBoundary>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle user interaction errors', async () => {
-    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
-      'Table interaction error',
-      'click'
-    );
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    await user.click(screen.getByTestId('error-button'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-display')).toBeInTheDocument();
-    });
-  });
-
-  it('should recover from errors when props change', async () => {
-    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
-      if (shouldError) {
-        throw new Error('Table prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-describe('Table Edge Cases', () => {
-  describe('Extreme Data Values', () => {
-    it('should handle very long strings', () => {
-      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
-      
-      renderWithProviders(<Table>{longString}</Table>);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('should handle empty and null values', () => {
-      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
-      
-      emptyValues.forEach(value => {
-        const { unmount } = renderWithProviders(<Table>{value as any}</Table>);
-        expect(screen.getByRole('table')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle special characters', () => {
-      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
-      
-      renderWithProviders(<Table>{specialChars}</Table>);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('should handle unicode characters', () => {
-      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
-      
-      renderWithProviders(<Table>{unicodeChars}</Table>);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-  });
-
-  describe('Extreme Numbers', () => {
-    it('should handle very large numbers', () => {
-      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
-      
-      largeNumbers.forEach(number => {
-        const { unmount } = renderWithProviders(<Table value={number} />);
-        expect(screen.getByRole('table')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle very small numbers', () => {
-      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
-      
-      smallNumbers.forEach(number => {
-        const { unmount } = renderWithProviders(<Table value={number} />);
-        expect(screen.getByRole('table')).toBeInTheDocument();
-        unmount();
-      });
-    });
-  });
-
-  describe('Rapid State Changes', () => {
-    it('should handle rapid prop changes', async () => {
-      const stateProps = [
-        { children: 'State 1' },
-        { children: 'State 2' },
-        { children: 'State 3' },
-        { children: 'State 4' },
-        { children: 'State 5' },
-      ];
-
-      await edgeCaseUtils.testRapidStateChanges(Table, stateProps);
-    });
-
-    it('should handle rapid user interactions', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(<Table />);
-      
-      const table = screen.getByRole('table');
-      
-      // Rapidly interact with the component
-      for (let i = 0; i < 10; i++) {
-        await user.click(table);
-        await new Promise(resolve => setTimeout(resolve, 0));
-      }
-      
-      expect(table).toBeInTheDocument();
-    });
-  });
-
-  describe('Memory Management', () => {
-    it('should not leak memory with repeated renders', () => {
-      edgeCaseUtils.testMemoryLeaks(Table, { children: 'Memory test' });
-    });
-  });
-
-  describe('Boundary Conditions', () => {
-    it('should handle boundary prop values', () => {
-      const boundaryProps = [
-        { children: '' },
-        { children: 0 },
-        { children: false },
-        { children: [] },{ className: '' },
-        { 'data-testid': '' },
-      ];
-
-      edgeCaseUtils.testBoundaryConditions(Table, boundaryProps);
-    });
-  });
-
-  describe('Complex Data Structures', () => {
-    it('should handle deeply nested objects', () => {
-      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
-      
-      renderWithProviders(<Table data={deepObject} />);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('should handle large arrays', () => {
-      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
-      
-      renderWithProviders(<Table items={largeArray} />);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-  });
-});
-}); 

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

@@ -1,235 +0,0 @@
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import { userEvent } from '@testing-library/user-event';
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { Table } from '../Table';
-import { renderWithProviders  } from "../../../__tests__/shared";
-
-describe('Table Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    renderWithProviders(<Table />);
-    expect(screen.getByRole('table')).toBeInTheDocument();
-  });
-
-  // Add more unit tests as needed for props, data, etc.
-describe('Table Error Handling', () => {
-  const user = userEvent.setup();
-  let restoreConsole: (() => void) | null = null;
-
-  beforeEach(() => {
-    restoreConsole = errorTestingUtils.suppressConsoleErrors();
-  });
-
-  afterEach(() => {
-    if (restoreConsole) {
-      restoreConsole();
-    }
-  });
-
-  it('should handle component errors gracefully', () => {
-    const ErrorComponent = () => {
-      throw new Error('Table component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Table component error')).toBeInTheDocument();
-  });
-
-  it('should handle async errors', async () => {
-    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
-      const [error, setError] = React.useState<Error | null>(null);
-
-      React.useEffect(() => {
-        if (shouldFail) {
-          setError(new Error('Async error'));
-        }
-      }, [shouldFail]);
-
-      if (error) {
-        throw error;
-      }
-
-      return <div>Async component</div>;
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <AsyncErrorComponent shouldFail={true} />
-      </TestErrorBoundary>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle user interaction errors', async () => {
-    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
-      'Table interaction error',
-      'click'
-    );
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    await user.click(screen.getByTestId('error-button'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-display')).toBeInTheDocument();
-    });
-  });
-
-  it('should recover from errors when props change', async () => {
-    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
-      if (shouldError) {
-        throw new Error('Table prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-describe('Table Edge Cases', () => {
-  describe('Extreme Data Values', () => {
-    it('should handle very long strings', () => {
-      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
-      
-      renderWithProviders(<Table>{longString}</Table>);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('should handle empty and null values', () => {
-      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
-      
-      emptyValues.forEach(value => {
-        const { unmount } = renderWithProviders(<Table>{value as any}</Table>);
-        expect(screen.getByRole('table')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle special characters', () => {
-      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
-      
-      renderWithProviders(<Table>{specialChars}</Table>);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('should handle unicode characters', () => {
-      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
-      
-      renderWithProviders(<Table>{unicodeChars}</Table>);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-  });
-
-  describe('Extreme Numbers', () => {
-    it('should handle very large numbers', () => {
-      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
-      
-      largeNumbers.forEach(number => {
-        const { unmount } = renderWithProviders(<Table value={number} />);
-        expect(screen.getByRole('table')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle very small numbers', () => {
-      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
-      
-      smallNumbers.forEach(number => {
-        const { unmount } = renderWithProviders(<Table value={number} />);
-        expect(screen.getByRole('table')).toBeInTheDocument();
-        unmount();
-      });
-    });
-  });
-
-  describe('Rapid State Changes', () => {
-    it('should handle rapid prop changes', async () => {
-      const stateProps = [
-        { children: 'State 1' },
-        { children: 'State 2' },
-        { children: 'State 3' },
-        { children: 'State 4' },
-        { children: 'State 5' },
-      ];
-
-      await edgeCaseUtils.testRapidStateChanges(Table, stateProps);
-    });
-
-    it('should handle rapid user interactions', async () => {
-      const user = userEvent.setup();
-      renderWithProviders(<Table />);
-      
-      const table = screen.getByRole('table');
-      
-      // Rapidly interact with the component
-      for (let i = 0; i < 10; i++) {
-        await user.click(table);
-        await new Promise(resolve => setTimeout(resolve, 0));
-      }
-      
-      expect(table).toBeInTheDocument();
-    });
-  });
-
-  describe('Memory Management', () => {
-    it('should not leak memory with repeated renders', () => {
-      edgeCaseUtils.testMemoryLeaks(Table, { children: 'Memory test' });
-    });
-  });
-
-  describe('Boundary Conditions', () => {
-    it('should handle boundary prop values', () => {
-      const boundaryProps = [
-        { children: '' },
-        { children: 0 },
-        { children: false },
-        { children: [] },{ className: '' },
-        { 'data-testid': '' },
-      ];
-
-      edgeCaseUtils.testBoundaryConditions(Table, boundaryProps);
-    });
-  });
-
-  describe('Complex Data Structures', () => {
-    it('should handle deeply nested objects', () => {
-      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
-      
-      renderWithProviders(<Table data={deepObject} />);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('should handle large arrays', () => {
-      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
-      
-      renderWithProviders(<Table items={largeArray} />);
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-  });
-});
-}); 

package/src/components/Toast/__tests__/Toast.accessibility.test.tsx

@@ -1,238 +0,0 @@
-/**
- * @file Toast Accessibility Tests
- * @description Core accessibility tests for Toast component
- */
-
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders  } from "../../../__tests__/shared";
-
-// Mock the Toast components for accessibility testing
-vi.mock('../Toast', () => {
-  const actual = vi.importActual('../Toast');
-  return {
-    ...actual,
-    Toast: ({ children, ...props }: any) => (
-      <div data-testid="toast" role="status" aria-live="polite" {...props}>
-        {children}
-      </div>
-    ),
-    ToastTitle: ({ children, ...props }: any) => (
-      <div data-testid="toast-title" {...props}>{children}</div>
-    ),
-    ToastDescription: ({ children, ...props }: any) => (
-      <div data-testid="toast-description" {...props}>{children}</div>
-    ),
-    ToastAction: ({ children, altText, ...props }: any) => (
-      <button data-testid="toast-action" aria-label={altText} {...props}>
-        {children}
-      </button>
-    ),
-    ToastClose: ({ ...props }: any) => (
-      <button data-testid="toast-close" aria-label="Close" {...props}>
-        ×
-      </button>
-    ),
-    ToastProvider: ({ children }: { children: React.ReactNode }) => (
-      <div data-testid="toast-provider">{children}</div>
-    ),
-    ToastViewport: ({ ...props }: any) => (
-      <div data-testid="toast-viewport" aria-live="polite" aria-atomic="true" {...props} />
-    ),
-  };
-});
-
-import {
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-  ToastProvider,
-  ToastViewport,
-} from '../Toast';
-
-// Test component with toast
-const ToastTestComponent = ({ 
-  title = "Toast Title",
-  description = "Toast description",
-  showAction = false,
-  showClose = true,
-}: {
-  title?: string;
-  description?: string;
-  showAction?: boolean;
-  showClose?: boolean;
-}) => {
-  return (
-    <ToastProvider>
-      <ToastViewport />
-      <Toast data-testid="toast">
-        <div className="grid gap-1">
-          <ToastTitle data-testid="toast-title">{title}</ToastTitle>
-          <ToastDescription data-testid="toast-description">
-            {description}
-          </ToastDescription>
-        </div>
-        {showAction && (
-          <ToastAction 
-            data-testid="toast-action"
-            altText="Retry action"
-          >
-            Retry
-          </ToastAction>
-        )}
-        {showClose && (
-          <ToastClose data-testid="toast-close" />
-        )}
-      </Toast>
-    </ToastProvider>
-  );
-};
-
-describe('Toast Accessibility', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('ARIA Attributes and Roles', () => {
-    it('should have proper ARIA attributes for toast', () => {
-      renderWithProviders(<ToastTestComponent />);
-
-      const toast = screen.getByTestId('toast');
-      const title = screen.getByTestId('toast-title');
-      const description = screen.getByTestId('toast-description');
-
-      // Check that toast has proper role
-      expect(toast).toHaveAttribute('role', 'status');
-      
-      // Check that toast has aria-live for announcements
-      expect(toast).toHaveAttribute('aria-live', 'polite');
-      
-      // Check that title and description are properly associated
-      expect(title).toBeInTheDocument();
-      expect(description).toBeInTheDocument();
-    });
-
-    it('should have proper ARIA attributes for toast action', () => {
-      renderWithProviders(<ToastTestComponent showAction={true} />);
-
-      const action = screen.getByTestId('toast-action');
-      
-      // Action should have proper alt text
-      expect(action).toHaveAttribute('aria-label', 'Retry action');
-    });
-
-    it('should have proper ARIA attributes for toast close button', () => {
-      renderWithProviders(<ToastTestComponent showClose={true} />);
-
-      const closeButton = screen.getByTestId('toast-close');
-      
-      // Close button should be accessible
-      expect(closeButton).toBeInTheDocument();
-      expect(closeButton).toHaveAttribute('aria-label', 'Close');
-    });
-  });
-
-  describe('Screen Reader Compatibility', () => {
-    it('should announce toast content to screen readers', () => {
-      renderWithProviders(<ToastTestComponent title="Success" description="Operation completed successfully" />);
-
-      const toast = screen.getByTestId('toast');
-      const title = screen.getByTestId('toast-title');
-      const description = screen.getByTestId('toast-description');
-
-      // Toast should have live region for announcements
-      expect(toast).toHaveAttribute('aria-live', 'polite');
-      
-      // Content should be properly structured
-      expect(title).toHaveTextContent('Success');
-      expect(description).toHaveTextContent('Operation completed successfully');
-    });
-
-    it('should provide proper alt text for actions', () => {
-      renderWithProviders(<ToastTestComponent showAction={true} />);
-
-      const action = screen.getByTestId('toast-action');
-      
-      // Action should have descriptive alt text
-      expect(action).toHaveAttribute('aria-label', 'Retry action');
-    });
-  });
-
-  describe('Toast Viewport Accessibility', () => {
-    it('should have proper viewport ARIA attributes', () => {
-      renderWithProviders(
-        <ToastProvider>
-          <ToastViewport data-testid="toast-viewport" />
-        </ToastProvider>
-      );
-
-      const viewport = screen.getByTestId('toast-viewport');
-      
-      // Viewport should have proper ARIA attributes
-      expect(viewport).toHaveAttribute('aria-live', 'polite');
-      expect(viewport).toHaveAttribute('aria-atomic', 'true');
-    });
-  });
-
-  describe('Toast Provider Accessibility', () => {
-    it('should provide proper context for toasts', () => {
-      renderWithProviders(
-        <ToastProvider data-testid="toast-provider">
-          <ToastViewport />
-        </ToastProvider>
-      );
-
-      const provider = screen.getByTestId('toast-provider');
-      
-      // Provider should be present for toast context
-      expect(provider).toBeInTheDocument();
-    });
-  });
-
-  describe('Multiple Toasts', () => {
-    it('should handle multiple toasts with proper accessibility', () => {
-      renderWithProviders(
-        <ToastProvider>
-          <ToastViewport />
-          <Toast data-testid="toast-1">
-            <ToastTitle>First Toast</ToastTitle>
-          </Toast>
-          <Toast data-testid="toast-2">
-            <ToastTitle>Second Toast</ToastTitle>
-          </Toast>
-        </ToastProvider>
-      );
-
-      const toast1 = screen.getByTestId('toast-1');
-      const toast2 = screen.getByTestId('toast-2');
-
-      expect(toast1).toBeInTheDocument();
-      expect(toast2).toBeInTheDocument();
-      
-      // Both toasts should be accessible
-      expect(toast1).toHaveAttribute('role', 'status');
-      expect(toast2).toHaveAttribute('role', 'status');
-    });
-  });
-
-  describe('Error Handling and Edge Cases', () => {
-    it('should handle toast with no content gracefully', () => {
-      renderWithProviders(
-        <ToastProvider>
-          <ToastViewport />
-          <Toast data-testid="empty-toast">
-            {/* No content */}
-          </Toast>
-        </ToastProvider>
-      );
-
-      const toast = screen.getByTestId('empty-toast');
-      expect(toast).toBeInTheDocument();
-      expect(toast).toHaveAttribute('role', 'status');
-    });
-  });
-});