main 🧊 rework test for server, rework use ref state

Author: debabin

src/hooks/useBattery/useBattery.test.ts

@@ -1,23 +1,25 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 
+import { createTrigger, renderHookServer } from '@/tests';
+
 import { useBattery } from './useBattery';
 
-const events: Record<string, () => void> = {};
+const trigger = createTrigger<string, () => void>();
 const mockBatteryManager = {
   charging: true,
   chargingTime: 0,
   dischargingTime: 5,
   level: 1,
   addEventListener: (type: string, callback: () => void) => {
-    events[type] = callback;
+    trigger.add(type, callback);
   },
   removeEventListener: (type: string, callback: () => void) => {
-    if (events[type] === callback) {
-      delete events[type];
+    if (trigger.get(type) === callback) {
+      trigger.delete(type);
     }
   },
   dispatchEvent: (event: Event) => {
-    events[event.type]?.();
+    trigger.callback(event.type);
     return true;
   }
 };
@@ -59,24 +61,37 @@ it('Should use battery', async () => {
   );
 });
 
-it('Should correct return for unsupported', async () => {
+it('Should use battery on server side', async () => {
+  const { result } = renderHookServer(useBattery);
+
+  expect(result.current).toEqual({
+    supported: false,
+    value: {
+      charging: false,
+      chargingTime: 0,
+      dischargingTime: 0,
+      level: 0,
+      loading: true
+    }
+  });
+});
+
+it('Should use battery for unsupported', async () => {
   Object.assign(navigator, {
     getBattery: undefined
   });
   const { result } = renderHook(useBattery);
 
-  await waitFor(() =>
-    expect(result.current).toEqual({
-      supported: false,
-      value: {
-        charging: false,
-        chargingTime: 0,
-        dischargingTime: 0,
-        level: 0,
-        loading: false
-      }
-    })
-  );
+  expect(result.current).toEqual({
+    supported: false,
+    value: {
+      charging: false,
+      chargingTime: 0,
+      dischargingTime: 0,
+      level: 0,
+      loading: false
+    }
+  });
 });
 
 it('Should handle levelchange event', async () => {

src/hooks/useBattery/useBattery.ts

@@ -76,10 +76,10 @@ export const useBattery = (): UseBatteryStateReturn => {
       battery = batteryManager;
       onChange();
 
-      batteryManager.addEventListener('levelchange', onChange);
-      batteryManager.addEventListener('chargingchange', onChange);
-      batteryManager.addEventListener('chargingtimechange', onChange);
-      batteryManager.addEventListener('dischargingtimechange', onChange);
+      battery.addEventListener('levelchange', onChange);
+      battery.addEventListener('chargingchange', onChange);
+      battery.addEventListener('chargingtimechange', onChange);
+      battery.addEventListener('dischargingtimechange', onChange);
     });
 
     return () => {

src/hooks/useDevicePixelRatio/useDevicePixelRatio.test.ts

@@ -4,7 +4,7 @@ import { createTrigger } from '@/tests';
 
 import { useDevicePixelRatio } from './useDevicePixelRatio';
 
-const trigger = createTrigger<() => void, string>();
+const trigger = createTrigger<string, () => void>();
 const mockMediaQueryListAddEventListener = vi.fn();
 const mockMediaQueryListRemoveEventListener = vi.fn();
 const MockMediaQueryList = class MediaQueryList {

src/hooks/useDevicePixelRatio/useDevicePixelRatio.ts

@@ -29,12 +29,12 @@ export const useDevicePixelRatio = (): UseDevicePixelRatioReturn => {
   useEffect(() => {
     if (!supported) return;
 
-    const updatePixelRatio = () => setRatio(window.devicePixelRatio);
+    const onChange = () => setRatio(window.devicePixelRatio);
 
     const media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-    media.addEventListener('change', updatePixelRatio);
+    media.addEventListener('change', onChange);
     return () => {
-      media.removeEventListener('change', updatePixelRatio);
+      media.removeEventListener('change', onChange);
     };
   }, [ratio]);
 

src/hooks/useDocumentVisibility/useDocumentVisibility.test.ts

@@ -13,7 +13,6 @@ it('Should use document visibility', () => {
 
 it('Should use document visibility on server', () => {
   const { result } = renderHookServer(useDocumentVisibility);
-
   expect(result.current).toBe('hidden');
 });
 

src/hooks/useElementSize/useElementSize.test.ts

@@ -1,14 +1,14 @@
 import { act, renderHook } from '@testing-library/react';
 
-import { createTrigger } from '@/tests';
+import { createTrigger, renderHookServer } from '@/tests';
 import { getElement } from '@/utils/helpers';
 
 import type { StateRef } from '../useRefState/useRefState';
 import type { UseElementSizeReturn } from './useElementSize';
 
 import { useElementSize } from './useElementSize';
 
-const trigger = createTrigger<ResizeObserverCallback, Element>();
+const trigger = createTrigger<Element, ResizeObserverCallback>();
 const mockGetBoundingClientRect = vi.spyOn(Element.prototype, 'getBoundingClientRect');
 const mockResizeObserverDisconnect = vi.fn();
 const mockResizeObserverObserve = vi.fn();
@@ -61,6 +61,19 @@ targets.forEach((target) => {
       if (!target) expect(result.current.ref).toBeTypeOf('function');
     });
 
+    it('Should use element size on server side', () => {
+      const { result } = renderHookServer(() => {
+        if (target)
+          return useElementSize(target) as {
+            ref: StateRef<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 initial value', () => {
       mockGetBoundingClientRect.mockImplementation(() => new DOMRect(0, 0, 200, 200));
       const { result } = renderHook(() => {

src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts

@@ -1,7 +1,5 @@
 import { useEffect, useLayoutEffect } from 'react';
 
-import { isClient } from '@/utils/helpers';
-
 /**
  * @name useIsomorphicLayoutEffect
  * @description - Hook conditionally selects either `useLayoutEffect` or `useEffect` based on the environment
@@ -10,4 +8,5 @@ import { isClient } from '@/utils/helpers';
  * @example
  * useIsomorphicLayoutEffect(() => console.log('effect'), [])
  */
-export const useIsomorphicLayoutEffect = isClient ? useLayoutEffect : useEffect;
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

src/hooks/useNetwork/useNetwork.test.ts

@@ -1,29 +1,28 @@
 import { act, renderHook } from '@testing-library/react';
 
-// import { renderHookServer } from '@/tests';
+import { renderHookServer } from '@/tests';
+
 import { useNetwork } from './useNetwork';
 
 const mockNavigatorOnline = vi.spyOn(navigator, 'onLine', 'get');
 
 it('Should use network', () => {
   const { result } = renderHook(useNetwork);
-
   expect(result.current.online).toBeTruthy();
 });
 
-// it('Should use network on server', () => {
-//   const { result } = renderHookServer(useNetwork);
-
-//   expect(result.current).toEqual({
-//     online: false,
-//     type: undefined,
-//     effectiveType: undefined,
-//     saveData: false,
-//     downlink: 0,
-//     downlinkMax: 0,
-//     rtt: 0
-//   });
-// });
+it('Should use network on server side', () => {
+  const { result } = renderHookServer(useNetwork);
+  expect(result.current).toEqual({
+    online: false,
+    type: undefined,
+    effectiveType: undefined,
+    saveData: false,
+    downlink: 0,
+    downlinkMax: 0,
+    rtt: 0
+  });
+});
 
 it('Should change state upon network events', () => {
   mockNavigatorOnline.mockReturnValue(true);

src/hooks/useNetwork/useNetwork.ts

@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
 
-import { isClient } from '@/utils/helpers';
-
 export interface Connection extends EventTarget {
   readonly downlink: number;
   readonly downlinkMax: number;
@@ -67,7 +65,7 @@ export const getConnection = () =>
  */
 export const useNetwork = (): UseNetworkReturn => {
   const [value, setValue] = useState(() => {
-    if (!isClient) {
+    if (typeof navigator === 'undefined') {
       return {
         online: false,
         type: undefined,

src/hooks/useOnline/useOnline.test.ts

@@ -12,9 +12,8 @@ it('Should use online', () => {
   expect(result.current).toBeTruthy();
 });
 
-it('Should use network on server', () => {
+it('Should use network on server side', () => {
   const { result } = renderHookServer(useOnline);
-
   expect(result.current).toBeFalsy();
 });