@jmruthers/pace-core 0.2.4

package/src/__tests__/utils/edgeCaseConfig.ts

@@ -0,0 +1,98 @@
+/**
+ * Configuration for edge case testing
+ * Allows skipping low-value edge cases in local development
+ */
+
+export const shouldSkipEdgeCases = (): boolean => {
+  return process.env.SKIP_EDGE_CASES === 'true';
+};
+
+export const shouldSkipPrintEdgeCases = (): boolean => {
+  return process.env.SKIP_PRINT_EDGE_CASES === 'true' || shouldSkipEdgeCases();
+};
+
+// Conditional describe that skips when flag is set
+export const describeEdgeCases = shouldSkipEdgeCases() ? describe.skip : describe;
+export const describePrintEdgeCases = shouldSkipPrintEdgeCases() ? describe.skip : describe;
+
+export const EDGE_CASE_CONFIG = {
+  // Which edge cases to run based on component tier
+  tiers: {
+    CRITICAL: ['DataTable', 'Form', 'FileUpload', 'Select', 'NavigationMenu'],
+    STANDARD: ['Card', 'Input', 'Button', 'Toast', 'Dialog'],
+    MINIMAL: ['Avatar', 'Badge', 'Separator', 'Skeleton'], // Will use describeEdgeCases for these
+  },
+  
+  // Which specific edge case categories provide most value
+  highValue: [
+    'specialChars', // XSS/encoding bugs
+    'rapidChanges', // Race conditions
+    'memoryLeaks', // Performance issues
+    'boundaryConditions', // Edge case bugs
+  ],
+  
+  lowValue: [
+    'largeNumbers', // Rarely relevant for UI components
+    'deepObjects', // Rarely triggers issues in simple components
+  ],
+  
+  // Component-specific edge case filtering
+  componentSpecific: {
+    DataTable: {
+      skip: ['largeNumbers'], // DataTable handles large numbers well
+      keep: ['specialChars', 'rapidChanges', 'memoryLeaks', 'boundaryConditions', 'deepObjects']
+    },
+    Form: {
+      skip: ['deepObjects'], // Forms don't need deep object testing
+      keep: ['specialChars', 'rapidChanges', 'memoryLeaks', 'boundaryConditions', 'largeNumbers']
+    },
+    FileUpload: {
+      skip: ['largeNumbers'], // File size limits make this irrelevant
+      keep: ['specialChars', 'rapidChanges', 'memoryLeaks', 'boundaryConditions', 'deepObjects']
+    },
+    Button: {
+      skip: ['deepObjects', 'largeNumbers'], // Simple component
+      keep: ['specialChars', 'rapidChanges', 'memoryLeaks', 'boundaryConditions']
+    },
+    Card: {
+      skip: ['deepObjects', 'largeNumbers'], // Simple component
+      keep: ['specialChars', 'rapidChanges', 'memoryLeaks', 'boundaryConditions']
+    }
+  }
+};
+
+// Get component tier from test file path
+export const getComponentTier = (testFilePath: string): 'CRITICAL' | 'STANDARD' | 'MINIMAL' => {
+  const fileName = testFilePath.split('/').pop() || '';
+  const componentName = fileName.split('.')[0];
+  
+  if (EDGE_CASE_CONFIG.tiers.CRITICAL.some(name => componentName.includes(name))) {
+    return 'CRITICAL';
+  }
+  if (EDGE_CASE_CONFIG.tiers.STANDARD.some(name => componentName.includes(name))) {
+    return 'STANDARD';
+  }
+  return 'MINIMAL';
+};
+
+// Check if specific edge case should be skipped for a component
+export const shouldSkipEdgeCase = (testFilePath: string, edgeCaseType: string): boolean => {
+  if (shouldSkipEdgeCases()) {
+    return true;
+  }
+  
+  const componentName = testFilePath.split('/').pop()?.split('.')[0] || '';
+  const componentConfig = EDGE_CASE_CONFIG.componentSpecific[componentName as keyof typeof EDGE_CASE_CONFIG.componentSpecific];
+  
+  if (componentConfig) {
+    return componentConfig.skip.includes(edgeCaseType);
+  }
+  
+  // Default: skip low-value edge cases for minimal tier components
+  const tier = getComponentTier(testFilePath);
+  if (tier === 'MINIMAL' && EDGE_CASE_CONFIG.lowValue.includes(edgeCaseType)) {
+    return true;
+  }
+  
+  return false;
+};

