@startsimpli/ui 0.1.0

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

@@ -0,0 +1,421 @@
+import { renderHook, act, waitFor } from '@testing-library/react'
+import { useResponsive, DEFAULT_BREAKPOINTS } from '../../hooks/useResponsive'
+
+describe('useResponsive', () => {
+  // Mock window.innerWidth
+  const setWindowWidth = (width: number) => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: width,
+    })
+  }
+
+  // Trigger resize event
+  const triggerResize = (width: number) => {
+    setWindowWidth(width)
+    window.dispatchEvent(new Event('resize'))
+  }
+
+  beforeEach(() => {
+    // Reset to desktop size by default
+    setWindowWidth(1440)
+  })
+
+  describe('Initialization', () => {
+    it('should initialize with desktop view mode for large screens', () => {
+      setWindowWidth(1440)
+      const { result } = renderHook(() => useResponsive())
+
+      expect(result.current.viewMode).toBe('desktop')
+      expect(result.current.isDesktop).toBe(true)
+      expect(result.current.isMobile).toBe(false)
+      expect(result.current.isTablet).toBe(false)
+      expect(result.current.isMobileOrTablet).toBe(false)
+    })
+
+    it('should initialize with tablet view mode for medium screens', async () => {
+      setWindowWidth(800)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('tablet')
+      })
+
+      expect(result.current.isTablet).toBe(true)
+      expect(result.current.isMobile).toBe(false)
+      expect(result.current.isDesktop).toBe(false)
+      expect(result.current.isMobileOrTablet).toBe(true)
+    })
+
+    it('should initialize with mobile view mode for small screens', async () => {
+      setWindowWidth(500)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('mobile')
+      })
+
+      expect(result.current.isMobile).toBe(true)
+      expect(result.current.isTablet).toBe(false)
+      expect(result.current.isDesktop).toBe(false)
+      expect(result.current.isMobileOrTablet).toBe(true)
+    })
+
+    it('should track window width', () => {
+      setWindowWidth(1200)
+      const { result } = renderHook(() => useResponsive())
+
+      expect(result.current.windowWidth).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Default Breakpoints', () => {
+    it('should use default mobile breakpoint (768px)', async () => {
+      setWindowWidth(767)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('mobile')
+      })
+    })
+
+    it('should use default tablet breakpoint (1024px)', async () => {
+      setWindowWidth(1023)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('tablet')
+      })
+    })
+
+    it('should use default desktop breakpoint (1280px)', async () => {
+      setWindowWidth(1280)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('desktop')
+      })
+    })
+  })
+
+  describe('Custom Breakpoints', () => {
+    it('should accept custom breakpoints', async () => {
+      const customBreakpoints = {
+        mobile: 600,
+        tablet: 900,
+        desktop: 1200,
+      }
+
+      setWindowWidth(650)
+      const { result } = renderHook(() => useResponsive(customBreakpoints))
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('tablet')
+      })
+    })
+
+    it('should use custom mobile breakpoint', async () => {
+      const customBreakpoints = {
+        mobile: 600,
+        tablet: 900,
+        desktop: 1200,
+      }
+
+      setWindowWidth(550)
+      const { result } = renderHook(() => useResponsive(customBreakpoints))
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('mobile')
+      })
+    })
+
+    it('should use custom desktop breakpoint', async () => {
+      const customBreakpoints = {
+        mobile: 600,
+        tablet: 900,
+        desktop: 1200,
+      }
+
+      setWindowWidth(1250)
+      const { result } = renderHook(() => useResponsive(customBreakpoints))
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('desktop')
+      })
+    })
+  })
+
+  describe('Resize Handling', () => {
+    it('should update viewMode on window resize', async () => {
+      const { result } = renderHook(() => useResponsive())
+
+      // Start at desktop
+      setWindowWidth(1440)
+      triggerResize(1440)
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('desktop')
+      })
+
+      // Resize to tablet
+      act(() => {
+        triggerResize(800)
+      })
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('tablet')
+      })
+
+      // Resize to mobile
+      act(() => {
+        triggerResize(500)
+      })
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('mobile')
+      })
+    })
+
+    it('should update windowWidth on resize', async () => {
+      const { result } = renderHook(() => useResponsive())
+
+      act(() => {
+        triggerResize(1200)
+      })
+
+      await waitFor(() => {
+        expect(result.current.windowWidth).toBe(1200)
+      })
+
+      act(() => {
+        triggerResize(800)
+      })
+
+      await waitFor(() => {
+        expect(result.current.windowWidth).toBe(800)
+      })
+    })
+
+    it('should update boolean flags on resize', async () => {
+      const { result } = renderHook(() => useResponsive())
+
+      // Desktop
+      act(() => {
+        triggerResize(1440)
+      })
+
+      await waitFor(() => {
+        expect(result.current.isDesktop).toBe(true)
+        expect(result.current.isTablet).toBe(false)
+        expect(result.current.isMobile).toBe(false)
+      })
+
+      // Tablet
+      act(() => {
+        triggerResize(800)
+      })
+
+      await waitFor(() => {
+        expect(result.current.isDesktop).toBe(false)
+        expect(result.current.isTablet).toBe(true)
+        expect(result.current.isMobile).toBe(false)
+      })
+
+      // Mobile
+      act(() => {
+        triggerResize(500)
+      })
+
+      await waitFor(() => {
+        expect(result.current.isDesktop).toBe(false)
+        expect(result.current.isTablet).toBe(false)
+        expect(result.current.isMobile).toBe(true)
+      })
+    })
+  })
+
+  describe('isMobileOrTablet Helper', () => {
+    it('should return true for mobile', async () => {
+      setWindowWidth(500)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.isMobileOrTablet).toBe(true)
+      })
+    })
+
+    it('should return true for tablet', async () => {
+      setWindowWidth(800)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.isMobileOrTablet).toBe(true)
+      })
+    })
+
+    it('should return false for desktop', async () => {
+      setWindowWidth(1440)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.isMobileOrTablet).toBe(false)
+      })
+    })
+  })
+
+  describe('Boundary Conditions', () => {
+    it('should handle exact breakpoint values correctly', async () => {
+      const { result } = renderHook(() => useResponsive())
+
+      // Exactly at mobile breakpoint should be tablet
+      act(() => {
+        triggerResize(768)
+      })
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('tablet')
+      })
+
+      // One pixel below mobile breakpoint should be mobile
+      act(() => {
+        triggerResize(767)
+      })
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('mobile')
+      })
+
+      // Exactly at tablet breakpoint should be desktop
+      act(() => {
+        triggerResize(1024)
+      })
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('desktop')
+      })
+
+      // One pixel below tablet breakpoint should be tablet
+      act(() => {
+        triggerResize(1023)
+      })
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('tablet')
+      })
+    })
+
+    it('should handle very small widths', async () => {
+      setWindowWidth(320)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('mobile')
+        expect(result.current.windowWidth).toBe(320)
+      })
+    })
+
+    it('should handle very large widths', async () => {
+      setWindowWidth(2560)
+      const { result } = renderHook(() => useResponsive())
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('desktop')
+        expect(result.current.windowWidth).toBe(2560)
+      })
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('should remove resize listener on unmount', () => {
+      const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
+
+      const { unmount } = renderHook(() => useResponsive())
+
+      unmount()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+
+      removeEventListenerSpy.mockRestore()
+    })
+
+    it('should not cause memory leaks on multiple mount/unmount cycles', () => {
+      const { unmount: unmount1 } = renderHook(() => useResponsive())
+      const { unmount: unmount2 } = renderHook(() => useResponsive())
+      const { unmount: unmount3 } = renderHook(() => useResponsive())
+
+      expect(() => {
+        unmount1()
+        unmount2()
+        unmount3()
+      }).not.toThrow()
+    })
+  })
+
+  describe('Breakpoint Changes', () => {
+    it('should update when breakpoints prop changes', async () => {
+      const { result, rerender } = renderHook(
+        ({ breakpoints }) => useResponsive(breakpoints),
+        {
+          initialProps: {
+            breakpoints: DEFAULT_BREAKPOINTS,
+          },
+        }
+      )
+
+      setWindowWidth(800)
+      triggerResize(800)
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('tablet')
+      })
+
+      // Change breakpoints so 800 is now mobile
+      rerender({
+        breakpoints: {
+          mobile: 900,
+          tablet: 1200,
+          desktop: 1400,
+        },
+      })
+
+      await waitFor(() => {
+        expect(result.current.viewMode).toBe('mobile')
+      })
+    })
+  })
+
+  describe('Multiple Resize Events', () => {
+    it('should handle rapid resize events', async () => {
+      const { result } = renderHook(() => useResponsive())
+
+      act(() => {
+        triggerResize(1440)
+        triggerResize(800)
+        triggerResize(500)
+        triggerResize(1200)
+      })
+
+      await waitFor(() => {
+        expect(result.current.windowWidth).toBe(1200)
+        expect(result.current.viewMode).toBe('desktop')
+      })
+    })
+
+    it('should maintain consistency during resize events', async () => {
+      const { result } = renderHook(() => useResponsive())
+
+      for (let i = 0; i < 10; i++) {
+        act(() => {
+          triggerResize(400 + i * 100)
+        })
+      }
+
+      await waitFor(() => {
+        // Final width should be 1300 (400 + 9*100)
+        expect(result.current.windowWidth).toBe(1300)
+        expect(result.current.viewMode).toBe('desktop')
+      })
+    })
+  })
+})