@eohjsc/react-native-smart-city 0.7.3-rc2 → 0.7.3-rc20

package/src/commons/ActionGroup/__test__/OnOffTemplate.test.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 
 import { DEVICE_TYPE } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import OnOffTemplate from '../OnOffTemplate';
 import OnOffButtonTemplate from '../OnOffTemplate/OnOffButtonTemplate';
 import OnOffSimpleTemplate from '../OnOffTemplate/OnOffSimpleTemplate';
-import { mockSCStore } from '../../../context/mockStore';
-import { SCProvider } from '../../../context';
 
 const wrapComponent = (item, mockDoAction, sensor) => (
   <SCProvider initState={mockSCStore({})}>
@@ -118,7 +118,7 @@ describe('Test OnOffTemplate', () => {
     const instance = tree.root;
     const template = instance.findAllByType(OnOffSimpleTemplate);
     expect(template).toHaveLength(1);
-    expect(watchMultiConfigs).toBeCalledTimes(0);
+    expect(watchMultiConfigs).toHaveBeenCalledTimes(0);
   });
 
   it('template OnOffSimpleActionTemplate doAction with is_on_value, match configValue', async () => {
@@ -135,7 +135,7 @@ describe('Test OnOffTemplate', () => {
       await template.props.triggerAction();
     });
     expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined, false);
-    expect(watchMultiConfigs).toBeCalledTimes(0);
+    expect(watchMultiConfigs).toHaveBeenCalledTimes(0);
   });
 
   it('template OnOffSimpleActionTemplate doAction with is_on_value, not match configValue', async () => {
@@ -167,7 +167,7 @@ describe('Test OnOffTemplate', () => {
       await template.props.triggerAction();
     });
     expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined, false);
-    expect(watchMultiConfigs).toBeCalledTimes(0);
+    expect(watchMultiConfigs).toHaveBeenCalledTimes(0);
   });
 
   it('render with template OnOffSimpleActionTemplate with just action_data', async () => {

package/src/commons/ActionGroup/__test__/OptionsDropdownTemplate.test.js

@@ -1,17 +1,17 @@
-import OptionsDropdownActionTemplate from '../../../commons/ActionGroup/OptionsDropdownActionTemplate';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import Text from '../../../commons/Text';
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import { AlertAction, RadioCircle } from '../../../commons';
-import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
-import { getTranslate } from '../../../utils/I18n';
+import OptionsDropdownActionTemplate from '../../../commons/ActionGroup/OptionsDropdownActionTemplate';
+import Text from '../../../commons/Text';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { getTranslate } from '../../../utils/I18n';
 
-import SvgDoorState from '../../../../assets/images/Device/door-state.svg';
 import SvgCurrentState from '../../../../assets/images/Device/current-state.svg';
+import SvgDoorState from '../../../../assets/images/Device/door-state.svg';
 import SvgWindStrength from '../../../../assets/images/Device/wind-strength.svg';
 
 const wrapComponent = (item, mockDoAction, sensor) => (
@@ -190,8 +190,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
       value: 1,
     });
     is_managed_by_backend
-      ? expect(watchMultiConfigs).not.toBeCalled()
-      : expect(watchMultiConfigs).not.toBeCalled();
+      ? expect(watchMultiConfigs).not.toHaveBeenCalled()
+      : expect(watchMultiConfigs).not.toHaveBeenCalled();
 
     expect(texts[1].props.children).toEqual('Level2'); // TODO: should be Level1, configValues make change again
   };

package/src/commons/ActionGroup/__test__/StatesGridActionTemplate.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
+import { DEVICE_TYPE } from '../../../configs/Constants';
 import Text from '../../Text';
 import StatesGridActionTemplate from '../StatesGridActionTemplate';
-import { DEVICE_TYPE } from '../../../configs/Constants';
 
 const mockDoAction = jest.fn();
 const mockActionData = jest.fn();