package/src/__tests__/utils/mockHelpers.ts

@@ -0,0 +1,149 @@
+/**
+ * @file Mock helper functions
+ * @description Helper functions for creating mocks in tests
+ */
+
+import { vi } from 'vitest';
+import { User } from '@supabase/supabase-js';
+
+export const mockUser: User = {
+  id: 'test-user-id',
+  email: 'test@example.com',
+  created_at: '2023-01-01T00:00:00Z',
+  aud: 'authenticated',
+  role: 'authenticated',
+  email_confirmed_at: '2023-01-01T00:00:00Z',
+  phone: '',
+  confirmed_at: '2023-01-01T00:00:00Z',
+  last_sign_in_at: '2023-01-01T00:00:00Z',
+  app_metadata: {},
+  user_metadata: {
+    access_level: 'admin',
+    permissions: ['read', 'write', 'admin']
+  },
+  identities: [],
+  factors: []
+};
+
+export const mockUseUnifiedAuth = (isAuthenticated = true) => ({
+  // Auth state
+  user: isAuthenticated ? mockUser : null,
+  session: isAuthenticated ? { user: mockUser } : null,
+  isAuthenticated,
+  authLoading: false,
+  authError: null,
+  
+  // Auth methods
+  signIn: jest.fn().mockResolvedValue({ error: null }),
+  signUp: jest.fn().mockResolvedValue({ error: null }),
+  signOut: jest.fn().mockResolvedValue({ error: null }),
+  resetPassword: jest.fn().mockResolvedValue({ error: null }),
+  refreshSession: jest.fn().mockResolvedValue({ error: null }),
+  
+  // RBAC state
+  permissions: { read: true, write: true, admin: isAuthenticated },
+  roles: isAuthenticated ? ['admin'] : [],
+  accessLevel: isAuthenticated ? 'admin' : 'viewer',
+  rbacLoading: false,
+  rbacError: null,
+  
+  // User Event Access state
+  userEventAccess: isAuthenticated ? [
+    {
+      event_id: 'event-1',
+      event_name: 'Test Event 1',
+      event_description: 'Test event description',
+      start_date: '2024-01-01',
+      end_date: '2024-01-03',
+      event_status: 'active',
+      app_name: 'test-app',
+      access_level: 'planner',
+      granted_at: '2024-01-01T00:00:00Z'
+    },
+    {
+      event_id: 'event-2',
+      event_name: 'Test Event 2',
+      event_description: 'Another test event',
+      start_date: '2024-02-01',
+      end_date: '2024-02-03',
+      event_status: 'upcoming',
+      app_name: 'test-app',
+      access_level: 'participant',
+      granted_at: '2024-01-15T00:00:00Z'
+    }
+  ] : [],
+  eventAccessLoading: false,
+  
+  // RBAC methods
+  hasPermission: jest.fn().mockImplementation((_permission, _eventId, _appName) => isAuthenticated),
+  hasAnyPermission: jest.fn().mockImplementation((_permissions, _eventId, _appName) => isAuthenticated),
+  hasAllPermissions: jest.fn().mockImplementation((_permissions, _eventId, _appName) => isAuthenticated),
+  hasRole: jest.fn().mockImplementation((_role, _eventId, _appName) => isAuthenticated),
+  hasAccessLevel: jest.fn().mockImplementation((_level, _eventId, _appName) => isAuthenticated),
+  canAccess: jest.fn().mockImplementation((_resource, _action, _eventId, _appName) => isAuthenticated),
+  validatePermission: jest.fn().mockResolvedValue(isAuthenticated),
+  validateAccess: jest.fn().mockResolvedValue(isAuthenticated),
+  refreshPermissions: jest.fn().mockResolvedValue(undefined),
+  
+  // User Event Access methods
+  loadUserEventAccess: jest.fn().mockResolvedValue(undefined),
+  getUserEventAccess: jest.fn().mockImplementation((eventId: string) => 
+    isAuthenticated ? {
+      event_id: eventId,
+      event_name: `Event ${eventId}`,
+      event_description: 'Mock event description',
+      start_date: '2024-01-01',
+      end_date: '2024-01-03',
+      event_status: 'active',
+      app_name: 'test-app',
+      access_level: 'planner',
+      granted_at: '2024-01-01T00:00:00Z'
+    } : undefined
+  ),
+  
+  // Event state
+  events: [],
+  selectedEvent: null,
+  eventLoading: false,
+  eventError: null,
+  accessError: null,
+  
+  // Event methods
+  setSelectedEvent: jest.fn(),
+  clearEventSelection: jest.fn(),
+  refreshEvents: jest.fn().mockResolvedValue(undefined),
+  
+  // Combined states
+  isLoading: false,
+  hasErrors: false
+});
+
+export const mockUsePermission = (hasPermission = false) => ({
+  hasPermission: jest.fn().mockImplementation((_permission, _eventId, _appName) => hasPermission),
+  permissions: hasPermission ? ['read'] : [],
+  accessLevel: hasPermission ? 'admin' : 'viewer',
+  isLoading: false,
+  error: null
+});
+
+export const mockThemeContext = {
+  theme: 'light' as const,
+  setTheme: vi.fn(),
+  toggleTheme: vi.fn(),
+};
+
+export const createMockResizeObserver = () => {
+  global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+};
+
+export const createMockIntersectionObserver = () => {
+  global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+};

