@startsimpli/ui 0.1.0

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

@@ -0,0 +1,210 @@
+import { renderHook, act } from '@testing-library/react'
+import { useTableState } from '../../hooks/useTableState'
+
+interface TestData {
+  id: string
+  name: string
+  value: number
+}
+
+describe('useTableState', () => {
+  const mockData: TestData[] = [
+    { id: '1', name: 'Item 1', value: 10 },
+    { id: '2', name: 'Item 2', value: 20 },
+    { id: '3', name: 'Item 3', value: 30 },
+  ]
+
+  describe('Initialization', () => {
+    it('should initialize with default values', () => {
+      const { result } = renderHook(() => useTableState<TestData>({}))
+
+      expect(result.current.state.data).toEqual([])
+      expect(result.current.state.currentPage).toBe(1)
+      expect(result.current.state.pageSize).toBe(25)
+      expect(result.current.state.loading).toBe(false)
+      expect(result.current.state.error).toBe(null)
+      expect(result.current.state.viewMode).toBe('table')
+    })
+
+    it('should initialize with provided initial data', () => {
+      const { result } = renderHook(() =>
+        useTableState<TestData>({ initialData: mockData })
+      )
+
+      expect(result.current.state.data).toEqual(mockData)
+      expect(result.current.state.totalCount).toBe(3)
+    })
+
+    it('should initialize with custom page size', () => {
+      const { result } = renderHook(() =>
+        useTableState<TestData>({ initialPageSize: 50 })
+      )
+
+      expect(result.current.state.pageSize).toBe(50)
+    })
+  })
+
+  describe('Data Management', () => {
+    it('should update data correctly', () => {
+      const { result } = renderHook(() => useTableState<TestData>({}))
+
+      act(() => {
+        result.current.setData(mockData)
+      })
+
+      expect(result.current.state.data).toEqual(mockData)
+      expect(result.current.state.totalCount).toBe(3)
+    })
+
+    it('should calculate totalPages correctly', () => {
+      const { result } = renderHook(() =>
+        useTableState<TestData>({ initialData: mockData, initialPageSize: 2 })
+      )
+
+      expect(result.current.state.totalPages).toBe(2)
+    })
+
+    it('should handle empty data', () => {
+      const { result } = renderHook(() =>
+        useTableState<TestData>({ initialData: [] })
+      )
+
+      expect(result.current.state.data).toEqual([])
+      expect(result.current.state.totalCount).toBe(0)
+      expect(result.current.state.totalPages).toBe(1) // Minimum 1 page
+    })
+  })
+
+  describe('Pagination', () => {
+    it('should set current page', () => {
+      const { result } = renderHook(() => useTableState<TestData>({}))
+
+      act(() => {
+        result.current.setPage(3)
+      })
+
+      expect(result.current.state.currentPage).toBe(3)
+    })
+
+    it('should reset to page 1 when changing page size', () => {
+      const { result } = renderHook(() =>
+        useTableState<TestData>({ initialData: mockData })
+      )
+
+      act(() => {
+        result.current.setPage(2)
+      })
+
+      expect(result.current.state.currentPage).toBe(2)
+
+      act(() => {
+        result.current.setPageSize(50)
+      })
+
+      expect(result.current.state.pageSize).toBe(50)
+      expect(result.current.state.currentPage).toBe(1)
+    })
+  })
+
+  describe('Loading States', () => {
+    it('should set loading state', () => {
+      const { result } = renderHook(() => useTableState<TestData>({}))
+
+      act(() => {
+        result.current.setLoading(true)
+      })
+
+      expect(result.current.state.loading).toBe(true)
+
+      act(() => {
+        result.current.setLoading(false)
+      })
+
+      expect(result.current.state.loading).toBe(false)
+    })
+
+    it('should set loading rows', () => {
+      const { result } = renderHook(() => useTableState<TestData>({}))
+      const loadingSet = new Set(['1', '2'])
+
+      act(() => {
+        result.current.setLoadingRows(loadingSet)
+      })
+
+      expect(result.current.state.loadingRows).toEqual(loadingSet)
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should set error state', () => {
+      const { result } = renderHook(() => useTableState<TestData>({}))
+      const error = new Error('Test error')
+
+      act(() => {
+        result.current.setError(error)
+      })
+
+      expect(result.current.state.error).toBe(error)
+
+      act(() => {
+        result.current.setError(null)
+      })
+
+      expect(result.current.state.error).toBe(null)
+    })
+  })
+
+  describe('View Mode', () => {
+    it('should toggle view mode', () => {
+      const { result } = renderHook(() => useTableState<TestData>({}))
+
+      expect(result.current.state.viewMode).toBe('table')
+
+      act(() => {
+        result.current.setViewMode('card')
+      })
+
+      expect(result.current.state.viewMode).toBe('card')
+
+      act(() => {
+        result.current.setViewMode('table')
+      })
+
+      expect(result.current.state.viewMode).toBe('table')
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should memoize state correctly', () => {
+      const { result, rerender } = renderHook(() =>
+        useTableState<TestData>({ initialData: mockData })
+      )
+
+      const firstState = result.current.state
+      rerender()
+      const secondState = result.current.state
+
+      // State should be the same object if nothing changed
+      expect(firstState).toBe(secondState)
+    })
+
+    it('should update memoized state when data changes', () => {
+      const { result } = renderHook(() =>
+        useTableState<TestData>({ initialData: mockData })
+      )
+
+      const firstState = result.current.state
+      const newData = [...mockData, { id: '4', name: 'Item 4', value: 40 }]
+
+      act(() => {
+        result.current.setData(newData)
+      })
+
+      const secondState = result.current.state
+
+      // State should be different after data change
+      expect(firstState).not.toBe(secondState)
+      expect(secondState.data).toEqual(newData)
+    })
+  })
+})