@jmruthers/pace-core 0.5.67 → 0.5.69

package/src/components/DataTable/context/__tests__/DataTableContext.test.tsx

@@ -0,0 +1,409 @@
+/**
+ * @file DataTable Context Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Context/__tests__
+ * @since 0.4.0
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, renderHook, act } from '@testing-library/react';
+import React from 'react';
+import { 
+  DataTableProvider, 
+  useDataTableContext, 
+  useDataTableState, 
+  useDataTableActions, 
+  useDataTableComputed, 
+  useDataTableClearFilters 
+} from '../DataTableContext';
+import type { DataRecord } from '../../types';
+
+// Mock the useDataTableState hook
+vi.mock('../../hooks/useDataTableState', () => ({
+  useDataTableState: vi.fn()
+}));
+
+import { useDataTableState as mockUseDataTableState } from '../../hooks/useDataTableState';
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  email: string;
+}
+
+const mockData: TestData[] = [
+  { id: '1', name: 'John Doe', email: 'john@example.com' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com' }
+];
+
+const mockState = {
+  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: ''
+};
+
+const mockActions = {
+  setSorting: vi.fn(),
+  setColumnFilters: vi.fn(),
+  setColumnVisibility: vi.fn(),
+  setGrouping: vi.fn(),
+  setExpanded: vi.fn(),
+  setPagination: vi.fn(),
+  setColumnOrder: vi.fn(),
+  setRowSelection: vi.fn(),
+  toggleRowSelection: vi.fn(),
+  clearRowSelection: vi.fn(),
+  setCreating: vi.fn(),
+  setCreationData: vi.fn(),
+  clearCreationData: vi.fn(),
+  setEditingRow: vi.fn(),
+  clearEditing: vi.fn(),
+  setImportModal: vi.fn(),
+  setFilterRow: vi.fn(),
+  setSearchQuery: vi.fn(),
+  resetState: vi.fn()
+};
+
+const mockComputed = {
+  filteredData: mockData,
+  sortedData: mockData,
+  paginatedData: mockData,
+  totalRows: 2,
+  totalPages: 1,
+  hasNextPage: false,
+  hasPreviousPage: false,
+  selectedRows: [],
+  selectedRowIds: [],
+  isAllSelected: false,
+  isIndeterminate: false
+};
+
+const mockClearFilters = vi.fn();
+
+describe('[unit] DataTableContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Setup default mock implementation
+    (mockUseDataTableState as any).mockReturnValue({
+      state: mockState,
+      actions: mockActions,
+      computed: mockComputed,
+      clearFilters: mockClearFilters
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('DataTableProvider', () => {
+    it('renders children with context value', () => {
+      const TestComponent = () => <div data-testid="test-child">Test Content</div>;
+      
+      render(
+        <DataTableProvider<TestData>>
+          <TestComponent />
+        </DataTableProvider>
+      );
+
+      expect(screen.getByTestId('test-child')).toBeInTheDocument();
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('provides context value to children', () => {
+      const TestComponent = () => {
+        const context = useDataTableContext<TestData>();
+        return (
+          <div>
+            <span data-testid="has-state">{context.state ? 'true' : 'false'}</span>
+            <span data-testid="has-actions">{context.actions ? 'true' : 'false'}</span>
+            <span data-testid="has-computed">{context.computed ? 'true' : 'false'}</span>
+            <span data-testid="has-clear-filters">{context.clearFilters ? 'true' : 'false'}</span>
+          </div>
+        );
+      };
+
+      render(
+        <DataTableProvider<TestData>>
+          <TestComponent />
+        </DataTableProvider>
+      );
+
+      expect(screen.getByTestId('has-state')).toHaveTextContent('true');
+      expect(screen.getByTestId('has-actions')).toHaveTextContent('true');
+      expect(screen.getByTestId('has-computed')).toHaveTextContent('true');
+      expect(screen.getByTestId('has-clear-filters')).toHaveTextContent('true');
+    });
+
+    it('calls useDataTableState with provided options', () => {
+      const options = { initialPageSize: 25, columnIds: ['id', 'name'] };
+      
+      render(
+        <DataTableProvider<TestData> options={options}>
+          <div>Test</div>
+        </DataTableProvider>
+      );
+
+      expect(mockUseDataTableState).toHaveBeenCalledWith(options);
+    });
+
+    it('calls useDataTableState with empty options when none provided', () => {
+      render(
+        <DataTableProvider<TestData>>
+          <div>Test</div>
+        </DataTableProvider>
+      );
+
+      expect(mockUseDataTableState).toHaveBeenCalledWith({});
+    });
+
+    it('memoizes context value correctly', () => {
+      const TestComponent = () => {
+        const context = useDataTableContext<TestData>();
+        return <div data-testid="context-value">{JSON.stringify(context.state)}</div>;
+      };
+
+      const { rerender } = render(
+        <DataTableProvider<TestData>>
+          <TestComponent />
+        </DataTableProvider>
+      );
+
+      const initialValue = screen.getByTestId('context-value').textContent;
+      
+      // Rerender with same props
+      rerender(
+        <DataTableProvider<TestData>>
+          <TestComponent />
+        </DataTableProvider>
+      );
+
+      const rerenderedValue = screen.getByTestId('context-value').textContent;
+      expect(rerenderedValue).toBe(initialValue);
+    });
+  });
+
+  describe('useDataTableContext', () => {
+    it('returns context value when used within provider', () => {
+      const { result } = renderHook(() => useDataTableContext<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      expect(result.current.state).toEqual(mockState);
+      expect(result.current.actions).toEqual(mockActions);
+      expect(result.current.computed).toEqual(mockComputed);
+      expect(result.current.clearFilters).toBe(mockClearFilters);
+    });
+
+    it('throws error when used outside provider', () => {
+      // Suppress console.error for this test
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      expect(() => {
+        renderHook(() => useDataTableContext<TestData>());
+      }).toThrow('useDataTableContext must be used within a DataTableProvider');
+      
+      consoleSpy.mockRestore();
+    });
+
+    it('provides typed context value', () => {
+      const { result } = renderHook(() => useDataTableContext<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      // TypeScript should infer the correct types
+      expect(typeof result.current.state).toBe('object');
+      expect(typeof result.current.actions).toBe('object');
+      expect(typeof result.current.computed).toBe('object');
+      expect(typeof result.current.clearFilters).toBe('function');
+    });
+  });
+
+  describe('useDataTableState', () => {
+    it('returns state from context', () => {
+      const { result } = renderHook(() => useDataTableState<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      expect(result.current).toEqual(mockState);
+    });
+
+    it('throws error when used outside provider', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      expect(() => {
+        renderHook(() => useDataTableState<TestData>());
+      }).toThrow('useDataTableContext must be used within a DataTableProvider');
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('useDataTableActions', () => {
+    it('returns actions from context', () => {
+      const { result } = renderHook(() => useDataTableActions<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      expect(result.current).toEqual(mockActions);
+    });
+
+    it('throws error when used outside provider', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      expect(() => {
+        renderHook(() => useDataTableActions<TestData>());
+      }).toThrow('useDataTableContext must be used within a DataTableProvider');
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('useDataTableComputed', () => {
+    it('returns computed values from context', () => {
+      const { result } = renderHook(() => useDataTableComputed<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      expect(result.current).toEqual(mockComputed);
+    });
+
+    it('throws error when used outside provider', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      expect(() => {
+        renderHook(() => useDataTableComputed<TestData>());
+      }).toThrow('useDataTableContext must be used within a DataTableProvider');
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('useDataTableClearFilters', () => {
+    it('returns clearFilters function from context', () => {
+      const { result } = renderHook(() => useDataTableClearFilters<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      expect(result.current).toBe(mockClearFilters);
+    });
+
+    it('throws error when used outside provider', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      expect(() => {
+        renderHook(() => useDataTableClearFilters<TestData>());
+      }).toThrow('useDataTableContext must be used within a DataTableProvider');
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Context Value Updates', () => {
+    it('updates context value when state changes', () => {
+      const newState = { ...mockState, searchQuery: 'new query' };
+      const newComputed = { ...mockComputed, totalRows: 5 };
+      
+      (mockUseDataTableState as any).mockReturnValue({
+        state: newState,
+        actions: mockActions,
+        computed: newComputed,
+        clearFilters: mockClearFilters
+      });
+
+      const { result } = renderHook(() => useDataTableContext<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      expect(result.current.state.searchQuery).toBe('new query');
+      expect(result.current.computed.totalRows).toBe(5);
+    });
+
+    it('maintains reference equality for unchanged values', () => {
+      const { result, rerender } = renderHook(() => useDataTableContext<TestData>(), {
+        wrapper: ({ children }) => (
+          <DataTableProvider<TestData>>
+            {children}
+          </DataTableProvider>
+        )
+      });
+
+      const initialActions = result.current.actions;
+      const initialClearFilters = result.current.clearFilters;
+
+      // Rerender with same mock values
+      rerender(
+        <DataTableProvider<TestData>>
+          <div>Test</div>
+        </DataTableProvider>
+      );
+
+      expect(result.current.actions).toBe(initialActions);
+      expect(result.current.clearFilters).toBe(initialClearFilters);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing context gracefully', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      
+      // Test all hooks throw appropriate errors
+      const hooks = [
+        useDataTableContext,
+        useDataTableState,
+        useDataTableActions,
+        useDataTableComputed,
+        useDataTableClearFilters
+      ];
+
+      hooks.forEach(hook => {
+        expect(() => {
+          renderHook(() => hook<TestData>());
+        }).toThrow('useDataTableContext must be used within a DataTableProvider');
+      });
+      
+      consoleSpy.mockRestore();
+    });
+  });
+});