@eohjsc/react-native-smart-city 0.2.97 → 0.3.0

package/src/screens/ManageAccess/__test__/ManageAccess.test.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
 
 import ManageAccessScreen from '../index';
 import { HeaderCustom } from '../../../commons/Header';
-import axios from 'axios';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { ScrollView } from 'react-native';
 import { RowItem } from '../../../commons/RowItem';
 import Routes from '../../../utils/Route';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
 
 const mockUseIsFocused = jest.fn();
 const mockedNavigate = jest.fn();
@@ -31,8 +35,6 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-jest.mock('axios');
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <ManageAccessScreen route={route} />
@@ -44,7 +46,6 @@ describe('Test Manage Access', () => {
   let route;
 
   beforeEach(() => {
-    axios.get.mockClear();
     mockedNavigate.mockClear();
     route = {
       params: {
@@ -59,27 +60,25 @@ describe('Test Manage Access', () => {
       },
     };
   });
+
   it('render Manage Access', async () => {
     mockUseIsFocused.mockImplementation(() => true);
-    const response = {
-      status: 200,
-      data: [
-        {
+    mock.onGet(API.UNIT.MANAGE_ACCESS(1)).reply(200, [
+      {
+        id: 1,
+        user: {
           id: 1,
-          user: {
-            id: 1,
-            name: 'jason',
-            phone_number: '0984524544',
-            email: '123@gmail.com',
-          },
-          access_schedule: 'always',
-          schedule: 'Always',
+          name: 'jason',
+          phone_number: '0984524544',
+          email: '123@gmail.com',
         },
-      ],
-    };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
+        access_schedule: 'always',
+        schedule: 'Always',
+      },
+      {
+        id: 2,
+      },
+    ]);
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -89,7 +88,7 @@ describe('Test Manage Access', () => {
     expect(header).toHaveLength(1);
     expect(scrollView).toHaveLength(1);
     const memberButton = instance.findAllByType(RowItem);
-    expect(memberButton).toHaveLength(1);
+    expect(memberButton).toHaveLength(2);
     await act(async () => {
       await memberButton[0].props.onPress();
     });
@@ -97,4 +96,16 @@ describe('Test Manage Access', () => {
       id: 1,
     });
   });
+
+  it('render Manage Access without params', async () => {
+    mockUseIsFocused.mockImplementation(() => false);
+    await act(async () => {
+      tree = await create(wrapComponent({}));
+    });
+    const instance = tree.root;
+    const header = instance.findAllByType(HeaderCustom);
+    const scrollView = instance.findAllByType(ScrollView);
+    expect(header).toHaveLength(1);
+    expect(scrollView).toHaveLength(1);
+  });
 });

package/src/screens/ManageAccess/hooks/__test__/useManageAccess.test.js

@@ -1,7 +1,10 @@
 import { act, renderHook } from '@testing-library/react-hooks';
+import MockAdapter from 'axios-mock-adapter';
 import useManageAccess from '../index';
-import axios from 'axios';
 import API from '../../../../configs/API';
+import api from '../../../../utils/Apis/axios';
+
+const mock = new MockAdapter(api.axiosInstance);
 
 jest.mock('react', () => {
   return {
@@ -10,15 +13,7 @@ jest.mock('react', () => {
   };
 });
 
-jest.mock('axios');
-
 describe('Test Use Manage Access', () => {
-  beforeEach(() => {
-    axios.get.mockClear();
-  });
-  afterEach(() => {
-    axios.get.mockClear();
-  });
   const unit = { id: 1, name: 'unit name' };
   const sensor = {
     id: 1,
@@ -30,49 +25,53 @@ describe('Test Use Manage Access', () => {
 
   it('Test fetch data', () => {
     const { result } = renderHook(() => useManageAccess(unit, sensor));
-    axios.get.mockImplementation(() => ({
-      status: 200,
-      data: [
-        {
+    mock.onGet(API.UNIT.MANAGE_ACCESS(unit.id)).reply(200, [
+      {
+        id: 1,
+        user: {
           id: 1,
-          user: {
-            id: 1,
-            name: 'jason',
-            phone_number: '0984524544',
-            email: '123@gmail.com',
-          },
-          access_schedule: 'always',
-          schedule: 'Always',
+          name: 'jason',
+          phone_number: '0984524544',
+          email: '123@gmail.com',
         },
-        {
-          id: 2,
-          user: {
-            id: 1,
-            name: 'mike',
-            phone_number: '0984524144',
-            email: '1235@gmail.com',
-          },
-          access_schedule: 'recurring',
-          schedule: 'M/T 02:40 - 08:40 AM',
+        access_schedule: 'always',
+        schedule: 'Always',
+      },
+      {
+        id: 2,
+        user: {
+          id: 1,
+          name: 'mike',
+          phone_number: '0984524144',
+          email: '1235@gmail.com',
         },
-        {
-          id: 3,
-          user: {
-            id: 1,
-            name: 'david',
-            phone_number: '0984524541',
-            email: '1234@gmail.com',
-          },
-          access_schedule: 'temporary',
-          schedule: '02:40 09/08/2020 - 08:40 09/10/2020',
+        access_schedule: 'recurring',
+        schedule: 'M/T 02:40 - 08:40 AM',
+      },
+      {
+        id: 3,
+        user: {
+          id: 1,
+          name: 'david',
+          phone_number: '0984524541',
+          email: '1234@gmail.com',
         },
-      ],
-    }));
+        access_schedule: 'temporary',
+        schedule: '02:40 09/08/2020 - 08:40 09/10/2020',
+      },
+    ]);
     act(() => {
       result.current.onRefresh();
     });
-    expect(axios.get).toHaveBeenCalledWith(API.UNIT.MANAGE_ACCESS(unit.id), {
-      params: { sensor_id: sensor.id },
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it('Test get manage access failure', () => {
+    const { result } = renderHook(() => useManageAccess(unit, sensor));
+    mock.onGet(API.UNIT.MANAGE_ACCESS(unit.id)).reply(400, []);
+    act(() => {
+      result.current.onRefresh();
     });
+    expect(result.current.data).toEqual([]);
   });
 });

package/src/screens/ManageAccess/index.js

@@ -19,7 +19,7 @@ import { RowItem } from '../../commons/RowItem';
 const ManageAccessScreen = memo(({ route }) => {
   const t = useTranslations();
   const { params = {} } = route;
-  const { unit, sensor } = params;
+  const { unit = {}, sensor = {} } = params;
   const { navigate } = useNavigation();
   const isFocused = useIsFocused();
   const { data, isRefresh, isLoading, onRefresh } = useManageAccess(
@@ -46,6 +46,7 @@ const ManageAccessScreen = memo(({ route }) => {
         refreshControl={
           <RefreshControl refreshing={false} onRefresh={onRefresh} />
         }
+        scrollIndicatorInsets={{ right: 1 }}
       >
         <View style={styles.container}>
           <Text semibold style={styles.titleGuest}>

package/src/screens/MoveToAnotherSubUnit/__test__/index.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import { create } from 'react-test-renderer';
 import { act } from '@testing-library/react-hooks';
+import { TouchableOpacity } from 'react-native';
 
 import { TESTID } from '../../../configs/Constants';
 import { API } from '../../../configs';
@@ -9,8 +10,20 @@ import MoveToAnotherSubUnit from '../';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import BottomButtonView from '../../../commons/BottomButtonView';
+import api from '../../../utils/Apis/axios';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
 
-jest.mock('axios');
 jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
@@ -85,6 +98,17 @@ describe('Test Render ListSubUnit', () => {
     },
   };
 
+  it('render ListSubUnit with out params', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent({}));
+    });
+    const instance = tree.root;
+    const rowSubUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ROW_SUB_UNIT
+    );
+    expect(rowSubUnit).toHaveLength(0);
+  });
+
   it('render ListSubUnit', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -112,15 +136,14 @@ describe('Test Render ListSubUnit', () => {
         sensors: [],
       });
     });
-    act(() => {
-      bottomButtonView.props.onPressMain();
-    });
-
-    expect(axios.patch).toHaveBeenCalledWith(
-      API.SENSOR.CHANGE_SUB_UNIT(200, 3, 73),
-      {
-        station_id: 4,
-      }
-    );
+    mock.onPatch(API.SENSOR.CHANGE_SUB_UNIT(200, 3, 73)).reply(200);
+    await bottomButtonView.props.onPressMain();
+    expect(mockNavigate).toBeCalled();
+    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    await TouchableOpacities[2].props.onPress();
+    mockNavigate.mockClear();
+    mock.onPatch(API.SENSOR.CHANGE_SUB_UNIT(200, 3, 73)).reply(400);
+    await bottomButtonView.props.onPressMain();
+    expect(mockNavigate).not.toBeCalled();
   });
 });

package/src/screens/MoveToAnotherSubUnit/index.js

@@ -36,12 +36,12 @@ const MoveToAnotherSubUnit = memo(({ route }) => {
   const { unit, sensor, station } = params;
   const { navigate } = useNavigation();
   const [selectedSubUnit, setSelectedSubUnit] = useState(
-    unit.stations?.find((subUnit) => subUnit.id === station.id)
+    unit?.stations?.find((subUnit) => subUnit.id === station.id)
   );
 
   const listStationUnit = useMemo(() => {
-    return unit.stations.slice(2);
-  }, [unit.stations]);
+    return unit?.stations.slice(2) || [];
+  }, [unit?.stations]);
 
   const handleOnSelect = useCallback((item) => {
     setSelectedSubUnit(item);
@@ -57,12 +57,12 @@ const MoveToAnotherSubUnit = memo(({ route }) => {
     if (success) {
       navigate(Routes.UnitDetail);
     }
-  }, [navigate, selectedSubUnit.id, sensor.id, station.id, unit.id]);
+  }, [navigate, selectedSubUnit?.id, sensor?.id, station?.id, unit?.id]);
 
   return (
     <View style={styles.wrap}>
       <HeaderCustom title={t('move_to_another_sub_unit')} isShowSeparator />
-      <ScrollView>
+      <ScrollView scrollIndicatorInsets={{ right: 1 }}>
         <View style={styles.container}>
           <View>
             {listStationUnit.map((item, index) => (

package/src/screens/Notification/__test__/Notification.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import { Animated, RefreshControl } from 'react-native';
 
 import { SCProvider } from '../../../context';
@@ -8,6 +8,7 @@ import { mockSCStore } from '../../../context/mockStore';
 import Notification from '../index';
 import NotificationItem from '../components/NotificationItem';
 import { API } from '../../../configs';
+import api from '../../../utils/Apis/axios';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -15,7 +16,7 @@ const wrapComponent = () => (
   </SCProvider>
 );
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 jest.mock('react', () => {
   return {
@@ -53,9 +54,9 @@ describe('test Notification', () => {
         ],
       },
     };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
+    mock
+      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
+      .reply(200, response.data);
     await act(async () => {
       tree = await create(wrapComponent());
     });
@@ -63,10 +64,6 @@ describe('test Notification', () => {
     const notificationItem = instance.findAllByType(NotificationItem);
 
     expect(notificationItem).toHaveLength(2);
-    expect(axios.get).toHaveBeenCalledWith(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''),
-      {}
-    );
   });
 
   test('test handleOnLoadMore', async () => {
@@ -95,22 +92,18 @@ describe('test Notification', () => {
         ],
       },
     };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
+    mock
+      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
+      .reply(200, response.data);
     await act(async () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const scrollView = instance.findByType(Animated.ScrollView);
-
     act(() => {
       scrollView.props.onMomentumScrollEnd();
     });
-    expect(axios.get).toHaveBeenCalledWith(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''),
-      {}
-    );
+    expect(scrollView).toBeDefined();
   });
 
   test('test onRefresh', async () => {
@@ -139,21 +132,17 @@ describe('test Notification', () => {
         ],
       },
     };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
+    mock
+      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
+      .reply(200, response.data);
     await act(async () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const refreshControl = instance.findByType(RefreshControl);
-
     act(() => {
       refreshControl.props.onRefresh();
     });
-    expect(axios.get).toHaveBeenCalledWith(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''),
-      {}
-    );
+    expect(refreshControl).toBeDefined();
   });
 });

package/src/screens/Notification/__test__/NotificationItem.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -9,6 +9,7 @@ import NotificationItem from '../components/NotificationItem';
 import { NOTIFICATION_TYPES, SENSOR_TYPE } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import { API } from '../../../configs';
+import api from '../../../utils/Apis/axios';
 
 const wrapComponent = (item) => (
   <SCProvider initState={mockSCStore({})}>
@@ -16,7 +17,7 @@ const wrapComponent = (item) => (
   </SCProvider>
 );
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
@@ -238,10 +239,10 @@ describe('test NotificationItem', () => {
     });
     const instance = tree.root;
     const button = instance.findByType(TouchableOpacity);
+    mock.onPost(API.NOTIFICATION.SET_READ(1)).reply(200);
     act(() => {
       button.props.onPress();
     });
-    expect(axios.post).toHaveBeenCalledWith(API.NOTIFICATION.SET_READ(1));
     expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
       screen: Routes.UnitSummary,
       params: {

package/src/screens/PlayBackCamera/__test__/index.test.js

@@ -1,7 +1,11 @@
+import moment from 'moment';
 import React from 'react';
+import { Animated, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import PlayBackCamera from '..';
 import { ModalCustom } from '../../../commons/Modal';
+import Text from '../../../commons/Text';
+import { TESTID } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
@@ -26,14 +30,95 @@ const wrapComponent = () => (
   </SCProvider>
 );
 
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: jest.fn((init) => [init, mockSetState]),
+    memo: (x) => x,
+  };
+});
+
+let dateTemp = moment().format('YYYY-MM-DD');
+
 describe('Test PlayBackCamera', () => {
   let tree;
+  jest.useFakeTimers();
+
   it('Test render', async () => {
-    await act(() => {
-      tree = create(wrapComponent());
+    await act(async () => {
+      tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const HeaderCustoms = instance.findAllByType(ModalCustom);
     expect(HeaderCustoms).toHaveLength(2);
+    const textOpenModal = instance.findAll(
+      (el) => el.props.testID === TESTID.OPEN_DATE_MODAL && el.type === Text
+    );
+    await textOpenModal[0].props.onPress();
+    expect(mockSetState).toBeCalledWith(true);
+
+    mockSetState.mockClear();
+    const buttonCancel = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.ON_PRESS_CANCEL &&
+        el.type === TouchableOpacity
+    );
+    await buttonCancel[0].props.onPress();
+    expect(mockSetState).toBeCalledWith(false);
+    expect(mockSetState).toBeCalledWith(dateTemp);
+
+    mockSetState.mockClear();
+    const buttonOK = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.ON_PRESS_OK && el.type === TouchableOpacity
+    );
+    await buttonOK[0].props.onPress();
+    expect(mockSetState).toBeCalledWith(false);
+
+    mockSetState.mockClear();
+    const buttonAddDate = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.ON_PRESS_ADD_DATE &&
+        el.type === TouchableOpacity
+    );
+    await buttonAddDate[0].props.onPress();
+    expect(mockSetState).not.toBeCalled();
+
+    mockSetState.mockClear();
+    const buttonSubDate = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.ON_PRESS_SUB_DATE &&
+        el.type === TouchableOpacity
+    );
+    await buttonSubDate[0].props.onPress();
+    expect(mockSetState).toBeCalledWith(
+      moment(dateTemp).subtract(1, 'days').format('YYYY-MM-DD')
+    );
+
+    mockSetState.mockClear();
+    const timer = instance.findAllByType(Animated.ScrollView);
+    //NOTE: isFirstTime = true
+    timer[0].props.onScroll({
+      nativeEvent: {
+        contentInset: { bottom: 10, left: 10, right: 10, top: 10 },
+        contentOffset: { x: 10, y: 0 },
+        contentSize: { height: 10, width: 10 },
+        layoutMeasurement: { height: 10, width: 10 },
+        zoomScale: 1,
+      },
+    });
+    jest.runAllTimers();
+    //NOTE: isFirstTime = false
+    timer[0].props.onScroll({
+      nativeEvent: {
+        contentInset: { bottom: 10, left: 10, right: 10, top: 10 },
+        contentOffset: { x: 60, y: 0 },
+        contentSize: { height: 10, width: 10 },
+        layoutMeasurement: { height: 10, width: 10 },
+        zoomScale: 1,
+      },
+    });
+    expect(mockSetState).toBeCalledWith({ h: '00', m: '37', s: 30 });
   });
 });

package/src/screens/PlayBackCamera/index.js

@@ -13,6 +13,7 @@ import Text from '../../commons/Text';
 import Timer from './Timer';
 import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
 import MediaPlayerFull from '../../commons/MediaPlayerDetail/MediaPlayerFull';
+import { TESTID } from '../../configs/Constants';
 
 let dateTemp = moment().format('YYYY-MM-DD');
 let isFirstTime = true;
@@ -151,12 +152,18 @@ const PlayBackCamera = () => {
       <View style={styles.container}>
         <View style={styles.row}>
           <TouchableOpacity
+            testID={TESTID.ON_PRESS_SUB_DATE}
             onPress={onSubtractDate}
             style={styles.commomButton}
           >
             <Image source={Images.arrowLeft} />
           </TouchableOpacity>
-          <Text onPress={onOpenDateModal} style={styles.textDate} type="h4">
+          <Text
+            testID={TESTID.OPEN_DATE_MODAL}
+            onPress={onOpenDateModal}
+            style={styles.textDate}
+            type="h4"
+          >
             {moment(selected).format('DD/MM/YYYY')}
           </Text>
           <TouchableOpacity
@@ -165,7 +172,11 @@ const PlayBackCamera = () => {
           >
             <Image source={Images.file} style={styles.iconDate} />
           </TouchableOpacity>
-          <TouchableOpacity onPress={onAddDate} style={styles.commomButton}>
+          <TouchableOpacity
+            testID={TESTID.ON_PRESS_ADD_DATE}
+            onPress={onAddDate}
+            style={styles.commomButton}
+          >
             <Image source={Images.arrowLeft} style={styles.arrowRight} />
           </TouchableOpacity>
         </View>
@@ -231,12 +242,17 @@ const PlayBackCamera = () => {
             <TouchableOpacity
               onPress={onPressCancel}
               style={styles.commomButton}
+              testID={TESTID.ON_PRESS_CANCEL}
             >
               <Text type="h4" semibold hilight>
                 {t('cancel')}
               </Text>
             </TouchableOpacity>
-            <TouchableOpacity onPress={onPressOk} style={styles.commomButton}>
+            <TouchableOpacity
+              testID={TESTID.ON_PRESS_OK}
+              onPress={onPressOk}
+              style={styles.commomButton}
+            >
               <Text type="h4" semibold hilight>
                 {t('done')}
               </Text>