@eohjsc/react-native-smart-city 0.2.99 → 0.3.2

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: {
@@ -253,10 +254,10 @@ describe('test NotificationItem', () => {
 
   test('test render Notify not in any case', () => {
     item.content_code = 'NEW CASE';
-    (item.params = "{ 'unit_id': 1 }"),
-      act(() => {
-        tree = create(wrapComponent(item));
-      });
+    item.params = "{ 'unit_id': 1 }";
+    act(() => {
+      tree = create(wrapComponent(item));
+    });
     const instance = tree.root;
     const button = instance.findByType(TouchableOpacity);
     act(() => {

package/src/screens/Notification/components/NotificationItem.js

@@ -41,7 +41,7 @@ const NotificationItem = memo(({ item }) => {
     return values;
   }, [paramsJSON]);
 
-  const customColorText = (text, params) => {
+  const customColorText = (text, colorParams) => {
     return text.split('**').map((str, i) =>
       i % 2 === 0 ? (
         <Text type="Body" key={i} style={styles.textNotification}>
@@ -49,7 +49,7 @@ const NotificationItem = memo(({ item }) => {
         </Text>
       ) : (
         <Text type="Body" bold key={i} style={styles.textNotification}>
-          {params[(i - 1) / 2]}
+          {colorParams[(i - 1) / 2]}
         </Text>
       )
     );
@@ -167,7 +167,6 @@ const NotificationItem = memo(({ item }) => {
             }),
         };
       case NOTIFICATION_TYPES.BOOKING_EXPIRED_AND_VIOLATION_CREATED:
-        const violated_booking_id = paramsJSON.violated_booking_id;
         return {
           content: customColorText(
             t(
@@ -178,7 +177,7 @@ const NotificationItem = memo(({ item }) => {
           redirect: () =>
             navigation.navigate(Routes.SmartParkingStack, {
               screen: Routes.SmartParkingBookingDetails,
-              params: { id: violated_booking_id || booking_id },
+              params: { id: paramsJSON.violated_booking_id || booking_id },
             }),
         };
       case NOTIFICATION_TYPES.MOVE_CAR_WITHOUT_PAY_VIOLATION:
@@ -206,7 +205,6 @@ const NotificationItem = memo(({ item }) => {
             }),
         };
       case NOTIFICATION_TYPES.PAY_FINE_AND_EXTEND_SUCCESSFULLY:
-        const new_booking_id = paramsJSON.booking_id_new;
         return {
           content: customColorText(
             t('text_notification_content_pay_fine_and_extend_successfully'),
@@ -215,7 +213,7 @@ const NotificationItem = memo(({ item }) => {
           redirect: () =>
             navigation.navigate(Routes.SmartParkingStack, {
               screen: Routes.SmartParkingBookingDetails,
-              params: { id: new_booking_id },
+              params: { id: paramsJSON.booking_id_new },
             }),
         };
       case NOTIFICATION_TYPES.STOP_VIOLATION_FREE_PARKING_ZONE:
@@ -231,8 +229,7 @@ const NotificationItem = memo(({ item }) => {
             }),
         };
       case NOTIFICATION_TYPES.NOTIFY_INDICATOR:
-        const { sensor_type, summary_id } = paramsJSON;
-        switch (sensor_type) {
+        switch (paramsJSON.sensor_type) {
           case SENSOR_TYPE.AIR_QUALITY:
             return {
               content: customColorText(
@@ -243,7 +240,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -259,7 +256,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -275,7 +272,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -291,7 +288,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -307,7 +304,7 @@ const NotificationItem = memo(({ item }) => {
                 navigation.navigate(Routes.UnitStack, {
                   screen: Routes.UnitSummary,
                   params: {
-                    summaryId: summary_id,
+                    summaryId: paramsJSON.summary_id,
                     unitId,
                   },
                 }),
@@ -388,12 +385,13 @@ const NotificationItem = memo(({ item }) => {
         }
 
       case NOTIFICATION_TYPES.NOTIFY_REMOVE_UNIT:
-        const unitOwerName = paramsJSON?.unit_owner_name;
-        const textNotify = unitOwerName
-          ? t('text_notification_content_remove_unit_to_member')
-          : t('text_notification_content_remove_unit_to_owner');
         return {
-          content: customColorText(textNotify, arrParams),
+          content: customColorText(
+            paramsJSON?.unit_owner_name
+              ? t('text_notification_content_remove_unit_to_member')
+              : t('text_notification_content_remove_unit_to_owner'),
+            arrParams
+          ),
           redirect: () => null,
           iconContent: (
             <IconComponent icon={'home'} style={styles.backgroundSummer} />
@@ -474,7 +472,6 @@ const NotificationItem = memo(({ item }) => {
           ),
         };
       case NOTIFICATION_TYPES.NOTIFY_RENAME_SUB_UNIT:
-        const stationId = paramsJSON?.sub_unit_id;
         return {
           content: customColorText(
             t('text_notification_content_rename_sub_unit'),
@@ -485,7 +482,7 @@ const NotificationItem = memo(({ item }) => {
               screen: Routes.UnitDetail,
               params: {
                 unitId,
-                stationId,
+                stationId: paramsJSON?.sub_unit_id,
               },
             });
           },

package/src/screens/Notification/index.js

@@ -13,6 +13,7 @@ import {
   unwatchNotificationData,
 } from '../../utils/Monitor';
 import { useSCContextSelector } from '../../context';
+import { notImplemented } from '../../utils/Utils';
 
 let page = 1;
 
@@ -26,12 +27,18 @@ const Notification = memo(() => {
       <View style={styles.rightComponent}>
         <TouchableOpacity
           style={styles.iconPlus}
-          onPress={() => alert(t('feature_under_development'))}
+          onPress={() => {
+            notImplemented(t);
+          }}
         >
           <Icon name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
 
-        <TouchableOpacity onPress={() => alert(t('feature_under_development'))}>
+        <TouchableOpacity
+          onPress={() => {
+            notImplemented(t);
+          }}
+        >
           <Icon name={'search'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>

package/src/screens/PlayBackCamera/Timer.js

@@ -70,8 +70,8 @@ const Timer = ({
   }, []);
 
   useEffect(() => {
-    const scrollListener = scrollX.addListener(({ value }) => {
-      !isFirstTime && onChangeValue && onChangeValue(value, selected);
+    const scrollListener = scrollX.addListener(({ value: timeValue }) => {
+      !isFirstTime && onChangeValue && onChangeValue(timeValue, selected);
     });
     return () => scrollX.removeListener(scrollListener);
     // eslint-disable-next-line react-hooks/exhaustive-deps

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;
@@ -61,7 +62,7 @@ const PlayBackCamera = () => {
     dateTemp = date;
   }, [selected]);
 
-  const onChangeValue = (value, selected) => {
+  const onChangeValue = (value, selectedTime) => {
     if (!isFirstTime) {
       const currentTime =
         parseFloat(arrHourTemp[0]) +
@@ -77,11 +78,11 @@ const PlayBackCamera = () => {
       const m = t4[0] < 10 ? '0' + t4[0] : t4[0];
       const s = t5 < 10 ? '0' + t5 : t5;
       setHour({ h, m, s });
-      if (value + 0.5 > currentTime * 96 && selected === now) {
+      if (value + 0.5 > currentTime * 96 && selectedTime === now) {
         setUri(item?.configuration?.uri);
       } else {
         const playback = item?.configuration?.playback || '';
-        const date = selected.split('-');
+        const date = selectedTime.split('-');
         setUri(
           `${playback.split('=')[0]}=${date[0]}${date[1]}${
             date[2]
@@ -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>

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
-import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ScanChipQR from '..';
 import QRScan from '../components/QRScan';
 import Routes from '../../../utils/Route';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -17,7 +19,7 @@ const wrapComponent = (route) => (
 const mockedNavigate = jest.fn();
 const mockedGoBack = jest.fn();
 
-jest.mock('axios');
+const mock = new MockAdapter(api.axiosInstance);
 
 jest.mock('react', () => {
   return { ...jest.requireActual('react'), memo: (x) => x };
@@ -48,10 +50,6 @@ describe('test ScanChipQR', () => {
     };
   });
 
-  afterEach(() => {
-    axios.get.mockClear();
-  });
-
   test('create ScanChipQR', async () => {
     let tree;
     await act(async () => {
@@ -68,13 +66,8 @@ describe('test ScanChipQR', () => {
       id: 1,
       name: 'ABC',
     };
-    const response = {
-      status: 200,
-      data: new_chip,
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
+
+    mock.onPost(API.UNIT.CHIP_SCAN_GET_WIFI_INFO()).reply(200, new_chip);
 
     let tree;
     const body = { id: 1, imei: 'SENSOR-X341241', name: 'New Chip' };
@@ -104,13 +97,7 @@ describe('test ScanChipQR', () => {
       id: 1,
       name: 'ABC',
     };
-    const response = {
-      data: new_chip,
-    };
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
-
+    mock.onPost(API.UNIT.CHIP_SCAN_GET_WIFI_INFO()).reply(200, new_chip);
     let tree;
     const body = { id: 1, imei: 'IMEI_X', name: 'New Chip' };
     await act(async () => {

package/src/screens/ScanChipQR/hooks/index.js

@@ -3,6 +3,7 @@ import API from '../../../configs/API';
 import { useCallback, useState } from 'react';
 import { axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
 const useChipScan = (route) => {
   const {
@@ -48,28 +49,26 @@ const useChipScan = (route) => {
                 }
               );
               if (success) {
-                if (new_chip.is_wifi) {
-                  navigation.navigate(Routes.ConnectWifiWarning, {
-                    wifi_ssid: new_chip.wifi_ssid,
-                    wifi_pass: new_chip.wifi_pass,
-                    chip_id: new_chip.id,
-                    unit_id: unit_id,
-                    unit_name: unit_name,
-                    devicePrefixName,
-                    body,
-                  });
-                } else {
-                  navigation.navigate(Routes.ConnectingGateway, {
-                    new_chip,
-                    ...route.params,
-                  });
-                }
+                navigation.navigate(Routes.ConnectWifiWarning, {
+                  wifi_ssid: new_chip.wifi_ssid,
+                  wifi_pass: new_chip.wifi_pass,
+                  chip_id: new_chip.id,
+                  unit_id: unit_id,
+                  unit_name: unit_name,
+                  devicePrefixName,
+                  body,
+                });
               } else {
+                ToastBottomHelper.error(
+                  'Fail to fetch wifi info',
+                  devicePrefixName
+                );
                 navigation.goBack();
               }
             }
             break;
           default:
+            ToastBottomHelper.error('Invalid QR prefix', devicePrefixName);
             navigation.goBack();
             break;
         }