@jmruthers/pace-core 0.5.135 → 0.5.137

package/src/components/DataTable/__tests__/DataTableCore.test-setup.ts

@@ -0,0 +1,217 @@
+/**
+ * @file DataTableCore Test Setup
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/__tests__
+ * @since 0.4.0
+ * 
+ * Shared test setup and mocks for DataTableCore component tests.
+ * This file is imported by all DataTableCore test files to ensure consistent mocking.
+ */
+
+import { vi } from 'vitest';
+import React from 'react';
+
+// Mock the RBAC hooks
+vi.mock('../../../rbac/hooks', () => ({
+  useCan: vi.fn(),
+  useResolvedScope: vi.fn(() => ({
+    resolvedScope: {
+      organisationId: 'test-org-id',
+      eventId: 'test-event-id',
+      appId: 'test-app-id'
+    }
+  }))
+}));
+
+// Mock the auth provider
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(() => ({
+    user: { id: 'test-user', email: 'test@example.com' },
+    isAuthenticated: true,
+    isLoading: false,
+    error: null,
+    selectedOrganisationId: 'test-org-id',
+    selectedEventId: 'test-event-id',
+    supabase: null,
+  })),
+}));
+
+// Mock the performance hook
+vi.mock('../../../hooks/useDataTablePerformance', () => ({
+  useDataTablePerformance: vi.fn(() => ({
+    paginationMode: 'client',
+    isVirtualized: false,
+    pageSizeOptions: [10, 25, 50],
+    processedData: [],
+    totalCount: 0,
+    isLoading: false,
+    searchQuery: '',
+    setSearchQuery: vi.fn(),
+    searchResults: [],
+    fetchServerData: vi.fn(),
+    serverData: null,
+    memoryUsage: 0,
+    errorState: {
+      hasErrors: false,
+      errorCount: 0,
+      lastError: null,
+      fallbacksActive: [],
+    },
+    retryLastOperation: vi.fn(),
+    clearErrors: vi.fn(),
+    cleanup: vi.fn(),
+    shouldUseVirtualization: false,
+    performanceMetrics: {},
+  })),
+}));
+
+// Mock the data table state hook
+vi.mock('../hooks/useDataTableState', () => ({
+  useDataTableState: vi.fn(() => ({
+    state: {
+      sorting: [],
+      columnFilters: [],
+      columnVisibility: {},
+      grouping: [],
+      expanded: {},
+      pagination: { pageIndex: 0, pageSize: 10 },
+      columnOrder: [],
+      rowSelection: {},
+      isCreating: false,
+      creationData: {},
+      editingRowId: null,
+      editingData: {},
+      showImportModal: false,
+      showFilterRow: false,
+      searchQuery: '',
+    },
+    actions: {
+      setSorting: vi.fn(),
+      setColumnFilters: vi.fn(),
+      setColumnVisibility: vi.fn(),
+      setGrouping: vi.fn(),
+      setExpanded: vi.fn(),
+      setPagination: vi.fn(),
+      setColumnOrder: vi.fn(),
+      setRowSelection: vi.fn(),
+      setCreating: vi.fn(),
+      setCreationData: vi.fn(),
+      clearCreationData: vi.fn(),
+      setEditingRow: vi.fn(),
+      clearEditing: vi.fn(),
+      setImportModal: vi.fn(),
+      setFilterRow: vi.fn(),
+      setSearchQuery: vi.fn(),
+      resetState: vi.fn(),
+    },
+  })),
+}));
+
+// Mock the hierarchical state hook
+vi.mock('../hooks/useHierarchicalState', () => ({
+  useHierarchicalState: vi.fn(() => ({
+    hierarchicalData: [],
+    setHierarchicalData: vi.fn(),
+    expandedRows: {},
+    setExpandedRows: vi.fn(),
+  })),
+}));
+
+// Mock the column order persistence hook
+vi.mock('../hooks/useColumnOrderPersistence', () => ({
+  useColumnOrderPersistence: vi.fn(() => ({
+    columnOrder: [],
+    setColumnOrder: vi.fn(),
+  })),
+}));
+
+// Mock the column factory
+vi.mock('../core/ColumnFactory', () => ({
+  ColumnFactory: {
+    createColumns: vi.fn((columns) => columns),
+    createActionColumn: vi.fn(() => ({
+      id: 'actions',
+      header: 'Actions',
+      cell: () => React.createElement('div', { 'data-testid': 'action-cell' }, 'Actions'),
+    })),
+  },
+}));
+
+// Mock the hierarchical utilities
+vi.mock('../utils/hierarchicalUtils', () => ({
+  validateHierarchicalData: vi.fn(() => true),
+  sortHierarchicalData: vi.fn((data) => data),
+}));
+
+vi.mock('../utils/hierarchicalSorting', () => ({
+  sortHierarchicalData: vi.fn((data) => data),
+}));
+
+// Create a mock implementation that can be overridden
+const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
+  permissions: {
+    canRead: { can: true },
+    canCreate: { can: true },
+    canUpdate: { can: true },
+    canDelete: { can: true },
+    canExport: { can: true },
+    canImport: { can: true },
+  },
+  secureFeatures: {
+    search: true,
+    sorting: true,
+    pagination: true,
+    selection: true,
+    creation: true,
+    editing: true,
+    deletion: true,
+    deleteSelected: true,
+    export: true,
+    import: true,
+    columnVisibility: true,
+    filtering: true,
+    grouping: true,
+  },
+  effectivePageId: 'test-page',
+})));
+
+vi.mock('../hooks/useDataTablePermissions', () => ({
+  useDataTablePermissions: mockUseDataTablePermissions
+}));
+
+vi.mock('../hooks/useTableColumns', () => ({
+  useTableColumns: vi.fn(({ columns }) => ({
+    enhancedColumns: columns || []
+  }))
+}));
+
+/**
+ * Shared test data and utilities
+ */
+export const createTestSetup = () => {
+  const mockData = require('./test-utils/dataFactories').createTestData(5);
+  const mockColumns = require('./test-utils/dataFactories').createTestColumns();
+  const mockRBAC = { pageId: 'test-page' };
+  const mockPerformance = { serverSideThreshold: 10000 };
+
+  return {
+    mockData,
+    mockColumns,
+    mockRBAC,
+    mockPerformance,
+  };
+};
+
+/**
+ * Setup function to be called in beforeEach
+ */
+export const setupTestMocks = async () => {
+  vi.clearAllMocks();
+  const { useCan } = await import('../../../rbac/hooks');
+  (useCan as any).mockReturnValue({
+    can: true,
+    isLoading: false,
+    error: null,
+  });
+};
+