package/src/__tests__/utils/mockLoader.ts

@@ -0,0 +1,101 @@
+/**
+ * Lazy Mock Loader
+ * Loads mocks only when needed to reduce initial setup time
+ */
+
+import { vi } from 'vitest';
+
+// Track which mocks have been loaded
+const loadedMocks = new Set<string>();
+
+export const loadMock = (moduleName: string, mockFactory: () => any) => {
+  if (!loadedMocks.has(moduleName)) {
+    vi.doMock(moduleName, mockFactory);
+    loadedMocks.add(moduleName);
+  }
+};
+
+// Lazy mock for @tanstack/react-virtual
+export const loadVirtualMock = () => {
+  loadMock('@tanstack/react-virtual', () => ({
+    useVirtualizer: vi.fn(() => ({
+      getVirtualItems: () => [],
+      getTotalSize: () => 0,
+    })),
+  }));
+};
+
+// Lazy mock for @radix-ui/react-toast
+export const loadToastMock = () => {
+  loadMock('@radix-ui/react-toast', () => ({
+    Toaster: vi.fn(({ children }) => children),
+    useToast: vi.fn(() => ({
+      toast: vi.fn(),
+      dismiss: vi.fn(),
+      toasts: [],
+    })),
+    toast: vi.fn(),
+  }));
+};
+
+// Lazy mock for @tanstack/react-table (if not already loaded)
+export const loadTableMock = () => {
+  loadMock('@tanstack/react-table', () => {
+    const mockTable = {
+      getHeaderGroups: () => [],
+      getRowModel: () => ({ rows: [] }),
+      getCanPreviousPage: () => false,
+      getCanNextPage: () => false,
+      getPageCount: () => 1,
+      getState: () => ({ pagination: { pageIndex: 0, pageSize: 10 } }),
+      setPageIndex: vi.fn(),
+      setPageSize: vi.fn(),
+      previousPage: vi.fn(),
+      nextPage: vi.fn(),
+      getFilteredRowModel: () => ({ rows: [] }),
+      getSortedRowModel: () => ({ rows: [] }),
+      getGroupedRowModel: () => ({ rows: [] }),
+      getExpandedRowModel: () => ({ rows: [] }),
+      getPaginationRowModel: () => ({ rows: [] }),
+      getRowSelectionHandler: () => vi.fn(),
+      getRowSelectionSubRowsHandler: () => vi.fn(),
+      getAllColumns: () => [],
+      getColumnDefs: () => [],
+      getVisibleColumns: () => [],
+      getColumnById: vi.fn(),
+      getColumn: vi.fn(),
+      getRow: vi.fn(),
+      getRowById: vi.fn(),
+      getSelectedRowModel: () => ({ rows: [] }),
+      getPrePaginationRowModel: () => ({ rows: [] }),
+      getCoreRowModel: () => ({ rows: [] }),
+    };
+
+    return {
+      flexRender: (component: any, props: any) => component,
+      getCoreRowModel: vi.fn(),
+      getFilteredRowModel: vi.fn(),
+      getSortedRowModel: vi.fn(),
+      getPaginationRowModel: vi.fn(),
+      getGroupedRowModel: vi.fn(),
+      getExpandedRowModel: vi.fn(),
+      createColumnHelper: vi.fn(),
+      useReactTable: vi.fn(() => mockTable),
+    };
+  });
+};
+
+// Auto-load mocks based on test file patterns
+export const autoLoadMocks = (testFilePath: string) => {
+  if (testFilePath.includes('DataTable') || testFilePath.includes('Table')) {
+    loadTableMock();
+  }
+  
+  if (testFilePath.includes('Virtual') || testFilePath.includes('Scroll')) {
+    loadVirtualMock();
+  }
+  
+  if (testFilePath.includes('Toast') || testFilePath.includes('Notification')) {
+    loadToastMock();
+  }
+};

