@jmruthers/pace-core 0.5.68 → 0.5.69

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

@@ -0,0 +1,592 @@
+/**
+ * @file useDataTableState Hook Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Hooks/__tests__
+ * @since 0.4.0
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDataTableState, dataTableReducer } from '../useDataTableState';
+import type { DataRecord, SortingState, ColumnFiltersState, VisibilityState, GroupingState, ExpandedState, PaginationState } from '../../types';
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+  active: boolean;
+}
+
+const mockData: TestData[] = [
+  { id: '1', name: 'John Doe', email: 'john@example.com', age: 30, active: true },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', age: 25, active: false },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', age: 35, active: true }
+];
+
+describe('[unit] dataTableReducer', () => {
+  const initialState = {
+    sorting: [],
+    columnFilters: [],
+    columnVisibility: {},
+    grouping: [],
+    expanded: {},
+    pagination: { pageIndex: 0, pageSize: 10 },
+    columnOrder: ['id', 'name', 'email'],
+    rowSelection: {},
+    isCreating: false,
+    creationData: {},
+    editingRowId: null,
+    editingData: {},
+    showImportModal: false,
+    showFilterRow: false,
+    searchQuery: ''
+  };
+
+  it('handles SET_SORTING action', () => {
+    const newSorting: SortingState = [{ id: 'name', desc: false }];
+    const action = { type: 'SET_SORTING' as const, payload: newSorting };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.sorting).toEqual(newSorting);
+    expect(result).toEqual({ ...initialState, sorting: newSorting });
+  });
+
+  it('handles SET_COLUMN_FILTERS action', () => {
+    const newFilters: ColumnFiltersState = [{ id: 'name', value: 'John' }];
+    const action = { type: 'SET_COLUMN_FILTERS' as const, payload: newFilters };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.columnFilters).toEqual(newFilters);
+  });
+
+  it('handles SET_COLUMN_VISIBILITY action', () => {
+    const newVisibility: VisibilityState = { name: false, email: true };
+    const action = { type: 'SET_COLUMN_VISIBILITY' as const, payload: newVisibility };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.columnVisibility).toEqual(newVisibility);
+  });
+
+  it('handles SET_GROUPING action', () => {
+    const newGrouping: GroupingState = ['name'];
+    const action = { type: 'SET_GROUPING' as const, payload: newGrouping };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.grouping).toEqual(newGrouping);
+  });
+
+  it('handles SET_EXPANDED action', () => {
+    const newExpanded: ExpandedState = { '1': true };
+    const action = { type: 'SET_EXPANDED' as const, payload: newExpanded };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.expanded).toEqual(newExpanded);
+  });
+
+  it('handles SET_PAGINATION action', () => {
+    const newPagination: PaginationState = { pageIndex: 2, pageSize: 25 };
+    const action = { type: 'SET_PAGINATION' as const, payload: newPagination };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.pagination).toEqual(newPagination);
+  });
+
+  it('handles SET_COLUMN_ORDER action', () => {
+    const newOrder = ['name', 'id', 'email'];
+    const action = { type: 'SET_COLUMN_ORDER' as const, payload: newOrder };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.columnOrder).toEqual(newOrder);
+  });
+
+  it('handles SET_ROW_SELECTION action', () => {
+    const newSelection = { '1': true, '2': false };
+    const action = { type: 'SET_ROW_SELECTION' as const, payload: newSelection };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.rowSelection).toEqual(newSelection);
+  });
+
+  it('handles TOGGLE_ROW_SELECTION action', () => {
+    const initialStateWithSelection = { ...initialState, rowSelection: { '1': true } };
+    const action = { type: 'TOGGLE_ROW_SELECTION' as const, payload: { rowId: '2', selected: true } };
+    
+    const result = dataTableReducer(initialStateWithSelection, action);
+    
+    expect(result.rowSelection).toEqual({ '1': true, '2': true });
+  });
+
+  it('handles CLEAR_ROW_SELECTION action', () => {
+    const initialStateWithSelection = { ...initialState, rowSelection: { '1': true, '2': true } };
+    const action = { type: 'CLEAR_ROW_SELECTION' as const };
+    
+    const result = dataTableReducer(initialStateWithSelection, action);
+    
+    expect(result.rowSelection).toEqual({});
+  });
+
+  it('handles SET_CREATING action', () => {
+    const action = { type: 'SET_CREATING' as const, payload: true };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.isCreating).toBe(true);
+  });
+
+  it('handles SET_CREATION_DATA action', () => {
+    const creationData = { name: 'New User', email: 'new@example.com' };
+    const action = { type: 'SET_CREATION_DATA' as const, payload: creationData };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.creationData).toEqual(creationData);
+  });
+
+  it('handles CLEAR_CREATION_DATA action', () => {
+    const initialStateWithCreationData = { ...initialState, creationData: { name: 'Test' } };
+    const action = { type: 'CLEAR_CREATION_DATA' as const };
+    
+    const result = dataTableReducer(initialStateWithCreationData, action);
+    
+    expect(result.creationData).toEqual({});
+  });
+
+  it('handles SET_EDITING_ROW action', () => {
+    const editingData = { rowId: '1', data: { name: 'Updated Name' } };
+    const action = { type: 'SET_EDITING_ROW' as const, payload: editingData };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.editingRowId).toBe('1');
+    expect(result.editingData).toEqual({ name: 'Updated Name' });
+  });
+
+  it('handles CLEAR_EDITING action', () => {
+    const initialStateWithEditing = { 
+      ...initialState, 
+      editingRowId: '1', 
+      editingData: { name: 'Test' } 
+    };
+    const action = { type: 'CLEAR_EDITING' as const };
+    
+    const result = dataTableReducer(initialStateWithEditing, action);
+    
+    expect(result.editingRowId).toBe(null);
+    expect(result.editingData).toEqual({});
+  });
+
+  it('handles SET_IMPORT_MODAL action', () => {
+    const action = { type: 'SET_IMPORT_MODAL' as const, payload: true };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.showImportModal).toBe(true);
+  });
+
+  it('handles SET_FILTER_ROW action', () => {
+    const action = { type: 'SET_FILTER_ROW' as const, payload: true };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.showFilterRow).toBe(true);
+  });
+
+  it('handles SET_SEARCH_QUERY action', () => {
+    const action = { type: 'SET_SEARCH_QUERY' as const, payload: 'search term' };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.searchQuery).toBe('search term');
+  });
+
+  it('handles RESET_STATE action', () => {
+    const modifiedState = {
+      ...initialState,
+      sorting: [{ id: 'name', desc: true }],
+      columnFilters: [{ id: 'name', value: 'test' }],
+      rowSelection: { '1': true },
+      isCreating: true,
+      searchQuery: 'test query'
+    };
+    
+    const action = { type: 'RESET_STATE' as const };
+    
+    const result = dataTableReducer(modifiedState, action);
+    
+    // RESET_STATE calls createInitialState() which uses default values
+    expect(result.columnOrder).toEqual([]);
+    expect(result.sorting).toEqual([]);
+    expect(result.columnFilters).toEqual([]);
+    expect(result.rowSelection).toEqual({});
+    expect(result.isCreating).toBe(false);
+    expect(result.searchQuery).toBe('');
+  });
+
+  it('handles INITIALIZE_STATE action', () => {
+    const partialState = {
+      sorting: [{ id: 'name', desc: false }],
+      searchQuery: 'initial search'
+    };
+    
+    const action = { type: 'INITIALIZE_STATE' as const, payload: partialState };
+    
+    const result = dataTableReducer(initialState, action);
+    
+    expect(result.sorting).toEqual(partialState.sorting);
+    expect(result.searchQuery).toBe(partialState.searchQuery);
+    expect(result.columnFilters).toEqual(initialState.columnFilters); // Should remain unchanged
+  });
+
+  it('returns same state for unknown action', () => {
+    const unknownAction = { type: 'UNKNOWN_ACTION' as any, payload: null };
+    
+    const result = dataTableReducer(initialState, unknownAction);
+    
+    expect(result).toBe(initialState);
+  });
+});
+
+describe('[unit] useDataTableState', () => {
+    it('initializes with default state', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    expect(result.current.state.sorting).toEqual([]);
+    expect(result.current.state.columnFilters).toEqual([]);
+    expect(result.current.state.columnVisibility).toEqual({});
+    expect(result.current.state.grouping).toEqual([]);
+    expect(result.current.state.expanded).toEqual({});
+    expect(result.current.state.pagination).toEqual({ pageIndex: 0, pageSize: 10 });
+    expect(result.current.state.columnOrder).toEqual([]);
+    expect(result.current.state.rowSelection).toEqual({});
+    expect(result.current.state.isCreating).toBe(false);
+    expect(result.current.state.creationData).toEqual({});
+    expect(result.current.state.editingRowId).toBe(null);
+    expect(result.current.state.editingData).toEqual({});
+    expect(result.current.state.showImportModal).toBe(false);
+    expect(result.current.state.showFilterRow).toBe(false);
+    expect(result.current.state.searchQuery).toBe('');
+  });
+
+  it('initializes with custom options', () => {
+    const options = {
+      initialPageSize: 25,
+      columnIds: ['id', 'name', 'email'],
+      initialRowSelection: { '1': true }
+    };
+    
+    const { result } = renderHook(() => useDataTableState<TestData>(options));
+    
+    expect(result.current.state.pagination.pageSize).toBe(25);
+    expect(result.current.state.columnOrder).toEqual(['id', 'name', 'email']);
+    expect(result.current.state.rowSelection).toEqual({ '1': true });
+  });
+
+  it('provides action creators', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    expect(typeof result.current.actions.setSorting).toBe('function');
+    expect(typeof result.current.actions.setColumnFilters).toBe('function');
+    expect(typeof result.current.actions.setColumnVisibility).toBe('function');
+    expect(typeof result.current.actions.setGrouping).toBe('function');
+    expect(typeof result.current.actions.setExpanded).toBe('function');
+    expect(typeof result.current.actions.setPagination).toBe('function');
+    expect(typeof result.current.actions.setColumnOrder).toBe('function');
+    expect(typeof result.current.actions.setRowSelection).toBe('function');
+    expect(typeof result.current.actions.toggleRowSelection).toBe('function');
+    expect(typeof result.current.actions.clearRowSelection).toBe('function');
+    expect(typeof result.current.actions.setCreating).toBe('function');
+    expect(typeof result.current.actions.setCreationData).toBe('function');
+    expect(typeof result.current.actions.clearCreationData).toBe('function');
+    expect(typeof result.current.actions.setEditingRow).toBe('function');
+    expect(typeof result.current.actions.clearEditing).toBe('function');
+    expect(typeof result.current.actions.setImportModal).toBe('function');
+    expect(typeof result.current.actions.setFilterRow).toBe('function');
+    expect(typeof result.current.actions.setSearchQuery).toBe('function');
+    expect(typeof result.current.actions.resetState).toBe('function');
+  });
+
+  it('updates state when actions are called', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setSorting([{ id: 'name', desc: false }]);
+    });
+    
+    expect(result.current.state.sorting).toEqual([{ id: 'name', desc: false }]);
+  });
+
+  it('updates column filters', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setColumnFilters([{ id: 'name', value: 'John' }]);
+    });
+    
+    expect(result.current.state.columnFilters).toEqual([{ id: 'name', value: 'John' }]);
+  });
+
+  it('updates column visibility', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setColumnVisibility({ name: false, email: true });
+    });
+    
+    expect(result.current.state.columnVisibility).toEqual({ name: false, email: true });
+  });
+
+  it('updates grouping', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setGrouping(['name']);
+    });
+    
+    expect(result.current.state.grouping).toEqual(['name']);
+  });
+
+  it('updates expanded state', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setExpanded({ '1': true });
+    });
+    
+    expect(result.current.state.expanded).toEqual({ '1': true });
+  });
+
+  it('updates pagination', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setPagination({ pageIndex: 2, pageSize: 25 });
+    });
+    
+    expect(result.current.state.pagination).toEqual({ pageIndex: 2, pageSize: 25 });
+  });
+
+  it('updates column order', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setColumnOrder(['name', 'id', 'email']);
+    });
+    
+    expect(result.current.state.columnOrder).toEqual(['name', 'id', 'email']);
+  });
+
+  it('updates row selection', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setRowSelection({ '1': true, '2': false });
+    });
+    
+    expect(result.current.state.rowSelection).toEqual({ '1': true, '2': false });
+  });
+
+  it('toggles row selection', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.toggleRowSelection('1', true);
+    });
+    
+    expect(result.current.state.rowSelection).toEqual({ '1': true });
+    
+    act(() => {
+      result.current.actions.toggleRowSelection('1', false);
+    });
+    
+    expect(result.current.state.rowSelection).toEqual({ '1': false });
+  });
+
+  it('clears row selection', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setRowSelection({ '1': true, '2': true });
+    });
+    
+    expect(result.current.state.rowSelection).toEqual({ '1': true, '2': true });
+    
+    act(() => {
+      result.current.actions.clearRowSelection();
+    });
+    
+    expect(result.current.state.rowSelection).toEqual({});
+  });
+
+  it('updates creating state', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setCreating(true);
+    });
+    
+    expect(result.current.state.isCreating).toBe(true);
+  });
+
+  it('updates creation data', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    const creationData = { name: 'New User', email: 'new@example.com' };
+    
+    act(() => {
+      result.current.actions.setCreationData(creationData);
+    });
+    
+    expect(result.current.state.creationData).toEqual(creationData);
+  });
+
+  it('clears creation data', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setCreationData({ name: 'Test' });
+    });
+    
+    expect(result.current.state.creationData).toEqual({ name: 'Test' });
+    
+    act(() => {
+      result.current.actions.clearCreationData();
+    });
+    
+    expect(result.current.state.creationData).toEqual({});
+  });
+
+  it('updates editing row', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setEditingRow('1', { name: 'Updated Name' });
+    });
+    
+    expect(result.current.state.editingRowId).toBe('1');
+    expect(result.current.state.editingData).toEqual({ name: 'Updated Name' });
+  });
+
+  it('clears editing state', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setEditingRow('1', { name: 'Test' });
+    });
+    
+    expect(result.current.state.editingRowId).toBe('1');
+    
+    act(() => {
+      result.current.actions.clearEditing();
+    });
+    
+    expect(result.current.state.editingRowId).toBe(null);
+    expect(result.current.state.editingData).toEqual({});
+  });
+
+  it('updates import modal state', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setImportModal(true);
+    });
+    
+    expect(result.current.state.showImportModal).toBe(true);
+  });
+
+  it('updates filter row state', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setFilterRow(true);
+    });
+    
+    expect(result.current.state.showFilterRow).toBe(true);
+  });
+
+  it('updates search query', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setSearchQuery('search term');
+    });
+    
+    expect(result.current.state.searchQuery).toBe('search term');
+  });
+
+  it('resets state to initial values', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    // Modify state
+    act(() => {
+      result.current.actions.setSorting([{ id: 'name', desc: true }]);
+      result.current.actions.setColumnFilters([{ id: 'name', value: 'test' }]);
+      result.current.actions.setRowSelection({ '1': true });
+      result.current.actions.setSearchQuery('test query');
+    });
+    
+    expect(result.current.state.sorting).toEqual([{ id: 'name', desc: true }]);
+    expect(result.current.state.columnFilters).toEqual([{ id: 'name', value: 'test' }]);
+    expect(result.current.state.rowSelection).toEqual({ '1': true });
+    expect(result.current.state.searchQuery).toBe('test query');
+    
+    // Reset state
+    act(() => {
+      result.current.actions.resetState();
+    });
+    
+    expect(result.current.state.sorting).toEqual([]);
+    expect(result.current.state.columnFilters).toEqual([]);
+    expect(result.current.state.rowSelection).toEqual({});
+    expect(result.current.state.searchQuery).toBe('');
+  });
+
+  it('calls onRowSelectionChange callback when provided', () => {
+    const onRowSelectionChange = vi.fn();
+    const { result } = renderHook(() => 
+      useDataTableState<TestData>({ onRowSelectionChange })
+    );
+    
+    act(() => {
+      result.current.actions.setRowSelection({ '1': true });
+    });
+    
+    expect(onRowSelectionChange).toHaveBeenCalledWith({ '1': true });
+  });
+
+  it('provides computed values', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    expect(result.current.computed).toBeDefined();
+    expect(typeof result.current.computed).toBe('object');
+  });
+
+  it('provides clearFilters function', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    expect(typeof result.current.clearFilters).toBe('function');
+  });
+
+  it('maintains state consistency across multiple actions', () => {
+    const { result } = renderHook(() => useDataTableState<TestData>());
+    
+    act(() => {
+      result.current.actions.setSorting([{ id: 'name', desc: false }]);
+      result.current.actions.setColumnFilters([{ id: 'name', value: 'John' }]);
+      result.current.actions.setPagination({ pageIndex: 1, pageSize: 25 });
+      result.current.actions.setRowSelection({ '1': true, '2': false });
+    });
+    
+    expect(result.current.state.sorting).toEqual([{ id: 'name', desc: false }]);
+    expect(result.current.state.columnFilters).toEqual([{ id: 'name', value: 'John' }]);
+    expect(result.current.state.pagination).toEqual({ pageIndex: 1, pageSize: 25 });
+    expect(result.current.state.rowSelection).toEqual({ '1': true, '2': false });
+  });
+});