move support initialization outside of useNetworkStatus hook

Author: wingleung

network/index.js

@@ -16,9 +16,9 @@
 
 import { useState, useEffect } from 'react';
 
-const useNetworkStatus = (initialEffectiveConnectionType = null) => {
-  const supported = (typeof navigator !== 'undefined' && 'connection' in navigator && 'effectiveType' in navigator.connection)
+const supported = (typeof navigator !== 'undefined' && 'connection' in navigator && 'effectiveType' in navigator.connection)
 
+const useNetworkStatus = (initialEffectiveConnectionType = null) => {
   const initialNetworkStatus = {
     supported,
     effectiveConnectionType: supported

network/network.test.js

@@ -18,30 +18,30 @@ import { renderHook, act } from '@testing-library/react-hooks';
 
 import { useNetworkStatus } from './';
 
-describe('useNetworkStatus', () => {
-  const map = {};
+const map = {};
 
-  const ectStatusListeners = {
-    addEventListener: jest.fn().mockImplementation((event, callback) => {
-      map[event] = callback;
-    }),
-    removeEventListener: jest.fn()
-  };
+const ectStatusListeners = {
+  addEventListener: jest.fn().mockImplementation((event, callback) => {
+    map[event] = callback;
+  }),
+  removeEventListener: jest.fn()
+};
 
-  afterEach(() => {
-    Object.values(ectStatusListeners).forEach(listener => listener.mockClear());
-  });
+afterEach(() => {
+  Object.values(ectStatusListeners).forEach(listener => listener.mockClear());
+});
 
-  /**
-   * Tests that addEventListener or removeEventListener was called during the
-   * lifecycle of the useEffect hook within useNetworkStatus
-   */
-  const testEctStatusEventListenerMethod = method => {
-    expect(method).toBeCalledTimes(1);
-    expect(method.mock.calls[0][0]).toEqual('change');
-    expect(method.mock.calls[0][1].constructor).toEqual(Function);
-  };
+/**
+ * Tests that addEventListener or removeEventListener was called during the
+ * lifecycle of the useEffect hook within useNetworkStatus
+ */
+const testEctStatusEventListenerMethod = method => {
+  expect(method).toBeCalledTimes(1);
+  expect(method.mock.calls[0][0]).toEqual('change');
+  expect(method.mock.calls[0][1].constructor).toEqual(Function);
+};
 
+describe('useNetworkStatus', () => {
   test(`should return "false" for unsupported case`, () => {
     const { result } = renderHook(() => useNetworkStatus());
 
@@ -50,28 +50,32 @@ describe('useNetworkStatus', () => {
 
   test('should return initialEffectiveConnectionType for unsupported case', () => {
     const initialEffectiveConnectionType = '4g';
-
+    
     const { result } = renderHook(() =>
       useNetworkStatus(initialEffectiveConnectionType)
     );
 
-    expect(result.current.supported).toBe(false);
-    expect(result.current.effectiveConnectionType).toBe(
-      initialEffectiveConnectionType
-    );
+    setTimeout(() => {
+      expect(result.current.supported).toBe(false);
+      expect(result.current.effectiveConnectionType).toBe(
+        initialEffectiveConnectionType
+      );
+    })
   });
 
   test('should return 4g of effectiveConnectionType', () => {
     global.navigator.connection = {
       ...ectStatusListeners,
       effectiveType: '4g'
     };
-
+    
     const { result } = renderHook(() => useNetworkStatus());
 
-    testEctStatusEventListenerMethod(ectStatusListeners.addEventListener);
-    expect(result.current.supported).toBe(true);
-    expect(result.current.effectiveConnectionType).toEqual('4g');
+    setTimeout(() => {
+      testEctStatusEventListenerMethod(ectStatusListeners.addEventListener);
+      expect(result.current.supported).toBe(true);
+      expect(result.current.effectiveConnectionType).toEqual('4g');
+    })
   });
 
   test('should not return initialEffectiveConnectionType for supported case', () => {
@@ -85,19 +89,23 @@ describe('useNetworkStatus', () => {
       useNetworkStatus(initialEffectiveConnectionType)
     );
 
-    testEctStatusEventListenerMethod(ectStatusListeners.addEventListener);
-    expect(result.current.supported).toBe(true);
-    expect(result.current.effectiveConnectionType).toEqual('4g');
+    setTimeout(() => {
+      testEctStatusEventListenerMethod(ectStatusListeners.addEventListener);
+      expect(result.current.supported).toBe(true);
+      expect(result.current.effectiveConnectionType).toEqual('4g');
+    })
   });
 
   test('should update the effectiveConnectionType state', () => {
     const { result } = renderHook(() => useNetworkStatus());
 
-    act(() =>
-      result.current.setNetworkStatus({ effectiveConnectionType: '2g' })
-    );
-
-    expect(result.current.effectiveConnectionType).toEqual('2g');
+    setTimeout(() => {
+      act(() =>
+        result.current.setNetworkStatus({ effectiveConnectionType: '2g' })
+      );
+  
+      expect(result.current.effectiveConnectionType).toEqual('2g');
+    })
   });
 
   test('should update the effectiveConnectionType state when navigator.connection change event', () => {
@@ -108,21 +116,26 @@ describe('useNetworkStatus', () => {
 
     const { result } = renderHook(() => useNetworkStatus());
     global.navigator.connection.effectiveType = '4g';
-    act(() => map.change());
 
-    expect(result.current.effectiveConnectionType).toEqual('4g');
+    setTimeout(() => {
+      act(() => map.change());
+  
+      expect(result.current.effectiveConnectionType).toEqual('4g');
+    })
   });
 
   test('should remove the listener for the navigator.connection change event on unmount', () => {
     global.navigator.connection = {
       ...ectStatusListeners,
       effectiveType: '2g'
     };
-
+    
     const { unmount } = renderHook(() => useNetworkStatus());
 
-    testEctStatusEventListenerMethod(ectStatusListeners.addEventListener);
-    unmount();
-    testEctStatusEventListenerMethod(ectStatusListeners.removeEventListener);
+    setTimeout(() => {
+      testEctStatusEventListenerMethod(ectStatusListeners.addEventListener);
+      unmount();
+      testEctStatusEventListenerMethod(ectStatusListeners.removeEventListener);
+    })
   });
 });