package/src/__tests__/utils/performanceHelpers.ts

@@ -0,0 +1,55 @@
+
+/**
+ * @file Performance test helpers
+ * @description Helper functions for performance testing
+ */
+
+import { performance } from 'perf_hooks';
+
+export interface PerformanceThresholds {
+  renderTime: number;
+  memoryUsage: number;
+  componentCount: number;
+}
+
+export const defaultThresholds: PerformanceThresholds = {
+  renderTime: 100, // ms
+  memoryUsage: 50, // MB
+  componentCount: 1000
+};
+
+export function measureRenderTime<T>(fn: () => T): { result: T; time: number } {
+  const startTime = performance.now();
+  const result = fn();
+  const endTime = performance.now();
+  
+  return {
+    result,
+    time: endTime - startTime
+  };
+}
+
+export function getMemoryUsage(): number {
+  if (typeof process !== 'undefined' && process.memoryUsage) {
+    return process.memoryUsage().heapUsed / 1024 / 1024; // Convert to MB
+  }
+  return 0;
+}
+
+export function validatePerformance(
+  metrics: { renderTime: number; memoryUsage: number },
+  thresholds: PerformanceThresholds = defaultThresholds
+): boolean {
+  return (
+    metrics.renderTime <= thresholds.renderTime &&
+    metrics.memoryUsage <= thresholds.memoryUsage
+  );
+}
+
+export function createLargeDataset(size: number): Array<{ id: string; name: string; value: number }> {
+  return Array.from({ length: size }, (_, index) => ({
+    id: `item-${index}`,
+    name: `Item ${index}`,
+    value: Math.random() * 100
+  }));
+}

package/src/__tests__/utils/performanceTestHelpers.ts

