main 🧊 rework test for use orientation

Author: debabin

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

@@ -16,24 +16,22 @@ export const useOrientation = () => {
   const supported =
     typeof window !== 'undefined' && 'screen' in window && 'orientation' in window.screen;
   const orientation = supported ? window.screen.orientation : {};
-  const [value, setValue] = useState(() => {
-    return {
-      angle: orientation?.angle ?? 0,
-      orientationType: orientation?.type
-    };
+  const [value, setValue] = useState({
+    angle: orientation.angle ?? 0,
+    orientationType: orientation.type
   });
   useEffect(() => {
     if (!supported) return;
     const onOrientationChange = () =>
       setValue({
-        angle: orientation.angle,
-        orientationType: orientation.type
+        angle: window.screen.orientation.angle,
+        orientationType: window.screen.orientation.type
       });
     window.addEventListener('orientationchange', onOrientationChange);
     return () => {
       window.removeEventListener('orientationchange', onOrientationChange);
     };
-  });
+  }, []);
   const lock = (type) => {
     if (supported && typeof orientation.lock === 'function') return orientation.lock(type);
   };

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

@@ -6,6 +6,8 @@ import { useDocumentEvent } from './useDocumentEvent';
 it('Should use document event', () => {
   const listener = vi.fn();
   renderHook(() => useDocumentEvent('click', listener));
+
   document.dispatchEvent(new Event('click'));
+
   expect(listener).toHaveBeenCalled();
 });

packages/core/src/hooks/useLockScroll/useLockScroll.ts

@@ -68,7 +68,6 @@ export const useLockScroll = ((...params: any[]): any => {
   const [locked, setLocked] = useState(enabled);
 
   const internalRef = useRefState<Element>();
-
   const elementRef = useRef<Element>(null);
 
   useIsomorphicLayoutEffect(() => {

packages/core/src/hooks/useOrientation/useOrientation.test.tsx

@@ -1,10 +1,11 @@
 import { act, renderHook } from '@testing-library/react';
 
+import { renderHookServer } from '@/tests';
+
 import type { OrientationLockType } from './useOrientation';
 
 import { useOrientation } from './useOrientation';
 
-// Create mocks for ScreenOrientation API
 interface MockScreenOrientation {
   angle: number;
   lock: ReturnType<typeof vi.fn>;
@@ -22,32 +23,18 @@ const createMockScreenOrientation = (
   unlock: vi.fn()
 });
 
-// Mock for window.screen.orientation
-let mockOrientation: MockScreenOrientation;
-
 beforeEach(() => {
-  // Reset mocks before each test
-  mockOrientation = createMockScreenOrientation();
-
-  // Create complete mock for window.screen object
   Object.defineProperty(window, 'screen', {
-    value: {
-      orientation: mockOrientation
-    },
+    value: { orientation: createMockScreenOrientation() },
     writable: true,
     configurable: true
   });
-
-  vi.clearAllMocks();
 });
 
-afterEach(() => {
-  // Clear all event listeners
-  window.removeEventListener('orientationchange', expect.any(Function));
-});
+afterEach(vi.clearAllMocks);
 
-it('Should return correct initial state when orientation API is supported', () => {
-  const { result } = renderHook(() => useOrientation());
+it('Should use orientation', () => {
+  const { result } = renderHook(useOrientation);
 
   expect(result.current.supported).toBe(true);
   expect(result.current.value).toEqual({
@@ -58,15 +45,26 @@ it('Should return correct initial state when orientation API is supported', () =
   expect(result.current.unlock).toBeTypeOf('function');
 });
 
-it('Should return correct initial state when orientation API is not supported', () => {
-  // Remove orientation API support
+it('Should use orientation on server side', () => {
+  const { result } = renderHookServer(useOrientation);
+
+  expect(result.current.supported).toBe(false);
+  expect(result.current.value).toEqual({
+    angle: 0,
+    orientationType: undefined
+  });
+  expect(result.current.lock).toBeTypeOf('function');
+  expect(result.current.unlock).toBeTypeOf('function');
+});
+
+it('Should use orientation for unsupported', () => {
   Object.defineProperty(window, 'screen', {
     value: {},
     writable: true,
     configurable: true
   });
 
-  const { result } = renderHook(() => useOrientation());
+  const { result } = renderHook(useOrientation);
 
   expect(result.current.supported).toBe(false);
   expect(result.current.value).toEqual({
@@ -78,10 +76,15 @@ it('Should return correct initial state when orientation API is not supported',
 });
 
 it('Should handle different initial orientation values', () => {
-  mockOrientation.angle = 90;
-  mockOrientation.type = 'landscape-primary';
+  Object.defineProperty(window, 'screen', {
+    value: {
+      orientation: createMockScreenOrientation(90, 'landscape-primary')
+    },
+    writable: true,
+    configurable: true
+  });
 
-  const { result } = renderHook(() => useOrientation());
+  const { result } = renderHook(useOrientation);
 
   expect(result.current.value).toEqual({
     angle: 90,
@@ -90,188 +93,46 @@ it('Should handle different initial orientation values', () => {
 });
 
 it('Should update state when orientationchange event is fired', () => {
-  const { result } = renderHook(() => useOrientation());
+  const { result } = renderHook(useOrientation);
 
-  // Initial state
   expect(result.current.value).toEqual({
     angle: 0,
     orientationType: 'portrait-primary'
   });
 
-  // Simulate orientation change
-  act(() => {
-    mockOrientation.angle = 90;
-    mockOrientation.type = 'landscape-primary';
-    window.dispatchEvent(new Event('orientationchange'));
-  });
-
-  expect(result.current.value).toEqual({
-    angle: 90,
-    orientationType: 'landscape-primary'
-  });
-});
-
-it('Should handle multiple orientation changes', () => {
-  const { result } = renderHook(() => useOrientation());
-
-  // First change
   act(() => {
-    mockOrientation.angle = 90;
-    mockOrientation.type = 'landscape-primary';
+    Object.defineProperty(window.screen, 'orientation', {
+      value: createMockScreenOrientation(90, 'landscape-primary'),
+      writable: true,
+      configurable: true
+    });
     window.dispatchEvent(new Event('orientationchange'));
   });
 
   expect(result.current.value).toEqual({
     angle: 90,
     orientationType: 'landscape-primary'
   });
-
-  // Second change
-  act(() => {
-    mockOrientation.angle = 270;
-    mockOrientation.type = 'landscape-secondary';
-    window.dispatchEvent(new Event('orientationchange'));
-  });
-
-  expect(result.current.value).toEqual({
-    angle: 270,
-    orientationType: 'landscape-secondary'
-  });
-});
-
-it('Should not add event listener when orientation API is not supported', () => {
-  const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
-
-  // Remove orientation API support
-  Object.defineProperty(window, 'screen', {
-    value: {},
-    writable: true,
-    configurable: true
-  });
-
-  renderHook(() => useOrientation());
-
-  expect(addEventListenerSpy).not.toHaveBeenCalledWith('orientationchange', expect.any(Function));
 });
 
 it('Should call lock function when lock method is called', () => {
-  const { result } = renderHook(() => useOrientation());
+  const { result } = renderHook(useOrientation);
 
-  act(() => {
-    result.current.lock('landscape-primary');
-  });
+  act(() => result.current.lock('landscape-primary'));
 
-  expect(mockOrientation.lock).toHaveBeenCalledWith('landscape-primary');
+  expect(window.screen.orientation.lock).toHaveBeenCalledWith('landscape-primary');
 });
 
 it('Should call unlock function when unlock method is called', () => {
-  const { result } = renderHook(() => useOrientation());
+  const { result } = renderHook(useOrientation);
 
-  act(() => {
-    result.current.unlock();
-  });
+  act(result.current.unlock);
 
-  expect(mockOrientation.unlock).toHaveBeenCalled();
-});
-
-it('Should not call lock when orientation API is not supported', () => {
-  // Remove orientation API support
-  Object.defineProperty(window, 'screen', {
-    value: {},
-    writable: true,
-    configurable: true
-  });
-
-  const { result } = renderHook(() => useOrientation());
-
-  act(() => {
-    result.current.lock('landscape-primary');
-  });
-
-  // lock should not be called since API is not supported
-  expect(mockOrientation.lock).not.toHaveBeenCalled();
-});
-
-it('Should not call unlock when orientation API is not supported', () => {
-  // Remove orientation API support
-  Object.defineProperty(window, 'screen', {
-    value: {},
-    writable: true,
-    configurable: true
-  });
-
-  const { result } = renderHook(() => useOrientation());
-
-  act(() => {
-    result.current.unlock();
-  });
-
-  // unlock should not be called since API is not supported
-  expect(mockOrientation.unlock).not.toHaveBeenCalled();
-});
-
-it('Should not call lock when lock function is not available', () => {
-  // Create orientation without lock method
-  Object.defineProperty(window, 'screen', {
-    value: {
-      orientation: {
-        angle: 0,
-        type: 'portrait-primary'
-        // lock method is missing
-      }
-    },
-    writable: true,
-    configurable: true
-  });
-
-  const { result } = renderHook(() => useOrientation());
-
-  expect(() => {
-    act(() => {
-      result.current.lock('landscape-primary');
-    });
-  }).not.toThrow();
-
-  expect(result.current.supported).toBe(true);
-});
-
-it('Should not call unlock when unlock function is not available', () => {
-  // Create orientation without unlock method
-  Object.defineProperty(window, 'screen', {
-    value: {
-      orientation: {
-        angle: 0,
-        type: 'portrait-primary'
-        // unlock method is missing
-      }
-    },
-    writable: true,
-    configurable: true
-  });
-
-  const { result } = renderHook(() => useOrientation());
-
-  expect(() => {
-    act(() => {
-      result.current.unlock();
-    });
-  }).not.toThrow();
-
-  expect(result.current.supported).toBe(true);
-});
-
-it('Should clean up event listener on unmount', () => {
-  const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
-
-  const { unmount } = renderHook(() => useOrientation());
-
-  unmount();
-
-  expect(removeEventListenerSpy).toHaveBeenCalledWith('orientationchange', expect.any(Function));
+  expect(window.screen.orientation.unlock).toHaveBeenCalled();
 });
 
 it('Should handle all orientation lock types', () => {
-  const { result } = renderHook(() => useOrientation());
+  const { result } = renderHook(useOrientation);
 
   const orientationTypes: OrientationLockType[] = [
     'any',
@@ -285,12 +146,20 @@ it('Should handle all orientation lock types', () => {
   ];
 
   orientationTypes.forEach((orientation) => {
-    act(() => {
-      result.current.lock(orientation);
-    });
+    act(() => result.current.lock(orientation));
 
-    expect(mockOrientation.lock).toHaveBeenCalledWith(orientation);
+    expect(window.screen.orientation.lock).toHaveBeenCalledWith(orientation);
   });
 
-  expect(mockOrientation.lock).toHaveBeenCalledTimes(orientationTypes.length);
+  expect(window.screen.orientation.lock).toHaveBeenCalledTimes(orientationTypes.length);
+});
+
+it('Should cleanup on unmount', () => {
+  const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+  const { unmount } = renderHook(useOrientation);
+
+  unmount();
+
+  expect(removeEventListenerSpy).toHaveBeenCalledWith('orientationchange', expect.any(Function));
 });