main 🧊 add use element size test

Author: babin

src/hooks/useAsync/useAsync.ts

@@ -20,15 +20,15 @@ export interface UseAsyncReturn<Data> {
  * @category Utilities
  *
  * @param {() => Promise<Data>} callback - The async callback
- * @param {DependencyList} [deps] - The dependencies of the callback
+ * @param {DependencyList} deps - The dependencies of the callback
  * @returns {UseAsyncReturn<Data>} - The state of the async callback
  *
  * @example
  * const { data, isLoading, isError, error } = useAsync(() => fetch('url'), [deps]);
  */
 export const useAsync = <Data>(
   callback: () => Promise<Data>,
-  deps?: DependencyList
+  deps: DependencyList
 ): UseAsyncReturn<Data> => {
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);

src/hooks/useBoolean/useBoolean.test.ts

@@ -7,7 +7,7 @@ it('Should use counter', () => {
   const [on, toggle] = result.current;
 
   expect(on).toBeFalsy();
-  expect(typeof toggle).toBe('function');
+  expect(toggle).toBeTypeOf('function');
 });
 
 it('Should set initial value', () => {

src/hooks/useClickOutside/useClickOutside.test.ts

@@ -5,7 +5,7 @@ import { useClickOutside } from './useClickOutside';
 it('Should use click outside', () => {
   const { result } = renderHook(() => useClickOutside(vi.fn()));
 
-  expect(typeof result.current).toBe('function');
+  expect(result.current).toBeTypeOf('function');
 });
 
 it('Should call callback when ref connected to the document', () => {

src/hooks/useClipboard/useClipboard.test.ts

@@ -24,7 +24,7 @@ it('Should use copy to clipboard', () => {
 
   expect(result.current.value).toBeNull();
   expect(result.current.supported).toBeTruthy();
-  expect(typeof result.current.copy).toBe('function');
+  expect(result.current.copy).toBeTypeOf('function');
 });
 
 it('Should copy value to clipboard', async () => {

src/hooks/useCounter/useCounter.test.ts

@@ -6,10 +6,10 @@ it('Should use counter', () => {
   const { result } = renderHook(useCounter);
 
   expect(result.current.value).toBe(0);
-  expect(typeof result.current.inc).toBe('function');
-  expect(typeof result.current.dec).toBe('function');
-  expect(typeof result.current.reset).toBe('function');
-  expect(typeof result.current.set).toBe('function');
+  expect(result.current.inc).toBeTypeOf('function');
+  expect(result.current.dec).toBeTypeOf('function');
+  expect(result.current.reset).toBeTypeOf('function');
+  expect(result.current.set).toBeTypeOf('function');
 });
 
 it('Should set initial value', () => {

src/hooks/useDefault/useDefault.test.ts

@@ -7,7 +7,7 @@ it('Should use default', () => {
   const [state, setState] = result.current;
 
   expect(state).toBe(5);
-  expect(typeof setState).toBe('function');
+  expect(setState).toBeTypeOf('function');
 });
 
 it('Should return initial value', () => {

src/hooks/useDisclosure/useDisclosure.test.ts

@@ -6,9 +6,9 @@ it('Should use counter', () => {
   const { result } = renderHook(useDisclosure);
 
   expect(result.current.opened).toBeFalsy();
-  expect(typeof result.current.open).toBe('function');
-  expect(typeof result.current.close).toBe('function');
-  expect(typeof result.current.toggle).toBe('function');
+  expect(result.current.open).toBeTypeOf('function');
+  expect(result.current.close).toBeTypeOf('function');
+  expect(result.current.toggle).toBeTypeOf('function');
 });
 
 it('Should set initial value', () => {

src/hooks/useDocumentTitle/useDocumentTitle.test.ts

@@ -11,7 +11,7 @@ it('Should use document title', () => {
   const [title, setTitle] = result.current;
 
   expect(title).toBe('default title');
-  expect(typeof setTitle).toBe('function');
+  expect(setTitle).toBeTypeOf('function');
 });
 
 it('Should be set initial title', () => {

src/hooks/useElementSize/useElementSize.demo.tsx

@@ -8,6 +8,7 @@ const Demo = () => {
       <p>Resize the box to see changes</p>
       <textarea
         ref={elementSize.ref}
+        className='h-[200px] w-[200px]'
         style={{ resize: 'both' }}
         value={`width: ${elementSize.value.width}\nheight: ${elementSize.value.height}`}
       />

src/hooks/useElementSize/useElementSize.test.ts

@@ -0,0 +1,129 @@
+import { act, renderHook } from '@testing-library/react';
+
+import type { HookRef } from '@/utils/helpers';
+
+import { getElement } from '@/utils/helpers';
+
+import type { UseElementSizeReturn } from './useElementSize';
+
+import { useElementSize } from './useElementSize';
+
+export function createTrigger<Callback extends (...args: any[]) => void>() {
+  const observers = new Map();
+  return {
+    callback(target: Element, ...args: Partial<Parameters<Callback>>) {
+      const observe = observers.get(target);
+      observe(...args);
+    },
+    add(element: Element, callback: Callback) {
+      observers.set(element, callback);
+    },
+    delete(element: Element) {
+      observers.delete(element);
+    }
+  };
+}
+
+const trigger = createTrigger<ResizeObserverCallback>();
+const mockResizeObserverDisconnect = vi.fn();
+const mockResizeObserverObserve = vi.fn();
+const mockResizeObserver = class ResizeObserver {
+  callback: ResizeObserverCallback;
+  element: Element | undefined;
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+  }
+
+  observe = (element: Element) => {
+    trigger.add(element, this.callback);
+    mockResizeObserverObserve();
+  };
+  disconnect = () => {
+    if (this.element) trigger.delete(this.element);
+    mockResizeObserverDisconnect();
+  };
+  unobserve = vi.fn();
+};
+globalThis.ResizeObserver = mockResizeObserver;
+
+const targets = [
+  undefined,
+  '#target',
+  document.getElementById('target'),
+  { current: document.getElementById('target') }
+];
+
+targets.forEach((target) => {
+  beforeEach(() => {
+    mockResizeObserverObserve.mockClear();
+    mockResizeObserverDisconnect.mockClear();
+  });
+
+  describe(`${target}`, () => {
+    it('Should use element size', () => {
+      const { result } = renderHook(() => {
+        if (target)
+          return useElementSize(target) as {
+            ref: HookRef<HTMLDivElement>;
+          } & UseElementSizeReturn;
+        return useElementSize<HTMLDivElement>();
+      });
+      expect(result.current.value).toStrictEqual({ width: 0, height: 0 });
+      if (!target) expect(result.current.ref).toBeTypeOf('function');
+    });
+
+    it('Should set intitial value', () => {
+      const { result } = renderHook(() => {
+        if (target) return useElementSize(target, { width: 200, height: 200 });
+        return useElementSize<HTMLDivElement>({ width: 200, height: 200 });
+      });
+
+      expect(result.current.value).toStrictEqual({ width: 200, height: 200 });
+    });
+
+    it('Should change value after resize', () => {
+      const { result } = renderHook(() => {
+        if (target)
+          return useElementSize(target) as {
+            ref: HookRef<HTMLDivElement>;
+          } & UseElementSizeReturn;
+        return useElementSize<HTMLDivElement>();
+      });
+
+      expect(result.current.value).toStrictEqual({ width: 0, height: 0 });
+
+      if (!target)
+        act(() => result.current.ref(document.getElementById('target')! as HTMLDivElement));
+
+      act(() => {
+        const element = (target ? getElement(target) : result.current.ref.current) as Element;
+        if (!element) return;
+
+        trigger.callback(element, [
+          { contentRect: { width: 200, height: 200 } }
+        ] as unknown as ResizeObserverEntry[]);
+      });
+
+      expect(mockResizeObserverObserve).toHaveBeenCalledTimes(1);
+      expect(result.current.value).toStrictEqual({ width: 200, height: 200 });
+    });
+
+    it('Should disconnect on onmount', () => {
+      const { result, unmount } = renderHook(() => {
+        if (target)
+          return useElementSize(target) as {
+            ref: HookRef<HTMLDivElement>;
+          } & UseElementSizeReturn;
+        return useElementSize<HTMLDivElement>();
+      });
+
+      if (!target)
+        act(() => result.current.ref(document.getElementById('target')! as HTMLDivElement));
+
+      unmount();
+
+      expect(mockResizeObserverDisconnect).toHaveBeenCalledTimes(1);
+    });
+  });
+});