@@ -74,7 +74,7 @@ describe('Test StatesGridActionTemplate', () => {
     await act(async () => {
       await touchableOpacities[0].props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(mockActionData, null);
+    expect(mockDoAction).toHaveBeenCalledWith(mockActionData, null);
   });
 
   it('test trigger special action', async () => {
@@ -96,7 +96,7 @@ describe('Test StatesGridActionTemplate', () => {
     await act(async () => {
       await touchableOpacities[0].props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(
+    expect(mockDoAction).toHaveBeenCalledWith(
       mockActionData,
       JSON.stringify({ config_id: 1, config_value: undefined })
     );

package/src/commons/ActionGroup/__test__/TimerActionTemplate.test.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Switch, TouchableOpacity } from 'react-native';
-import { act, create } from 'react-test-renderer';
-import TimerActionTemplate from '../TimerActionTemplate';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import ScrollPicker from 'react-native-wheel-scrollview-picker';
+import { act, create } from 'react-test-renderer';
+import TimerActionTemplate from '../TimerActionTemplate';
 
 import moment from 'moment';
-import Text from '../../Text';
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import Text from '../../Text';
 
 jest.mock('../../../iot/Monitor');
 
@@ -81,7 +81,7 @@ describe('Test TimerActionTemplate success with config value', () => {
     await act(async () => {
       await switchButton.props.onValueChange();
     });
-    expect(mockDoAction).toBeCalled();
+    expect(mockDoAction).toHaveBeenCalled();
 
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await act(async () => {
@@ -128,6 +128,6 @@ describe('Test TimerActionTemplate success with config value', () => {
     await act(async () => {
       await touchableOpacities[2].props.onPress(3);
     });
-    expect(mockDoAction).toBeCalled();
+    expect(mockDoAction).toHaveBeenCalled();
   });
 });

package/src/commons/ActionGroup/__test__/TwoButtonTemplate.test.js

@@ -123,7 +123,7 @@ describe('Test TwoButtonTemplate', () => {
     expect(touchableOpacities.length).toEqual(2);
     await touchableOpacities[0].props.onPress();
     await touchableOpacities[1].props.onPress();
-    expect(mockDoAction).toBeCalled();
+    expect(mockDoAction).toHaveBeenCalled();
   });
 
   it('render TouchableOpacity TwoButtonTemplate without is_on_value', async () => {

package/src/commons/ActionGroup/__test__/index.test.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import {
-  TouchableOpacity,
-  Switch,
   ActivityIndicator,
   ScrollView,
+  Switch,
+  TouchableOpacity,
 } from 'react-native';
-import renderer, { act } from 'react-test-renderer';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import renderer, { act } from 'react-test-renderer';
 
+import { Slider } from '@miblanchard/react-native-slider';
 import ActionGroup from '..';
-import Text from '../../Text';
 import { AccessibilityLabel, BUTTON_TYPE } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { Slider } from '@miblanchard/react-native-slider';
-import { WheelColorPicker } from '../ColorPickerTemplate';
 import RadioCircle from '../../RadioCircle';
+import Text from '../../Text';
+import { WheelColorPicker } from '../ColorPickerTemplate';
 import SwitchButtonTemplate from '../OnOffTemplate/SwitchButtonTemplate';
 
 const wrapComponent = (item, mockDoAction, sensor) => (

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 
+import Modal from 'react-native-modal';
 import ActionTemplate from '..';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import SelectActionCard from '../../SelectActionCard';
-import Modal from 'react-native-modal';
-import ThreeButtonAction from '../ThreeButtonAction';
-import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import Text from '../../Text';
+import ThreeButtonAction from '../ThreeButtonAction';
 import { showAllCards } from './utils';
 
 const mockOnSelectAction = jest.fn();
@@ -81,7 +81,7 @@ describe('Test ActionTemplate', () => {
         template: 'three_button_action_template',
       });
     });
-    expect(mockOnSelectAction).toBeCalledWith({
+    expect(mockOnSelectAction).toHaveBeenCalledWith({
       action: '94ae262d-46e3-42ff-9d10-516831ecc830',
       action_name: 'OPEN',
       data: null,

package/src/commons/Automate/ItemAutomate.js

@@ -18,10 +18,11 @@ const ItemAutomate = ({
   enableScript = true,
 }) => {
   const t = useTranslations();
-  const item = AUTOMATES[automate?.type];
-  const isItemOneTap = AUTOMATES[automate?.type] === AUTOMATES.one_tap;
-  const Icon = item?.icon;
-  const valueEvaluations = useGetEvaluateValue(automate?.config, automate.unit);
+  const { type, config, unit } = automate;
+  const item = AUTOMATES[type];
+  const { icon: Icon, title, explanation } = item || {};
+  const isItemOneTap = AUTOMATES[type] === AUTOMATES.one_tap;
+  const valueEvaluations = useGetEvaluateValue(config, unit);
 
   const textCondition = useMemo(() => {
     return generateAutomationConditionText(automate, valueEvaluations, t);
@@ -33,9 +34,9 @@ const ItemAutomate = ({
     } else if (isSelected && isItemOneTap) {
       return t('quick_button_create_at_dashboard');
     } else {
-      return t(item?.explanation);
+      return t(explanation);
     }
-  }, [isItemOneTap, isSelected, item?.explanation, t, textCondition]);
+  }, [isItemOneTap, isSelected, explanation, t, textCondition]);
 
   const handleSelectIndex = useCallback(() => {
     if (onPress) {
@@ -63,7 +64,7 @@ const ItemAutomate = ({
             bold
             color={enableScript ? Colors.Black : Colors.Gray7}
           >
-            {t(item?.title)}
+            {t(title)}
           </Text>
           <Text type="Label" color={Colors.Gray8} numberOfLines={1}>
             {renderText}

package/src/commons/Automate/__test__/ItemAutomate.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { act, create } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
 
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -41,6 +41,6 @@ describe('Test ItemAutomate', () => {
     await act(async () => {
       touchableOpacities[0].props.onPress();
     });
-    expect(mockOnPress).toBeCalledTimes(1);
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
   });
 });

package/src/commons/BackDefault/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 const BackDefault = memo(({ goBack, color, fixedHeight }) => {
@@ -10,7 +10,7 @@ const BackDefault = memo(({ goBack, color, fixedHeight }) => {
       onPress={goBack}
       style={[styles.wrap, fixedHeight && styles.noPaddingVertical]}
     >
-      <AntDesign name="left" size={27} color={color} />
+      <IconOutline name="left" size={27} color={color} />
     </TouchableOpacity>
   );
 });

package/src/commons/ButtonPopup/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { Colors, Device } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
@@ -42,7 +42,7 @@ const ButtonPopup = ({
       <View style={styles.popoverStyle}>
         <View style={styles.modalWrapper}>
           {!hideClose && (
-            <AntDesign
+            <IconOutline
               name={'close'}
               color={Colors.Gray8}
               style={styles.close}

package/src/commons/ChartAggregationOption/__test__/FourButtonFilterHistory.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ChartAggregationOption from '../index';
-import { TouchableOpacity } from 'react-native';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -31,7 +31,7 @@ it('test', async () => {
     await act(async () => {
       await buttons[index].props.onPress();
     });
-    expect(mockSetGroupBy).toBeCalledWith(data);
+    expect(mockSetGroupBy).toHaveBeenCalledWith(data);
   };
 
   await clickButton(0, 'date');

package/src/commons/Dashboard/MyPinnedSharedUnit/__test__/MyPinnedSharedUnit.test.js

@@ -1,18 +1,17 @@
+import MockAdapter from 'axios-mock-adapter';
 import React, { useContext } from 'react';
 import { act, create } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import MyPinnedSharedUnit from '../index';
-import { Text } from 'react-native';
-import { getTranslate } from '../../../../utils/I18n';
+import { Text, TouchableOpacity } from 'react-native';
+import { API } from '../../../../configs';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
+import { Action } from '../../../../context/actionType';
 import { mockSCStore } from '../../../../context/mockStore';
-import { AccessibilityLabel } from '../../../../configs/Constants';
-import { API } from '../../../../configs';
-import { TouchableOpacity } from 'react-native';
 import api from '../../../../utils/Apis/axios';
+import { getTranslate } from '../../../../utils/I18n';
 import SharedUnit from '../../../Unit/SharedUnit';
-import { Action } from '../../../../context/actionType';
+import MyPinnedSharedUnit from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -61,7 +60,7 @@ describe('Test MyPinnedSharedUnit', () => {
       goToAllSharedUnits.props.onPress();
     });
     expect(global.mockedNavigate).toHaveBeenCalled();
-    expect(mockSetAction).toBeCalledWith(
+    expect(mockSetAction).toHaveBeenCalledWith(
       Action.IS_CHECK_CLEAR_CACHE_UNITS,
       false
     );

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -1,17 +1,17 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
+import FastImage from 'react-native-fast-image';
 import MyUnit from '..';
-import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
+import { API } from '../../../../configs';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
+import { flushPromises } from '../../../../screens/AllGateway/test-utils';
+import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
 import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
-import { flushPromises } from '../../../../screens/AllGateway/test-utils';
-import FastImage from 'react-native-fast-image';
 import { removeMultiple, STORAGE_KEY } from '../../../../utils/Storage';
 
 const mock = new MockAdapter(api.axiosInstance);
@@ -103,7 +103,7 @@ describe('Test MyUnit', () => {
     await act(async () => {
       await button.props.onPress(data[0]);
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
       params: { unitId: 1 },
       screen: Routes.UnitDetail,
     });
@@ -123,7 +123,7 @@ describe('Test MyUnit', () => {
     await act(async () => {
       await button.props.onPress(data[1]);
     });
-    expect(global.mockedNavigate).toBeCalledWith('UnitStack', {
+    expect(global.mockedNavigate).toHaveBeenCalledWith('UnitStack', {
       params: { unitId: 2 },
       screen: 'UnitDetail',
     });

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, style, children }) => {
   return (
     <TouchableOpacity style={[styles.dateSelect, style]} onPress={onPress}>
       {children}
-      <AntDesign style={styles.iconDateTime} name={'calendar'} />
+      <IconOutline style={styles.iconDateTime} name={'calendar'} />
     </TouchableOpacity>
   );
 });
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    width: 150,
+    width: 130,
     alignItems: 'center',
   },
   txtTime: {

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -30,7 +30,7 @@ const ConnectedViewHeader = memo(
     return (
       <View style={styles.statusContainer}>
         <View style={styles.connectStatus}>
-          <AntDesign name={'wifi'} color={Colors.Green6} size={16} />
+          <IconOutline name={'wifi'} color={Colors.Green6} size={16} />
           <DisplayTextConnected type={type} />
         </View>
         {isDisplayTime && (

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -6,7 +6,7 @@ import MediaPlayer from '../../MediaPlayer';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Colors, Device } from '../../../configs';
 import { RowUser } from '../../RowUser';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from '../../../screens/EmergencyContacts/hook';
 import { useIsFocused } from '@react-navigation/native';
 
@@ -49,12 +49,12 @@ const EmergencyDetail = memo(({ item }) => {
               key={contact.id.toString()}
               index={index}
               leftIcon={
-                <AntDesign name={'user'} size={20} color={Colors.White} />
+                <IconOutline name={'user'} size={20} color={Colors.White} />
               }
               text={contact.name}
               rightComponent={
                 <View style={styles.rightComponent}>
-                  <AntDesign
+                  <IconOutline
                     name={'phone'}
                     size={20}
                     color={Colors.Gray9}

package/src/commons/Device/Emergency/__test__/EmergencyButton.test.js

@@ -43,6 +43,6 @@ describe('Test EmergencyButton', () => {
       emergencyButton.props.onLongPress();
     });
 
-    expect(mockFunction).toBeCalled();
+    expect(mockFunction).toHaveBeenCalled();
   });
 });

package/src/commons/Device/FlatListItems.js

@@ -1,15 +1,15 @@
 import React, { memo, useCallback, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import QualityIndicatorItem from './WaterQualitySensor/QualityIndicatorsItem';
-import AlertStatusMachine from './WaterPurifierStatus/AlertStatusMachine';
-import { useBoolean } from '../../hooks/Common';
-import Text from '../Text';
-import Routes from '../../utils/Route';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors, Constants } from '../../configs';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AccessibilityLabel } from '../../configs/Constants';
+import { useBoolean } from '../../hooks/Common';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import Routes from '../../utils/Route';
 import { ModalCustom } from '../Modal';
+import Text from '../Text';
+import AlertStatusMachine from './WaterPurifierStatus/AlertStatusMachine';
+import QualityIndicatorItem from './WaterQualitySensor/QualityIndicatorsItem';
 
 const marginHorizontal = 20;
 const widthItem = (Constants.width - marginHorizontal * 2) / 2;
@@ -75,20 +75,21 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
             style={styles.iconInfo}
             accessibilityLabel={AccessibilityLabel.TOUCH_INFO_FLAT_LIST_ITEM}
           >
-            <AntDesign name={'info-circle'} size={16} color={Colors.Gray8} />
+            <IconOutline name={'info-circle'} size={16} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
       </View>
 
-      {filtersNeedReplace.length > 0 && filtersNeedReplace[0].measure === 'H' && (
-        <AlertStatusMachine
-          message={t('{number}_filter_need_to_be_replaced', {
-            number: filtersNeedReplace.length,
-          })}
-          style={styles.alertReplaceFilter}
-          icon={'warning'}
-        />
-      )}
+      {filtersNeedReplace.length > 0 &&
+        filtersNeedReplace[0].measure === 'H' && (
+          <AlertStatusMachine
+            message={t('{number}_filter_need_to_be_replaced', {
+              number: filtersNeedReplace.length,
+            })}
+            style={styles.alertReplaceFilter}
+            icon={'warning'}
+          />
+        )}
       <View style={styles.listBox}>{renderFlatList()}</View>
 
       {isFilters && !viewFull && (
@@ -97,7 +98,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
           onPress={() => setViewFull(true)}
         >
           <Text style={styles.textSeeMore}>{t('see_more')}</Text>
-          <AntDesign name={'caretdown'} color={Colors.Gray8} size={16} />
+          <IconOutline name={'caret-down'} color={Colors.Gray8} size={16} />
         </TouchableOpacity>
       )}
 

package/src/commons/Device/Hanet/ItemHanetDevice.js

@@ -5,7 +5,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import Text from '../../Text';
@@ -35,7 +35,7 @@ const ItemHanetDevice = memo(
       return iconKit ? (
         <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
       ) : (
-        <AntDesign name={svgMain} size={32} color={Colors.Red6} />
+        <IconOutline name={svgMain} size={32} color={Colors.Red6} />
       );
     };
 
@@ -58,7 +58,7 @@ const ItemHanetDevice = memo(
               {title}
             </Text>
             <View style={styles.row}>
-              <AntDesign name="right" size={12} />
+              <IconOutline name="right" size={12} />
             </View>
           </TouchableOpacity>
         </View>

package/src/commons/Device/Hanet/ItemHanetDevice.test.js

@@ -1,10 +1,10 @@
+import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import ItemHanetDevice from './ItemHanetDevice';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { useNavigation } from '@react-navigation/native';
+import ItemHanetDevice from './ItemHanetDevice';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -35,7 +35,7 @@ describe('Test ItemHanetDevice', () => {
     await act(async () => {
       tree = touches[0].props.onPress();
     });
-    expect(navigate).toBeCalled();
+    expect(navigate).toHaveBeenCalled();
   });
 
   it('render ItemHanetDevice sensor has icon', async () => {