@@ -0,0 +1,68 @@
+
+import { render, RenderResult } from '@testing-library/react';
+import { ReactElement } from 'react';
+
+export interface PerformanceMetrics {
+  renderTime: number;
+  componentName: string;
+  passed: boolean;
+  threshold: number;
+}
+
+export function measureRenderPerformance(
+  component: ReactElement,
+  threshold: number = 100
+): PerformanceMetrics {
+  // Safely extract component name
+  const getComponentName = (element: ReactElement): string => {
+    if (typeof element.type === 'string') {
+      return element.type;
+    }
+    if (typeof element.type === 'function') {
+      return (element.type as any).displayName || element.type.name || 'Component';
+    }
+    return 'Unknown';
+  };
+
+  const componentName = getComponentName(component);
+  const start = performance.now();
+  
+  render(component);
+  
+  const renderTime = performance.now() - start;
+  const passed = renderTime <= threshold;
+  
+  return {
+    renderTime,
+    componentName,
+    passed,
+    threshold
+  };
+}
+
+export function createPerformanceBenchmark(name: string, threshold: number) {
+  return {
+    name,
+    threshold,
+    test: (renderFn: () => RenderResult) => {
+      const start = performance.now();
+      const result = renderFn();
+      const time = performance.now() - start;
+      
+      return {
+        result,
+        time,
+        passed: time < threshold,
+        message: `${name} took ${time.toFixed(2)}ms (threshold: ${threshold}ms)`
+      };
+    }
+  };
+}
+
+export const PERFORMANCE_THRESHOLDS = {
+  COMPONENT_RENDER: 50, // 50ms for component render
+  FORM_VALIDATION: 10,  // 10ms for form validation
+  SEARCH_FILTER: 100,   // 100ms for search/filter operations
+  DATA_PROCESSING: 200, // 200ms for data processing
+  LARGE_LIST_RENDER: 500, // 500ms for large list rendering
+} as const;

package/src/__tests__/utils/testDataFactories.ts

@@ -0,0 +1,28 @@
+
+import { vi } from 'vitest';
+
+export function createMockUser(overrides = {}) {
+  return {
+    id: 'test-user-id',
+    email: 'test@example.com',
+    user_metadata: {},
+    ...overrides,
+  };
+}
+
+export function createEnhancedMockSupabaseClient() {
+  return {
+    auth: {
+      resetPasswordForEmail: vi.fn().mockResolvedValue({ error: null }),
+      signInWithPassword: vi.fn().mockResolvedValue({ error: null }),
+      signUp: vi.fn().mockResolvedValue({ error: null }),
+      signOut: vi.fn().mockResolvedValue({ error: null }),
+      getUser: vi.fn().mockResolvedValue({ data: { user: null }, error: null }),
+      getSession: vi.fn().mockResolvedValue({ data: { session: null }, error: null }),
+      onAuthStateChange: vi.fn().mockImplementation((callback) => {
+        callback('INITIAL_SESSION', null);
+        return { data: { subscription: { unsubscribe: vi.fn() } } };
+      }),
+    }
+  };
+}

package/src/__tests__/utils/testIsolation.ts

@@ -0,0 +1,67 @@
+
+/**
+ * @file Test isolation utilities
+ */
+
+import { vi } from 'vitest';
+
+export const TestIsolation = {
+  setupTest: (options: {
+    clearLocalStorage?: boolean;
+    resetScrollPosition?: boolean;
+    resetMocks?: boolean;
+    clearTimers?: boolean;
+    restoreConsole?: boolean;
+  } = {}) => {
+    const {
+      clearLocalStorage = false,
+      resetScrollPosition = false,
+      resetMocks = false,
+      clearTimers = false,
+      restoreConsole = false
+    } = options;
+
+    if (clearLocalStorage) {
+      localStorage.clear();
+      sessionStorage.clear();
+    }
+
+    if (resetScrollPosition) {
+      // Mock scrollTo to prevent JSDOM errors
+      Object.defineProperty(window, 'scrollTo', {
+        value: vi.fn(),
+        writable: true
+      });
+    }
+
+    if (resetMocks) {
+      vi.clearAllMocks();
+    }
+
+    if (clearTimers) {
+      vi.clearAllTimers();
+    }
+
+    if (restoreConsole) {
+      vi.restoreAllMocks();
+    }
+  },
+
+  teardownTest: (options: {
+    clearTimers?: boolean;
+  } = {}) => {
+    const { clearTimers = false } = options;
+
+    if (clearTimers) {
+      vi.clearAllTimers();
+    }
+  },
+
+  waitForStableState: async (timeout = 1000) => {
+    return new Promise(resolve => setTimeout(resolve, timeout));
+  },
+
+  createDeterministicMock: (implementation: any) => {
+    return vi.fn().mockImplementation(implementation);
+  }
+};

