Niloofar/ useFullScreen test cases

src/hooks/__tests__/useFullScreen.spec.tsx

@@ -0,0 +1,48 @@
+import { act, renderHook } from '@testing-library/react';
+import { useFullScreen } from '../custom-hooks';
+
+describe('useFullScreen hook', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it('adds and removes fullscreen event listeners', () => {
+        const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+        const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
+
+        const { unmount } = renderHook(() => useFullScreen());
+
+        expect(addEventListenerSpy).toHaveBeenCalledWith('fullscreenchange', expect.any(Function), false);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('webkitfullscreenchange', expect.any(Function), false);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mozfullscreenchange', expect.any(Function), false);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('MSFullscreenChange', expect.any(Function), false);
+
+        unmount();
+
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('fullscreenchange', expect.any(Function), false);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('webkitfullscreenchange', expect.any(Function), false);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('mozfullscreenchange', expect.any(Function), false);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('MSFullscreenChange', expect.any(Function), false);
+    });
+
+    it('calls requestFullscreen when trying to enter fullscreen', () => {
+        const requestFullscreenMock = jest.fn();
+        document.documentElement.requestFullscreen = requestFullscreenMock;
+        const { result } = renderHook(() => useFullScreen());
+
+        act(() => {
+            result.current.toggleFullScreenMode();
+        });
+
+        expect(requestFullscreenMock).toHaveBeenCalled();
+    });
+
+    it('cleans up event listeners on unmount', () => {
+        const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
+        const { unmount } = renderHook(() => useFullScreen());
+
+        unmount();
+
+        expect(removeEventListenerSpy).toHaveBeenCalledTimes(4);
+    });
+});

src/hooks/custom-hooks/useFullScreen.ts

@@ -20,13 +20,19 @@ const useFullScreen = () => {
         screenChange.forEach(event => {
             document.addEventListener(event, onFullScreen, false);
         });
+
+        return () => {
+            screenChange.forEach(event => {
+                document.removeEventListener(event, onFullScreen, false);
+            });
+        };
     }, [onFullScreen, screenChange]);
 
-    const toggleFullScreenMode = (event: MouseEvent<HTMLButtonElement>) => {
-        event.stopPropagation();
+    const toggleFullScreenMode = (event?: MouseEvent<HTMLButtonElement>) => {
+        event?.stopPropagation();
 
-        const exitFullScreen = exit.find(element => document[element as keyof Document]);
-        const requestFullScreen = request.find(element => document.documentElement[element as keyof HTMLElement]);
+        const exitFullScreen = exit.find(method => document[method as keyof Document]);
+        const requestFullScreen = request.find(method => document.documentElement[method as keyof HTMLElement]);
 
         if (isInFullScreenMode && exitFullScreen) {
             (document[exitFullScreen as keyof Document] as Document['exitFullscreen'])();