@startsimpli/ui 0.1.0

package/src/components/unified-table/__tests__/hooks/useColumnResize.test.ts

@@ -0,0 +1,122 @@
+import { renderHook, act } from '@testing-library/react'
+import { useColumnResize } from '../../hooks/useColumnResize'
+
+describe('useColumnResize', () => {
+  describe('initialization', () => {
+    it('should return empty widths by default', () => {
+      const { result } = renderHook(() => useColumnResize())
+
+      expect(result.current.columnWidths).toEqual({})
+      expect(result.current.isResizing).toBe(false)
+      expect(result.current.resizingColumn).toBe(null)
+    })
+
+    it('should use initial widths when provided', () => {
+      const initialWidths = { col1: 100, col2: 200 }
+      const { result } = renderHook(() =>
+        useColumnResize({ initialWidths })
+      )
+
+      expect(result.current.columnWidths).toEqual(initialWidths)
+    })
+  })
+
+  describe('getColumnWidth', () => {
+    it('should return resized width when column has been resized', () => {
+      const initialWidths = { col1: 150 }
+      const { result } = renderHook(() =>
+        useColumnResize({ enabled: true, initialWidths })
+      )
+
+      expect(result.current.getColumnWidth('col1')).toBe(150)
+    })
+
+    it('should return default width when column has not been resized', () => {
+      const { result } = renderHook(() =>
+        useColumnResize({ enabled: true })
+      )
+
+      expect(result.current.getColumnWidth('col1', 100)).toBe(100)
+    })
+
+    it('should return default width when disabled', () => {
+      const initialWidths = { col1: 150 }
+      const { result } = renderHook(() =>
+        useColumnResize({ enabled: false, initialWidths })
+      )
+
+      expect(result.current.getColumnWidth('col1', 100)).toBe(100)
+    })
+  })
+
+  describe('startResize', () => {
+    it('should set resizing state when starting resize', () => {
+      const { result } = renderHook(() =>
+        useColumnResize({ enabled: true })
+      )
+
+      act(() => {
+        result.current.startResize('col1', 100, 150)
+      })
+
+      expect(result.current.isResizing).toBe(true)
+      expect(result.current.resizingColumn).toBe('col1')
+    })
+
+    it('should not start resize when disabled', () => {
+      const { result } = renderHook(() =>
+        useColumnResize({ enabled: false })
+      )
+
+      act(() => {
+        result.current.startResize('col1', 100, 150)
+      })
+
+      expect(result.current.isResizing).toBe(false)
+      expect(result.current.resizingColumn).toBe(null)
+    })
+  })
+
+  describe('resetWidths', () => {
+    it('should reset all widths to empty', () => {
+      const onWidthChange = jest.fn()
+      const { result } = renderHook(() =>
+        useColumnResize({
+          enabled: true,
+          initialWidths: { col1: 100, col2: 200 },
+          onWidthChange,
+        })
+      )
+
+      expect(result.current.columnWidths).toEqual({ col1: 100, col2: 200 })
+
+      act(() => {
+        result.current.resetWidths()
+      })
+
+      expect(result.current.columnWidths).toEqual({})
+      expect(onWidthChange).toHaveBeenCalledWith({})
+    })
+  })
+
+  describe('minWidth enforcement', () => {
+    it('should respect default minWidth of 50', () => {
+      const { result } = renderHook(() =>
+        useColumnResize({ enabled: true })
+      )
+
+      // minWidth is enforced during mouse move, not in startResize
+      // The hook stores the minWidth and uses it during resize calculations
+      expect(result.current.columnWidths).toEqual({})
+    })
+
+    it('should accept custom minWidth', () => {
+      const { result } = renderHook(() =>
+        useColumnResize({ enabled: true, minWidth: 100 })
+      )
+
+      // Custom minWidth is stored internally
+      expect(result.current.columnWidths).toEqual({})
+    })
+  })
+})

package/src/components/unified-table/__tests__/hooks/useColumnVisibility.test.ts

