fix(useCombobox): use environment instead of document (#1478)

Author: silviuaavram

src/hooks/__tests__/utils.test.js

@@ -1,8 +1,10 @@
+import {renderHook} from '@testing-library/react-hooks'
 import {
   getItemIndex,
   defaultProps,
   getInitialValue,
   getDefaultValue,
+  useMouseAndTouchTracker,
 } from '../utils'
 
 describe('utils', () => {
@@ -63,4 +65,77 @@ describe('utils', () => {
 
     expect(value).toEqual(defaults.bogusValue)
   })
+
+  describe('useMouseAndTouchTracker', () => {
+    test('renders without error', () => {
+      expect(() => {
+        renderHook(() =>
+          useMouseAndTouchTracker(false, [], undefined, jest.fn()),
+        )
+      }).not.toThrowError()
+    })
+
+    test('adds and removes listeners to environment', () => {
+      const environment = {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      }
+
+      const {unmount, result} = renderHook(() =>
+        useMouseAndTouchTracker(false, [], environment, jest.fn()),
+      )
+
+      expect(environment.addEventListener).toHaveBeenCalledTimes(5)
+      expect(environment.addEventListener).toHaveBeenCalledWith(
+        'mousedown',
+        expect.any(Function),
+      )
+      expect(environment.addEventListener).toHaveBeenCalledWith(
+        'mouseup',
+        expect.any(Function),
+      )
+      expect(environment.addEventListener).toHaveBeenCalledWith(
+        'touchstart',
+        expect.any(Function),
+      )
+      expect(environment.addEventListener).toHaveBeenCalledWith(
+        'touchmove',
+        expect.any(Function),
+      )
+      expect(environment.addEventListener).toHaveBeenCalledWith(
+        'touchend',
+        expect.any(Function),
+      )
+      expect(environment.removeEventListener).not.toHaveBeenCalled()
+
+      unmount()
+
+      expect(environment.addEventListener).toHaveBeenCalledTimes(5)
+      expect(environment.removeEventListener).toHaveBeenCalledTimes(5)
+      expect(environment.removeEventListener).toHaveBeenCalledWith(
+        'mousedown',
+        expect.any(Function),
+      )
+      expect(environment.removeEventListener).toHaveBeenCalledWith(
+        'mouseup',
+        expect.any(Function),
+      )
+      expect(environment.removeEventListener).toHaveBeenCalledWith(
+        'touchstart',
+        expect.any(Function),
+      )
+      expect(environment.removeEventListener).toHaveBeenCalledWith(
+        'touchmove',
+        expect.any(Function),
+      )
+      expect(environment.removeEventListener).toHaveBeenCalledWith(
+        'touchend',
+        expect.any(Function),
+      )
+
+      expect(result.current).toEqual({
+        current: {isMouseDown: false, isTouchMove: false},
+      })
+    })
+  })
 })

src/hooks/useCombobox/index.js

@@ -148,10 +148,10 @@ function useCombobox(userProps = {}) {
   useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {}
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (environment.document?.activeElement !== inputRef.current) {
       inputRef?.current?.focus()
     }
-  }, [isOpen])
+  }, [isOpen, environment])
 
   /* Event handler functions */
   const inputKeyDownHandlers = useMemo(

src/hooks/utils.js

@@ -317,12 +317,11 @@ function useMouseAndTouchTracker(
   })
 
   useEffect(() => {
-    /* istanbul ignore if (react-native) */
-    if (isReactNative) {
+    if (environment?.addEventListener == null) {
       return
     }
 
-    // The same strategy for checking if a click occurred inside or outside downsift
+    // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     const onMouseDown = () => {
       mouseAndTouchTrackersRef.current.isMouseDown = true