package/src/components/DataTable/__tests__/styles.test.ts

@@ -18,7 +18,7 @@ import {
 } from '../styles';
 
 // Mock the cn utility
-vi.mock('../../../utils/cn', () => ({
+vi.mock('../../../utils/core/cn', () => ({
   cn: (...classes: (string | undefined | null | false)[]) => 
     classes.filter(Boolean).join(' '),
 }));
@@ -229,12 +229,12 @@ describe('DataTable Styles', () => {
 
     it('returns compact variant classes', () => {
       const result = getTableClasses({ variant: 'compact' });
-      expect(result).toBe('w-full caption-top text-sm text-sm');
+      expect(result).toBe('w-full caption-top text-sm');
     });
 
     it('returns spacious variant classes', () => {
       const result = getTableClasses({ variant: 'spacious' });
-      expect(result).toBe('w-full caption-top text-sm text-base');
+      expect(result).toBe('w-full caption-top text-base');
     });
 
     it('adds custom className', () => {

package/src/components/DataTable/components/ActionButtons.tsx

@@ -9,7 +9,6 @@ import {
   SelectItem,
   SelectTrigger,
 } from '../../Select/Select';
-import { createLogger } from '../../../utils/logger';
 import type { ActionCondition, DataRecord, DataTableAction } from '../types';
 
 interface ActionButtonsProps<TData extends DataRecord = DataRecord> {
@@ -61,7 +60,6 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
   hierarchical = false,
   permissions,
 }: ActionButtonsProps<TData>) {
-  const logger = createLogger('ActionButtons');
   const rowData = row.original;
 
   if (actions.length === 0) {
@@ -130,13 +128,6 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
               variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
               size="sm"
               onClick={() => {
-                if (import.meta.env.MODE === 'development' && !isDisabled) {
-                  logger.debug('Action clicked:', {
-                    actionLabel: action.label,
-                    rowOriginal: rowData,
-                    actionOnClick: typeof action.onClick
-                  });
-                }
                 if (!isDisabled) {
                   action.onClick(rowData);
                 }
@@ -173,12 +164,6 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
               key={actionIndex}
               value={`action-${actionIndex}`}
               onClick={() => {
-                if (import.meta.env.MODE === 'development' && !isDisabled) {
-                  logger.debug('Action clicked from dropdown:', {
-                    actionLabel: action.label,
-                    rowOriginal: rowData
-                  });
-                }
                 if (!isDisabled) {
                   action.onClick(rowData);
                 }

package/src/components/DataTable/components/ColumnFilter.tsx

@@ -4,6 +4,7 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '.
 import { Button } from '../../Button/Button';
 import { X, Filter } from 'lucide-react';
 import type { Column } from '@tanstack/react-table';
+import { getColumnHeaderText } from '../utils/columnUtils';
 
 interface ColumnFilterProps {
   column: Column<any, unknown>;
@@ -38,6 +39,9 @@ export function ColumnFilter({
   };
 
   const hasFilter = columnFilterValue !== undefined && columnFilterValue !== '';
+  
+  // Get the default placeholder using column header text
+  const defaultPlaceholder = `Filter ${getColumnHeaderText(column)}...`;
 
   const renderFilterInput = () => {
     switch (filterType) {
@@ -48,7 +52,7 @@ export function ColumnFilter({
             onValueChange={handleFilterChange}
           >
             <SelectTrigger className="h-8">
-              <SelectValue placeholder={placeholder || `Filter ${column.id}...`} />
+              <SelectValue placeholder={placeholder || defaultPlaceholder} />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="">All</SelectItem>
@@ -68,7 +72,7 @@ export function ColumnFilter({
             type="number"
             value={columnFilterValue as string || ''}
             onChange={(e) => handleFilterChange(e.target.value ? Number(e.target.value) : undefined)}
-            placeholder={placeholder || `Filter ${column.id}...`}
+            placeholder={placeholder || defaultPlaceholder}
             className="h-8 datatable-number-no-spinners"
           />
         );
@@ -79,7 +83,7 @@ export function ColumnFilter({
             type="date"
             value={columnFilterValue as string || ''}
             onChange={(e) => handleFilterChange(e.target.value || undefined)}
-            placeholder={placeholder || `Filter ${column.id}...`}
+            placeholder={placeholder || defaultPlaceholder}
             className="h-8"
           />
         );
@@ -89,7 +93,7 @@ export function ColumnFilter({
           <Input
             value={columnFilterValue as string || ''}
             onChange={(e) => handleFilterChange(e.target.value || undefined)}
-            placeholder={placeholder || `Filter ${column.id}...`}
+            placeholder={placeholder || defaultPlaceholder}
             className="h-8"
           />
         );