@jmruthers/pace-core 0.6.8 → 0.6.10

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

@@ -0,0 +1,792 @@
+/**
+ * @file DataTableCore Integration Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive integration tests for DataTableCore component.
+ * Tests focus on observable behavior and user interactions.
+ */
+
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { DataTableCore } from '../DataTableCore';
+// DataTableColumn removed - not used in tests
+import { createTestData, createTestColumns } from '../../__tests__/test-utils/dataFactories';
+import { createFullFeatures } from '../../__tests__/test-utils';
+import { renderWithProviders } from '../../../../__tests__/helpers/test-utils';
+
+// Mock RBAC hooks
+const mockUseCan = vi.fn(() => ({ can: true, isLoading: false, error: null }));
+const mockUseResolvedScope = vi.fn(() => ({
+  resolvedScope: {
+    organisationId: 'test-org-id',
+    eventId: 'test-event-id',
+    appId: 'test-app-id'
+  },
+  isLoading: false
+}));
+
+vi.mock('../../../../rbac/hooks', () => ({
+  useCan: () => mockUseCan(),
+  useResolvedScope: () => mockUseResolvedScope(),
+}));
+
+// Mock auth provider
+const mockUseUnifiedAuth = vi.fn(() => ({
+  user: { id: 'test-user', email: 'test@example.com' },
+  isAuthenticated: true,
+  isLoading: false,
+  error: null,
+  selectedOrganisation: { id: 'test-org-id' },
+  selectedEvent: { event_id: 'test-event-id' },
+  supabase: {},
+  appName: 'TEST_APP',
+  appId: 'test-app-id',
+}));
+
+vi.mock('../../../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuth(),
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+// Mock data table permissions
+const mockUseDataTablePermissions = vi.fn(() => ({
+  permissions: {
+    canRead: { can: true, isLoading: false, error: null },
+    canCreate: { can: true, isLoading: false, error: null },
+    canUpdate: { can: true, isLoading: false, error: null },
+    canDelete: { can: true, isLoading: false, error: null },
+    canExport: { can: true, isLoading: false, error: null },
+    canImport: { can: true, isLoading: false, error: null },
+  },
+  secureFeatures: createFullFeatures(),
+  effectivePageId: 'test-page',
+}));
+
+vi.mock('../../hooks/useDataTablePermissions', () => ({
+  useDataTablePermissions: () => mockUseDataTablePermissions(),
+}));
+
+// Mock 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,
+    cleanup: vi.fn(),
+  })),
+}));
+
+// Mock data table state hook
+const mockStateActions = {
+  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(),
+  setExpanded: vi.fn(),
+};
+
+const mockState = {
+  sorting: [],
+  columnFilters: [],
+  columnVisibility: {},
+  grouping: [],
+  expanded: {},
+  pagination: { pageIndex: 0, pageSize: 10 },
+  columnOrder: [],
+  rowSelection: {},
+  isCreating: false,
+  creationData: {},
+  editingRowId: null,
+  editingData: {},
+  showImportModal: false,
+  showFilterRow: false,
+  searchQuery: '',
+};
+
+vi.mock('../../hooks/useDataTableState', () => ({
+  useDataTableState: vi.fn(() => ({
+    state: mockState,
+    actions: mockStateActions,
+    clearDraft: vi.fn(),
+  })),
+}));
+
+// Mock other hooks
+vi.mock('../../hooks/useTableColumns', () => ({
+  useTableColumns: vi.fn(({ columns }) => ({
+    enhancedColumns: columns || []
+  }))
+}));
+
+vi.mock('../../hooks/useColumnOrderPersistence', () => ({
+  useColumnOrderPersistence: vi.fn(() => ({
+    columnOrder: [],
+    setColumnOrder: vi.fn(),
+  })),
+}));
+
+vi.mock('../../hooks/useColumnVisibilityPersistence', () => ({
+  useColumnVisibilityPersistence: vi.fn(() => ({
+    columnVisibility: {},
+    isLoaded: true,
+    updateColumnVisibility: vi.fn(),
+  })),
+}));
+
+vi.mock('../../hooks/useEffectiveColumnOrder', () => ({
+  useEffectiveColumnOrder: vi.fn(() => ['name', 'age', 'email']),
+}));
+
+// Mock useReactTable using hoisted function
+const mockUseReactTable = vi.hoisted(() => {
+  return vi.fn((config: any) => {
+    const data = config?.data || [];
+    const columns = config?.columns || [];
+    const rows = data.map((row: any, index: number) => ({
+      id: row.id || `row-${index}`,
+      original: row,
+      getValue: (columnId: string) => row[columnId],
+      getVisibleCells: () => columns.map((col: any) => ({
+        id: `${row.id}-${col.id}`,
+        column: { id: col.id },
+        getValue: () => row[col.accessorKey || col.id],
+        renderValue: () => row[col.accessorKey || col.id],
+      })),
+    }));
+
+    return {
+      getRowModel: () => ({ rows }),
+      getHeaderGroups: () => [{
+        id: 'header-group-1',
+        headers: columns.map((col: any) => ({
+          id: col.id,
+          column: { id: col.id, columnDef: col },
+          getContext: () => ({ column: { id: col.id } }),
+        })),
+      }],
+      getVisibleFlatColumns: () => columns.map((col: any) => ({
+        id: col.id,
+        columnDef: col,
+      })),
+      getAllColumns: () => columns.map((col: any) => ({
+        id: col.id,
+        columnDef: col,
+      })),
+      setOptions: vi.fn(),
+      options: {
+        getCoreRowModel: vi.fn(),
+        getSortedRowModel: vi.fn(),
+        getFilteredRowModel: vi.fn(),
+        getGroupedRowModel: vi.fn(),
+        getExpandedRowModel: vi.fn(),
+        getPaginationRowModel: vi.fn(),
+      },
+    };
+  });
+});
+
+vi.mock('@tanstack/react-table', () => ({
+  useReactTable: mockUseReactTable,
+  getCoreRowModel: vi.fn(),
+  getSortedRowModel: vi.fn(),
+  getFilteredRowModel: vi.fn(),
+  getGroupedRowModel: vi.fn(),
+  getExpandedRowModel: vi.fn(),
+  getPaginationRowModel: vi.fn(),
+  flexRender: (component: any, props: any) => {
+    if (typeof component === 'function') {
+      return component(props);
+    }
+    return component;
+  },
+}));
+
+vi.mock('../../hooks/useTableHandlers', () => ({
+  useTableHandlers: vi.fn(() => ({
+    handlers: {
+      onSortingChange: vi.fn(),
+      onColumnFiltersChange: vi.fn(),
+      onColumnVisibilityChange: vi.fn(),
+      onRowSelectionChange: vi.fn(),
+      onGroupingChange: vi.fn(),
+      onExpandedChange: vi.fn(),
+      onPaginationChange: vi.fn(),
+      onColumnOrderChange: vi.fn(),
+    },
+  })),
+}));
+
+vi.mock('../../hooks/useDataTableConfiguration', () => ({
+  useDataTableConfiguration: vi.fn((config) => ({
+    ...config,
+    finalPageSizeOptions: [10, 25, 50],
+    finalPaginationMode: 'client',
+    finalDataCount: config?.data?.length || 0,
+  })),
+}));
+
+vi.mock('../../hooks/useServerSideDataEffect', () => ({
+  useServerSideDataEffect: vi.fn(() => ({
+    serverData: null,
+    isLoading: false,
+  })),
+}));
+
+vi.mock('../../hooks/useDataTableDataPipeline', () => ({
+  useDataTableDataPipeline: vi.fn(({ data }) => ({
+    finalTableData: data || [],
+    finalDataCount: data?.length || 0,
+  })),
+}));
+
+vi.mock('../../hooks/useHierarchicalState', () => ({
+  useHierarchicalState: vi.fn(() => ({
+    hierarchicalData: [],
+    setHierarchicalData: vi.fn(),
+    expandedRows: {},
+    setExpandedRows: vi.fn(),
+  })),
+}));
+
+vi.mock('../../hooks/useKeyboardNavigation', () => ({
+  useKeyboardNavigation: vi.fn(() => ({
+    onKeyDown: vi.fn(),
+    announceNavigation: vi.fn(),
+  })),
+}));
+
+vi.mock('../hooks/usePermissionTracking', () => ({
+  usePermissionTracking: vi.fn(() => ({
+    permissionElapsed: 0,
+    shouldAllowRenderAfterTimeout: false,
+    isPermissionLoading: false,
+  })),
+}));
+
+vi.mock('../hooks/useImportModalFocus', () => ({
+  useImportModalFocus: vi.fn(() => ({
+    lastFocusedElementRef: { current: null },
+  })),
+}));
+
+vi.mock('../../core/ColumnFactory', () => ({
+  ColumnFactory: {
+    createColumns: vi.fn((columns) => columns),
+    createActionColumn: vi.fn(() => ({
+      id: 'actions',
+      header: 'Actions',
+      cell: () => <div data-testid="action-cell">Actions</div>,
+    })),
+  },
+}));
+
+vi.mock('../../utils/hierarchicalUtils', () => ({
+  validateHierarchicalData: vi.fn(() => true),
+  sortHierarchicalData: vi.fn((data) => data),
+}));
+
+vi.mock('../../utils/hierarchicalSorting', () => ({
+  sortHierarchicalData: vi.fn((data) => data),
+}));
+
+vi.mock('../../utils/a11yUtils', () => ({
+  initializeLiveRegion: vi.fn(),
+}));
+
+vi.mock('react-router-dom', () => ({
+  useLocation: vi.fn(() => ({ pathname: '/test' })),
+}));
+
+vi.mock('../../../../hooks/useToast', () => ({
+  toast: vi.fn(),
+}));
+
+describe('[integration] DataTableCore', () => {
+  const mockData = createTestData(5);
+  const mockColumns = createTestColumns();
+  const mockRBAC = { pageId: 'test-page', pageName: 'Test Page' };
+  const mockPerformance = { serverSideThreshold: 10000 };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset state
+    Object.assign(mockState, {
+      sorting: [],
+      columnFilters: [],
+      columnVisibility: {},
+      grouping: [],
+      expanded: {},
+      pagination: { pageIndex: 0, pageSize: 10 },
+      columnOrder: [],
+      rowSelection: {},
+      isCreating: false,
+      creationData: {},
+      editingRowId: null,
+      editingData: {},
+      showImportModal: false,
+      showFilterRow: false,
+      searchQuery: '',
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Core Functionality', () => {
+    it('renders with required props without crashing', () => {
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles permission checks when user lacks read permission', () => {
+      mockUseDataTablePermissions.mockReturnValueOnce({
+        permissions: {
+          canRead: { can: false, isLoading: false, error: null },
+          canCreate: { can: true, isLoading: false, error: null },
+          canUpdate: { can: true, isLoading: false, error: null },
+          canDelete: { can: true, isLoading: false, error: null },
+          canExport: { can: true, isLoading: false, error: null },
+          canImport: { can: true, isLoading: false, error: null },
+        },
+        secureFeatures: createFullFeatures(),
+        effectivePageId: 'test-page',
+      });
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles loading state without crashing', () => {
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            isLoading={true}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles empty data without crashing', () => {
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={[]}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('Data Operations', () => {
+    it('calls onEditRow when row is edited', () => {
+      const onEditRow = vi.fn();
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            onEditRow={onEditRow}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('calls onDeleteRow when row is deleted', () => {
+      const onDeleteRow = vi.fn();
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            onDeleteRow={onDeleteRow}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('calls onCreateRow when create button is clicked', () => {
+      const onCreateRow = vi.fn();
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            onCreateRow={onCreateRow}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles data length changes gracefully', () => {
+      const { rerender } = renderWithProviders(
+        <DataTableCore
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createFullFeatures()}
+          performance={mockPerformance}
+        />
+      );
+
+      // Simulate data length decrease (deletion)
+      const reducedData = mockData.slice(0, 3);
+      
+      // Component should re-render without throwing errors
+      expect(() => {
+        rerender(
+          <DataTableCore
+            data={reducedData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('Feature Integration', () => {
+    it('handles search feature without crashing', () => {
+      const features = createFullFeatures();
+      features.search = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles column sorting feature without crashing', () => {
+      const features = createFullFeatures();
+      features.sorting = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles pagination controls', () => {
+      const features = createFullFeatures();
+      features.pagination = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles column visibility toggles', () => {
+      const features = createFullFeatures();
+      features.columnVisibility = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles grouping functionality', () => {
+      const features = createFullFeatures();
+      features.grouping = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('calls onImport when import is triggered', () => {
+      const onImport = vi.fn();
+      const features = createFullFeatures();
+      features.import = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            onImport={onImport}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('calls onExport when export is triggered', () => {
+      const onExport = vi.fn();
+      const features = createFullFeatures();
+      features.export = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            onExport={onExport}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('Performance Features', () => {
+    it('handles virtual scrolling when enabled', () => {
+      const features = createFullFeatures();
+      features.pagination = true;
+
+      const largeData = createTestData(100);
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={largeData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            virtualHeight={600}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles server-side pagination', () => {
+      const serverSide = {
+        fetchData: vi.fn().mockResolvedValue({ data: mockData, totalCount: 100 }),
+        totalCount: 100,
+      };
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            serverSide={serverSide}
+            paginationMode="server"
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles missing onEditRow gracefully', () => {
+      const features = createFullFeatures();
+      features.editing = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles missing onDeleteRow gracefully', () => {
+      const features = createFullFeatures();
+      features.deletion = true;
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={features}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles invalid data gracefully', () => {
+      const invalidData = [
+        { id: '1', name: null, age: 'invalid', email: undefined } as any,
+      ];
+
+      // Component should render without throwing errors
+      expect(() => {
+        renderWithProviders(
+          <DataTableCore
+            data={invalidData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+
+    it('handles permission changes during runtime', () => {
+      const { rerender } = renderWithProviders(
+        <DataTableCore
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createFullFeatures()}
+          performance={mockPerformance}
+        />
+      );
+
+      // Simulate permission change
+      mockUseDataTablePermissions.mockReturnValueOnce({
+        permissions: {
+          canRead: { can: false, isLoading: false, error: null },
+          canCreate: { can: true, isLoading: false, error: null },
+          canUpdate: { can: true, isLoading: false, error: null },
+          canDelete: { can: true, isLoading: false, error: null },
+          canExport: { can: true, isLoading: false, error: null },
+          canImport: { can: true, isLoading: false, error: null },
+        },
+        secureFeatures: createFullFeatures(),
+        effectivePageId: 'test-page',
+      });
+
+      // Component should re-render without throwing errors
+      expect(() => {
+        rerender(
+          <DataTableCore
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={createFullFeatures()}
+            performance={mockPerformance}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+});