@jmruthers/pace-core 0.6.8 → 0.6.10

package/src/components/DataTable/hooks/__tests__/useServerSideDataEffect.test.ts

@@ -0,0 +1,258 @@
+/**
+ * @file Unit Tests for useServerSideDataEffect Hook
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Hooks/__tests__
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useServerSideDataEffect } from '../useServerSideDataEffect';
+import type { DataRecord, ServerSideConfig } from '../../types';
+import type { SortingState, ColumnFiltersState, GroupingState, PaginationState } from '@tanstack/react-table';
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+}
+
+describe('[unit] useServerSideDataEffect', () => {
+  const createMockServerSideConfig = (): ServerSideConfig<TestData> => ({
+    fetchData: vi.fn(),
+  });
+
+  const createMockParams = () => ({
+    finalPaginationMode: 'server' as const,
+    serverSide: createMockServerSideConfig(),
+    pagination: { pageIndex: 0, pageSize: 10 } as PaginationState,
+    sorting: [] as SortingState,
+    columnFilters: [] as ColumnFiltersState,
+    grouping: [] as GroupingState,
+    searchQuery: '',
+    tableDataLength: 0,
+    fetchServerData: vi.fn().mockResolvedValue(undefined),
+    cleanup: undefined,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('Server-Side Mode', () => {
+    it('triggers fetch when table data is empty', async () => {
+      const fetchServerData = vi.fn().mockResolvedValue(undefined);
+      renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        fetchServerData,
+      }));
+
+      // The effect runs asynchronously, wait for it
+      await vi.waitFor(() => {
+        expect(fetchServerData).toHaveBeenCalled();
+      }, { timeout: 1000 });
+
+      expect(fetchServerData).toHaveBeenCalledWith({
+        pageIndex: 0,
+        pageSize: 10,
+        sorting: [],
+        columnFilters: [],
+        globalFilter: '',
+        grouping: [],
+      });
+    });
+
+    it('does not trigger fetch when table has data', () => {
+      const fetchServerData = vi.fn();
+      renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        tableDataLength: 10,
+        fetchServerData,
+      }));
+
+      expect(fetchServerData).not.toHaveBeenCalled();
+    });
+
+    it('passes correct parameters to fetchServerData', async () => {
+      const fetchServerData = vi.fn().mockResolvedValue(undefined);
+      const pagination = { pageIndex: 2, pageSize: 20 };
+      const sorting: SortingState = [{ id: 'name', desc: true }];
+      const columnFilters: ColumnFiltersState = [{ id: 'status', value: 'active' }];
+      const grouping: GroupingState = ['category'];
+      const searchQuery = 'test search';
+
+      renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        pagination,
+        sorting,
+        columnFilters,
+        grouping,
+        searchQuery,
+        fetchServerData,
+      }));
+
+      await vi.waitFor(() => {
+        expect(fetchServerData).toHaveBeenCalled();
+      }, { timeout: 1000 });
+
+      expect(fetchServerData).toHaveBeenCalledWith({
+        pageIndex: 2,
+        pageSize: 20,
+        sorting,
+        columnFilters,
+        globalFilter: searchQuery,
+        grouping,
+      });
+    });
+  });
+
+  describe('Client-Side Mode', () => {
+    it('does not trigger fetch in client-side mode', () => {
+      const fetchServerData = vi.fn();
+      renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        finalPaginationMode: 'client',
+        fetchServerData,
+      }));
+
+      expect(fetchServerData).not.toHaveBeenCalled();
+    });
+
+    it('does not trigger fetch when serverSide config is missing', () => {
+      const fetchServerData = vi.fn();
+      renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        serverSide: undefined,
+        fetchServerData,
+      }));
+
+      expect(fetchServerData).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('calls cleanup function on unmount', () => {
+      const cleanup = vi.fn();
+      const { unmount } = renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        cleanup,
+      }));
+
+      unmount();
+
+      expect(cleanup).toHaveBeenCalled();
+    });
+
+    it('handles missing cleanup function gracefully', () => {
+      const { unmount } = renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        cleanup: undefined,
+      }));
+
+      expect(() => unmount()).not.toThrow();
+    });
+  });
+
+  describe('Return Value', () => {
+    it('returns handleServerSideChange function', () => {
+      const fetchServerData = vi.fn().mockResolvedValue(undefined);
+      const { result } = renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        fetchServerData,
+      }));
+
+      expect(typeof result.current).toBe('function');
+    });
+
+    it('handleServerSideChange triggers fetch when called manually', async () => {
+      const fetchServerData = vi.fn().mockResolvedValue(undefined);
+      const { result } = renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        tableDataLength: 10, // Has data, so auto-fetch won't trigger
+        fetchServerData,
+      }));
+
+      expect(fetchServerData).not.toHaveBeenCalled();
+
+      await result.current();
+
+      expect(fetchServerData).toHaveBeenCalled();
+    });
+
+    it('handleServerSideChange does nothing in client-side mode', async () => {
+      const fetchServerData = vi.fn();
+      const { result } = renderHook(() => useServerSideDataEffect({
+        ...createMockParams(),
+        finalPaginationMode: 'client',
+        fetchServerData,
+      }));
+
+      await result.current();
+
+      expect(fetchServerData).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles fetchServerData errors gracefully', async () => {
+      // Temporarily use real timers for this test to properly handle async error rejection
+      vi.useRealTimers();
+      
+      try {
+        const fetchServerData = vi.fn().mockRejectedValue(new Error('Fetch failed'));
+
+        renderHook(() => useServerSideDataEffect({
+          ...createMockParams(),
+          fetchServerData,
+        }));
+
+        // Wait for the effect to run and the error to be handled
+        // The error should be caught and not cause an unhandled rejection
+        await vi.waitFor(() => {
+          expect(fetchServerData).toHaveBeenCalled();
+        }, { timeout: 1000 });
+
+        // Give a small delay to ensure the error promise is fully handled
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(fetchServerData).toHaveBeenCalled();
+      } finally {
+        // Restore fake timers
+        vi.useFakeTimers();
+      }
+    });
+
+    it('handles rapid state changes', async () => {
+      const fetchServerData = vi.fn().mockResolvedValue(undefined);
+      const { rerender } = renderHook(
+        (props) => useServerSideDataEffect(props),
+        {
+          initialProps: {
+            ...createMockParams(),
+            fetchServerData,
+            pagination: { pageIndex: 0, pageSize: 10 },
+          },
+        }
+      );
+
+      // Rapidly change pagination
+      rerender({
+        ...createMockParams(),
+        fetchServerData,
+        pagination: { pageIndex: 1, pageSize: 10 },
+      });
+
+      rerender({
+        ...createMockParams(),
+        fetchServerData,
+        pagination: { pageIndex: 2, pageSize: 10 },
+      });
+
+      // Should handle rapid changes without errors
+      expect(fetchServerData).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/DataTable/hooks/__tests__/useTableColumns.test.ts

@@ -69,7 +69,7 @@ describe('[unit] useTableColumns', () => {
       }));
 
       const columnIds = result.current.enhancedColumns.map(col => col.id);
-      expect(columnIds).not.toContain('_select');
+      expect(columnIds).not.toContain('select');
     });
   });
 
@@ -100,27 +100,32 @@ describe('[unit] useTableColumns', () => {
       }));
 
       const columnIds = result.current.enhancedColumns.map(col => col.id);
-      expect(columnIds).not.toContain('_actions');
+      expect(columnIds).not.toContain('actions');
     });
   });
 
   describe('Column Ordering', () => {
-    it('respects custom column order', () => {
+    it('respects custom column order and maintains select/actions position', () => {
       const customOrder = ['email', 'id', 'name'];
+      const mockActions: DataTableAction<TestData>[] = [
+        { id: 'edit', label: 'Edit', onClick: vi.fn() },
+      ];
       
       const { result } = renderHook(() => useTableColumns({
         columns: mockColumns,
-        features: mockFullFeatures,
-        effectiveActions: [],
+        features: { ...mockFullFeatures, selection: true },
+        effectiveActions: mockActions,
         columnOrder: customOrder
       }));
 
-      const columnIds = result.current.enhancedColumns
-        .map(col => col.id)
-        .filter(Boolean);
+      const columnIds = result.current.enhancedColumns.map(col => col.id || col.accessorKey);
       
-      // Custom order should be applied to data columns
-      expect(columnIds.length).toBeGreaterThan(0);
+      // Select should always be first
+      expect(columnIds[0]).toBe('select');
+      // Actions should always be last
+      expect(columnIds[columnIds.length - 1]).toBe('actions');
+      // Data columns should follow custom order
+      expect(columnIds.slice(1, -1)).toEqual(['email', 'id', 'name']);
     });
 
     it('handles empty column order by using default order', () => {
@@ -131,35 +136,305 @@ describe('[unit] useTableColumns', () => {
         columnOrder: []
       }));
 
-      expect(result.current.enhancedColumns.length).toBeGreaterThan(0);
+      const columnIds = result.current.enhancedColumns.map(col => col.id || col.accessorKey);
+      expect(columnIds).toContain('id');
+      expect(columnIds).toContain('name');
+      expect(columnIds).toContain('email');
+    });
+
+    it('handles columnOrder with select and actions correctly', () => {
+      const orderWithSelectAndActions = ['select', 'email', 'actions', 'id', 'name'];
+      const mockActions: DataTableAction<TestData>[] = [
+        { id: 'edit', label: 'Edit', onClick: vi.fn() },
+      ];
+      
+      const { result } = renderHook(() => useTableColumns({
+        columns: mockColumns,
+        features: { ...mockFullFeatures, selection: true },
+        effectiveActions: mockActions,
+        columnOrder: orderWithSelectAndActions
+      }));
+
+      const columnIds = result.current.enhancedColumns.map(col => col.id || col.accessorKey);
+      
+      // Select should be first regardless of order
+      expect(columnIds[0]).toBe('select');
+      // Actions should be last regardless of order
+      expect(columnIds[columnIds.length - 1]).toBe('actions');
+    });
+  });
+
+  describe('Select Field Label Display', () => {
+    it('injects automatic cell renderer for select fields without custom cell', () => {
+      const columnsWithSelect: DataTableColumn<TestData>[] = [
+        { accessorKey: 'id', header: 'ID' },
+        {
+          accessorKey: 'name',
+          header: 'Name',
+          fieldType: 'select',
+          fieldOptions: [
+            { value: 'john', label: 'John Doe' },
+            { value: 'jane', label: 'Jane Smith' },
+          ],
+        },
+      ];
+
+      const { result } = renderHook(() => useTableColumns({
+        columns: columnsWithSelect,
+        features: mockFullFeatures,
+        effectiveActions: [],
+        columnOrder: ['id', 'name']
+      }));
+
+      const nameColumn = result.current.enhancedColumns.find(col => col.id === 'name' || col.accessorKey === 'name');
+      expect(nameColumn).toBeDefined();
+      expect(nameColumn?.cell).toBeDefined();
+      expect(typeof nameColumn?.cell).toBe('function');
+    });
+
+    it('does not inject cell renderer when custom cell is provided', () => {
+      const customCellRenderer = vi.fn(({ getValue }) => getValue());
+      
+      const columnsWithCustomCell: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'name',
+          header: 'Name',
+          fieldType: 'select',
+          fieldOptions: [
+            { value: 'john', label: 'John Doe' },
+          ],
+          cell: customCellRenderer,
+        },
+      ];
+
+      const { result } = renderHook(() => useTableColumns({
+        columns: columnsWithCustomCell,
+        features: mockFullFeatures,
+        effectiveActions: [],
+        columnOrder: ['name']
+      }));
+
+      const nameColumn = result.current.enhancedColumns.find(col => col.id === 'name' || col.accessorKey === 'name');
+      expect(nameColumn).toBeDefined();
+      expect(nameColumn?.cell).toBe(customCellRenderer);
+    });
+
+    it('does not inject cell renderer when conditions are not met', () => {
+      const testCases = [
+        {
+          name: 'fieldType is not select',
+          column: {
+            accessorKey: 'name',
+            header: 'Name',
+            fieldType: 'text',
+          } as DataTableColumn<TestData>,
+        },
+        {
+          name: 'fieldOptions is empty',
+          column: {
+            accessorKey: 'name',
+            header: 'Name',
+            fieldType: 'select',
+            fieldOptions: [],
+          } as DataTableColumn<TestData>,
+        },
+        {
+          name: 'fieldOptions is undefined',
+          column: {
+            accessorKey: 'name',
+            header: 'Name',
+            fieldType: 'select',
+          } as DataTableColumn<TestData>,
+        },
+      ];
+
+      testCases.forEach(({ name, column }) => {
+        const { result } = renderHook(() => useTableColumns({
+          columns: [column],
+          features: mockFullFeatures,
+          effectiveActions: [],
+          columnOrder: ['name']
+        }));
+
+        const nameColumn = result.current.enhancedColumns.find(col => col.id === 'name' || col.accessorKey === 'name');
+        expect(nameColumn).toBeDefined();
+        expect(nameColumn?.cell, `Failed for: ${name}`).toBeUndefined();
+      });
+    });
+
+    it('injected cell renderer displays label for matching value', () => {
+      const columnsWithSelect: DataTableColumn<TestData>[] = [
+        {
+          id: 'status',
+          accessorKey: 'name',
+          header: 'Status',
+          fieldType: 'select',
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'pending', label: 'Pending' },
+          ],
+        },
+      ];
+
+      const { result } = renderHook(() => useTableColumns({
+        columns: columnsWithSelect,
+        features: mockFullFeatures,
+        effectiveActions: [],
+        columnOrder: ['status']
+      }));
+
+      const statusColumn = result.current.enhancedColumns.find(col => col.id === 'status');
+      expect(statusColumn?.cell).toBeDefined();
+      
+      // Test the cell renderer function
+      const mockCellContext = {
+        getValue: () => 'active',
+        row: { original: { id: '1', name: 'active', email: 'test@example.com' } },
+        column: { id: 'status' },
+      } as any;
+
+      const rendered = statusColumn?.cell?.(mockCellContext);
+      expect(rendered).toBe('Active');
+    });
+
+    it('injected cell renderer falls back to raw value when label not found', () => {
+      const columnsWithSelect: DataTableColumn<TestData>[] = [
+        {
+          id: 'status',
+          accessorKey: 'name',
+          header: 'Status',
+          fieldType: 'select',
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'pending', label: 'Pending' },
+          ],
+        },
+      ];
+
+      const { result } = renderHook(() => useTableColumns({
+        columns: columnsWithSelect,
+        features: mockFullFeatures,
+        effectiveActions: [],
+        columnOrder: ['status']
+      }));
+
+      const statusColumn = result.current.enhancedColumns.find(col => col.id === 'status');
+      expect(statusColumn?.cell).toBeDefined();
+      
+      // Test the cell renderer function with unmatched value
+      const mockCellContext = {
+        getValue: () => 'unknown',
+        row: { original: { id: '1', name: 'unknown', email: 'test@example.com' } },
+        column: { id: 'status' },
+      } as any;
+
+      const rendered = statusColumn?.cell?.(mockCellContext);
+      expect(rendered).toBe('unknown');
+    });
+
+    it('injected cell renderer handles null values', () => {
+      const columnsWithSelect: DataTableColumn<TestData>[] = [
+        {
+          id: 'status',
+          accessorKey: 'name',
+          header: 'Status',
+          fieldType: 'select',
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+          ],
+        },
+      ];
+
+      const { result } = renderHook(() => useTableColumns({
+        columns: columnsWithSelect,
+        features: mockFullFeatures,
+        effectiveActions: [],
+        columnOrder: ['status']
+      }));
+
+      const statusColumn = result.current.enhancedColumns.find(col => col.id === 'status');
+      expect(statusColumn?.cell).toBeDefined();
+      
+      // Test the cell renderer function with null value
+      const mockCellContext = {
+        getValue: () => null,
+        row: { original: { id: '1', name: null, email: 'test@example.com' } },
+        column: { id: 'status' },
+      } as any;
+
+      const rendered = statusColumn?.cell?.(mockCellContext);
+      expect(rendered).toBe('');
     });
   });
 
   describe('Feature-Based Enhancements', () => {
-    it('applies sorting enhancement when enabled', () => {
+    it('applies feature enhancements correctly', () => {
       const { result } = renderHook(() => useTableColumns({
         columns: mockColumns,
-        features: { ...mockFullFeatures, sorting: true },
+        features: mockFullFeatures,
         effectiveActions: [],
         columnOrder: defaultColumnOrder
       }));
 
-      const column = result.current.enhancedColumns.find(col => col.accessorKey === 'name');
-      expect(column).toBeDefined();
-      expect(column?.enableSorting).toBe(true);
+      const nameColumn = result.current.enhancedColumns.find(col => col.accessorKey === 'name');
+      expect(nameColumn?.enableSorting).toBe(true);
+      expect(nameColumn?.enableColumnFilter).toBe(true);
+      expect(nameColumn?.enableGrouping).toBe(true);
     });
 
-    it('applies filtering enhancement when enabled', () => {
+    it('respects column-level feature overrides', () => {
+      const columnsWithOverride: DataTableColumn<TestData>[] = [
+        { accessorKey: 'id', header: 'ID', enableSorting: false },
+        { accessorKey: 'name', header: 'Name', enableColumnFilter: false },
+      ];
+
       const { result } = renderHook(() => useTableColumns({
-        columns: mockColumns,
-        features: { ...mockFullFeatures, filtering: true },
+        columns: columnsWithOverride,
+        features: mockFullFeatures,
         effectiveActions: [],
-        columnOrder: defaultColumnOrder
+        columnOrder: ['id', 'name']
+      }));
+
+      const idColumn = result.current.enhancedColumns.find(col => col.accessorKey === 'id');
+      const nameColumn = result.current.enhancedColumns.find(col => col.accessorKey === 'name');
+      expect(idColumn?.enableSorting).toBe(false);
+      expect(nameColumn?.enableColumnFilter).toBe(false);
+    });
+  });
+
+  describe('Numeric Column Alignment', () => {
+    it('applies right alignment to numeric columns', () => {
+      const columnsWithNumeric: DataTableColumn<TestData>[] = [
+        { accessorKey: 'id', header: 'ID', fieldType: 'number' },
+        { accessorKey: 'name', header: 'Name', fieldType: 'text' },
+      ];
+
+      const { result } = renderHook(() => useTableColumns({
+        columns: columnsWithNumeric,
+        features: mockFullFeatures,
+        effectiveActions: [],
+        columnOrder: ['id', 'name']
+      }));
+
+      const idColumn = result.current.enhancedColumns.find(col => col.accessorKey === 'id');
+      expect(idColumn?.meta?.align).toBe('right');
+      expect(idColumn?.meta?.type).toBe('number');
+    });
+
+    it('does not apply right alignment to date columns', () => {
+      const columnsWithDate: DataTableColumn<TestData>[] = [
+        { accessorKey: 'date', header: 'Date', fieldType: 'date' },
+      ];
+
+      const { result } = renderHook(() => useTableColumns({
+        columns: columnsWithDate,
+        features: mockFullFeatures,
+        effectiveActions: [],
+        columnOrder: ['date']
       }));
 
-      const column = result.current.enhancedColumns.find(col => col.accessorKey === 'email');
-      expect(column).toBeDefined();
-      expect(column?.enableColumnFilter).toBe(true);
+      const dateColumn = result.current.enhancedColumns.find(col => col.accessorKey === 'date');
+      expect(dateColumn?.meta?.align).not.toBe('right');
     });
   });