@jmruthers/pace-core 0.5.73 → 0.5.75

package/src/__tests__/helpers/README.md

@@ -0,0 +1,255 @@
+# Test Helpers Directory
+
+## Overview
+
+This directory contains all test helper utilities used across the test suite. All helpers are exported through a unified `index.ts` file for convenient imports.
+
+## Quick Start
+
+```typescript
+// Import from the unified index
+import { 
+  createMockSupabaseClient,
+  renderWithProviders,
+  testDataGenerators 
+} from '@test/helpers';
+```
+
+## Helper Files
+
+### 📦 `supabaseMock.ts`
+Supabase client and query builder mocking utilities.
+
+**Exports**:
+- `createMockSupabaseClient()` - Create a mock Supabase client
+- `createMockQueryBuilder()` - Create a mock query builder with thenable interface
+- `createMockSupabaseAuth()` - Create a mock Supabase auth module
+
+**Usage**:
+```typescript
+import { createMockSupabaseClient } from './supabaseMock';
+
+const mockClient = createMockSupabaseClient();
+mockClient.from('users').select().mockResolvedValue({ data: [], error: null });
+```
+
+### 🔗 `test-providers.tsx`
+React context provider mocking utilities.
+
+**Exports**:
+- `TestProviderWrapper` - Wrapper component with all providers
+- `renderWithProviders()` - Render component with providers
+- `useMockUnifiedAuth()` - Mock unified auth context
+
+**Usage**:
+```typescript
+import { renderWithProviders } from './test-providers';
+
+const { result } = renderWithProviders(<MyComponent />);
+```
+
+### 🛠️ `test-utils.tsx`
+General testing utilities and data generators.
+
+**Exports**:
+- `renderWithProviders()` - Custom render function with providers
+- `testDataGenerators` - Generate test data
+- `testHelpers` - Common test helper functions
+- `setupTest()` - Setup test environment
+- `createComponentTestStructure()` - Component test patterns
+- `createHookTestStructure()` - Hook test patterns
+
+**Usage**:
+```typescript
+import { testDataGenerators, setupTest } from './test-utils';
+
+const mockUser = testDataGenerators.user({ name: 'Test User' });
+```
+
+### 🧩 `component-test-utils.tsx`
+Specialized utilities for component testing.
+
+**Exports**:
+- `componentTestPatterns` - Reusable component test patterns
+- `commonScenarios` - Common test scenarios
+- `createTestData` - Create component test data
+
+**Usage**:
+```typescript
+import { componentTestPatterns } from './component-test-utils';
+
+const testRender = componentTestPatterns.testRenders(MyComponent, { prop: 'value' });
+```
+
+### ⚡ `optimized-test-setup.ts`
+Performance-optimized mock creation and setup.
+
+**Exports**:
+- `createFastMock()` - Create fast mock resolvers
+- `createFastErrorMock()` - Create fast mock rejecters
+- `setupOptimizedMocks()` - Setup optimized test environment
+- `cleanupOptimizedMocks()` - Cleanup test environment
+
+**Usage**:
+```typescript
+import { setupOptimizedMocks, createFastMock } from './optimized-test-setup';
+
+beforeEach(() => {
+  setupOptimizedMocks();
+});
+
+const mockFn = createFastMock({ data: 'test' });
+```
+
+### ⏱️ `timer-utils.ts`
+Timer and async testing utilities.
+
+**Exports**:
+- `createMockTimers()` - Create mock timers
+- `waitFor()` - Wait for async operations
+- `sleep()` - Sleep utility
+
+**Usage**:
+```typescript
+import { createMockTimers } from './timer-utils';
+
+const timers = createMockTimers();
+await timers.sleep(100);
+```
+
+## Import Patterns
+
+### ✅ Recommended: Unified Import
+
+```typescript
+// Import everything from index.ts
+import { 
+  createMockSupabaseClient,
+  renderWithProviders,
+  testDataGenerators 
+} from '@test/helpers';
+```
+
+### ⚠️ Acceptable: Specific Imports
+
+```typescript
+// Import from specific files if you only need one utility
+import { createMockSupabaseClient } from './helpers/supabaseMock';
+import { renderWithProviders } from './helpers/test-providers';
+```
+
+### ❌ Avoid: Scattered Imports
+
+```typescript
+// Don't import from multiple places
+import { createMockSupabaseClient } from './helpers/supabaseMock';
+import { testDataGenerators } from './helpers/test-utils';
+import { renderWithProviders } from './helpers/test-providers';
+// Instead, use the unified export
+```
+
+## Common Patterns
+
+### Testing with Providers
+
+```typescript
+import { renderWithProviders } from '@test/helpers';
+
+test('renders component with providers', () => {
+  const { result } = renderWithProviders(<MyComponent />);
+  expect(result).toBeInTheDocument();
+});
+```
+
+### Mocking Supabase
+
+```typescript
+import { createMockSupabaseClient } from '@test/helpers';
+
+const mockClient = createMockSupabaseClient();
+mockClient.from('users').select().mockResolvedValue({ 
+  data: [{ id: '1' }], 
+  error: null 
+});
+```
+
+### Generating Test Data
+
+```typescript
+import { testDataGenerators } from '@test/helpers';
+
+const mockUser = testDataGenerators.user({
+  id: '123',
+  email: 'test@example.com'
+});
+```
+
+## Best Practices
+
+1. **Use Unified Exports**: Import from `index.ts` for consistency
+2. **Don't Duplicate Helpers**: Add new helpers to appropriate files
+3. **Keep Helpers Focused**: One helper file = one concern
+4. **Test Your Helpers**: All helpers have tests in `__tests__/` subdirectory
+
+## Directory Structure
+
+```
+helpers/
+├── index.ts                    ✅ Unified exports
+├── supabaseMock.ts             ✅ Supabase mocking
+├── test-providers.tsx          ✅ React provider utilities
+├── test-utils.tsx              ✅ General test utilities
+├── component-test-utils.tsx    ✅ Component-specific utilities
+├── optimized-test-setup.ts     ✅ Performance utilities
+├── timer-utils.ts              ✅ Timer and async utilities
+└── __tests__/                  ✅ Tests for each helper file
+```
+
+## Contributing
+
+When adding new test helpers:
+
+1. **Choose the Right File**:
+   - Supabase-related → `supabaseMock.ts`
+   - React providers → `test-providers.tsx`
+   - Component-specific → `component-test-utils.tsx`
+   - General utilities → `test-utils.tsx`
+
+2. **Export from Index**:
+   - Add exports to `index.ts`
+   - Use clear, descriptive names
+
+3. **Add Tests**:
+   - Create test file in `__tests__/` subdirectory
+   - Cover all exported functions
+
+4. **Update README**:
+   - Document the new helper
+   - Provide usage examples
+
+## Migration from Individual Imports
+
+### Should I Update Existing Tests?
+
+**Short Answer**: No urgent migration needed.
+
+**Long Answer**:
+- ✅ Both import patterns work perfectly
+- ✅ Existing tests continue to function
+- ✅ New tests should use unified import
+- ✅ Migrate individual files gradually when you're already touching them
+
+### Migration Example
+
+**Old Pattern** (still works):
+```typescript
+import { createMockSupabaseClient } from '../../__tests__/helpers/test-utils';
+```
+
+**New Pattern** (recommended):
+```typescript
+import { createMockSupabaseClient } from '../../__tests__/helpers';
+```
+
+Both patterns import from the same underlying functions. The unified import is just cleaner.
+

