@jmruthers/pace-core 0.5.74 → 0.5.76

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

@@ -0,0 +1,525 @@
+/**
+ * @file Unit Tests for useColumnOrderPersistence Hook
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Hooks/__tests__
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useColumnOrderPersistence } from '../useColumnOrderPersistence';
+
+describe('[unit] useColumnOrderPersistence', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Initialization', () => {
+    it('initializes with default order when no saved order exists', async () => {
+      const defaultOrder = ['col1', 'col2', 'col3'];
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder,
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnOrder).toEqual(defaultOrder);
+    });
+
+    it('loads saved order from localStorage on mount', async () => {
+      const savedOrder = ['col3', 'col1', 'col2'];
+      localStorage.setItem('datatable-column-order-test', JSON.stringify(savedOrder));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2', 'col3'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnOrder).toEqual(savedOrder);
+    });
+
+    it('generates unique storage key based on tableId', async () => {
+      const savedOrder = ['col1'];
+      localStorage.setItem('datatable-column-order-unique-table', JSON.stringify(savedOrder));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'unique-table',
+        defaultOrder: ['col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnOrder).toEqual(savedOrder);
+    });
+
+    it('uses default order when tableId is not provided (no persistence)', async () => {
+      const defaultOrder = ['col1'];
+      localStorage.setItem('datatable-column-order', JSON.stringify(['col2']));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        defaultOrder,
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      // When tableId is not provided, it doesn't load from localStorage
+      expect(result.current.columnOrder).toEqual(defaultOrder);
+    });
+  });
+
+  describe('Persistence', () => {
+    it('saves column order to localStorage when updated', async () => {
+      const newOrder = ['col3', 'col2', 'col1'];
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2', 'col3'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnOrder(newOrder);
+      });
+
+      expect(result.current.columnOrder).toEqual(newOrder);
+
+      const saved = localStorage.getItem('datatable-column-order-test');
+      expect(saved).toBe(JSON.stringify(newOrder));
+    });
+
+    it('does not persist when enablePersistence is false', async () => {
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: false
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnOrder(['col2', 'col1']);
+      });
+
+      expect(result.current.columnOrder).toEqual(['col2', 'col1']);
+      expect(localStorage.getItem('datatable-column-order-test')).toBeNull();
+    });
+
+    it('does not persist when tableId is missing', async () => {
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnOrder(['col2', 'col1']);
+      });
+
+      expect(result.current.columnOrder).toEqual(['col2', 'col1']);
+      // Verify no persistence attempted
+      const allKeys = Object.keys(localStorage);
+      expect(allKeys.filter(k => k.startsWith('datatable-column-order'))).toEqual([]);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles invalid JSON in localStorage gracefully', async () => {
+      localStorage.setItem('datatable-column-order-test', 'invalid-json');
+
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnOrder).toEqual(['col1', 'col2']);
+      expect(consoleWarnSpy).toHaveBeenCalled();
+
+      consoleWarnSpy.mockRestore();
+    });
+
+    it('handles localStorage quota exceeded error gracefully', async () => {
+      // Mock setItem to throw quota error
+      const originalSetItem = Storage.prototype.setItem;
+      Storage.prototype.setItem = vi.fn(() => {
+        throw new DOMException('QuotaExceededError', 'QuotaExceededError');
+      });
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      // Should not throw, gracefully handles the error
+      act(() => {
+        result.current.updateColumnOrder(['col2', 'col1']);
+      });
+
+      expect(result.current.columnOrder).toEqual(['col2', 'col1']);
+
+      Storage.prototype.setItem = originalSetItem;
+    });
+
+    it('handles localStorage setItem failure gracefully', async () => {
+      // Mock setItem to throw error
+      const originalSetItem = Storage.prototype.setItem;
+      Storage.prototype.setItem = vi.fn(() => {
+        throw new Error('Storage failure');
+      });
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnOrder(['col2', 'col1']);
+      });
+
+      expect(result.current.columnOrder).toEqual(['col2', 'col1']);
+
+      Storage.prototype.setItem = originalSetItem;
+    });
+
+    it('handles non-array saved data', async () => {
+      localStorage.setItem('datatable-column-order-test', JSON.stringify({ invalid: 'data' }));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      // Should fall back to defaultOrder
+      expect(result.current.columnOrder).toEqual(['col1', 'col2']);
+    });
+  });
+
+  describe('Reset Functionality', () => {
+    it('resets to default order correctly', async () => {
+      const savedOrder = ['col3', 'col2', 'col1'];
+      localStorage.setItem('datatable-column-order-test', JSON.stringify(savedOrder));
+
+      const defaultOrder = ['col1', 'col2', 'col3'];
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder,
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnOrder).toEqual(savedOrder);
+
+      act(() => {
+        result.current.resetColumnOrder();
+      });
+
+      expect(result.current.columnOrder).toEqual(defaultOrder);
+      expect(localStorage.getItem('datatable-column-order-test')).toBeNull();
+    });
+
+    it('removes saved order from localStorage when reset', async () => {
+      const savedOrder = ['col3', 'col2', 'col1'];
+      localStorage.setItem('datatable-column-order-test', JSON.stringify(savedOrder));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2', 'col3'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.resetColumnOrder();
+      });
+
+      expect(localStorage.getItem('datatable-column-order-test')).toBeNull();
+    });
+
+    it('handles localStorage removeItem failure gracefully', async () => {
+      // Mock removeItem to throw error
+      const originalRemoveItem = Storage.prototype.removeItem;
+      Storage.prototype.removeItem = vi.fn(() => {
+        throw new Error('Remove failed');
+      });
+
+      const defaultOrder = ['col1', 'col2'];
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder,
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.resetColumnOrder();
+      });
+
+      expect(result.current.columnOrder).toEqual(defaultOrder);
+
+      Storage.prototype.removeItem = originalRemoveItem;
+    });
+  });
+
+  describe('Clear All Preferences', () => {
+    it('clears all datatable preferences', async () => {
+      localStorage.setItem('datatable-column-order-table1', JSON.stringify(['col1']));
+      localStorage.setItem('datatable-column-order-table2', JSON.stringify(['col2']));
+      localStorage.setItem('datatable-other-pref', JSON.stringify({ some: 'pref' }));
+      localStorage.setItem('other-storage-key', JSON.stringify({ other: 'data' }));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.clearAllPreferences();
+      });
+
+      expect(localStorage.getItem('datatable-column-order-table1')).toBeNull();
+      expect(localStorage.getItem('datatable-column-order-table2')).toBeNull();
+      expect(localStorage.getItem('datatable-other-pref')).toBeNull();
+      expect(localStorage.getItem('other-storage-key')).not.toBeNull(); // Should keep non-datatable keys
+    });
+
+    it('does not clear when enablePersistence is false', async () => {
+      localStorage.setItem('datatable-column-order-table1', JSON.stringify(['col1']));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        enablePersistence: false
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.clearAllPreferences();
+      });
+
+      // Should not clear anything when persistence is disabled
+      expect(localStorage.getItem('datatable-column-order-table1')).not.toBeNull();
+    });
+
+    it('handles clearAllPreferences failure gracefully', async () => {
+      localStorage.setItem('datatable-column-order-table1', JSON.stringify(['col1']));
+      localStorage.setItem('datatable-other-pref', JSON.stringify({ some: 'data' }));
+
+      // Mock removeItem to throw error
+      const originalRemoveItem = Storage.prototype.removeItem;
+      Storage.prototype.removeItem = vi.fn(() => {
+        throw new Error('Clear failed');
+      });
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      // Should not throw
+      act(() => {
+        result.current.clearAllPreferences();
+      });
+
+      // Should complete successfully despite storage error
+      expect(result.current).toBeDefined();
+
+      Storage.prototype.removeItem = originalRemoveItem;
+    });
+  });
+
+  describe('State Updates', () => {
+    it('updates state immediately when updateColumnOrder is called', async () => {
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2', 'col3'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnOrder(['col3', 'col1', 'col2']);
+      });
+
+      expect(result.current.columnOrder).toEqual(['col3', 'col1', 'col2']);
+    });
+
+    it('persists state across hook re-renders', async () => {
+      const { result, rerender } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnOrder(['col2', 'col1']);
+      });
+
+      rerender();
+
+      await waitFor(() => {
+        expect(result.current.columnOrder).toEqual(['col2', 'col1']);
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty default order', async () => {
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: [],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnOrder).toEqual([]);
+    });
+
+    it('handles empty saved order', async () => {
+      localStorage.setItem('datatable-column-order-test', JSON.stringify([]));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnOrder).toEqual([]);
+    });
+
+    it('handles null saved data', async () => {
+      localStorage.setItem('datatable-column-order-test', JSON.stringify(null));
+
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1', 'col2'],
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      // Should handle gracefully
+      expect(result.current.isLoaded).toBe(true);
+    });
+  });
+
+  describe('Load State', () => {
+    it('returns isLoaded=true after loading completes', async () => {
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1'],
+        enablePersistence: true
+      }));
+
+      // isLoaded starts as false only for the brief moment during effect
+      // Due to the synchronous nature in tests, it may already be true
+      expect(typeof result.current.isLoaded).toBe('boolean');
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+    });
+
+    it('returns isLoaded=true immediately when persistence is disabled', () => {
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        tableId: 'test',
+        defaultOrder: ['col1'],
+        enablePersistence: false
+      }));
+
+      expect(result.current.isLoaded).toBe(true);
+    });
+
+    it('returns isLoaded=true immediately when tableId is missing', () => {
+      const { result } = renderHook(() => useColumnOrderPersistence({
+        defaultOrder: ['col1'],
+        enablePersistence: true
+      }));
+
+      expect(result.current.isLoaded).toBe(true);
+    });
+  });
+});
+