From d000c5a1928c70e5e82a9b2a009d5a3cd6fa21fc Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com>
Date: Wed, 19 Jun 2024 14:57:28 +0800
Subject: [PATCH 1/2] Niloofar/ Added tests for MobileMenu component (#141)

* test: added test cases for mobile menu component

* fix: review comments
---
 .../MobileMenu/__tests__/MobileMenu.spec.tsx  | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx

diff --git a/src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx b/src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx
new file mode 100644
index 00000000..787a3795
--- /dev/null
+++ b/src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx
@@ -0,0 +1,74 @@
+import { BrowserRouter } from 'react-router-dom';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { useModalManager } from '@/hooks';
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import MobileMenu from '../MobileMenu';
+
+jest.mock('@/hooks', () => ({
+    useModalManager: jest.fn().mockReturnValue({
+        hideModal: jest.fn(),
+        isModalOpenFor: jest.fn().mockReturnValue(false),
+        showModal: jest.fn(),
+    }),
+    useNetworkStatus: jest.fn().mockReturnValue('online'),
+    useSyncedTime: jest.fn(),
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(),
+}));
+
+jest.mock('@deriv-com/api-hooks', () => ({
+    useAuthData: jest.fn().mockReturnValue({
+        isAuthorized: true,
+    }),
+}));
+
+jest.mock('@deriv-com/translations', () => ({
+    useTranslations: jest.fn().mockReturnValue({
+        currentLang: 'EN',
+        localize: jest.fn(text => text),
+    }),
+}));
+
+const MobileMenuComponent = () => (
+    <BrowserRouter>
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
+            <MobileMenu />
+        </QueryParamProvider>
+    </BrowserRouter>
+);
+
+describe('MobileMenu component', () => {
+    it('should not render when isDesktop is true', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
+        render(<MobileMenuComponent />);
+        expect(screen.queryByText('Menu')).not.toBeInTheDocument();
+    });
+
+    it('should render toggle button and handle click', async () => {
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false });
+        render(<MobileMenuComponent />);
+        expect(screen.queryByText('Menu')).not.toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button'));
+        expect(screen.getByText('Menu')).toBeInTheDocument();
+    });
+
+    it('should open the language settings', async () => {
+        (useDevice as jest.Mock).mockReturnValue({ isDesktop: false });
+        const { isModalOpenFor, showModal } = useModalManager();
+
+        render(<MobileMenuComponent />);
+        await userEvent.click(screen.getByRole('button'));
+        expect(screen.getByText('EN')).toBeInTheDocument();
+
+        await userEvent.click(screen.getByText('EN'));
+
+        expect(showModal).toHaveBeenCalledWith('MobileLanguagesDrawer');
+        expect(isModalOpenFor).toHaveBeenCalledWith('MobileLanguagesDrawer');
+    });
+});

From 2bff9b751623f2677eb087aad7b3db2a7e07bf1f Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com>
Date: Wed, 19 Jun 2024 15:04:59 +0800
Subject: [PATCH 2/2] Niloofar/ useFullScreen test cases (#144)

* test: added test cases for usefullscreen

* fix: review comments

* fix: review comments
---
 src/hooks/__tests__/useFullScreen.spec.tsx | 48 ++++++++++++++++++++++
 src/hooks/custom-hooks/useFullScreen.ts    | 14 +++++--
 2 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/__tests__/useFullScreen.spec.tsx

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<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'])();