Merge pull request #262 from retyui/add-use-device-orientation-test

Add useDeviceOrientation tests

Author: LinusU

src/useDeviceOrientation.test.ts

@@ -0,0 +1,60 @@
+import {useDeviceOrientation} from './useDeviceOrientation'
+import {act, renderHook} from '@testing-library/react-hooks'
+
+// @ts-expect-error - untyped implementation
+import RCTDeviceEventEmitter from 'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter'
+import {Dimensions} from 'react-native'
+
+describe('useDeviceOrientation', () => {
+  const emitChangeDimensions = (screen = {width: 0, height: 0}) =>
+    RCTDeviceEventEmitter.emit('didUpdateDimensions', {screen})
+
+  const rotatePortrait = () => emitChangeDimensions({height: 200, width: 100})
+  const rotateLandscape = () => emitChangeDimensions({height: 100, width: 200})
+
+  it('should return portrait orientation', () => {
+    const {result} = renderHook(() => useDeviceOrientation())
+
+    act(() => rotatePortrait())
+
+    expect(result.current).toEqual({
+      landscape: false,
+      portrait: true,
+    })
+  })
+
+  it('should return landscape orientation', () => {
+    const {result} = renderHook(() => useDeviceOrientation())
+
+    act(() => rotateLandscape())
+
+    expect(result.current).toEqual({
+      landscape: true,
+      portrait: false,
+    })
+  })
+
+  it('should return landscape & portrait orientations when window is square', () => {
+    const {result} = renderHook(() => useDeviceOrientation())
+
+    act(() => emitChangeDimensions({width: 100, height: 100}))
+
+    expect(result.current).toEqual({
+      landscape: true,
+      portrait: true,
+    })
+  })
+
+  it('should use latest screen size for orientation state initialization', () => {
+    Dimensions.get('screen')
+
+    rotateLandscape()
+
+    const {result} = renderHook(() => useDeviceOrientation())
+
+    expect(result.current).toEqual({
+      landscape: true,
+      portrait: false,
+    })
+  })
+})

src/useDeviceOrientation.ts

@@ -1,43 +1,32 @@
-import {useEffect, useState, useCallback} from 'react'
+import {useEffect, useState} from 'react'
 import {Dimensions, ScaledSize} from 'react-native'
 
-const screen = Dimensions.get('screen')
+const isOrientationPortrait = ({width, height}: ScaledSize) => height >= width
+const isOrientationLandscape = ({width, height}: ScaledSize) => width >= height
 
 export function useDeviceOrientation() {
-  const isOrientationPortrait = ({
-    width,
-    height,
-  }: {
-    width: number
-    height: number
-  }) => height >= width
-  const isOrientationLandscape = ({
-    width,
-    height,
-  }: {
-    width: number
-    height: number
-  }) => width >= height
-
-  const [orientation, setOrientation] = useState({
+  const screen = Dimensions.get('screen')
+  const initialState = {
     portrait: isOrientationPortrait(screen),
     landscape: isOrientationLandscape(screen),
-  })
+  }
 
-  const onChange = useCallback(({screen: scr}: {screen: ScaledSize}) => {
-    setOrientation({
-      portrait: isOrientationPortrait(scr),
-      landscape: isOrientationLandscape(scr),
-    })
-  }, [])
+  const [orientation, setOrientation] = useState(initialState)
 
   useEffect(() => {
+    const onChange = ({screen}: {screen: ScaledSize}) => {
+      setOrientation({
+        portrait: isOrientationPortrait(screen),
+        landscape: isOrientationLandscape(screen),
+      })
+    }
+
     Dimensions.addEventListener('change', onChange)
 
     return () => {
       Dimensions.removeEventListener('change', onChange)
     }
-  }, [orientation.portrait, orientation.landscape, onChange])
+  }, [])
 
   return orientation
 }