package/src/__tests__/helpers/index.ts

@@ -0,0 +1,62 @@
+/**
+ * @file Test Helpers Unified Exports
+ * @package @jmruthers/pace-core
+ * @module TestHelpers
+ * @since 0.4.0
+ * 
+ * Central export file for all test helper utilities.
+ * Import test helpers from this file for convenience.
+ * 
+ * @example
+ * ```typescript
+ * // Import all test helpers from one place
+ * import { 
+ *   createMockSupabaseClient,
+ *   renderWithProviders,
+ *   testDataGenerators 
+ * } from '@core/__tests__/helpers';
+ * 
+ * // Or import specific utilities
+ * import { supabaseMock, testUtils } from '@core/__tests__/helpers';
+ * ```
+ */
+
+// Supabase Mock Utilities
+export * from './supabaseMock';
+export { createMockSupabaseClient, createMockQueryBuilder, createMockSupabaseAuth } from './supabaseMock';
+
+// Test Provider Utilities
+export * from './test-providers';
+export { TestProviderWrapper, renderWithProviders } from './test-providers';
+
+// General Test Utilities
+export * from './test-utils';
+export { 
+  renderWithProviders as renderWithQueryClient,
+  testDataGenerators,
+  testHelpers,
+  setupTest,
+  createComponentTestStructure,
+  createHookTestStructure
+} from './test-utils';
+
+// Component Test Utilities
+export * from './component-test-utils';
+export { 
+  componentTestPatterns,
+  commonScenarios,
+  createTestData 
+} from './component-test-utils';
+
+// Optimized Test Setup
+export * from './optimized-test-setup';
+export { 
+  createFastMock,
+  createFastErrorMock,
+  setupOptimizedMocks,
+  cleanupOptimizedMocks 
+} from './optimized-test-setup';
+
+// Timer Utilities
+export * from './timer-utils';
+

package/src/__tests__/helpers/supabaseMock.ts

