@startsimpli/ui 0.1.0

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

@@ -0,0 +1,460 @@
+import { renderHook, act } from '@testing-library/react'
+import { useFilters } from '../../hooks/useFilters'
+import { FilterState } from '../../types'
+
+describe('useFilters', () => {
+  describe('Initialization', () => {
+    it('should initialize with empty filters', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      expect(result.current.filters).toEqual({})
+      expect(result.current.hasActiveFilters()).toBe(false)
+      expect(result.current.getActiveFilterCount()).toBe(0)
+    })
+
+    it('should initialize with provided filters', () => {
+      const initialFilters: FilterState = {
+        status: 'active',
+        category: 'tech',
+      }
+
+      const { result } = renderHook(() =>
+        useFilters({ initialFilters })
+      )
+
+      expect(result.current.filters).toEqual(initialFilters)
+      expect(result.current.hasActiveFilters()).toBe(true)
+      expect(result.current.getActiveFilterCount()).toBe(2)
+    })
+  })
+
+  describe('Set Filter', () => {
+    it('should set a single filter', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.setFilter('status', 'active')
+      })
+
+      expect(result.current.filters).toEqual({ status: 'active' })
+      expect(result.current.hasActiveFilters()).toBe(true)
+      expect(result.current.getActiveFilterCount()).toBe(1)
+    })
+
+    it('should set multiple filters', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.setFilter('status', 'active')
+        result.current.setFilter('category', 'tech')
+        result.current.setFilter('priority', 'high')
+      })
+
+      expect(result.current.filters).toEqual({
+        status: 'active',
+        category: 'tech',
+        priority: 'high',
+      })
+      expect(result.current.getActiveFilterCount()).toBe(3)
+    })
+
+    it('should update existing filter', () => {
+      const { result } = renderHook(() =>
+        useFilters({ initialFilters: { status: 'active' } })
+      )
+
+      act(() => {
+        result.current.setFilter('status', 'inactive')
+      })
+
+      expect(result.current.filters).toEqual({ status: 'inactive' })
+    })
+
+    it('should handle different value types', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.setFilter('string', 'value')
+        result.current.setFilter('number', 42)
+        result.current.setFilter('boolean', true)
+        result.current.setFilter('array', ['a', 'b', 'c'])
+        result.current.setFilter('object', { key: 'value' })
+      })
+
+      expect(result.current.filters).toEqual({
+        string: 'value',
+        number: 42,
+        boolean: true,
+        array: ['a', 'b', 'c'],
+        object: { key: 'value' },
+      })
+    })
+
+    it('should call onChange callback when setting filter', () => {
+      const onChange = jest.fn()
+      const { result } = renderHook(() => useFilters({ onChange }))
+
+      act(() => {
+        result.current.setFilter('status', 'active')
+      })
+
+      expect(onChange).toHaveBeenCalledWith({ status: 'active' })
+    })
+
+    it('should call onChange with all filters', () => {
+      const onChange = jest.fn()
+      const { result } = renderHook(() =>
+        useFilters({ initialFilters: { category: 'tech' }, onChange })
+      )
+
+      onChange.mockClear()
+
+      act(() => {
+        result.current.setFilter('status', 'active')
+      })
+
+      expect(onChange).toHaveBeenCalledWith({
+        category: 'tech',
+        status: 'active',
+      })
+    })
+  })
+
+  describe('Clear Filter', () => {
+    it('should clear a single filter', () => {
+      const { result } = renderHook(() =>
+        useFilters({
+          initialFilters: {
+            status: 'active',
+            category: 'tech',
+          },
+        })
+      )
+
+      act(() => {
+        result.current.clearFilter('status')
+      })
+
+      expect(result.current.filters).toEqual({ category: 'tech' })
+      expect(result.current.getActiveFilterCount()).toBe(1)
+    })
+
+    it('should clear non-existent filter without error', () => {
+      const { result } = renderHook(() =>
+        useFilters({ initialFilters: { status: 'active' } })
+      )
+
+      act(() => {
+        result.current.clearFilter('nonexistent')
+      })
+
+      expect(result.current.filters).toEqual({ status: 'active' })
+    })
+
+    it('should call onChange callback when clearing filter', () => {
+      const onChange = jest.fn()
+      const { result } = renderHook(() =>
+        useFilters({
+          initialFilters: { status: 'active', category: 'tech' },
+          onChange,
+        })
+      )
+
+      onChange.mockClear()
+
+      act(() => {
+        result.current.clearFilter('status')
+      })
+
+      expect(onChange).toHaveBeenCalledWith({ category: 'tech' })
+    })
+
+    it('should clear last filter', () => {
+      const { result } = renderHook(() =>
+        useFilters({ initialFilters: { status: 'active' } })
+      )
+
+      act(() => {
+        result.current.clearFilter('status')
+      })
+
+      expect(result.current.filters).toEqual({})
+      expect(result.current.hasActiveFilters()).toBe(false)
+    })
+  })
+
+  describe('Clear All Filters', () => {
+    it('should clear all filters', () => {
+      const { result } = renderHook(() =>
+        useFilters({
+          initialFilters: {
+            status: 'active',
+            category: 'tech',
+            priority: 'high',
+          },
+        })
+      )
+
+      act(() => {
+        result.current.clearAllFilters()
+      })
+
+      expect(result.current.filters).toEqual({})
+      expect(result.current.hasActiveFilters()).toBe(false)
+      expect(result.current.getActiveFilterCount()).toBe(0)
+    })
+
+    it('should call onChange callback when clearing all', () => {
+      const onChange = jest.fn()
+      const { result } = renderHook(() =>
+        useFilters({
+          initialFilters: { status: 'active', category: 'tech' },
+          onChange,
+        })
+      )
+
+      onChange.mockClear()
+
+      act(() => {
+        result.current.clearAllFilters()
+      })
+
+      expect(onChange).toHaveBeenCalledWith({})
+    })
+
+    it('should work when already empty', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.clearAllFilters()
+      })
+
+      expect(result.current.filters).toEqual({})
+      expect(result.current.hasActiveFilters()).toBe(false)
+    })
+  })
+
+  describe('Has Active Filters', () => {
+    it('should return false for empty filters', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      expect(result.current.hasActiveFilters()).toBe(false)
+    })
+
+    it('should return true when filters exist', () => {
+      const { result } = renderHook(() =>
+        useFilters({ initialFilters: { status: 'active' } })
+      )
+
+      expect(result.current.hasActiveFilters()).toBe(true)
+    })
+
+    it('should update when adding filter', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      expect(result.current.hasActiveFilters()).toBe(false)
+
+      act(() => {
+        result.current.setFilter('status', 'active')
+      })
+
+      expect(result.current.hasActiveFilters()).toBe(true)
+    })
+
+    it('should update when clearing filter', () => {
+      const { result } = renderHook(() =>
+        useFilters({ initialFilters: { status: 'active' } })
+      )
+
+      expect(result.current.hasActiveFilters()).toBe(true)
+
+      act(() => {
+        result.current.clearFilter('status')
+      })
+
+      expect(result.current.hasActiveFilters()).toBe(false)
+    })
+  })
+
+  describe('Get Active Filter Count', () => {
+    it('should return 0 for empty filters', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      expect(result.current.getActiveFilterCount()).toBe(0)
+    })
+
+    it('should return correct count', () => {
+      const { result } = renderHook(() =>
+        useFilters({
+          initialFilters: {
+            status: 'active',
+            category: 'tech',
+            priority: 'high',
+          },
+        })
+      )
+
+      expect(result.current.getActiveFilterCount()).toBe(3)
+    })
+
+    it('should update when adding filters', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      expect(result.current.getActiveFilterCount()).toBe(0)
+
+      act(() => {
+        result.current.setFilter('status', 'active')
+      })
+
+      expect(result.current.getActiveFilterCount()).toBe(1)
+
+      act(() => {
+        result.current.setFilter('category', 'tech')
+      })
+
+      expect(result.current.getActiveFilterCount()).toBe(2)
+    })
+
+    it('should update when removing filters', () => {
+      const { result } = renderHook(() =>
+        useFilters({
+          initialFilters: {
+            status: 'active',
+            category: 'tech',
+          },
+        })
+      )
+
+      expect(result.current.getActiveFilterCount()).toBe(2)
+
+      act(() => {
+        result.current.clearFilter('status')
+      })
+
+      expect(result.current.getActiveFilterCount()).toBe(1)
+    })
+  })
+
+  describe('Complex Filter Scenarios', () => {
+    it('should handle rapid filter changes', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.setFilter('a', 1)
+        result.current.setFilter('b', 2)
+        result.current.setFilter('c', 3)
+        result.current.clearFilter('b')
+        result.current.setFilter('d', 4)
+      })
+
+      expect(result.current.filters).toEqual({ a: 1, c: 3, d: 4 })
+      expect(result.current.getActiveFilterCount()).toBe(3)
+    })
+
+    it('should handle setting filter to undefined', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.setFilter('status', undefined)
+      })
+
+      expect(result.current.filters).toEqual({ status: undefined })
+      expect(result.current.hasActiveFilters()).toBe(true)
+    })
+
+    it('should handle setting filter to null', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.setFilter('status', null)
+      })
+
+      expect(result.current.filters).toEqual({ status: null })
+      expect(result.current.hasActiveFilters()).toBe(true)
+    })
+
+    it('should handle setting filter to empty string', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      act(() => {
+        result.current.setFilter('status', '')
+      })
+
+      expect(result.current.filters).toEqual({ status: '' })
+      expect(result.current.hasActiveFilters()).toBe(true)
+    })
+  })
+
+  describe('Callback Integration', () => {
+    it('should call onChange for each operation', () => {
+      const onChange = jest.fn()
+      const { result } = renderHook(() => useFilters({ onChange }))
+
+      act(() => {
+        result.current.setFilter('a', 1)
+      })
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+
+      act(() => {
+        result.current.setFilter('b', 2)
+      })
+
+      expect(onChange).toHaveBeenCalledTimes(2)
+
+      act(() => {
+        result.current.clearFilter('a')
+      })
+
+      expect(onChange).toHaveBeenCalledTimes(3)
+
+      act(() => {
+        result.current.clearAllFilters()
+      })
+
+      expect(onChange).toHaveBeenCalledTimes(4)
+    })
+
+    it('should not call onChange when no callback provided', () => {
+      const { result } = renderHook(() => useFilters({}))
+
+      // Should not throw error
+      expect(() => {
+        act(() => {
+          result.current.setFilter('status', 'active')
+          result.current.clearFilter('status')
+          result.current.clearAllFilters()
+        })
+      }).not.toThrow()
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should maintain filter reference when unchanged', () => {
+      const { result, rerender } = renderHook(() =>
+        useFilters({ initialFilters: { status: 'active' } })
+      )
+
+      const firstFilters = result.current.filters
+      rerender()
+
+      // Note: filters object will be different due to state management,
+      // but values should be the same
+      expect(result.current.filters).toEqual(firstFilters)
+    })
+
+    it('should provide stable function references', () => {
+      const { result, rerender } = renderHook(() => useFilters({}))
+
+      const firstSetFilter = result.current.setFilter
+      const firstClearFilter = result.current.clearFilter
+      const firstClearAllFilters = result.current.clearAllFilters
+
+      rerender()
+
+      expect(result.current.setFilter).toBe(firstSetFilter)
+      expect(result.current.clearFilter).toBe(firstClearFilter)
+      expect(result.current.clearAllFilters).toBe(firstClearAllFilters)
+    })
+  })
+})