main 🧊 add use hover test

Author: debabin

packages/core/src/bundle/hooks/useHover/useHover.js

@@ -26,7 +26,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @overload
  * @template Target The target element
  * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter
- * @returns {UseHoverReturn<Target>} The state of the hover
+ * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover
  *
  * @example
  * const [ref, hovering] = useHover(() => console.log('callback'));
@@ -35,7 +35,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @template Target The target element
  * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter
  * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave
- * @returns {UseHoverReturn<Target>} The state of the hover
+ * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover
  *
  * @example
  * const [ref, hovering] = useHover(options);
@@ -73,5 +73,8 @@ export const useHover = (...params) => {
     };
   }, [target, internalRef.state]);
   if (target) return hovering;
-  return [internalRef, hovering];
+  return {
+    ref: internalRef,
+    value: hovering
+  };
 };

packages/core/src/hooks/useHover/useHover.test.ts

@@ -0,0 +1,107 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { target } from '@/utils/helpers';
+
+import type { StateRef } from '../useRefState/useRefState';
+import type { UseHoverReturn } from './useHover';
+
+import { useHover } from './useHover';
+
+const targets = [
+  undefined,
+  target('#target'),
+  target(document.getElementById('target')!),
+  target(() => document.getElementById('target')!),
+  { current: document.getElementById('target') }
+];
+const element = document.getElementById('target')! as HTMLDivElement;
+
+targets.forEach((target) => {
+  describe(`${target}`, () => {
+    it('Should use hover', () => {
+      const { result } = renderHook(() => {
+        if (target)
+          return useHover(target) as unknown as {
+            ref: StateRef<HTMLDivElement>;
+          } & UseHoverReturn;
+        return useHover<HTMLDivElement>();
+      });
+
+      if (!target) act(() => result.current.ref(element));
+
+      if (target) expect(result.current).toBe(false);
+      if (!target) {
+        expect(result.current.value).toBe(false);
+        expect(result.current.ref).toBeTypeOf('function');
+      }
+    });
+
+    it('Should change value on hover events', () => {
+      const { result } = renderHook(() => {
+        if (target)
+          return useHover(target) as unknown as {
+            ref: StateRef<HTMLDivElement>;
+          } & UseHoverReturn;
+        return useHover<HTMLDivElement>();
+      });
+
+      if (!target) act(() => result.current.ref(element));
+
+      if (target) expect(result.current).toBe(false);
+      if (!target) expect(result.current.value).toBe(false);
+
+      act(() => element.dispatchEvent(new Event('mouseenter')));
+
+      if (target) expect(result.current).toBe(true);
+      if (!target) expect(result.current.value).toBe(true);
+
+      act(() => element.dispatchEvent(new Event('mouseleave')));
+
+      if (target) expect(result.current).toBe(false);
+      if (!target) expect(result.current.value).toBe(false);
+    });
+
+    it('Should call callback on hover', () => {
+      const callback = vi.fn();
+
+      const { result } = renderHook(() => {
+        if (target)
+          return useHover(target, callback) as unknown as {
+            ref: StateRef<HTMLDivElement>;
+          } & UseHoverReturn;
+        return useHover<HTMLDivElement>(callback);
+      });
+
+      if (!target) act(() => result.current.ref(element));
+
+      act(() => element.dispatchEvent(new Event('mouseenter')));
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('Should call onEntry and onLeave callbacks', () => {
+      const onEntry = vi.fn();
+      const onLeave = vi.fn();
+
+      const { result } = renderHook(() => {
+        if (target)
+          return useHover(target, { onEntry, onLeave }) as unknown as {
+            ref: StateRef<HTMLDivElement>;
+          } & UseHoverReturn;
+        return useHover<HTMLDivElement>({ onEntry, onLeave });
+      });
+
+      if (!target) act(() => result.current.ref(element));
+
+      act(() => element.dispatchEvent(new Event('mouseenter')));
+
+      expect(onEntry).toHaveBeenCalledTimes(1);
+      expect(onLeave).not.toHaveBeenCalled();
+
+      act(() => element.dispatchEvent(new Event('mouseleave')));
+
+      expect(onEntry).toHaveBeenCalledTimes(1);
+      expect(onLeave).toHaveBeenCalledTimes(1);
+    });
+  });
+});

packages/core/src/hooks/useHover/useHover.ts

@@ -16,6 +16,10 @@ export interface UseHoverOptions {
   onLeave?: (event: Event) => void;
 }
 
+export interface UseHoverReturn {
+  value: boolean;
+}
+
 export interface UseHover {
   (target: HookTarget, callback?: (event: Event) => void): boolean;
 
@@ -24,9 +28,12 @@ export interface UseHover {
   <Target extends Element>(
     callback?: (event: Event) => void,
     target?: never
-  ): [StateRef<Target>, boolean];
+  ): { ref: StateRef<Target> } & UseHoverReturn;
 
-  <Target extends Element>(options?: UseHoverOptions, target?: never): [StateRef<Target>, boolean];
+  <Target extends Element>(
+    options?: UseHoverOptions,
+    target?: never
+  ): { ref: StateRef<Target> } & UseHoverReturn;
 }
 
 /**
@@ -54,7 +61,7 @@ export interface UseHover {
  * @overload
  * @template Target The target element
  * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter
- * @returns {UseHoverReturn<Target>} The state of the hover
+ * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover
  *
  * @example
  * const [ref, hovering] = useHover(() => console.log('callback'));
@@ -63,7 +70,7 @@ export interface UseHover {
  * @template Target The target element
  * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter
  * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave
- * @returns {UseHoverReturn<Target>} The state of the hover
+ * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover
  *
  * @example
  * const [ref, hovering] = useHover(options);
@@ -112,5 +119,8 @@ export const useHover = ((...params: any[]) => {
   }, [target, internalRef.state]);
 
   if (target) return hovering;
-  return [internalRef, hovering] as const;
+  return {
+    ref: internalRef,
+    value: hovering
+  } as const;
 }) as UseHover;