@@ -13,6 +13,19 @@ import { vi } from 'vitest';
  * Creates a proper thenable mock query builder that can be awaited
  */
 export const createMockQueryBuilder = (defaultData: any = { data: [], error: null }) => {
+  // Helper to get appropriate single/maybeSingle response
+  const getSingleResponse = () => {
+    // If defaultData is empty array or has empty array data, return null
+    if ((Array.isArray(defaultData.data) && defaultData.data.length === 0) || 
+        (Array.isArray(defaultData) && defaultData.length === 0)) {
+      return { data: null, error: null };
+    }
+    // Otherwise return the default data
+    return typeof defaultData === 'object' && defaultData !== null && !Array.isArray(defaultData)
+      ? defaultData
+      : { data: defaultData, error: null };
+  };
+
   const mockQueryBuilder = {
     select: vi.fn().mockReturnThis(),
     insert: vi.fn().mockReturnThis(),
@@ -20,14 +33,25 @@ export const createMockQueryBuilder = (defaultData: any = { data: [], error: nul
     delete: 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(),
     in: vi.fn().mockReturnThis(),
+    not: vi.fn().mockReturnThis(),
     is: vi.fn().mockReturnThis(),
+    or: vi.fn().mockReturnThis(),
+    and: vi.fn().mockReturnThis(),
+    filter: vi.fn().mockReturnThis(),
+    match: vi.fn().mockReturnThis(),
     order: vi.fn().mockReturnThis(),
-    limit: vi.fn().mockReturnThis(),
+    limit: vi.fn().mockResolvedValue(defaultData),
     offset: vi.fn().mockReturnThis(),
     range: vi.fn().mockReturnThis(),
-    single: vi.fn().mockResolvedValue({ data: null, error: null }),
-    maybeSingle: vi.fn().mockResolvedValue({ data: null, error: null }),
+    single: vi.fn().mockResolvedValue(getSingleResponse()),
+    maybeSingle: vi.fn().mockResolvedValue(getSingleResponse()),
     
     // Implement thenable interface for await support
     then: vi.fn().mockImplementation((resolve, reject) => {

package/src/__tests__/rbac/PagePermissionGuard.test.tsx

@@ -15,11 +15,14 @@ import React from 'react';
 import { render, screen, waitFor, act } from '@testing-library/react';
 import { vi } from 'vitest';
 import { PagePermissionGuard } from '../../rbac/components/PagePermissionGuard';
-import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
+import { useUnifiedAuth } from '../../providers';
 import { useCan } from '../../rbac/hooks';
 
 // Mock the hooks
-vi.mock('../../providers/UnifiedAuthProvider');
+vi.mock('../../providers', () => ({
+  useUnifiedAuth: vi.fn(),
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
 vi.mock('../../rbac/hooks', () => ({
   useCan: vi.fn()
 }));
@@ -28,11 +31,6 @@ vi.mock('../../utils/appNameResolver');
 const mockUseUnifiedAuth = vi.mocked(useUnifiedAuth);
 const mockUseCan = vi.mocked(useCan);
 
-// Mock app name resolver
-vi.mock('../../utils/appNameResolver', () => ({
-  getCurrentAppName: () => 'test-app'
-}));
-
 describe('PagePermissionGuard', () => {
   const mockUser = {
     id: 'user-123',
@@ -50,7 +48,7 @@ describe('PagePermissionGuard', () => {
     vi.clearAllMocks();
     
     // Default mock implementations
-    mockUseUnifiedAuth.mockReturnValue({
+    vi.mocked(useUnifiedAuth).mockReturnValue({
       user: mockUser,
       selectedOrganisationId: 'org-123',
       selectedEventId: 'event-123',

package/src/components/DataTable/components/DataTableCore.tsx

@@ -48,6 +48,7 @@ import { sortHierarchicalData as sortHierarchicalDataWithSorting } from '../util
 import { ColumnFactory } from '../core/ColumnFactory';
 import { AccessDeniedPage } from './AccessDeniedPage';
 import { useCan } from '../../../rbac/hooks';
+import { exportToCSV } from '../utils/exportUtils';
 import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
 import { Scope } from '../../../rbac/types';
 import { getCurrentAppName } from '../../../utils/appNameResolver';
@@ -731,8 +732,21 @@ function DataTableInternal<TData extends DataRecord>({
           if (!permissions.canUpdate.can) {
             throw new Error('Insufficient permissions to edit this resource');
           }
-          // Get the row ID using the provided getRowId function or fallback to row.id
-          const rowId = getRowId ? getRowId(row, 0) : (row as any).id || String(0);
+          // CRITICAL: Calculate rowId the same way as in DataTableBody
+          // Find the index of this row in the data array
+          let rowId: string;
+          if (getRowId) {
+            const rowIndex = data.findIndex(r => r === row);
+            rowId = getRowId(row, rowIndex);
+          } else {
+            rowId = (row as any).id;
+          }
+          
+          if (!rowId) {
+            console.error('[DataTable] Cannot edit row: no id found. Make sure to provide getRowId or ensure row data has an id property.');
+            return;
+          }
+          
           // Set the row into editing mode with the current row data
           tableActions.setEditingRow(rowId, { ...row });
         },
@@ -1010,7 +1024,27 @@ function DataTableInternal<TData extends DataRecord>({
               onCreateRow={secureFeatures.creation && secureHandlers.onCreateRow ? () => tableActions.setCreating(true) : undefined}
               onImportClick={() => setShowImportModal(true)}
               onExport={secureHandlers.onExport || (() => {
-                // Export logic here
+                // Automatic export: exports exactly what's shown in the table
+                // Get the current filtered/paginated data (what's actually visible)
+                const currentData = table.getFilteredRowModel().rows.map(row => row.original);
+                
+                // Get only visible columns
+                const visibleColumns = columns
+                  .filter(col => {
+                    const column = table.getColumn(col.accessorKey as string);
+                    return column && column.getIsVisible();
+                  })
+                  .map(col => ({
+                    ...col,
+                    header: typeof col.header === 'string' ? col.header : col.accessorKey || 'Column',
+                  }));
+                
+                // Generate filename with timestamp
+                const timestamp = new Date().toISOString().split('T')[0];
+                const filename = title ? `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_${timestamp}.csv` : `data_export_${timestamp}.csv`;
+                
+                // Export to CSV
+                exportToCSV(currentData, visibleColumns, filename);
               })}
               rowSelection={rowSelection}
               onDeleteSelected={secureHandlers.onDeleteSelected}

package/src/components/DataTable/components/__tests__/COVERAGE_NOTE.md

@@ -0,0 +1,55 @@
+# DataTable Subcomponent Testing Strategy
+
+## Summary
+
+The DataTable subcomponents (FilterRow, EditableRow, ColumnFilter, GroupHeader, ViewRowModal, etc.) are **intentionally not tested in isolation** because:
+
+1. They are tightly integrated with TanStack React Table
+2. They are extensively tested through DataTable integration tests
+3. Isolated unit tests would require extensive mocking that tests implementation, not behavior
+
+## Coverage via Integration Tests
+
+The following DataTable integration tests provide comprehensive coverage:
+
+### Workflow Validation (23 tests)
+- ✅ Basic rendering workflows
+- ✅ Editing workflow validation  
+- ✅ Deletion workflow validation
+- ✅ Combined features validation
+- ✅ Search workflow validation
+- ✅ Sorting workflow validation
+- ✅ Data integrity validation
+- ✅ Accessibility validation
+
+### Regression Fixes (13 tests)
+- ✅ Save/Cancel action handling
+- ✅ Action button icons and behavior
+- ✅ Handler requirement enforcement
+- ✅ Data integrity prevention
+
+## Subcomponent Coverage Mapping
+
+| Subcomponent | Coverage | Testing Method |
+|-------------|----------|---------------|
+| **ColumnFilter** | ✅ | Integration tests validate filter input behavior |
+| **FilterRow** | ✅ | Integration tests validate filtering across columns |
+| **EditableRow** | ✅ | Integration tests validate editing workflows |
+| **GroupHeader** | ✅ | Integration tests validate grouping functionality |
+| **ViewRowModal** | ✅ | Integration tests validate modal display |
+| **DraggableColumnHeader** | ✅ | Integration tests validate column reordering |
+| **ActionButtons** | ✅ | Integration tests validate action buttons |
+
+## Why This Approach Works
+
+Following TEST_GUIDE_CURSOR.md principles:
+
+1. **Test Observable Behavior** - Integration tests verify actual user interactions
+2. **Avoid Implementation Testing** - Don't mock TanStack table internals
+3. **Focus on User Value** - Users use DataTable, not individual subcomponents
+4. **Prevent Brittle Tests** - Integration tests are more maintainable
+
+## Conclusion
+
+DataTable subcomponents achieve **effective coverage** through integration tests that validate the complete user experience. No additional isolated unit tests are recommended.
+

package/src/components/DataTable/core/ColumnManager.ts

@@ -123,6 +123,16 @@ export class ColumnManagerImpl<TData extends DataRecord> implements ColumnManage
     return this.columns.filter(column => column.enableGrouping === true);
   }
 
+  /**
+   * Get columns by type
+   */
+  getColumnsByType(type: string): ColumnDef<TData>[] {
+    return this.columns.filter(column => {
+      const columnType = column.meta?.type;
+      return columnType === type;
+    });
+  }
+
   /**
    * Set all columns at once
    */