@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,1474 +0,0 @@
-/**
- * @file DataTableCore Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
- * @since 0.4.0
- * 
- * Comprehensive test suite for DataTableCore component covering all critical functionality.
- * Follows testing guidelines with proper structure, naming, and best practices.
- */
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { DataTableCore } from '../components/DataTableCore';
-import type { DataTableColumn } from '../types';
-import { createTestData, createTestColumns, testDataScenarios } from './test-utils/dataFactories';
-import { createDefaultFeatures, createReadOnlyFeatures, createFullFeatures } from './test-utils.ts';
-import { renderWithProviders } from '../../../__tests__/helpers/test-utils';
-
-// Mock the RBAC hooks
-vi.mock('../../../rbac/hooks', () => ({
-  useCan: vi.fn(() => ({ can: true, isLoading: false, error: null })),
-  useResolvedScope: vi.fn(() => ({
-    resolvedScope: {
-      organisationId: 'test-org-id',
-      eventId: 'test-event-id',
-      appId: 'test-app-id'
-    },
-    isLoading: false
-  }))
-}));
-
-// Mock the auth provider
-const mockUseUnifiedAuthFn = 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: {},
-}));
-
-vi.mock('../../../providers/services/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: () => mockUseUnifiedAuthFn(),
-  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-// 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: () => <div data-testid="action-cell">Actions</div>,
-    })),
-  },
-}));
-
-// 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),
-}));
-
-// Mock the new extracted hooks
-// Create a variable to control permission mocks
-const mockPermissions = {
-  canRead: { can: true },
-  canCreate: { can: true },
-  canUpdate: { can: true },
-  canDelete: { can: true },
-  canExport: { can: true },
-  canImport: { can: true },
-};
-
-// Create a mock implementation that can be overridden
-const mockUseDataTablePermissions = vi.hoisted(() => 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: {
-    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 || []
-  }))
-}));
-
-describe('DataTableCore Component', () => {
-  const mockData = createTestData(5);
-  const mockColumns = createTestColumns();
-  const mockRBAC = { pageId: 'test-page' };
-  const mockPerformance = { serverSideThreshold: 10000 };
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    const { useCan } = await import('../../../rbac/hooks');
-    (useCan as any).mockReturnValue({
-      can: true,
-      isLoading: false,
-      error: null,
-    });
-  });
-
-    describe('Rendering', () => {
-    it('renders with basic props', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('renders with title and description', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          title="Test Table"
-          description="Test description"
-        />
-      );
-
-      expect(screen.getByText('Test Table')).toBeInTheDocument();
-      expect(screen.getByText('Test description')).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          className="custom-table"
-        />
-      );
-
-      // Check that the component renders without error
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('renders with variant prop', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          variant="compact"
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Data Display', () => {
-    it('displays data rows correctly', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that data is displayed
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-      expect(screen.getByText('User 2')).toBeInTheDocument();
-      expect(screen.getByText('user1@example.com')).toBeInTheDocument();
-      expect(screen.getByText('user2@example.com')).toBeInTheDocument();
-    });
-
-    it('displays empty state when no data', () => {
-      render(
-        <DataTableCore
-          data={[]}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('No data available')).toBeInTheDocument();
-    });
-
-    it('displays custom empty state', () => {
-      const customEmptyState = {
-        title: 'No records found',
-        description: 'Please add some data to get started',
-        icon: () => <div data-testid="custom-icon">Custom Icon</div>
-      };
-      
-      render(
-        <DataTableCore
-          data={[]}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          emptyState={customEmptyState}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('No records found')).toBeInTheDocument();
-      expect(screen.getByText('Please add some data to get started')).toBeInTheDocument();
-      expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
-    });
-
-    it('displays loading state', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          isLoading={true}
-          performance={mockPerformance}
-        />
-      );
-
-      // There are multiple "Loading..." texts (sr-only and visible), so use getAllByText
-      const loadingElements = screen.getAllByText('Loading...');
-      expect(loadingElements.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Column Headers', () => {
-    it('renders column headers correctly', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that column headers are rendered by looking for the columnheader role
-      // This avoids matching text in hidden SelectItems (column visibility selector)
-      expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
-      expect(screen.getByRole('columnheader', { name: 'Age' })).toBeInTheDocument();
-      expect(screen.getByRole('columnheader', { name: 'Email' })).toBeInTheDocument();
-    });
-
-    it('renders sortable column headers when sorting is enabled', () => {
-      const features = createDefaultFeatures();
-      features.sorting = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that column headers are rendered and sorting is enabled
-      // Use columnheader role to avoid matching hidden SelectItem labels
-      expect(screen.getByRole('columnheader', { name: /Name/i })).toBeInTheDocument();
-      expect(screen.getByRole('columnheader', { name: /Age/i })).toBeInTheDocument();
-      expect(screen.getByRole('columnheader', { name: /Email/i })).toBeInTheDocument();
-    });
-  });
-
-  describe('Search Functionality', () => {
-    it('renders search input when search is enabled', () => {
-      const features = createDefaultFeatures();
-      features.search = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
-    });
-
-    it('filters data based on search input', async () => {
-      const features = createDefaultFeatures();
-      features.search = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that search input is rendered
-      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
-      
-      // Check that all data is initially visible
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-      expect(screen.getByText('User 2')).toBeInTheDocument();
-    });
-  });
-
-  describe('Pagination', () => {
-    it('renders pagination controls when pagination is enabled', () => {
-      const features = createDefaultFeatures();
-      features.pagination = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when pagination is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles page size changes', async () => {
-      const features = createDefaultFeatures();
-      features.pagination = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when pagination is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Row Selection', () => {
-    it('renders checkboxes when selection is enabled', () => {
-      const features = createDefaultFeatures();
-      features.selection = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when selection is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles row selection', async () => {
-      const features = createDefaultFeatures();
-      features.selection = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that selection functionality is available
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles select all functionality', async () => {
-      const features = createDefaultFeatures();
-      features.selection = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that select all functionality is available
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Row Actions', () => {
-    it('renders action buttons when editing is enabled', () => {
-      const features = createDefaultFeatures();
-      features.editing = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when editing is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('renders delete buttons when deletion is enabled', () => {
-      const features = createDefaultFeatures();
-      features.deletion = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when deletion is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles edit row action', async () => {
-      const user = userEvent.setup();
-      const onEditRow = vi.fn();
-      const features = createDefaultFeatures();
-      features.editing = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onEditRow={onEditRow}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when editing is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles delete row action', async () => {
-      const user = userEvent.setup();
-      const onDeleteRow = vi.fn();
-      const features = createDefaultFeatures();
-      features.deletion = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onDeleteRow={onDeleteRow}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when deletion is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Export/Import', () => {
-    it('renders export button when export is enabled', () => {
-      const features = createDefaultFeatures();
-      features.export = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when export is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('renders import button when import is enabled', () => {
-      const features = createDefaultFeatures();
-      features.import = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when import is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Column Visibility', () => {
-    it('renders column visibility dropdown when enabled', () => {
-      const features = createDefaultFeatures();
-      features.columnVisibility = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when column visibility is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('renders without error when errorComponent is provided', () => {
-      const ErrorComponent = () => <div data-testid="error-component">Error Component</div>;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          errorComponent={ErrorComponent}
-          performance={mockPerformance}
-        />
-      );
-
-      // Component should render normally
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('RBAC Integration', () => {
-    it('renders access denied when user lacks permission', () => {
-      // Override the mock to return no read permission (use mockReturnValue for all calls)
-      mockUseDataTablePermissions.mockReturnValue({
-        permissions: {
-          canRead: { can: false, isLoading: false },
-          canCreate: { can: true, isLoading: false },
-          canUpdate: { can: true, isLoading: false },
-          canDelete: { can: true, isLoading: false },
-          canExport: { can: true, isLoading: false },
-          canImport: { can: true, isLoading: false },
-        },
-        secureFeatures: createFullFeatures(),
-        effectivePageId: 'test-page',
-      });
-
-      renderWithProviders(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      // AccessDeniedPage renders "Access Denied" as an h2 heading
-      expect(screen.getByRole('heading', { name: /Access Denied/i })).toBeInTheDocument();
-      
-      // Restore mock after test
-      mockUseDataTablePermissions.mockReturnValue({
-        permissions: {
-          canRead: { can: true },
-          canCreate: { can: true },
-          canUpdate: { can: true },
-          canDelete: { can: true },
-          canExport: { can: true },
-          canImport: { can: true },
-        },
-        secureFeatures: createFullFeatures(),
-        effectivePageId: 'test-page',
-      });
-    });
-  });
-
-  describe('Performance Features', () => {
-    it('handles virtual scrolling when enabled', () => {
-      const features = createDefaultFeatures();
-      features.pagination = true;
-
-      render(
-        <DataTableCore
-          data={testDataScenarios.large}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error when virtual scrolling is enabled
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper table structure', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('has proper column headers', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('has proper row structure', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      // Check that the component renders without error
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Event Handlers', () => {
-    it('calls onEditRow when row is edited', async () => {
-      const onEditRow = vi.fn();
-      const features = createDefaultFeatures();
-      features.editing = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onEditRow={onEditRow}
-          performance={mockPerformance}
-        />
-      );
-
-      // Wait for table to render
-      await waitFor(() => {
-        expect(screen.getByRole('table')).toBeInTheDocument();
-      });
-
-      // Verify table rendered with data
-      expect(await screen.findByText('User 1')).toBeInTheDocument();
-      
-      // Note: Testing actual editing interaction would require clicking edit button
-      // and interacting with EditableRow component, which is complex to mock.
-      // This test verifies the component renders correctly with editing enabled.
-    });
-
-    it('calls onDeleteRow when row is deleted', async () => {
-      const onDeleteRow = vi.fn();
-      const features = createDefaultFeatures();
-      features.deletion = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onDeleteRow={onDeleteRow}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('calls onCreateRow when new row is created', async () => {
-      const onCreateRow = vi.fn();
-      const features = createDefaultFeatures();
-      features.creation = true;
-
-      const { useDataTableState } = await import('../hooks/useDataTableState');
-      vi.mocked(useDataTableState).mockReturnValueOnce({
-        state: {
-          sorting: [],
-          columnFilters: [],
-          columnVisibility: {},
-          grouping: [],
-          expanded: {},
-          pagination: { pageIndex: 0, pageSize: 10 },
-          columnOrder: [],
-          rowSelection: {},
-          isCreating: true,
-          creationData: { name: 'New User', email: 'new@example.com' },
-          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(),
-        },
-      });
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onCreateRow={onCreateRow}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('calls onRowSelectionChange when row selection changes', async () => {
-      const onRowSelectionChange = vi.fn();
-      const features = createDefaultFeatures();
-      features.selection = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onRowSelectionChange={onRowSelectionChange}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('calls onDeleteSelected when selected rows are deleted', async () => {
-      const onDeleteSelected = vi.fn();
-      const features = createDefaultFeatures();
-      features.deletion = true;
-      features.deleteSelected = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onDeleteSelected={onDeleteSelected}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Export/Import Functionality', () => {
-    it('handles export when export feature is enabled', async () => {
-      const user = userEvent.setup();
-      const features = createDefaultFeatures();
-      features.export = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      // Export button should be available
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles import when import feature is enabled', async () => {
-      const user = userEvent.setup();
-      const onImport = vi.fn();
-      const features = createDefaultFeatures();
-      features.import = true;
-
-      const { useDataTableState } = await import('../hooks/useDataTableState');
-      vi.mocked(useDataTableState).mockReturnValueOnce({
-        state: {
-          sorting: [],
-          columnFilters: [],
-          columnVisibility: {},
-          grouping: [],
-          expanded: {},
-          pagination: { pageIndex: 0, pageSize: 10 },
-          columnOrder: [],
-          rowSelection: {},
-          isCreating: false,
-          creationData: {},
-          editingRowId: null,
-          editingData: {},
-          showImportModal: true,
-          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(),
-        },
-      });
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onImport={onImport}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Column Operations', () => {
-    it('handles column visibility changes', () => {
-      const features = createDefaultFeatures();
-      features.columnVisibility = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles column reordering when enabled', () => {
-      const features = createDefaultFeatures();
-      features.columnReordering = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles column order persistence', () => {
-      const features = createDefaultFeatures();
-      features.columnReordering = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          storageKey="test-table"
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('State Management', () => {
-    it('handles default sorting state', () => {
-      const defaultSorting = [{ id: 'name', desc: false }];
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          defaultSorting={defaultSorting}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles default grouping state', () => {
-      const defaultGrouping = ['department'];
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          defaultGrouping={defaultGrouping}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles initial page size', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          initialPageSize={25}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles controlled selection state', () => {
-      const selection = { 'user-1': true, 'user-2': false };
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          selection={selection}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Server-Side Features', () => {
-    it('handles server-side pagination mode', () => {
-      const serverSide = {
-        fetchData: vi.fn().mockResolvedValue({ data: mockData, totalCount: 100 }),
-        totalCount: 100,
-      };
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          serverSide={serverSide}
-          paginationMode="server"
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles server-side data fetching', async () => {
-      const serverSide = {
-        fetchData: vi.fn().mockResolvedValue({ data: mockData, totalCount: 100 }),
-        totalCount: 100,
-      };
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          serverSide={serverSide}
-          paginationMode="server"
-          performance={mockPerformance}
-        />
-      );
-
-      await waitFor(() => {
-        expect(screen.getByText('User 1')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Hierarchical Data', () => {
-    it('handles hierarchical data when enabled', () => {
-      const hierarchicalData = [
-        { id: '1', name: 'Parent', isParent: true },
-        { id: '2', name: 'Child', isParent: false, parentId: '1' },
-      ];
-      const features = createDefaultFeatures();
-      features.hierarchical = true;
-
-      const hierarchical = {
-        enabled: true,
-        indentSize: 24,
-      };
-
-      render(
-        <DataTableCore
-          data={hierarchicalData as any}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          hierarchical={hierarchical}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('Parent')).toBeInTheDocument();
-    });
-  });
-
-  describe('Aggregates', () => {
-    it('handles aggregate configurations', () => {
-      const aggregates = [
-        {
-          columnId: 'age',
-          type: 'average' as const,
-        },
-      ];
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          aggregates={aggregates}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('handles loading state correctly', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          isLoading={true}
-          performance={mockPerformance}
-        />
-      );
-
-      // There are multiple "Loading..." texts (sr-only and visible), so use getAllByText
-      const loadingElements = screen.getAllByText('Loading...');
-      expect(loadingElements.length).toBeGreaterThan(0);
-    });
-
-    it('handles permission loading state', () => {
-      mockUseDataTablePermissions.mockReturnValueOnce({
-        permissions: {
-          canRead: { can: true, isLoading: true },
-          canCreate: { can: true, isLoading: false },
-          canUpdate: { can: true, isLoading: false },
-          canDelete: { can: true, isLoading: false },
-          canExport: { can: true, isLoading: false },
-          canImport: { can: true, isLoading: false },
-        },
-        secureFeatures: createFullFeatures(),
-        effectivePageId: 'test-page',
-      });
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      // When permissions are loading, the component should still render
-      // The loading state might be handled differently or the component
-      // might render normally while permissions load
-      // Verify the component renders without error
-      expect(screen.getByRole('table')).toBeInTheDocument();
-
-      // Restore mock
-      mockUseDataTablePermissions.mockReturnValue({
-        permissions: {
-          canRead: { can: true, isLoading: false },
-          canCreate: { can: true, isLoading: false },
-          canUpdate: { can: true, isLoading: false },
-          canDelete: { can: true, isLoading: false },
-          canExport: { can: true, isLoading: false },
-          canImport: { can: true, isLoading: false },
-        },
-        secureFeatures: createFullFeatures(),
-        effectivePageId: 'test-page',
-      });
-    });
-  });
-
-  describe('Layout Persistence', () => {
-    it('calls onLayoutChange when layout changes', () => {
-      const onLayoutChange = vi.fn();
-      const features = createDefaultFeatures();
-      features.columnVisibility = true;
-      features.columnReordering = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          onLayoutChange={onLayoutChange}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance Features', () => {
-    it('handles virtual scrolling for large datasets', () => {
-      const largeData = testDataScenarios.large;
-      const features = createDefaultFeatures();
-      features.pagination = true;
-
-      render(
-        <DataTableCore
-          data={largeData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          virtualHeight={600}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles enhanced pagination when enabled', () => {
-      const features = createDefaultFeatures();
-      features.pagination = true;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={features}
-          enhancedPagination={true}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Actions Configuration', () => {
-    it('renders custom actions', () => {
-      const actions = [
-        {
-          label: 'Custom Action',
-          onClick: vi.fn(),
-          testId: 'custom-action',
-        },
-      ];
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          actions={actions}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty data array', () => {
-      render(
-        <DataTableCore
-          data={[]}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('No data available')).toBeInTheDocument();
-    });
-
-    it('handles missing getRowId function', () => {
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          getRowId={undefined}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles custom getRowId function', () => {
-      const getRowId = (row: any) => `custom-${row.id}`;
-
-      render(
-        <DataTableCore
-          data={mockData}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          getRowId={getRowId}
-          performance={mockPerformance}
-        />
-      );
-
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-    });
-
-    it('handles React element as emptyState', () => {
-      const emptyStateElement = <div data-testid="custom-empty">Custom Empty</div>;
-
-      render(
-        <DataTableCore
-          data={[]}
-          columns={mockColumns}
-          rbac={mockRBAC}
-          features={createDefaultFeatures()}
-          emptyState={emptyStateElement}
-          performance={mockPerformance}
-        />
-      );
-
-      // Component should render without error
-      expect(screen.getByText('No data available')).toBeInTheDocument();
-    });
-  });
-});