@jmruthers/pace-core 0.2.4

package/src/__tests__/shared/testUtils.optimized.tsx

@@ -0,0 +1,627 @@
+/**
+ * @file Optimized Test Utilities
+ * @package @jmruthers/pace-core
+ * @module Tests/Shared/OptimizedUtilities
+ * @since 0.4.0
+ * 
+ * Performance-optimized test utilities with minimal overhead
+ * and shared state management for faster test execution.
+ */
+
+import React from 'react';
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { vi, MockedFunction } from 'vitest';
+import type { SupabaseClient } from '@supabase/supabase-js';
+// Create a mock context for UnifiedAuthProvider
+const MockAuthContext = React.createContext({
+  user: null,
+  session: null,
+  loading: false,
+  signIn: vi.fn(),
+  signOut: vi.fn(),
+  signUp: vi.fn(),
+  resetPassword: vi.fn(),
+  updatePassword: vi.fn(),
+  refreshSession: vi.fn(),
+  can: vi.fn(() => true),
+  hasPermission: vi.fn(() => true),
+  hasRole: vi.fn(() => true),
+  hasAccessLevel: vi.fn(() => true),
+  refreshPermissions: vi.fn(),
+  isAuthenticated: false,
+  isUnauthenticated: true,
+  isInitialized: true,
+  error: null,
+  supabaseClient: {},
+  appConfig: {},
+  permissions: [],
+  roles: [],
+  accessLevel: 'none'
+});
+
+// Mock UnifiedAuthProvider for tests with proper context
+const UnifiedAuthProvider = ({ children, ...props }: any) => {
+  const mockContextValue = {
+    user: null,
+    session: null,
+    loading: false,
+    signIn: vi.fn(),
+    signOut: vi.fn(),
+    signUp: vi.fn(),
+    resetPassword: vi.fn(),
+    updatePassword: vi.fn(),
+    refreshSession: vi.fn(),
+    can: vi.fn(() => true),
+    hasPermission: vi.fn(() => true),
+    hasRole: vi.fn(() => true),
+    hasAccessLevel: vi.fn(() => true),
+    refreshPermissions: vi.fn(),
+    isAuthenticated: false,
+    isUnauthenticated: true,
+    isInitialized: true,
+    error: null,
+    supabaseClient: {},
+    appConfig: {},
+    permissions: [],
+    roles: [],
+    accessLevel: 'none'
+  };
+
+  return React.createElement(
+    MockAuthContext.Provider,
+    { value: mockContextValue },
+    React.createElement('div', { 'data-testid': 'unified-auth-provider' }, children)
+  );
+};
+
+// Mock useUnifiedAuth hook
+const useUnifiedAuth = () => {
+  const context = React.useContext(MockAuthContext);
+  if (!context) {
+    throw new Error('useUnifiedAuth must be used within a UnifiedAuthProvider');
+  }
+  return context;
+};
+
+// ============================================================================
+// Shared Mock Instances (Performance Optimization)
+// ============================================================================
+
+// OPTIMIZED: Create shared instances to avoid recreation
+let sharedQueryClient: QueryClient | null = null;
+let sharedSupabaseClient: SupabaseClient | null = null;
+
+function getSharedQueryClient(): QueryClient {
+  if (!sharedQueryClient) {
+    sharedQueryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+          cacheTime: 0,
+          staleTime: 0,
+        },
+        mutations: {
+          retry: false,
+        },
+      },
+    });
+  }
+  return sharedQueryClient;
+}
+
+function getSharedSupabaseClient(): SupabaseClient {
+  if (!sharedSupabaseClient) {
+    // Use the mocked client from vitest setup
+    const { createClient } = require('@supabase/supabase-js');
+    sharedSupabaseClient = createClient('https://mock.supabase.co', 'mock-key');
+    
+    // Ensure all methods are properly mocked
+    vi.spyOn(sharedSupabaseClient, 'rpc').mockResolvedValue({
+      data: { permissions: {}, roles: [], access_level: 'viewer' },
+      error: null
+    });
+    
+    vi.spyOn(sharedSupabaseClient.auth, 'getUser').mockResolvedValue({
+      data: { user: null },
+      error: null
+    });
+    
+    vi.spyOn(sharedSupabaseClient.auth, 'getSession').mockResolvedValue({
+      data: { session: null },
+      error: null
+    });
+    
+    vi.spyOn(sharedSupabaseClient.auth, 'signInWithPassword').mockResolvedValue({
+      data: { user: null, session: null },
+      error: null
+    });
+    
+    vi.spyOn(sharedSupabaseClient.auth, 'onAuthStateChange').mockReturnValue({
+      data: { subscription: { unsubscribe: vi.fn() } }
+    });
+    
+    // Mock the from method
+    vi.spyOn(sharedSupabaseClient, 'from').mockReturnValue({
+      select: vi.fn().mockReturnThis(),
+      eq: vi.fn().mockReturnThis(),
+      neq: vi.fn().mockReturnThis(),
+      gt: vi.fn().mockReturnThis(),
+      gte: vi.fn().mockReturnThis(),
+      lt: vi.fn().mockReturnThis(),
+      lte: vi.fn().mockReturnThis(),
+      like: vi.fn().mockReturnThis(),
+      ilike: vi.fn().mockReturnThis(),
+      is: vi.fn().mockReturnThis(),
+      in: vi.fn().mockReturnThis(),
+      contains: vi.fn().mockReturnThis(),
+      order: vi.fn().mockReturnThis(),
+      limit: vi.fn().mockReturnThis(),
+      offset: vi.fn().mockReturnThis(),
+      range: vi.fn().mockReturnThis(),
+      or: vi.fn().mockReturnThis(),
+      and: vi.fn().mockReturnThis(),
+      single: vi.fn().mockResolvedValue({ data: null, error: null }),
+      maybeSingle: vi.fn().mockResolvedValue({ data: null, error: null }),
+      insert: vi.fn().mockResolvedValue({ data: null, error: null }),
+      update: vi.fn().mockResolvedValue({ data: null, error: null }),
+      upsert: vi.fn().mockResolvedValue({ data: null, error: null }),
+      delete: vi.fn().mockResolvedValue({ data: null, error: null }),
+      then: vi.fn().mockResolvedValue({ data: null, error: null })
+    });
+  }
+  return sharedSupabaseClient;
+}
+
+// ============================================================================
+// Optimized Render Functions
+// ============================================================================
+
+/**
+ * OPTIMIZED: Fast render function with shared providers
+ * Reuses shared instances to avoid recreation overhead
+ */
+export function renderWithProviders(
+  ui: React.ReactElement,
+  options: RenderOptions & {
+    supabaseClient?: SupabaseClient;
+    queryClient?: QueryClient;
+    authProviderProps?: any;
+  } = {}
+): RenderResult {
+  const {
+    supabaseClient = getSharedSupabaseClient(),
+    queryClient = getSharedQueryClient(),
+    authProviderProps = {},
+    ...renderOptions
+  } = options;
+
+  const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      <UnifiedAuthProvider supabaseClient={supabaseClient} {...authProviderProps}>
+        {children}
+      </UnifiedAuthProvider>
+    </QueryClientProvider>
+  );
+
+  return render(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+/**
+ * OPTIMIZED: Minimal render function for simple component tests
+ * Skips providers when not needed
+ */
+export function renderMinimal(
+  ui: React.ReactElement,
+  options: RenderOptions = {}
+): RenderResult {
+  return render(ui, options);
+}
+
+/**
+ * OPTIMIZED: Fast rerender function
+ */
+export function rerenderWithProviders(
+  ui: React.ReactElement,
+  options: RenderOptions & {
+    supabaseClient?: SupabaseClient;
+    queryClient?: QueryClient;
+    authProviderProps?: any;
+  } = {}
+): RenderResult {
+  const {
+    supabaseClient = getSharedSupabaseClient(),
+    queryClient = getSharedQueryClient(),
+    authProviderProps = {},
+    ...renderOptions
+  } = options;
+
+  const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      <UnifiedAuthProvider supabaseClient={supabaseClient} {...authProviderProps}>
+        {children}
+      </UnifiedAuthProvider>
+    </QueryClientProvider>
+  );
+
+  return render(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+// ============================================================================
+// Performance Testing Utilities
+// ============================================================================
+
+/**
+ * OPTIMIZED: Fast component rendering test
+ */
+export function testComponentRendering<T extends Record<string, any>>(
+  Component: React.ComponentType<T>,
+  props: T = {} as T,
+  options: {
+    testId?: string;
+    expectedText?: string;
+    skipAccessibility?: boolean;
+  } = {}
+) {
+  const { testId, expectedText, skipAccessibility = false } = options;
+
+  it('should render correctly', () => {
+    const { container } = renderMinimal(<Component {...props} />);
+    
+    if (testId) {
+      expect(container.querySelector(`[data-testid="${testId}"]`)).toBeInTheDocument();
+    }
+    
+    if (expectedText) {
+      expect(container).toHaveTextContent(expectedText);
+    }
+  });
+
+  if (!skipAccessibility) {
+    it('should be accessible', () => {
+      const { container } = renderMinimal(<Component {...props} />);
+      // For components that return children directly (like ErrorBoundary), check if container has content
+      expect(container.firstChild || container.textContent).toBeTruthy();
+    });
+  }
+}
+
+/**
+ * OPTIMIZED: Fast accessibility test
+ */
+export function testComponentAccessibility<T extends Record<string, any>>(
+  Component: React.ComponentType<T>,
+  props: T = {} as T
+) {
+  it('should meet accessibility requirements', () => {
+    const { container } = renderMinimal(<Component {...props} />);
+    // For components that return children directly (like ErrorBoundary), check if container has content
+    expect(container.firstChild || container.textContent).toBeTruthy();
+  });
+}
+
+// ============================================================================
+// Mock Utilities
+// ============================================================================
+
+/**
+ * OPTIMIZED: Create lightweight mocks
+ */
+export function createLightweightMock<T extends (...args: any[]) => any>(
+  implementation?: T
+): MockedFunction<T> {
+  return vi.fn(implementation) as MockedFunction<T>;
+}
+
+/**
+ * OPTIMIZED: Create mock with minimal overhead
+ */
+export function createMinimalMock(returnValue: any = {}) {
+  return vi.fn().mockReturnValue(returnValue);
+}
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+/**
+ * OPTIMIZED: Fast test data generation
+ */
+export const testData = {
+  user: () => ({
+    id: 'test-user-id',
+    email: 'test@example.com',
+    name: 'Test User',
+  }),
+  
+  organisation: () => ({
+    id: 'test-org-id',
+    name: 'Test Organisation',
+    slug: 'test-org',
+  }),
+  
+  event: () => ({
+    id: 'test-event-id',
+    name: 'Test Event',
+    organisation_id: 'test-org-id',
+  }),
+  
+  // Generate arrays efficiently
+  users: (count: number) => Array.from({ length: count }, (_, i) => ({
+    id: `user-${i}`,
+    email: `user${i}@example.com`,
+    name: `User ${i}`,
+  })),
+  
+  organisations: (count: number) => Array.from({ length: count }, (_, i) => ({
+    id: `org-${i}`,
+    name: `Organisation ${i}`,
+    slug: `org-${i}`,
+  })),
+};
+
+/**
+ * Common test data generators (for backward compatibility)
+ */
+export const testDataGenerators = {
+  createUser: (id: number, overrides: any = {}) => ({
+    id: `user-${id}`,
+    name: `User ${id}`,
+    email: `user${id}@example.com`,
+    role: 'user',
+    ...overrides,
+  }),
+  
+  createSession: (overrides: any = {}) => ({
+    access_token: 'mock-access-token',
+    refresh_token: 'mock-refresh-token',
+    expires_in: 3600,
+    expires_at: Date.now() + 3600000,
+    token_type: 'bearer',
+    user: testDataGenerators.createUser(1),
+    ...overrides,
+  }),
+  
+  createUsers: (count: number) => 
+    Array.from({ length: count }, (_, i) => testDataGenerators.createUser(i + 1)),
+  
+  createOrganisation: (id: number, overrides: any = {}) => ({
+    id: `org-${id}`,
+    name: `Organisation ${id}`,
+    slug: `org-${id}`,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+    ...overrides,
+  }),
+  
+  createColumn: (id: string, overrides: any = {}) => ({
+    id,
+    header: id.charAt(0).toUpperCase() + id.slice(1),
+    accessorKey: id,
+    ...overrides,
+  }),
+  
+  createColumns: (fields: string[] = ['name', 'email', 'role']) =>
+    fields.map(field => testDataGenerators.createColumn(field)),
+};
+
+// ============================================================================
+// Performance Monitoring
+// ============================================================================
+
+/**
+ * OPTIMIZED: Lightweight performance measurement
+ */
+export const performance = {
+  measure: async <T,>(fn: () => T | Promise<T>): Promise<{ result: T; duration: number }> => {
+    const start = Date.now();
+    const result = await fn();
+    const duration = Date.now() - start;
+    return { result, duration };
+  },
+  
+  measureSync: <T,>(fn: () => T): { result: T; duration: number } => {
+    const start = Date.now();
+    const result = fn();
+    const duration = Date.now() - start;
+    return { result, duration };
+  },
+};
+
+// ============================================================================
+// Cleanup Utilities
+// ============================================================================
+
+/**
+ * OPTIMIZED: Minimal cleanup
+ */
+export function cleanupTest() {
+  // Only clear essential state
+  if (typeof localStorage !== 'undefined') {
+    localStorage.clear();
+  }
+  if (typeof sessionStorage !== 'undefined') {
+    sessionStorage.clear();
+  }
+}
+
+// ============================================================================
+// Performance Testing Functions (for backward compatibility)
+// ============================================================================
+
+/**
+ * Measure render performance (backward compatibility)
+ */
+export async function measureRenderPerformance<T extends Record<string, any>>(
+  Component: React.ComponentType<T>,
+  props: T = {} as T,
+  options: {
+    iterations?: number;
+    warmup?: number;
+    threshold?: number;
+  } = {}
+): Promise<{
+  averageTime: number;
+  minTime: number;
+  maxTime: number;
+  iterations: number;
+  passed: boolean;
+}> {
+  const { iterations = 10, warmup = 2, threshold = 100 } = options;
+  
+  // Warmup runs
+  for (let i = 0; i < warmup; i++) {
+    const { unmount } = renderMinimal(<Component {...props} />);
+    unmount(); // Clean up after each warmup
+  }
+  
+  // Performance runs
+  const times: number[] = [];
+  for (let i = 0; i < iterations; i++) {
+    const { result, duration } = performance.measureSync(() => {
+      const { unmount } = renderMinimal(<Component {...props} />);
+      unmount(); // Clean up after each performance run
+    });
+    times.push(duration);
+  }
+  
+  const averageTime = times.reduce((sum, time) => sum + time, 0) / times.length;
+  const minTime = Math.min(...times);
+  const maxTime = Math.max(...times);
+  const passed = averageTime <= threshold;
+  
+  return { averageTime, minTime, maxTime, iterations, passed };
+}
+
+/**
+ * Measure memory usage (backward compatibility)
+ */
+export async function measureMemoryUsage<T extends Record<string, any>>(
+  Component: React.ComponentType<T>,
+  props: T = {} as T,
+  options: {
+    threshold?: number;
+  } = {}
+): Promise<{
+  memoryIncrease: number;
+  passed: boolean;
+}> {
+  const { threshold = 50 * 1024 * 1024 } = options; // 50MB default
+  
+  const startMemory = (performance as any).memory?.usedJSHeapSize || 0;
+  const { unmount } = renderMinimal(<Component {...props} />);
+  const endMemory = (performance as any).memory?.usedJSHeapSize || 0;
+  unmount(); // Clean up after measurement
+  
+  const memoryIncrease = endMemory - startMemory;
+  const passed = memoryIncrease <= threshold;
+  
+  return { memoryIncrease, passed };
+}
+
+        // ============================================================================
+        // Mock Creation Functions
+        // ============================================================================
+
+        /**
+         * Creates a mock QueryClient instance.
+         * For performance, prefer using the `sharedQueryClient` unless specific client behavior is needed.
+         */
+        export function createMockQueryClient(): QueryClient {
+          return new QueryClient({
+            defaultOptions: {
+              queries: {
+                retry: false,
+                cacheTime: Infinity,
+              },
+            },
+          });
+        }
+
+        /**
+         * Creates a mock SupabaseClient instance.
+         * For performance, prefer using the `sharedMockSupabaseClient` unless specific client behavior is needed.
+         */
+        export function createMockSupabaseClient(): SupabaseClient {
+          // Use the shared client to avoid URL validation issues
+          return getSharedSupabaseClient();
+        }
+
+        /**
+         * Resets the state of the shared Supabase mock client.
+         * Call this in `beforeEach` if a test requires a clean Supabase state.
+         */
+        export function resetSharedSupabaseMock() {
+          const client = getSharedSupabaseClient();
+          client.from.mockClear();
+          client.auth.getUser.mockClear();
+          client.auth.getSession.mockClear();
+          client.rpc.mockClear();
+          // Add other specific mocks to clear if their state needs to be reset per test
+        }
+
+        // ============================================================================
+        // Stub Functions (for backward compatibility)
+        // ============================================================================
+
+        /**
+         * Test component events (stub for backward compatibility)
+         */
+        export function testComponentEvents<T extends Record<string, any>>(
+          Component: React.ComponentType<T>,
+          props: T,
+          events: Array<{ name: string; event: string; element: string; expectedBehavior: () => void }>
+        ): void {
+          // This is a stub function for backward compatibility
+          // The actual event testing should be done in individual test cases
+          console.warn('testComponentEvents is a stub function. Consider implementing event tests directly in your test file.');
+        }
+
+        /**
+         * Test form component (stub for backward compatibility)
+         */
+        export function testFormComponent<T extends Record<string, any>>(
+          Component: React.ComponentType<T>,
+          options: {
+            validationTests?: Array<{
+              name: string;
+              props: T;
+              expectedErrors?: string[];
+              expectedValid?: boolean;
+            }>;
+            interactionTests?: Array<{
+              name: string;
+              props: T;
+              userActions: Array<() => void>;
+              expectedResult: () => void;
+            }>;
+          }
+        ): void {
+          // This is a stub function for backward compatibility
+          // The actual form testing should be done in individual test cases
+          console.warn('testFormComponent is a stub function. Consider implementing form tests directly in your test file.');
+        }
+
+        // ============================================================================
+        // Export All Utilities
+        // ============================================================================
+
+        export default {
+          renderWithProviders,
+          renderMinimal,
+          rerenderWithProviders,
+          testComponentRendering,
+          testComponentAccessibility,
+          testComponentEvents,
+          createLightweightMock,
+          createMinimalMock,
+          createMockQueryClient,
+          createMockSupabaseClient,
+          resetSharedSupabaseMock,
+          testData,
+          testDataGenerators,
+          performance,
+          cleanupTest,
+          measureRenderPerformance,
+          measureMemoryUsage,
+        };

package/src/__tests__/simple.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { renderWithProviders } from './shared';
+
+describe('Simple Test', () => {
+  it('should render a simple div', () => {
+    renderWithProviders(<div data-testid="test-div">Hello World</div>);
+    expect(screen.getByTestId('test-div')).toBeInTheDocument();
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should render a simple component', () => {
+    const TestComponent = () => <div data-testid="component">Test Component</div>;
+    renderWithProviders(<TestComponent />);
+    expect(screen.getByTestId('component')).toBeInTheDocument();
+    expect(screen.getByText('Test Component')).toBeInTheDocument();
+  });
+});