@jmruthers/pace-core 0.5.67 → 0.5.69

package/src/components/DataTable/core/__tests__/StateManager.test.ts

@@ -0,0 +1,714 @@
+/**
+ * @file StateManager Unit Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Core/StateManager
+ * @since 0.3.0
+ */
+
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { StateManagerImpl } from '../StateManager';
+import type { DataTableObserver, DataTableState, UIState } from '../interfaces';
+import type { DataRecord } from '../../types';
+
+// Test data types
+interface TestDataRecord extends DataRecord {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  isActive: boolean;
+}
+
+// Test data fixtures
+const createTestData = (overrides: Partial<TestDataRecord> = {}): TestDataRecord => ({
+  id: 'test-id-1',
+  name: 'Test User',
+  email: 'test@example.com',
+  role: 'user',
+  isActive: true,
+  ...overrides,
+});
+
+const createTestDataArray = (count: number): TestDataRecord[] => 
+  Array.from({ length: count }, (_, i) => createTestData({
+    id: `test-id-${i + 1}`,
+    name: `Test User ${i + 1}`,
+    email: `test${i + 1}@example.com`,
+  }));
+
+const createTestObserver = (id: string = 'test-observer'): DataTableObserver<TestDataRecord> => ({
+  id,
+  onDataChange: vi.fn(),
+  onColumnChange: vi.fn(),
+  onStateChange: vi.fn(),
+  onError: vi.fn(),
+});
+
+describe('[unit] StateManager', () => {
+  let stateManager: StateManagerImpl<TestDataRecord>;
+  let testObserver: DataTableObserver<TestDataRecord>;
+
+  beforeEach(() => {
+    stateManager = new StateManagerImpl();
+    testObserver = createTestObserver();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Initialization', () => {
+    it('should initialize with default state', () => {
+      const state = stateManager.getState();
+      
+      expect(state.data).toEqual([]);
+      expect(state.isLoading).toBe(false);
+      expect(state.error).toBe(null);
+      expect(state.columns).toEqual([]);
+      expect(state.actions).toEqual([]);
+      expect(state.features).toBeInstanceOf(Map);
+      expect(state.plugins).toBeInstanceOf(Map);
+      expect(state.ui).toMatchObject({
+        globalFilter: '',
+        columnFilters: [],
+        sorting: [],
+        grouping: [],
+        expanded: {},
+        pagination: { pageIndex: 0, pageSize: 10 },
+        rowSelection: {},
+        editing: {
+          rowId: null,
+          data: {},
+          isCreating: false,
+          creationData: {},
+        },
+        modals: {
+          import: false,
+          export: false,
+          view: false,
+          viewData: null,
+        },
+      });
+    });
+
+    it('should initialize with custom initial state', () => {
+      const customState = {
+        data: createTestDataArray(2),
+        isLoading: true,
+        error: new Error('Test error'),
+      };
+      
+      const manager = new StateManagerImpl(customState);
+      const state = manager.getState();
+      
+      expect(state.data).toEqual(customState.data);
+      expect(state.isLoading).toBe(true);
+      expect(state.error).toBe(customState.error);
+    });
+
+    it('should return copy of state', () => {
+      const state1 = stateManager.getState();
+      const state2 = stateManager.getState();
+      
+      expect(state1).not.toBe(state2); // Different objects
+      expect(state1).toEqual(state2); // Same content
+    });
+  });
+
+  describe('State Updates', () => {
+    it('should update state with updater function', () => {
+      const newData = createTestDataArray(3);
+      
+      stateManager.setState(state => ({
+        ...state,
+        data: newData,
+        isLoading: true,
+      }));
+
+      const state = stateManager.getState();
+      expect(state.data).toEqual(newData);
+      expect(state.isLoading).toBe(true);
+    });
+
+    it('should preserve other state properties when updating', () => {
+      const originalState = stateManager.getState();
+      
+      stateManager.setState(state => ({
+        ...state,
+        data: createTestDataArray(2),
+      }));
+
+      const newState = stateManager.getState();
+      expect(newState.data).toEqual(createTestDataArray(2));
+      expect(newState.isLoading).toBe(originalState.isLoading);
+      expect(newState.error).toBe(originalState.error);
+      expect(newState.columns).toEqual(originalState.columns);
+    });
+
+    it('should handle complex state updates', () => {
+      const newData = createTestDataArray(5);
+      const newColumns = [{ id: 'name', header: 'Name' }];
+      const newActions = [{ label: 'Edit', onClick: vi.fn() }];
+      
+      stateManager.setState(state => ({
+        ...state,
+        data: newData,
+        columns: newColumns,
+        actions: newActions,
+        ui: {
+          ...state.ui,
+          globalFilter: 'test filter',
+          pagination: { pageIndex: 2, pageSize: 20 },
+        },
+      }));
+
+      const state = stateManager.getState();
+      expect(state.data).toEqual(newData);
+      expect(state.columns).toEqual(newColumns);
+      expect(state.actions).toEqual(newActions);
+      expect(state.ui.globalFilter).toBe('test filter');
+      expect(state.ui.pagination).toEqual({ pageIndex: 2, pageSize: 20 });
+    });
+  });
+
+  describe('Observer Pattern', () => {
+    it('should subscribe function observer', () => {
+      const observerFn = vi.fn();
+      const unsubscribe = stateManager.subscribe(observerFn);
+
+      expect(typeof unsubscribe).toBe('function');
+      expect(stateManager.getObserverCount()).toBe(1);
+    });
+
+    it('should subscribe object observer', () => {
+      const unsubscribe = stateManager.subscribe(testObserver);
+
+      expect(typeof unsubscribe).toBe('function');
+      expect(stateManager.getObserverCount()).toBe(1);
+    });
+
+    it('should subscribe to specific observer', () => {
+      const unsubscribe = stateManager.subscribeToObserver(testObserver);
+
+      expect(typeof unsubscribe).toBe('function');
+      expect(stateManager.getObserverCount()).toBe(1);
+    });
+
+    it('should unsubscribe observer', () => {
+      const unsubscribe = stateManager.subscribe(testObserver);
+      expect(stateManager.getObserverCount()).toBe(1);
+
+      unsubscribe();
+      expect(stateManager.getObserverCount()).toBe(0);
+    });
+
+    it('should handle multiple observers', () => {
+      const observer1 = createTestObserver('observer-1');
+      const observer2 = createTestObserver('observer-2');
+      const observer3 = createTestObserver('observer-3');
+
+      stateManager.subscribe(observer1);
+      stateManager.subscribe(observer2);
+      stateManager.subscribe(observer3);
+
+      expect(stateManager.getObserverCount()).toBe(3);
+    });
+
+    it('should notify observers on state change', () => {
+      const observerFn = vi.fn();
+      stateManager.subscribe(observerFn);
+
+      stateManager.setState(state => ({
+        ...state,
+        data: createTestDataArray(2),
+      }));
+
+      expect(observerFn).toHaveBeenCalledWith(expect.objectContaining({
+        data: createTestDataArray(2),
+      }));
+    });
+
+    it('should notify object observers on state change', () => {
+      stateManager.subscribe(testObserver);
+
+      stateManager.setState(state => ({
+        ...state,
+        data: createTestDataArray(2),
+      }));
+
+      expect(testObserver.onStateChange).toHaveBeenCalledWith(expect.objectContaining({
+        data: createTestDataArray(2),
+      }));
+    });
+  });
+
+  describe('Data Updates', () => {
+    it('should update data and notify observers', () => {
+      const newData = createTestDataArray(3);
+      stateManager.subscribe(testObserver);
+
+      stateManager.updateData(newData);
+
+      const state = stateManager.getState();
+      expect(state.data).toEqual(newData);
+      expect(testObserver.onDataChange).toHaveBeenCalledWith(newData);
+    });
+
+    it('should not notify if data is the same reference', () => {
+      const data = createTestDataArray(2);
+      stateManager.subscribe(testObserver);
+
+      stateManager.updateData(data);
+      vi.clearAllMocks();
+
+      stateManager.updateData(data); // Same reference
+
+      expect(testObserver.onDataChange).not.toHaveBeenCalled();
+    });
+
+    it('should notify when data reference changes', () => {
+      const data1 = createTestDataArray(2);
+      const data2 = createTestDataArray(3);
+      stateManager.subscribe(testObserver);
+
+      stateManager.updateData(data1);
+      vi.clearAllMocks();
+
+      stateManager.updateData(data2);
+
+      expect(testObserver.onDataChange).toHaveBeenCalledWith(data2);
+    });
+  });
+
+  describe('Column Updates', () => {
+    it('should update columns and notify observers', () => {
+      const newColumns = [
+        { id: 'name', header: 'Name' },
+        { id: 'email', header: 'Email' },
+      ];
+      stateManager.subscribe(testObserver);
+
+      stateManager.updateColumns(newColumns);
+
+      const state = stateManager.getState();
+      expect(state.columns).toEqual(newColumns);
+      expect(testObserver.onColumnChange).toHaveBeenCalledWith(newColumns);
+    });
+
+    it('should not notify if columns are the same reference', () => {
+      const columns = [{ id: 'name', header: 'Name' }];
+      stateManager.subscribe(testObserver);
+
+      stateManager.updateColumns(columns);
+      vi.clearAllMocks();
+
+      stateManager.updateColumns(columns); // Same reference
+
+      expect(testObserver.onColumnChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Action Updates', () => {
+    it('should update actions', () => {
+      const newActions = [
+        { label: 'Edit', onClick: vi.fn() },
+        { label: 'Delete', onClick: vi.fn() },
+      ];
+
+      stateManager.updateActions(newActions);
+
+      const state = stateManager.getState();
+      expect(state.actions).toEqual(newActions);
+    });
+  });
+
+  describe('UI State Updates', () => {
+    it('should update global filter', () => {
+      stateManager.updateGlobalFilter('test search');
+
+      const state = stateManager.getState();
+      expect(state.ui.globalFilter).toBe('test search');
+    });
+
+    it('should update column filters', () => {
+      const filters = [
+        { id: 'name', value: 'John' },
+        { id: 'role', value: 'admin' },
+      ];
+
+      stateManager.updateColumnFilters(filters);
+
+      const state = stateManager.getState();
+      expect(state.ui.columnFilters).toEqual(filters);
+    });
+
+    it('should update sorting', () => {
+      const sorting = [
+        { id: 'name', desc: false },
+        { id: 'created_at', desc: true },
+      ];
+
+      stateManager.updateSorting(sorting);
+
+      const state = stateManager.getState();
+      expect(state.ui.sorting).toEqual(sorting);
+    });
+
+    it('should update grouping', () => {
+      const grouping = ['role', 'department'];
+
+      stateManager.updateGrouping(grouping);
+
+      const state = stateManager.getState();
+      expect(state.ui.grouping).toEqual(grouping);
+    });
+
+    it('should update pagination', () => {
+      const pagination = { pageIndex: 2, pageSize: 25 };
+
+      stateManager.updatePagination(pagination);
+
+      const state = stateManager.getState();
+      expect(state.ui.pagination).toEqual(pagination);
+    });
+
+    it('should update row selection', () => {
+      const selection = { 'row-1': true, 'row-2': false, 'row-3': true };
+
+      stateManager.updateRowSelection(selection);
+
+      const state = stateManager.getState();
+      expect(state.ui.rowSelection).toEqual(selection);
+    });
+
+    it('should update editing state', () => {
+      const editing = {
+        rowId: 'row-1',
+        data: { name: 'Updated Name' },
+        isCreating: false,
+        creationData: {},
+      };
+
+      stateManager.updateEditing(editing);
+
+      const state = stateManager.getState();
+      expect(state.ui.editing).toEqual(editing);
+    });
+
+    it('should update modal state', () => {
+      const modals = {
+        import: true,
+        export: false,
+        view: true,
+        viewData: { id: 'test' },
+      };
+
+      stateManager.updateModals(modals);
+
+      const state = stateManager.getState();
+      expect(state.ui.modals).toEqual(modals);
+    });
+
+    it('should update multiple UI properties at once', () => {
+      const uiUpdates = {
+        globalFilter: 'search term',
+        pagination: { pageIndex: 1, pageSize: 20 },
+        sorting: [{ id: 'name', desc: false }],
+      };
+
+      stateManager.updateUI(uiUpdates);
+
+      const state = stateManager.getState();
+      expect(state.ui.globalFilter).toBe('search term');
+      expect(state.ui.pagination).toEqual({ pageIndex: 1, pageSize: 20 });
+      expect(state.ui.sorting).toEqual([{ id: 'name', desc: false }]);
+    });
+  });
+
+  describe('Feature and Plugin State', () => {
+    it('should update feature state', () => {
+      const featureState = { enabled: true, options: { theme: 'dark' } };
+
+      stateManager.updateFeatureState('theme', featureState);
+
+      const state = stateManager.getState();
+      expect(state.features.get('theme')).toEqual(featureState);
+    });
+
+    it('should update plugin state', () => {
+      const pluginState = { loaded: true, version: '1.0.0' };
+
+      stateManager.updatePluginState('analytics', pluginState);
+
+      const state = stateManager.getState();
+      expect(state.plugins.get('analytics')).toEqual(pluginState);
+    });
+
+    it('should handle multiple feature states', () => {
+      stateManager.updateFeatureState('theme', { enabled: true });
+      stateManager.updateFeatureState('notifications', { enabled: false });
+
+      const state = stateManager.getState();
+      expect(state.features.get('theme')).toEqual({ enabled: true });
+      expect(state.features.get('notifications')).toEqual({ enabled: false });
+    });
+
+    it('should handle multiple plugin states', () => {
+      stateManager.updatePluginState('analytics', { loaded: true });
+      stateManager.updatePluginState('logging', { loaded: false });
+
+      const state = stateManager.getState();
+      expect(state.plugins.get('analytics')).toEqual({ loaded: true });
+      expect(state.plugins.get('logging')).toEqual({ loaded: false });
+    });
+  });
+
+  describe('Loading and Error States', () => {
+    it('should set loading state', () => {
+      stateManager.setLoading(true);
+
+      const state = stateManager.getState();
+      expect(state.isLoading).toBe(true);
+    });
+
+    it('should set error state', () => {
+      const error = new Error('Test error');
+      stateManager.subscribe(testObserver);
+
+      stateManager.setError(error);
+
+      const state = stateManager.getState();
+      expect(state.error).toBe(error);
+      expect(testObserver.onError).toHaveBeenCalledWith(error);
+    });
+
+    it('should clear error state', () => {
+      stateManager.setError(new Error('Test error'));
+      stateManager.setError(null);
+
+      const state = stateManager.getState();
+      expect(state.error).toBe(null);
+    });
+
+    it('should not notify on error when error is null', () => {
+      stateManager.subscribe(testObserver);
+      stateManager.setError(null);
+
+      expect(testObserver.onError).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('State Reset', () => {
+    it('should reset state to initial values', () => {
+      // Modify state
+      stateManager.setState(state => ({
+        ...state,
+        data: createTestDataArray(2),
+        isLoading: true,
+        error: new Error('Test error'),
+        ui: {
+          ...state.ui,
+          globalFilter: 'test',
+          pagination: { pageIndex: 2, pageSize: 20 },
+        },
+      }));
+
+      stateManager.subscribe(testObserver);
+      stateManager.reset();
+
+      const state = stateManager.getState();
+      expect(state.data).toEqual([]);
+      expect(state.isLoading).toBe(false);
+      expect(state.error).toBe(null);
+      expect(state.ui.globalFilter).toBe('');
+      expect(state.ui.pagination).toEqual({ pageIndex: 0, pageSize: 10 });
+      expect(testObserver.onStateChange).toHaveBeenCalledWith(state);
+    });
+  });
+
+  describe('Event Notifications', () => {
+    it('should notify data change event', () => {
+      stateManager.subscribe(testObserver);
+      const data = createTestDataArray(2);
+
+      stateManager.notify('dataChange', data);
+
+      expect(testObserver.onDataChange).toHaveBeenCalledWith(data);
+    });
+
+    it('should notify column change event', () => {
+      stateManager.subscribe(testObserver);
+      const columns = [{ id: 'name', header: 'Name' }];
+
+      stateManager.notify('columnChange', columns);
+
+      expect(testObserver.onColumnChange).toHaveBeenCalledWith(columns);
+    });
+
+    it('should notify state change event', () => {
+      stateManager.subscribe(testObserver);
+      const state = { data: createTestDataArray(1) };
+
+      stateManager.notify('stateChange', state);
+
+      expect(testObserver.onStateChange).toHaveBeenCalledWith(state);
+    });
+
+    it('should notify error event', () => {
+      stateManager.subscribe(testObserver);
+      const error = new Error('Test error');
+
+      stateManager.notify('error', error);
+
+      expect(testObserver.onError).toHaveBeenCalledWith(error);
+    });
+
+    it('should handle observers without all callback methods', () => {
+      const partialObserver = {
+        id: 'partial-observer',
+        onDataChange: vi.fn(),
+        // Missing other callbacks
+      } as DataTableObserver<TestDataRecord>;
+
+      stateManager.subscribe(partialObserver);
+
+      // Should not throw when calling missing callbacks
+      expect(() => {
+        stateManager.notify('columnChange', []);
+        stateManager.notify('stateChange', {});
+        stateManager.notify('error', new Error('Test'));
+      }).not.toThrow();
+
+      expect(partialObserver.onDataChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Observer Management', () => {
+    it('should handle observer unsubscription during notification', () => {
+      const observer1 = createTestObserver('observer-1');
+      const observer2 = createTestObserver('observer-2');
+      
+      // Observer 1 unsubscribes itself when notified
+      observer1.onStateChange = vi.fn().mockImplementation(() => {
+        stateManager.unsubscribe('observer-1');
+      });
+
+      stateManager.subscribe(observer1);
+      stateManager.subscribe(observer2);
+
+      expect(stateManager.getObserverCount()).toBe(2);
+
+      stateManager.setState(state => ({ ...state, data: createTestDataArray(1) }));
+
+      expect(observer1.onStateChange).toHaveBeenCalled();
+      expect(observer2.onStateChange).toHaveBeenCalled();
+      expect(stateManager.getObserverCount()).toBe(1);
+    });
+
+    it('should handle multiple unsubscriptions', () => {
+      const unsubscribe1 = stateManager.subscribe(createTestObserver('obs-1'));
+      const unsubscribe2 = stateManager.subscribe(createTestObserver('obs-2'));
+      const unsubscribe3 = stateManager.subscribe(createTestObserver('obs-3'));
+
+      expect(stateManager.getObserverCount()).toBe(3);
+
+      unsubscribe1();
+      unsubscribe2();
+      unsubscribe3();
+
+      expect(stateManager.getObserverCount()).toBe(0);
+    });
+
+    it('should handle unsubscription of non-existent observer', () => {
+      expect(() => {
+        stateManager.unsubscribe('non-existent');
+      }).not.toThrow();
+    });
+  });
+
+  describe('Performance and Memory', () => {
+    it('should handle large datasets efficiently', () => {
+      const largeDataset = createTestDataArray(1000);
+      stateManager.updateData(largeDataset);
+
+      const state = stateManager.getState();
+      expect(state.data).toHaveLength(1000);
+    });
+
+    it('should handle many observers efficiently', () => {
+      const observers = Array.from({ length: 100 }, (_, i) => 
+        createTestObserver(`observer-${i}`)
+      );
+
+      observers.forEach(observer => stateManager.subscribe(observer));
+      expect(stateManager.getObserverCount()).toBe(100);
+
+      // Notify all observers
+      stateManager.setState(state => ({ ...state, data: createTestDataArray(1) }));
+
+      observers.forEach(observer => {
+        expect(observer.onStateChange).toHaveBeenCalled();
+      });
+    });
+
+    it('should not leak memory with repeated operations', () => {
+      // Perform many state updates
+      for (let i = 0; i < 100; i++) {
+        stateManager.setState(state => ({
+          ...state,
+          data: createTestDataArray(i % 10),
+        }));
+      }
+
+      const state = stateManager.getState();
+      expect(state.data).toHaveLength(9); // Last iteration
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle null/undefined state updates', () => {
+      expect(() => {
+        stateManager.setState(() => ({} as any));
+      }).not.toThrow();
+    });
+
+    it('should handle empty observer arrays', () => {
+      stateManager.notify('dataChange', []);
+      expect(stateManager.getObserverCount()).toBe(0);
+    });
+
+    it('should handle observers with null callbacks', () => {
+      const observer = {
+        id: 'null-callbacks',
+        onDataChange: null,
+        onColumnChange: null,
+        onStateChange: null,
+        onError: null,
+      } as any;
+
+      stateManager.subscribe(observer);
+
+      expect(() => {
+        stateManager.notify('dataChange', []);
+        stateManager.notify('columnChange', []);
+        stateManager.notify('stateChange', {});
+        stateManager.notify('error', new Error('Test'));
+      }).not.toThrow();
+    });
+
+    it('should handle rapid state updates', () => {
+      const observer = createTestObserver();
+      stateManager.subscribe(observer);
+
+      // Rapid updates
+      for (let i = 0; i < 10; i++) {
+        stateManager.setState(state => ({
+          ...state,
+          data: createTestDataArray(i + 1),
+        }));
+      }
+
+      expect(observer.onStateChange).toHaveBeenCalledTimes(10);
+    });
+  });
+});