package/src/__tests__/utils/visualTestHelpers.ts

@@ -0,0 +1,20 @@
+
+/**
+ * @file Visual testing utilities
+ */
+
+export async function createVisualSnapshot(container: HTMLElement): Promise<string> {
+  // Simple snapshot creation - just return the HTML content
+  return container.innerHTML;
+}
+
+export async function compareVisualSnapshots(snapshot1: string, snapshot2: string): Promise<{ hasDifferences: boolean; diffPercentage: number }> {
+  // Simple comparison - check if snapshots are different
+  const hasDifferences = snapshot1 !== snapshot2;
+  const diffPercentage = hasDifferences ? 100 : 0;
+  
+  return {
+    hasDifferences,
+    diffPercentage
+  };
+}

package/src/__tests__/visual/__snapshots__/componentSnapshots.visual.test.tsx.snap

@@ -0,0 +1,68 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Component Visual Regression Tests > Button Variants > should render default button correctly 1`] = `
+<div
+  data-testid="unified-auth-provider"
+>
+  <button
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-main-600 text-main-50 shadow hover:bg-acc-400 h-9 px-4 py-2"
+    type="button"
+  >
+    Default Button
+  </button>
+</div>
+`;
+
+exports[`Component Visual Regression Tests > Button Variants > should render destructive button correctly 1`] = `
+<div
+  data-testid="unified-auth-provider"
+>
+  <button
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-acc-600 text-acc-50 shadow-sm hover:bg-acc-400 h-9 px-4 py-2"
+    type="button"
+  >
+    Delete
+  </button>
+</div>
+`;
+
+exports[`Component Visual Regression Tests > Button Variants > should render disabled button correctly 1`] = `
+<div
+  data-testid="unified-auth-provider"
+>
+  <button
+    aria-disabled="true"
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-main-600 text-main-50 shadow hover:bg-acc-400 h-9 px-4 py-2"
+    disabled=""
+    type="button"
+  >
+    Disabled
+  </button>
+</div>
+`;
+
+exports[`Component Visual Regression Tests > Button Variants > should render outline button correctly 1`] = `
+<div
+  data-testid="unified-auth-provider"
+>
+  <button
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-main-300 bg-background shadow-sm hover:bg-acc-400 h-9 px-4 py-2"
+    type="button"
+  >
+    Outline
+  </button>
+</div>
+`;
+
+exports[`Component Visual Regression Tests > should render Button component visually 1`] = `
+<div
+  data-testid="unified-auth-provider"
+>
+  <button
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-main-600 text-main-50 shadow hover:bg-acc-400 h-9 px-4 py-2"
+    type="button"
+  >
+    Test Button
+  </button>
+</div>
+`;

package/src/__tests__/visual/__snapshots__/componentVisuals.visual.test.tsx.snap

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Component Visual Tests > should render Button component visually 1`] = `
+<div
+  data-testid="unified-auth-provider"
+>
+  <button
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-main-600 text-main-50 shadow hover:bg-acc-400 h-9 px-4 py-2"
+    type="button"
+  >
+    Test Button
+  </button>
+</div>
+`;