@@ -0,0 +1,594 @@
+import { renderHook, act } from '@testing-library/react'
+import { useColumnVisibility } from '../../hooks/useColumnVisibility'
+
+describe('useColumnVisibility', () => {
+  beforeEach(() => {
+    // Clear localStorage before each test
+    localStorage.clear()
+  })
+
+  describe('Initialization', () => {
+    it('should initialize with empty visibility config', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      expect(result.current.columnVisibility).toEqual({})
+    })
+
+    it('should initialize with default visibility config', () => {
+      const defaultVisibility = {
+        col1: true,
+        col2: false,
+        col3: true,
+      }
+
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility })
+      )
+
+      expect(result.current.columnVisibility).toEqual(defaultVisibility)
+    })
+
+    it('should load from localStorage if persistKey provided', () => {
+      const storedConfig = {
+        col1: false,
+        col2: true,
+      }
+      localStorage.setItem(
+        'column-visibility-test-table',
+        JSON.stringify(storedConfig)
+      )
+
+      const { result } = renderHook(() =>
+        useColumnVisibility({ persistKey: 'test-table' })
+      )
+
+      expect(result.current.columnVisibility).toEqual(storedConfig)
+    })
+
+    it('should use default visibility if localStorage is invalid', () => {
+      localStorage.setItem('column-visibility-test-table', 'invalid-json')
+
+      const defaultVisibility = { col1: true }
+      const { result } = renderHook(() =>
+        useColumnVisibility({
+          defaultVisibility,
+          persistKey: 'test-table',
+        })
+      )
+
+      expect(result.current.columnVisibility).toEqual(defaultVisibility)
+    })
+
+    it('should prioritize localStorage over default visibility', () => {
+      const storedConfig = { col1: false }
+      const defaultVisibility = { col1: true, col2: true }
+
+      localStorage.setItem(
+        'column-visibility-priority-test',
+        JSON.stringify(storedConfig)
+      )
+
+      const { result } = renderHook(() =>
+        useColumnVisibility({
+          defaultVisibility,
+          persistKey: 'priority-test',
+        })
+      )
+
+      expect(result.current.columnVisibility).toEqual(storedConfig)
+    })
+  })
+
+  describe('Toggle Column', () => {
+    it('should toggle column visibility from true to false', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility: { col1: true } })
+      )
+
+      act(() => {
+        result.current.toggleColumn('col1')
+      })
+
+      expect(result.current.columnVisibility.col1).toBe(false)
+    })
+
+    it('should toggle column visibility from false to true', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility: { col1: false } })
+      )
+
+      act(() => {
+        result.current.toggleColumn('col1')
+      })
+
+      expect(result.current.columnVisibility.col1).toBe(true)
+    })
+
+    it('should toggle unset column to false (default is true)', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.toggleColumn('newColumn')
+      })
+
+      expect(result.current.columnVisibility.newColumn).toBe(false)
+    })
+
+    it('should toggle multiple columns independently', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.toggleColumn('col1')
+        result.current.toggleColumn('col2')
+      })
+
+      expect(result.current.columnVisibility).toEqual({
+        col1: false,
+        col2: false,
+      })
+
+      act(() => {
+        result.current.toggleColumn('col1')
+      })
+
+      expect(result.current.columnVisibility).toEqual({
+        col1: true,
+        col2: false,
+      })
+    })
+  })
+
+  describe('Show/Hide Column', () => {
+    it('should show column', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.showColumn('col1')
+      })
+
+      expect(result.current.columnVisibility.col1).toBe(true)
+    })
+
+    it('should hide column', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.hideColumn('col1')
+      })
+
+      expect(result.current.columnVisibility.col1).toBe(false)
+    })
+
+    it('should not change already shown column', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility: { col1: true } })
+      )
+
+      act(() => {
+        result.current.showColumn('col1')
+      })
+
+      expect(result.current.columnVisibility.col1).toBe(true)
+    })
+
+    it('should not change already hidden column', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility: { col1: false } })
+      )
+
+      act(() => {
+        result.current.hideColumn('col1')
+      })
+
+      expect(result.current.columnVisibility.col1).toBe(false)
+    })
+  })
+
+  describe('Show/Hide All Columns', () => {
+    it('should show all columns', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({
+          defaultVisibility: {
+            col1: false,
+            col2: false,
+            col3: false,
+          },
+        })
+      )
+
+      act(() => {
+        result.current.showAllColumns()
+      })
+
+      expect(result.current.columnVisibility).toEqual({})
+    })
+
+    it('should hide all columns', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({
+          defaultVisibility: {
+            col1: true,
+            col2: true,
+            col3: true,
+          },
+        })
+      )
+
+      act(() => {
+        result.current.hideAllColumns()
+      })
+
+      expect(result.current.columnVisibility).toEqual({
+        col1: false,
+        col2: false,
+        col3: false,
+      })
+    })
+
+    it('should hide all except specified columns', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({
+          defaultVisibility: {
+            col1: true,
+            col2: true,
+            col3: true,
+          },
+        })
+      )
+
+      act(() => {
+        result.current.hideAllColumns(['col1', 'col3'])
+      })
+
+      expect(result.current.columnVisibility.col1).toBe(true)
+      expect(result.current.columnVisibility.col2).toBe(false)
+      expect(result.current.columnVisibility.col3).toBe(true)
+    })
+  })
+
+  describe('Reset Visibility', () => {
+    it('should reset to default visibility', () => {
+      const defaultVisibility = {
+        col1: true,
+        col2: false,
+      }
+
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility })
+      )
+
+      act(() => {
+        result.current.toggleColumn('col1')
+        result.current.toggleColumn('col2')
+      })
+
+      expect(result.current.columnVisibility).toEqual({
+        col1: false,
+        col2: true,
+      })
+
+      act(() => {
+        result.current.resetVisibility()
+      })
+
+      expect(result.current.columnVisibility).toEqual(defaultVisibility)
+    })
+
+    it('should reset to empty when no default provided', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.hideColumn('col1')
+        result.current.hideColumn('col2')
+      })
+
+      act(() => {
+        result.current.resetVisibility()
+      })
+
+      expect(result.current.columnVisibility).toEqual({})
+    })
+  })
+
+  describe('Is Column Visible', () => {
+    it('should return true for explicitly visible column', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility: { col1: true } })
+      )
+
+      expect(result.current.isColumnVisible('col1')).toBe(true)
+    })
+
+    it('should return false for explicitly hidden column', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ defaultVisibility: { col1: false } })
+      )
+
+      expect(result.current.isColumnVisible('col1')).toBe(false)
+    })
+
+    it('should return true for unset column (default visible)', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      expect(result.current.isColumnVisible('unknownColumn')).toBe(true)
+    })
+
+    it('should update after toggling', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      expect(result.current.isColumnVisible('col1')).toBe(true)
+
+      act(() => {
+        result.current.toggleColumn('col1')
+      })
+
+      expect(result.current.isColumnVisible('col1')).toBe(false)
+    })
+  })
+
+  describe('Persistence', () => {
+    it('should persist to localStorage when persistKey provided', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ persistKey: 'persist-test' })
+      )
+
+      act(() => {
+        result.current.hideColumn('col1')
+      })
+
+      const stored = localStorage.getItem('column-visibility-persist-test')
+      expect(stored).toBeTruthy()
+      expect(JSON.parse(stored!)).toEqual({ col1: false })
+    })
+
+    it('should update localStorage on changes', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ persistKey: 'update-test' })
+      )
+
+      act(() => {
+        result.current.hideColumn('col1')
+      })
+
+      let stored = localStorage.getItem('column-visibility-update-test')
+      expect(JSON.parse(stored!)).toEqual({ col1: false })
+
+      act(() => {
+        result.current.showColumn('col2')
+      })
+
+      stored = localStorage.getItem('column-visibility-update-test')
+      expect(JSON.parse(stored!)).toEqual({
+        col1: false,
+        col2: true,
+      })
+    })
+
+    it('should not persist when persistKey not provided', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.hideColumn('col1')
+      })
+
+      expect(localStorage.length).toBe(0)
+    })
+
+    it('should persist across multiple operations', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ persistKey: 'multi-op-test' })
+      )
+
+      act(() => {
+        result.current.hideColumn('col1')
+        result.current.showColumn('col2')
+        result.current.toggleColumn('col3')
+      })
+
+      const stored = localStorage.getItem('column-visibility-multi-op-test')
+      expect(JSON.parse(stored!)).toEqual({
+        col1: false,
+        col2: true,
+        col3: false,
+      })
+    })
+  })
+
+  describe('Callback Integration', () => {
+    it('should call onVisibilityChange when visibility changes', () => {
+      const onVisibilityChange = jest.fn()
+      const { result } = renderHook(() =>
+        useColumnVisibility({ onVisibilityChange })
+      )
+
+      // Clear the initial call from useEffect
+      onVisibilityChange.mockClear()
+
+      act(() => {
+        result.current.toggleColumn('col1')
+      })
+
+      expect(onVisibilityChange).toHaveBeenCalled()
+      expect(onVisibilityChange.mock.calls[0][0]).toEqual({ col1: false })
+    })
+
+    it('should call callback on initialization with persisted data', () => {
+      const persistedData = { col1: false }
+      localStorage.setItem(
+        'column-visibility-callback-test',
+        JSON.stringify(persistedData)
+      )
+
+      const onVisibilityChange = jest.fn()
+      renderHook(() =>
+        useColumnVisibility({
+          persistKey: 'callback-test',
+          onVisibilityChange,
+        })
+      )
+
+      expect(onVisibilityChange).toHaveBeenCalledWith(persistedData)
+    })
+
+    it('should call callback multiple times for multiple changes', () => {
+      const onVisibilityChange = jest.fn()
+      const { result } = renderHook(() =>
+        useColumnVisibility({ onVisibilityChange })
+      )
+
+      act(() => {
+        result.current.hideColumn('col1')
+        result.current.showColumn('col2')
+      })
+
+      expect(onVisibilityChange).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle undefined column IDs gracefully', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      expect(() => {
+        act(() => {
+          result.current.toggleColumn(undefined as any)
+        })
+      }).not.toThrow()
+    })
+
+    it('should handle empty string column IDs', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.toggleColumn('')
+      })
+
+      expect(result.current.columnVisibility['']).toBe(false)
+    })
+
+    it('should handle special characters in column IDs', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.toggleColumn('col-1.2.3')
+      })
+
+      expect(result.current.columnVisibility['col-1.2.3']).toBe(false)
+    })
+
+    it('should handle many columns', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        for (let i = 0; i < 100; i++) {
+          result.current.toggleColumn(`col${i}`)
+        }
+      })
+
+      expect(Object.keys(result.current.columnVisibility).length).toBe(100)
+    })
+  })
+
+  describe('Complex Scenarios', () => {
+    it('should handle mixed operations correctly', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({
+          defaultVisibility: {
+            col1: true,
+            col2: false,
+            col3: true,
+          },
+        })
+      )
+
+      act(() => {
+        result.current.toggleColumn('col1')
+        result.current.showColumn('col2')
+        result.current.hideColumn('col3')
+        result.current.showColumn('col4')
+      })
+
+      expect(result.current.columnVisibility).toEqual({
+        col1: false,
+        col2: true,
+        col3: false,
+        col4: true,
+      })
+    })
+
+    it('should maintain state across re-renders', () => {
+      const { result, rerender } = renderHook(() => useColumnVisibility())
+
+      act(() => {
+        result.current.hideColumn('col1')
+      })
+
+      rerender()
+
+      expect(result.current.isColumnVisible('col1')).toBe(false)
+    })
+
+    it('should handle persistence with complex visibility state', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({ persistKey: 'complex-test' })
+      )
+
+      const complexState = {
+        col1: true,
+        col2: false,
+        col3: true,
+        col4: false,
+        col5: true,
+      }
+
+      act(() => {
+        result.current.setColumnVisibility(complexState)
+      })
+
+      const stored = localStorage.getItem('column-visibility-complex-test')
+      expect(JSON.parse(stored!)).toEqual(complexState)
+
+      // Verify loading in new hook instance
+      const { result: result2 } = renderHook(() =>
+        useColumnVisibility({ persistKey: 'complex-test' })
+      )
+
+      expect(result2.current.columnVisibility).toEqual(complexState)
+    })
+  })
+
+  describe('Set Column Visibility Directly', () => {
+    it('should set entire visibility config', () => {
+      const { result } = renderHook(() => useColumnVisibility())
+
+      const newConfig = {
+        col1: true,
+        col2: false,
+        col3: true,
+      }
+
+      act(() => {
+        result.current.setColumnVisibility(newConfig)
+      })
+
+      expect(result.current.columnVisibility).toEqual(newConfig)
+    })
+
+    it('should replace previous config', () => {
+      const { result } = renderHook(() =>
+        useColumnVisibility({
+          defaultVisibility: {
+            col1: false,
+            col2: true,
+          },
+        })
+      )
+
+      act(() => {
+        result.current.setColumnVisibility({ col3: false })
+      })
+
+      expect(result.current.columnVisibility).toEqual({ col3: false })
+    })
+  })
+})