@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,1004 +0,0 @@
-/**
- * @file UnifiedTableBody Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
- * @since 0.4.0
- * 
- * Comprehensive test suite for UnifiedTableBody component following TEST_STANDARD.md.
- * Tests cover rendering, virtualization, editing, hierarchical data, and user interactions.
- */
-
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
-import { renderHook } from '@testing-library/react';
-import { UnifiedTableBody } from '../UnifiedTableBody';
-import type { DataRecord } from '../../types';
-import { createTestData, createTestColumns } from '../../__tests__/test-utils/dataFactories';
-
-// Mock Button component
-vi.mock('../../Button/Button', () => ({
-  Button: ({ children, onClick, size, variant, className, 'aria-label': ariaLabel }: any) => (
-    <button
-      onClick={onClick}
-      data-size={size}
-      data-variant={variant}
-      className={className}
-      aria-label={ariaLabel}
-    >
-      {children}
-    </button>
-  ),
-}));
-
-// Mock Input component
-vi.mock('../../Input/Input', () => ({
-  Input: React.forwardRef(({ type, value, onChange, className, placeholder }: any, ref: any) => (
-    <input
-      ref={ref}
-      type={type}
-      value={value}
-      onChange={onChange}
-      className={className}
-      placeholder={placeholder}
-      data-testid={`input-${type || 'text'}`}
-    />
-  )),
-}));
-
-// Mock Select components
-vi.mock('../../Select/Select', () => ({
-  Select: React.forwardRef(({ children, value, onValueChange, onOpenChange }: any, ref: any) => (
-    <div ref={ref} data-testid="select" data-value={value}>
-      {children}
-      <button onClick={() => onOpenChange?.(true)} data-testid="select-open">Open</button>
-      <button onClick={() => onValueChange?.('option1')} data-testid="select-change">Change</button>
-    </div>
-  )),
-  SelectTrigger: ({ children, className }: any) => (
-    <div data-testid="select-trigger" className={className}>{children}</div>
-  ),
-  SelectValue: ({ placeholder }: any) => <div data-testid="select-value">{placeholder}</div>,
-  SelectContent: ({ children, searchable, searchPlaceholder }: any) => (
-    <div data-testid="select-content" data-searchable={searchable} data-placeholder={searchPlaceholder}>
-      {children}
-    </div>
-  ),
-  SelectItem: ({ children, value }: any) => (
-    <div data-testid="select-item" data-value={value}>{children}</div>
-  ),
-  SelectGroup: ({ children }: any) => <div data-testid="select-group">{children}</div>,
-  SelectLabel: ({ children }: any) => <div data-testid="select-label">{children}</div>,
-  SelectSeparator: () => <div data-testid="select-separator" />,
-}));
-
-// Mock lucide-react icons
-vi.mock('lucide-react', async () => {
-  const actual = await vi.importActual('lucide-react');
-  return {
-    ...actual,
-    ChevronUp: ({ className }: { className?: string }) => <span className={className} data-testid="chevron-up">↑</span>,
-    ChevronDown: ({ className }: { className?: string }) => <span className={className} data-testid="chevron-down">↓</span>,
-    ChevronRight: ({ className }: { className?: string }) => <span className={className} data-testid="chevron-right">→</span>,
-    Check: ({ className }: { className?: string }) => <span className={className} data-testid="check-icon">✓</span>,
-  };
-});
-
-// Mock EmptyState component
-vi.mock('../EmptyState', () => ({
-  EmptyState: ({ title, description, isFiltered, onClearFilters }: any) => (
-    <div data-testid="empty-state">
-      {title && <div>{title}</div>}
-      {description && <div>{description}</div>}
-      {isFiltered && onClearFilters && (
-        <button onClick={onClearFilters} data-testid="clear-filters">Clear Filters</button>
-      )}
-    </div>
-  ),
-}));
-
-// Mock FilterRow component
-vi.mock('../FilterRow', () => ({
-  FilterRow: ({ table }: any) => <div data-testid="filter-row">Filter Row</div>,
-}));
-
-// Mock ActionButtons component
-vi.mock('../ActionButtons', () => ({
-  ActionButtons: ({ row, actions, isEditing }: any) => (
-    <div data-testid="action-buttons">
-      {actions?.map((action: any, idx: number) => (
-        <button key={idx} onClick={() => action.onClick?.(row.original)} data-testid={`action-${action.testId || idx}`}>
-          {action.label}
-        </button>
-      ))}
-    </div>
-  ),
-}));
-
-// Mock EditableRow component
-vi.mock('../EditableRow', () => ({
-  EditableRow: ({ row, editingData, onEditingDataChange, onSave, onCancel }: any) => (
-    <tr data-testid="editable-row">
-      <td>
-        <input
-          data-testid="editable-input"
-          value={editingData?.name || ''}
-          onChange={(e) => onEditingDataChange?.({ ...editingData, name: e.target.value })}
-        />
-        <button onClick={onSave} data-testid="save-editable">Save</button>
-        <button onClick={onCancel} data-testid="cancel-editable">Cancel</button>
-      </td>
-    </tr>
-  ),
-}));
-
-// Mock virtualizer
-vi.mock('@tanstack/react-virtual', () => ({
-  useVirtualizer: vi.fn(() => ({
-    getVirtualItems: vi.fn(() => []),
-    getTotalSize: vi.fn(() => 0),
-    scrollToIndex: vi.fn(),
-    scrollToOffset: vi.fn(),
-  })),
-}));
-
-interface TestData extends DataRecord {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-}
-
-describe('[component] UnifiedTableBody', () => {
-  const mockData = createTestData(5);
-  const mockColumns = createTestColumns();
-
-  const createMockTable = (data: any[] = mockData, columns: any[] = mockColumns) => {
-    const { result } = renderHook(() =>
-      useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-      })
-    );
-    return result.current;
-  };
-
-  const baseProps = {
-    table: createMockTable(),
-    isCreating: false,
-    creationData: {},
-    onCreationDataChange: vi.fn(),
-    onSaveCreation: vi.fn(),
-    onCancelCreation: vi.fn(),
-    editingRowId: null,
-    editingData: {},
-    onEditingDataChange: vi.fn(),
-    onSaveEditing: vi.fn(),
-    onCancelEditing: vi.fn(),
-    grouping: [],
-    aggregates: [],
-    getRowId: (row: any) => row.id || String(row.name),
-    dataLength: mockData.length,
-    virtualHeight: 600,
-    forceVirtualization: false,
-    actions: [],
-    rbac: { pageId: 'test-page' },
-    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 },
-    },
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Suppress console.log for cleaner test output
-    vi.spyOn(console, 'log').mockImplementation(() => {});
-    vi.spyOn(console, 'warn').mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders table body with rows', () => {
-      const table = createMockTable();
-      render(
-        <table>
-          <UnifiedTableBody {...baseProps} table={table} />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-
-    it('renders empty state when no rows', () => {
-      const table = createMockTable([]);
-      render(
-        <table>
-          <UnifiedTableBody {...baseProps} table={table} dataLength={0} />
-        </table>
-      );
-
-      expect(screen.getByTestId('empty-state')).toBeInTheDocument();
-    });
-
-    it('renders custom empty state configuration', () => {
-      const table = createMockTable([]);
-      const emptyState = {
-        title: 'No Records',
-        description: 'Add some data',
-      };
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            dataLength={0}
-            emptyState={emptyState}
-          />
-        </table>
-      );
-
-      expect(screen.getByText('No Records')).toBeInTheDocument();
-      expect(screen.getByText('Add some data')).toBeInTheDocument();
-    });
-
-    it('renders filter row when enabled', () => {
-      const table = createMockTable();
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            enableFiltering={true}
-            showFilterRow={true}
-          />
-        </table>
-      );
-
-      expect(screen.getByTestId('filter-row')).toBeInTheDocument();
-    });
-  });
-
-  describe('Row Creation', () => {
-    it('renders creation row when isCreating is true', () => {
-      const table = createMockTable();
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ name: 'New User', email: 'new@example.com' }}
-          />
-        </table>
-      );
-
-      // Check that inputs are rendered (by placeholder or value)
-      const nameInput = screen.getByDisplayValue('New User');
-      expect(nameInput).toBeInTheDocument();
-    });
-
-    it('calls onCreationDataChange when creation input changes', async () => {
-      const user = userEvent.setup();
-      const onCreationDataChange = vi.fn();
-      const table = createMockTable();
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ name: '' }}
-            onCreationDataChange={onCreationDataChange}
-          />
-        </table>
-      );
-
-      // Find input by placeholder since mock might not have testid
-      const input = screen.getByPlaceholderText(/Enter Name/i);
-      await user.type(input, 'New Name');
-
-      expect(onCreationDataChange).toHaveBeenCalled();
-    });
-
-    it('calls onSaveCreation when save button is clicked', async () => {
-      const user = userEvent.setup();
-      const onSaveCreation = vi.fn();
-      const table = createMockTable();
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ name: 'New User' }}
-            onSaveCreation={onSaveCreation}
-          />
-        </table>
-      );
-
-      const saveButton = screen.getByTitle('Save new row');
-      await user.click(saveButton);
-
-      expect(onSaveCreation).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onCancelCreation when cancel button is clicked', async () => {
-      const user = userEvent.setup();
-      const onCancelCreation = vi.fn();
-      const table = createMockTable();
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ name: 'New User' }}
-            onCancelCreation={onCancelCreation}
-          />
-        </table>
-      );
-
-      const cancelButton = screen.getByTitle('Cancel new row');
-      await user.click(cancelButton);
-
-      expect(onCancelCreation).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders select field for select column type in creation mode', () => {
-      const columnsWithSelect = [
-        {
-          id: 'status',
-          header: 'Status',
-          accessorKey: 'status',
-          fieldType: 'select' as const,
-          fieldOptions: [
-            { value: 'active', label: 'Active' },
-            { value: 'inactive', label: 'Inactive' },
-          ],
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithSelect);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ status: 'active' }}
-          />
-        </table>
-      );
-
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('renders number input for number field type in creation mode', () => {
-      const columnsWithNumber = [
-        {
-          id: 'age',
-          header: 'Age',
-          accessorKey: 'age',
-          fieldType: 'number' as const,
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithNumber);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ age: '25' }}
-          />
-        </table>
-      );
-
-      // Find by type since the actual Input component is rendered
-      const numberInput = screen.getByDisplayValue('25');
-      expect(numberInput).toHaveAttribute('type', 'number');
-    });
-
-    it('renders date input for date field type in creation mode', () => {
-      const columnsWithDate = [
-        {
-          id: 'createdAt',
-          header: 'Created At',
-          accessorKey: 'createdAt',
-          fieldType: 'date' as const,
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithDate);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ createdAt: '2024-01-01' }}
-          />
-        </table>
-      );
-
-      // Find by type and value since the actual Input component is rendered
-      const dateInput = screen.getByDisplayValue('2024-01-01');
-      expect(dateInput).toHaveAttribute('type', 'date');
-    });
-  });
-
-  describe('Row Editing', () => {
-    it('renders EditableRow when row is being edited', () => {
-      const table = createMockTable();
-      const rowId = mockData[0].id;
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            editingRowId={rowId}
-            editingData={{ name: 'Edited Name' }}
-          />
-        </table>
-      );
-
-      expect(screen.getByTestId('editable-row')).toBeInTheDocument();
-    });
-
-    it('calls onEditingDataChange when editing data changes', async () => {
-      const user = userEvent.setup();
-      const onEditingDataChange = vi.fn();
-      const table = createMockTable();
-      const rowId = mockData[0].id;
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            editingRowId={rowId}
-            editingData={{ name: 'Current Name' }}
-            onEditingDataChange={onEditingDataChange}
-          />
-        </table>
-      );
-
-      const editableInput = screen.getByTestId('editable-input');
-      await user.clear(editableInput);
-      await user.type(editableInput, 'New Name');
-
-      expect(onEditingDataChange).toHaveBeenCalled();
-    });
-
-    it('calls onSaveEditing when save button is clicked in edit mode', async () => {
-      const user = userEvent.setup();
-      const onSaveEditing = vi.fn();
-      const table = createMockTable();
-      const rowId = mockData[0].id;
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            editingRowId={rowId}
-            editingData={{ name: 'Edited Name' }}
-            onSaveEditing={onSaveEditing}
-          />
-        </table>
-      );
-
-      const saveButton = screen.getByTestId('save-editable');
-      await user.click(saveButton);
-
-      expect(onSaveEditing).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onCancelEditing when cancel button is clicked in edit mode', async () => {
-      const user = userEvent.setup();
-      const onCancelEditing = vi.fn();
-      const table = createMockTable();
-      const rowId = mockData[0].id;
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            editingRowId={rowId}
-            editingData={{ name: 'Edited Name' }}
-            onCancelEditing={onCancelEditing}
-          />
-        </table>
-      );
-
-      const cancelButton = screen.getByTestId('cancel-editable');
-      await user.click(cancelButton);
-
-      expect(onCancelEditing).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('Grouped Rows', () => {
-    it('renders group header row when grouping is enabled', () => {
-      const table = createMockTable();
-      // Mock grouped row
-      const mockGroupedRow = {
-        ...table.getRowModel().rows[0],
-        getIsGrouped: () => true,
-        getValue: (columnId: string) => 'Group A',
-        subRows: table.getRowModel().rows,
-        toggleExpanded: vi.fn(),
-        getIsExpanded: () => false,
-      };
-
-      const tableWithGrouped = {
-        ...table,
-        getRowModel: () => ({
-          rows: [mockGroupedRow],
-        }),
-      };
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={tableWithGrouped as any}
-            grouping={['department']}
-          />
-        </table>
-      );
-
-      // Group header should be rendered
-      expect(screen.getByText(/Group A/)).toBeInTheDocument();
-    });
-
-    it('toggles group expansion when group header is clicked', async () => {
-      const user = userEvent.setup();
-      const toggleExpanded = vi.fn();
-      const table = createMockTable();
-      const mockGroupedRow = {
-        ...table.getRowModel().rows[0],
-        getIsGrouped: () => true,
-        getValue: (columnId: string) => 'Group A',
-        subRows: table.getRowModel().rows,
-        toggleExpanded,
-        getIsExpanded: () => false,
-      };
-
-      const tableWithGrouped = {
-        ...table,
-        getRowModel: () => ({
-          rows: [mockGroupedRow],
-        }),
-      };
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={tableWithGrouped as any}
-            grouping={['department']}
-          />
-        </table>
-      );
-
-      const expandButton = screen.getByRole('button');
-      await user.click(expandButton);
-
-      expect(toggleExpanded).toHaveBeenCalled();
-    });
-  });
-
-  describe('Hierarchical Data', () => {
-    it('renders hierarchical rows with indentation', () => {
-      const hierarchicalData = [
-        { id: '1', name: 'Parent', isParent: true },
-        { id: '2', name: 'Child', isParent: false, parentId: '1' },
-      ];
-      const table = createMockTable(hierarchicalData as any);
-
-      const hierarchicalState = {
-        isExpanded: vi.fn((id: string) => id === '1'),
-        hasChildren: vi.fn((id: string) => id === '1'),
-        getChildrenCount: vi.fn((id: string) => id === '1' ? 1 : 0),
-        toggleRow: vi.fn(),
-      };
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            hierarchical={{
-              enabled: true,
-              indentSize: 24,
-              state: hierarchicalState,
-            }}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-
-    it('renders expansion button for parent rows', () => {
-      const hierarchicalData = [
-        { id: '1', name: 'Parent', isParent: true },
-      ];
-      const table = createMockTable(hierarchicalData as any);
-
-      const hierarchicalState = {
-        isExpanded: vi.fn(() => false),
-        hasChildren: vi.fn(() => true),
-        getChildrenCount: vi.fn(() => 1),
-        toggleRow: vi.fn(),
-      };
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            hierarchical={{
-              enabled: true,
-              indentSize: 24,
-              state: hierarchicalState,
-            }}
-          />
-        </table>
-      );
-
-      // Expansion button should be rendered (ChevronRight icon)
-      const buttons = screen.getAllByRole('button');
-      expect(buttons.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Action Buttons', () => {
-    it('renders action buttons for each row when actions column exists', () => {
-      // Create table with actions column
-      const columnsWithActions = [
-        ...mockColumns,
-        {
-          id: 'actions',
-          header: 'Actions',
-          cell: () => null,
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithActions);
-      const actions = [
-        { label: 'Edit', onClick: vi.fn(), testId: 'edit' },
-        { label: 'Delete', onClick: vi.fn(), testId: 'delete' },
-      ];
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            actions={actions}
-          />
-        </table>
-      );
-
-      // ActionButtons mock renders with action- prefix
-      // Multiple rows mean multiple buttons, so use getAllByTestId
-      const editButtons = screen.getAllByTestId('action-edit');
-      const deleteButtons = screen.getAllByTestId('action-delete');
-      expect(editButtons.length).toBeGreaterThan(0);
-      expect(deleteButtons.length).toBeGreaterThan(0);
-    });
-
-    it('calls action onClick when action button is clicked', async () => {
-      const user = userEvent.setup();
-      const onEditClick = vi.fn();
-      // Create table with actions column
-      const columnsWithActions = [
-        ...mockColumns,
-        {
-          id: 'actions',
-          header: 'Actions',
-          cell: () => null,
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithActions);
-      const actions = [
-        { label: 'Edit', onClick: onEditClick, testId: 'edit' },
-      ];
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            actions={actions}
-          />
-        </table>
-      );
-
-      // ActionButtons mock renders with action- prefix
-      // Multiple rows mean multiple buttons, so use getAllByTestId and click the first one
-      const editButtons = screen.getAllByTestId('action-edit');
-      expect(editButtons.length).toBeGreaterThan(0);
-      await user.click(editButtons[0]);
-
-      expect(onEditClick).toHaveBeenCalled();
-    });
-  });
-
-  describe('Empty State', () => {
-    it('shows clear filters button when filtered', async () => {
-      const user = userEvent.setup();
-      const onClearFilters = vi.fn();
-      const table = createMockTable([]);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            dataLength={0}
-            isFiltered={true}
-            onClearFilters={onClearFilters}
-          />
-        </table>
-      );
-
-      const clearButton = screen.getByTestId('clear-filters');
-      expect(clearButton).toBeInTheDocument();
-
-      await user.click(clearButton);
-      expect(onClearFilters).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('Virtualization', () => {
-    it('renders standard rows when virtualization is not needed', () => {
-      const table = createMockTable();
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            dataLength={5}
-            forceVirtualization={false}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-
-    it('uses virtualization when data length exceeds threshold', () => {
-      const largeData = createTestData(1500);
-      const table = createMockTable(largeData);
-      
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            dataLength={1500}
-            forceVirtualization={false}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-
-    it('forces virtualization when forceVirtualization is true', () => {
-      const table = createMockTable();
-      
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            dataLength={5}
-            forceVirtualization={true}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles null values in creationData gracefully', () => {
-      const table = createMockTable();
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ name: null as any, email: null as any }}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-
-    it('handles missing getRowId function', () => {
-      const table = createMockTable();
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            getRowId={undefined}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-
-    it('handles empty actions array', () => {
-      const table = createMockTable();
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            actions={[]}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-
-    it('handles columns with editAccessorKey', () => {
-      const columnsWithEditKey = [
-        {
-          id: 'name',
-          header: 'Name',
-          accessorKey: 'name',
-          editAccessorKey: 'fullName',
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithEditKey);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ fullName: 'New Name' }}
-          />
-        </table>
-      );
-
-      const tbody = screen.getByRole('rowgroup');
-      expect(tbody).toBeInTheDocument();
-    });
-  });
-
-  describe('SelectEditField Component', () => {
-    it('renders creatable select with create option when search term has no match', async () => {
-      const user = userEvent.setup();
-      const columnsWithCreatable = [
-        {
-          id: 'status',
-          header: 'Status',
-          fieldType: 'select' as const,
-          fieldOptions: [
-            { value: 'active', label: 'Active' },
-            { value: 'inactive', label: 'Inactive' },
-          ],
-          creatable: true,
-          onCreateNew: vi.fn().mockResolvedValue('new-status'),
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithCreatable);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ status: '' }}
-          />
-        </table>
-      );
-
-      const selectTrigger = screen.getByTestId('select-trigger');
-      expect(selectTrigger).toBeInTheDocument();
-    });
-
-    it('renders select with groups', () => {
-      const columnsWithGroups = [
-        {
-          id: 'category',
-          header: 'Category',
-          fieldType: 'select' as const,
-          fieldOptions: [
-            {
-              type: 'group',
-              label: 'Group 1',
-              items: [
-                { value: 'option1', label: 'Option 1' },
-                { value: 'option2', label: 'Option 2' },
-              ],
-            },
-          ],
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithGroups);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ category: '' }}
-          />
-        </table>
-      );
-
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('renders select with separators', () => {
-      const columnsWithSeparators = [
-        {
-          id: 'status',
-          header: 'Status',
-          fieldType: 'select' as const,
-          fieldOptions: [
-            { value: 'active', label: 'Active' },
-            { type: 'separator' },
-            { value: 'inactive', label: 'Inactive' },
-          ],
-        },
-      ];
-      const table = createMockTable(mockData, columnsWithSeparators);
-
-      render(
-        <table>
-          <UnifiedTableBody
-            {...baseProps}
-            table={table}
-            isCreating={true}
-            creationData={{ status: '' }}
-          />
-        </table>
-      );
-
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-  });
-});
-