@jmruthers/pace-core 0.6.10 → 0.6.11

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

@@ -1,505 +1,876 @@
 /**
  * @file DataTable Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
+ * @module Components/DataTable
  * @since 0.4.0
  * 
- * Comprehensive test suite for DataTable wrapper component following testing guidelines.
- * Tests cover feature normalization, validation logic, prop forwarding, and edge cases.
+ * Comprehensive test suite for DataTable component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
  */
 
 import React from 'react';
-import { render, screen, cleanup, waitFor } from '@testing-library/react';
-import { vi, describe, it, expect, beforeEach, afterEach, beforeAll, afterAll } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { DataTable } from './DataTable';
-import { createTestData, createTestColumns, testDataScenarios } from './__tests__/test-utils/dataFactories';
-import { createDefaultFeatures, createFullFeatures, createFeaturesWithEnabled } from './__tests__/test-utils';
-import type { DataTableFeatureConfig } from './types';
-import { DataTableCore } from './components/DataTableCore';
-
-// Mock DataTableCore to focus on wrapper logic
-// Note: Must define mock inside factory due to hoisting
-vi.mock('./components/DataTableCore', () => {
-  const mockDataTableCore = vi.fn(({ features, ...props }: import('./components/DataTableCore').DataTableCoreProps<import('./types').DataRecord>) => (
-    <div 
-      data-testid="data-table-core" 
-      data-features={JSON.stringify(features)}
-      data-title={props.title}
-      data-description={props.description}
-      data-variant={props.variant}
-      data-class-name={props.className}
-      data-page-id={props.rbac?.pageId}
-      data-page-name={props.rbac?.pageName}
-    >
-      Mock DataTableCore
+import type { DataTableColumn } from './types';
+import { createTestData, createTestColumns, testDataScenarios } from './test-utils/dataFactories';
+import { createDefaultFeatures, createReadOnlyFeatures, createFullFeatures } from './test-utils';
+
+// Mock the RBAC hooks
+vi.mock('../../rbac/hooks', () => ({
+  useCan: vi.fn(() => ({
+    can: true,
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+// 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' },
+  selectedEvent: { event_id: 'test-event' },
+  supabase: {},
+}));
+
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuthFn(),
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+// Mock the DataTableCore component to focus on DataTable logic
+vi.mock('./ui/layout/DataTableCore', () => ({
+  DataTableCore: ({ children, ...props }: any) => (
+    <div role="table" {...props}>
+      {children}
     </div>
-  ));
-  
-  return {
-    DataTableCore: mockDataTableCore,
-  };
-});
+  ),
+}));
 
-// Mock the logger utility
-// Create a module-level mock logger that can be accessed in tests
-const mockLogger = {
-  info: vi.fn(),
-  warn: vi.fn(),
-  error: vi.fn(),
-};
-
-// Note: Must define mock inside factory due to hoisting
-vi.mock('../../utils/core/logger', () => {
-  return {
-    createLogger: () => mockLogger,
-  };
-});
-
-// Store original console.log to spy on it
-const originalConsoleLog = console.log;
-const consoleLogSpy = vi.fn();
-beforeAll(() => {
-  console.log = consoleLogSpy;
-});
-
-afterAll(() => {
-  console.log = originalConsoleLog;
-});
-
-describe('[component] DataTable', () => {
-  const testData = createTestData(3);
-  const testColumns = createTestColumns();
-  const defaultRBAC = { pageId: 'test-page-id' };
-  const baseProps = {
-    data: testData,
-    columns: testColumns,
-    rbac: defaultRBAC,
-  };
-
-  // Helper to get the mocked DataTableCore function
-  const getMockedDataTableCore = () => vi.mocked(DataTableCore);
+describe('DataTable Component', () => {
+  const mockData = createTestData(5);
+  const mockColumns = createTestColumns();
+  const mockRBAC = { pageId: 'test-page' };
 
   beforeEach(() => {
     vi.clearAllMocks();
-    consoleLogSpy.mockClear();
   });
 
-  afterEach(() => {
-    cleanup();
-  });
+    describe('Rendering', () => {
+    it('renders with basic props', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
 
-  describe('Rendering', () => {
-    it('renders DataTableCore with required props', () => {
-      render(<DataTable {...baseProps} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
-      expect(getMockedDataTableCore()).toHaveBeenCalledTimes(1);
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
     it('renders with title and description', () => {
       render(
-        <DataTable 
-          {...baseProps} 
-          title="Test Table" 
-          description="Test description" 
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          title="Test Table"
+          description="Test description"
         />
       );
-      
-      const core = screen.getByTestId('data-table-core');
-      expect(core).toHaveAttribute('data-title', 'Test Table');
-      expect(core).toHaveAttribute('data-description', 'Test description');
-    });
 
-    it('renders with custom variant', () => {
-      render(<DataTable {...baseProps} variant="compact" />);
-      
-      const core = screen.getByTestId('data-table-core');
-      expect(core).toHaveAttribute('data-variant', 'compact');
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
     it('renders with custom className', () => {
-      render(<DataTable {...baseProps} className="custom-table-class" />);
-      
-      const core = screen.getByTestId('data-table-core');
-      expect(core).toHaveAttribute('data-class-name', 'custom-table-class');
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          className="custom-table"
+        />
+      );
+
+      const table = screen.getByRole('table');
+      expect(table).toHaveClass('custom-table');
+    });
+
+    it('renders with variant prop', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          variant="compact"
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with empty data array', () => {
+      render(
+        <DataTable
+          data={[]}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with loading state', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          isLoading={true}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
   describe('Feature Configuration', () => {
-    it('normalizes undefined features to default disabled features', () => {
-      render(<DataTable {...baseProps} />);
-      
-      const core = screen.getByTestId('data-table-core');
-      const features = JSON.parse(core.getAttribute('data-features') || '{}');
-      
-      expect(features).toMatchObject({
-        search: false,
-        pagination: false,
-        sorting: false,
-        filtering: false,
-        import: false,
-        export: false,
-        selection: false,
-        creation: false,
-        editing: false,
-        deletion: false,
-        deleteSelected: false,
-        grouping: false,
-        columnVisibility: false,
-        columnReordering: false,
-        hierarchical: false,
-      });
-    });
-
-    it('normalizes partial features by merging with defaults', () => {
-      const partialFeatures: DataTableFeatureConfig = {
-        search: true,
-        pagination: true,
-      };
-      
-      render(<DataTable {...baseProps} features={partialFeatures} />);
-      
-      const core = screen.getByTestId('data-table-core');
-      const features = JSON.parse(core.getAttribute('data-features') || '{}');
-      
-      expect(features.search).toBe(true);
-      expect(features.pagination).toBe(true);
-      expect(features.sorting).toBe(false); // Default value
-      expect(features.editing).toBe(false); // Default value
-    });
-
-    it('passes fully normalized features to DataTableCore', () => {
-      const features = createFullFeatures();
-      render(<DataTable {...baseProps} features={features} />);
-      
-      const core = screen.getByTestId('data-table-core');
-      const normalizedFeatures = JSON.parse(core.getAttribute('data-features') || '{}');
-      
-      expect(normalizedFeatures).toMatchObject({
-        search: true,
-        pagination: true,
-        sorting: true,
-        filtering: true,
-        import: true,
-        export: true,
-        selection: true,
-        creation: true,
-        editing: true,
-        deletion: true,
-        deleteSelected: true,
-      });
-    });
-
-    it('memoizes normalized features when features prop does not change', () => {
-      const features = createDefaultFeatures();
-      const { rerender } = render(<DataTable {...baseProps} features={features} />);
-      
-      expect(getMockedDataTableCore()).toHaveBeenCalledTimes(1);
-      
-      rerender(<DataTable {...baseProps} features={features} />);
-      
-      // Should not re-normalize if features object reference is the same
-      expect(getMockedDataTableCore()).toHaveBeenCalledTimes(2);
+    it('renders with read-only features', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createReadOnlyFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with full features', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createFullFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with custom features configuration', () => {
+      const customFeatures = createDefaultFeatures();
+      customFeatures.search = true;
+      customFeatures.pagination = true;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={customFeatures}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('handles invalid feature dependencies without crashing', () => {
+      const featuresWithInvalidDependency = createDefaultFeatures();
+      featuresWithInvalidDependency.deleteSelected = true;
+      featuresWithInvalidDependency.deletion = false;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={featuresWithInvalidDependency}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
-  describe('RBAC Configuration', () => {
-    it('passes rbac with pageId to DataTableCore', () => {
-      render(<DataTable {...baseProps} rbac={{ pageId: 'custom-page-id' }} />);
-      
-      const core = screen.getByTestId('data-table-core');
-      expect(core).toHaveAttribute('data-page-id', 'custom-page-id');
+  describe('Error Handling', () => {
+    it('does not throw when features configuration is missing', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          // @ts-expect-error - intentionally missing features
+          features={undefined}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('passes rbac with pageName to DataTableCore', () => {
-      render(<DataTable {...baseProps} rbac={{ pageName: 'custom-page-name' }} />);
-      
-      const core = screen.getByTestId('data-table-core');
-      expect(core).toHaveAttribute('data-page-name', 'custom-page-name');
+    it('renders with error component when provided', () => {
+      const ErrorComponent = ({ error, retry }: { error: Error; retry: () => void }) => (
+        <div data-testid="error-component">
+          Error: {error.message}
+          <button onClick={retry}>Retry</button>
+        </div>
+      );
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          errorComponent={ErrorComponent}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
-  describe('Validation and Warnings', () => {
-    it('logs debug information in development mode', () => {
-      // Note: Debug logging has been removed from DataTable component
-      // The component now uses a logger utility instead of console.log
-      render(<DataTable {...baseProps} />);
-      
-      // Verify component renders correctly
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
-    });
-
-    it('logs info message when features are not provided in development', async () => {
-      // Note: vitest.config.ts sets import.meta.env.MODE to 'development' by default
-      // This test verifies the development warning when features are not provided
-      // Skip if not in development mode to avoid false failures
-      if (import.meta.env.MODE !== 'development') {
-        return;
-      }
-      
-      // Clear mock before test to ensure clean state
-      mockLogger.info.mockClear();
-      
-      // Render without features prop - should trigger the warning in development mode
-      render(<DataTable {...baseProps} />);
-      
-      // Wait for useEffect to run - it runs after render
-      // The effect checks: if (!features && import.meta.env?.MODE === 'development')
-      await waitFor(() => {
-        expect(mockLogger.info).toHaveBeenCalled();
-      }, { 
-        timeout: 1000,
-        interval: 50 
-      });
-      
-      // Verify it was called with the correct message
-      expect(mockLogger.info).toHaveBeenCalledWith(
-        'DataTable: no features provided; all capabilities default to disabled. Pass a features object to enable functionality.'
-      );
-    });
-
-    it('does not log info message when features are provided', () => {
-      render(<DataTable {...baseProps} features={createDefaultFeatures()} />);
-      
-      expect(mockLogger.info).not.toHaveBeenCalled();
-    });
-
-    it('warns when deleteSelected is enabled without deletion', () => {
-      const invalidFeatures = createFeaturesWithEnabled({
-        deleteSelected: true,
-        deletion: false,
-      });
-      
-      render(<DataTable {...baseProps} features={invalidFeatures} />);
-      
-      expect(mockLogger.warn).toHaveBeenCalledWith(
-        'deleteSelected requires deletion to be enabled'
-      );
-    });
-
-    it('does not warn when deleteSelected is enabled with deletion', () => {
-      const validFeatures = createFeaturesWithEnabled({
-        deleteSelected: true,
-        deletion: true,
-      });
-      
-      render(<DataTable {...baseProps} features={validFeatures} />);
-      
-      expect(mockLogger.warn).not.toHaveBeenCalled();
+  describe('Performance Configuration', () => {
+    it('renders with performance configuration', () => {
+      const performanceConfig = {
+        virtualScrolling: true,
+        enableChunking: true,
+        chunkSize: 1000,
+        enableWebWorkers: true,
+      };
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          performance={performanceConfig}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with server-side configuration', () => {
+      const serverSideConfig = {
+        fetchData: vi.fn(),
+        totalCount: 1000,
+        pageSize: 25,
+      };
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          serverSide={serverSideConfig}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with pagination mode override', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          paginationMode="server"
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with virtual height configuration', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          virtualHeight={600}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with initial page size', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          initialPageSize={50}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
   describe('Event Handlers', () => {
-    it('passes onEditRow handler to DataTableCore', () => {
+    it('renders with edit row handler', () => {
       const onEditRow = vi.fn();
-      render(<DataTable {...baseProps} onEditRow={onEditRow} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('onEditRow', onEditRow);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          onEditRow={onEditRow}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('passes onDeleteRow handler to DataTableCore', () => {
+    it('renders with delete row handler', () => {
       const onDeleteRow = vi.fn();
-      render(<DataTable {...baseProps} onDeleteRow={onDeleteRow} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('onDeleteRow', onDeleteRow);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          onDeleteRow={onDeleteRow}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('passes onCreateRow handler to DataTableCore', () => {
+    it('renders with create row handler', () => {
       const onCreateRow = vi.fn();
-      render(<DataTable {...baseProps} onCreateRow={onCreateRow} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('onCreateRow', onCreateRow);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          onCreateRow={onCreateRow}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('passes onImport handler to DataTableCore', () => {
+    it('renders with import handler', () => {
       const onImport = vi.fn();
-      render(<DataTable {...baseProps} onImport={onImport} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('onImport', onImport);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          onImport={onImport}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('passes onRowSelectionChange handler to DataTableCore', () => {
+    it('renders with row selection change handler', () => {
       const onRowSelectionChange = vi.fn();
-      render(<DataTable {...baseProps} onRowSelectionChange={onRowSelectionChange} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('onRowSelectionChange', onRowSelectionChange);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          onRowSelectionChange={onRowSelectionChange}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('passes onDeleteSelected handler to DataTableCore', () => {
+    it('renders with controlled selection state', () => {
+      const selection = { '1': true, '2': false };
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          selection={selection}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with delete selected handler', () => {
       const onDeleteSelected = vi.fn();
-      render(<DataTable {...baseProps} onDeleteSelected={onDeleteSelected} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('onDeleteSelected', onDeleteSelected);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          onDeleteSelected={onDeleteSelected}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
-  describe('Data Handling', () => {
-    it('handles empty data array', () => {
-      // Note: Debug logging has been removed from DataTable component
-      render(<DataTable {...baseProps} data={[]} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
+  describe('Advanced Configuration', () => {
+    it('renders with hierarchical configuration', () => {
+      const hierarchicalConfig = {
+        enabled: true,
+        defaultExpanded: true,
+        indentSize: 20,
+      };
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          hierarchical={hierarchicalConfig}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with column order configuration', () => {
+      const columnOrder = ['name', 'email', 'age'];
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          columnOrder={columnOrder}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with custom getRowId function', () => {
+      const getRowId = (row: any) => `row-${row.id}`;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          getRowId={getRowId}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with custom empty state', () => {
+      const emptyState = {
+        title: 'No data found',
+        description: 'Please add some data to get started',
+        icon: '📊',
+      };
+
+      render(
+        <DataTable
+          data={[]}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          emptyState={emptyState}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('handles single data item', () => {
-      // Note: Debug logging has been removed from DataTable component
-      const singleData = testDataScenarios.single;
-      render(<DataTable {...baseProps} data={singleData} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
+    it('renders with custom loading component', () => {
+      const LoadingComponent = () => <div data-testid="custom-loading">Loading...</div>;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          loadingComponent={LoadingComponent}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
+    it('renders with custom actions', () => {
+      const actions = [
+        {
+          id: 'custom-action',
+          label: 'Custom Action',
+          onClick: vi.fn(),
+        },
+      ];
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          actions={actions}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+  });
+
+  describe('Data Scenarios', () => {
     it('handles large dataset', () => {
-      // Note: Debug logging has been removed from DataTable component
       const largeData = testDataScenarios.large;
-      render(<DataTable {...baseProps} data={largeData} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
+
+      render(
+        <DataTable
+          data={largeData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('handles data with null values', () => {
-      const dataWithNulls = testDataScenarios.withNulls;
-      render(<DataTable {...baseProps} data={dataWithNulls} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
+    it('handles single record', () => {
+      const singleRecord = [mockData[0]];
+
+      render(
+        <DataTable
+          data={singleRecord}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
-  });
 
-  describe('Performance Configuration', () => {
-    it('passes performance config to DataTableCore', () => {
-      const performance = {
-        virtualScrolling: true,
-        enableChunking: true,
-      };
-      
-      render(<DataTable {...baseProps} performance={performance} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('performance', performance);
+    it('handles complex data types', () => {
+      const complexData = [
+        {
+          id: '1',
+          name: 'John Doe',
+          email: 'john@example.com',
+          metadata: { role: 'admin', permissions: ['read', 'write'] },
+          tags: ['urgent', 'important'],
+          createdAt: new Date('2023-01-01'),
+          isActive: true,
+        },
+      ];
+
+      render(
+        <DataTable
+          data={complexData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
+  });
 
-    it('passes serverSide config to DataTableCore', () => {
-      const serverSide = {
-        fetchData: vi.fn(),
-        enableServerSorting: true,
+  describe('RBAC Integration', () => {
+    it('renders with RBAC configuration', () => {
+      const rbacConfig = {
+        pageId: 'user-management',
+        resource: 'users',
+        action: 'read',
       };
-      
-      render(<DataTable {...baseProps} serverSide={serverSide} />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('serverSide', serverSide);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={rbacConfig}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
-    it('passes paginationMode to DataTableCore', () => {
-      render(<DataTable {...baseProps} paginationMode="server" />);
-      
-      const mockCall = getMockedDataTableCore().mock.calls[0];
-      expect(mockCall[0]).toHaveProperty('paginationMode', 'server');
+    it('renders with minimal RBAC configuration', () => {
+      const minimalRBAC = { pageId: 'test' };
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={minimalRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
-  describe('Component Integration', () => {
-    it('passes all props to DataTableCore except features', () => {
-      const allProps = {
-        ...baseProps,
-        title: 'Test Table',
-        description: 'Test description',
-        variant: 'compact' as const,
-        className: 'custom-class',
-        features: createFullFeatures(),
-        onEditRow: vi.fn(),
-        onDeleteRow: vi.fn(),
-        onCreateRow: vi.fn(),
-        onImport: vi.fn(),
-        onRowSelectionChange: vi.fn(),
-        onDeleteSelected: vi.fn(),
-        performance: { virtualScrolling: true },
-        initialPageSize: 25,
-      };
-      
-      render(<DataTable {...allProps} />);
-      
-      const mockDataTableCore = getMockedDataTableCore();
-      const lastCall = mockDataTableCore.mock.calls[mockDataTableCore.mock.calls.length - 1][0];
-      
-      expect(lastCall).toMatchObject({
-        data: allProps.data,
-        columns: allProps.columns,
-        rbac: allProps.rbac,
-        title: allProps.title,
-        description: allProps.description,
-        variant: allProps.variant,
-        className: allProps.className,
-        onEditRow: allProps.onEditRow,
-        onDeleteRow: allProps.onDeleteRow,
-        onCreateRow: allProps.onCreateRow,
-        onImport: allProps.onImport,
-        onRowSelectionChange: allProps.onRowSelectionChange,
-        onDeleteSelected: allProps.onDeleteSelected,
-        performance: allProps.performance,
-        initialPageSize: allProps.initialPageSize,
-      });
-      
-      // Features should be normalized, not the original object
-      expect(lastCall.features).toBeDefined();
-      expect(lastCall.features).not.toBe(allProps.features);
+  describe('Accessibility', () => {
+    it('renders with proper accessibility attributes', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          title="User Management"
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('renders with ARIA labels when provided', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          title="User Management"
+          description="Manage user accounts and permissions"
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
-  describe('Memory Management', () => {
-    it('cleans up resources on unmount', () => {
-      const { unmount } = render(<DataTable {...baseProps} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
-      
-      unmount();
-      expect(screen.queryByTestId('data-table-core')).not.toBeInTheDocument();
-    });
-
-    it('handles rapid mount/unmount cycles', () => {
-      const { unmount: unmount1 } = render(<DataTable {...baseProps} />);
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
-      unmount1();
-      
-      const { unmount: unmount2 } = render(<DataTable {...baseProps} />);
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
-      unmount2();
-      
-      expect(screen.queryByTestId('data-table-core')).not.toBeInTheDocument();
+  describe('Performance Optimization', () => {
+    it('renders with React.memo optimization', () => {
+      const { rerender } = render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      // Re-render with same props should not cause issues
+      rerender(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('handles prop changes efficiently', () => {
+      const { rerender } = render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      // Change title prop
+      rerender(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+          title="Updated Title"
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
   describe('Edge Cases', () => {
-    it('handles missing columns gracefully', () => {
-      // Note: Debug logging has been removed from DataTable component
-      render(<DataTable {...baseProps} columns={[]} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
-    });
-
-    it('handles undefined rbac pageId and pageName', () => {
-      // Note: Debug logging has been removed from DataTable component
-      render(<DataTable {...baseProps} rbac={{}} />);
-      
-      expect(screen.getByTestId('data-table-core')).toBeInTheDocument();
-    });
-
-    it('handles rapid feature prop changes', () => {
-      const { rerender } = render(<DataTable {...baseProps} features={{ search: true }} />);
-      
-      expect(getMockedDataTableCore()).toHaveBeenCalledTimes(1);
-      
-      rerender(<DataTable {...baseProps} features={{ search: false }} />);
-      expect(getMockedDataTableCore()).toHaveBeenCalledTimes(2);
-      
-      rerender(<DataTable {...baseProps} features={{ search: true, pagination: true }} />);
-      expect(getMockedDataTableCore()).toHaveBeenCalledTimes(3);
+    it('handles null data gracefully', () => {
+      render(
+        <DataTable
+          // @ts-expect-error - testing null data handling
+          data={null}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('handles undefined columns gracefully', () => {
+      render(
+        <DataTable
+          data={mockData}
+          // @ts-expect-error - testing undefined columns handling
+          columns={undefined}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('handles empty columns array', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={[]}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('handles missing RBAC configuration', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          // @ts-expect-error - intentionally missing rbac
+          rbac={undefined}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
-});
+
+  describe('TypeScript Integration', () => {
+    it('maintains type safety with generic data types', () => {
+      interface CustomData {
+        id: string;
+        customField: string;
+      }
+
+      const customData: CustomData[] = [
+        { id: '1', customField: 'value1' },
+        { id: '2', customField: 'value2' },
+      ];
+
+      const customColumns: DataTableColumn<CustomData>[] = [
+        {
+          id: 'id',
+          header: 'ID',
+          accessorKey: 'id',
+        },
+        {
+          id: 'customField',
+          header: 'Custom Field',
+          accessorKey: 'customField',
+        },
+      ];
+
+      render(
+        <DataTable
+          data={customData}
+          columns={customColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('handles complex nested data types', () => {
+      interface NestedData {
+        id: string;
+        user: {
+          name: string;
+          profile: {
+            avatar: string;
+            settings: Record<string, any>;
+          };
+        };
+      }
+
+      const nestedData: NestedData[] = [
+        {
+          id: '1',
+          user: {
+            name: 'John Doe',
+            profile: {
+              avatar: 'avatar.jpg',
+              settings: { theme: 'dark', notifications: true },
+            },
+          },
+        },
+      ];
+
+      const nestedColumns: DataTableColumn<NestedData>[] = [
+        {
+          id: 'id',
+          header: 'ID',
+          accessorKey: 'id',
+        },
+        {
+          id: 'user.name',
+          header: 'Name',
+          accessorKey: 'user.name',
+        },
+      ];
+
+      render(
+        <DataTable
+          data={nestedData}
+          columns={nestedColumns}
+          rbac={mockRBAC}
+          features={createDefaultFeatures()}
+        />
+      );
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+  });
+});