diff --git a/src/hooks/__tests__/useFullScreen.spec.tsx b/src/hooks/__tests__/useFullScreen.spec.tsx new file mode 100644 index 00000000..5f1e2e55 --- /dev/null +++ b/src/hooks/__tests__/useFullScreen.spec.tsx @@ -0,0 +1,48 @@ +import { act, renderHook } from '@testing-library/react'; +import { useFullScreen } from '../custom-hooks'; + +describe('useFullScreen', () => { + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('should add and remove 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('should call 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('should clean up event listeners on unmount', () => { + const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener'); + const { unmount } = renderHook(() => useFullScreen()); + + unmount(); + + expect(removeEventListenerSpy).toHaveBeenCalledTimes(4); + }); +}); diff --git a/src/hooks/custom-hooks/useFullScreen.ts b/src/hooks/custom-hooks/useFullScreen.ts index bf50da23..639e57e5 100644 --- a/src/hooks/custom-hooks/useFullScreen.ts +++ b/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) => { - event.stopPropagation(); + const toggleFullScreenMode = (event?: MouseEvent) => { + 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'])();