Merge pull request #136 from niloofar-deriv/useFullScreenTests

Niloofar/ Added test cases for Footer custom hooks

Author: matin-deriv

src/components/AppHeader/MobileMenu/index.tsx src/components/AppHeader/MobileMenu/MobileMenu.tsx

@@ -10,7 +10,7 @@ import { MenuContent } from './MenuContent';
 import { MenuHeader } from './MenuHeader';
 import { ToggleButton } from './ToggleButton';
 
-export const MobileMenu = () => {
+const MobileMenu = () => {
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const { currentLang = 'EN', localize, switchLanguage } = useTranslations();
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
@@ -62,3 +62,5 @@ export const MobileMenu = () => {
         </>
     );
 };
+
+export default MobileMenu;

src/components/AppHeader/MobileMenu/index.ts

@@ -0,0 +1 @@
+export { default as MobileMenu } from './MobileMenu';

src/hooks/__tests__/useNavigatorOnline.spec.tsx

@@ -0,0 +1,44 @@
+import { act, renderHook } from '@testing-library/react';
+import { useNavigatorOnline } from '../custom-hooks';
+
+describe('useNavigatorOnline', () => {
+    it('initializes as true when browser is online', () => {
+        const { result } = renderHook(() => useNavigatorOnline());
+        expect(result.current).toBe(true);
+    });
+
+    it('sets status to false when offline event is triggered', () => {
+        const { result } = renderHook(() => useNavigatorOnline());
+
+        act(() => {
+            window.dispatchEvent(new Event('offline'));
+        });
+
+        expect(result.current).toBe(false);
+    });
+
+    it('sets status to true when online event is triggered', () => {
+        Object.defineProperty(navigator, 'onLine', {
+            value: false,
+            writable: true,
+        });
+
+        const { result } = renderHook(() => useNavigatorOnline());
+
+        act(() => {
+            window.dispatchEvent(new Event('online'));
+        });
+
+        expect(result.current).toBe(true);
+    });
+
+    it('removes event listeners on unmount', () => {
+        const addSpy = jest.spyOn(window, 'addEventListener');
+        const removeSpy = jest.spyOn(window, 'removeEventListener');
+        const { unmount } = renderHook(() => useNavigatorOnline());
+
+        expect(addSpy).toHaveBeenCalledTimes(2);
+        unmount();
+        expect(removeSpy).toHaveBeenCalledTimes(2);
+    });
+});

src/hooks/__tests__/useNetworkStatus.spec.tsx

@@ -0,0 +1,34 @@
+import { renderHook } from '@testing-library/react';
+import { useNavigatorOnline, useNetworkStatus } from '../custom-hooks';
+
+jest.mock('../custom-hooks/useNavigatorOnline');
+
+describe('useNetworkStatus', () => {
+    it('initializes as online', () => {
+        (useNavigatorOnline as jest.Mock).mockReturnValue(true);
+        const { result } = renderHook(() => useNetworkStatus());
+        expect(result.current).toBe('online');
+    });
+
+    it('changes status to offline when network is down', () => {
+        (useNavigatorOnline as jest.Mock).mockReturnValue(false);
+        const { result } = renderHook(() => useNetworkStatus());
+        expect(result.current).toBe('offline');
+    });
+
+    it('reacts to changes in network status', () => {
+        (useNavigatorOnline as jest.Mock).mockReturnValue(true);
+        const { rerender, result } = renderHook(() => useNetworkStatus());
+        expect(result.current).toBe('online');
+
+        // Simulating network going offline
+        (useNavigatorOnline as jest.Mock).mockReturnValue(false);
+        rerender();
+        expect(result.current).toBe('offline');
+
+        // Simulating network coming back online
+        (useNavigatorOnline as jest.Mock).mockReturnValue(true);
+        rerender();
+        expect(result.current).toBe('online');
+    });
+});

src/hooks/__tests__/useSyncedTime.spec.tsx

@@ -0,0 +1,46 @@
+import { act, renderHook } from '@testing-library/react';
+import { useSyncedTime } from '../custom-hooks';
+
+const initialTime = Math.floor(Date.now() / 1000);
+
+jest.mock('@deriv-com/api-hooks', () => ({
+    useTime: jest.fn(() => ({ data: initialTime })),
+}));
+
+describe('useSyncedTime', () => {
+    beforeAll(() => {
+        jest.useFakeTimers();
+    });
+
+    it('initializes with the current date', async () => {
+        const { result } = renderHook(() => useSyncedTime());
+        expect(result.current).toBe(initialTime);
+    });
+
+    it('updates server time every second', () => {
+        const { result } = renderHook(() => useSyncedTime());
+
+        act(() => {
+            jest.advanceTimersByTime(1000);
+        });
+
+        expect(result.current).toBe(initialTime + 1);
+    });
+
+    it('stops updating after unmount', () => {
+        const { result, unmount } = renderHook(() => useSyncedTime());
+
+        act(() => {
+            jest.advanceTimersByTime(3000);
+        });
+
+        expect(result.current).toBe(initialTime + 3);
+        unmount();
+
+        act(() => {
+            jest.advanceTimersByTime(1000);
+        });
+
+        expect(result.current).toBe(initialTime + 3);
+    });
+});