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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.3-rc2",
+  "version": "0.7.3-rc21",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -52,9 +52,6 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "resolutions": {
-    "graceful-fs": "^4.2.4"
-  },
   "keywords": [
     "react-native"
   ],
@@ -62,9 +59,13 @@
   "license": "MIT",
   "licenseFilename": "LICENSE",
   "dependencies": {
+    "@ant-design/icons-react-native": "^2.3.2",
     "@babel/core": "^7.12.9",
     "@babel/helper-environment-visitor": "^7.16.7",
-    "@babel/runtime": "^7.12.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-transform-private-methods": "^7.24.7",
+    "@babel/runtime": "^7.20.0",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",
@@ -88,14 +89,14 @@
     "@react-navigation/native-stack": "^6.11.0",
     "@sentry/react-native": "^5.24.1",
     "@testing-library/react-hooks": "^6.0.0",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^29.2.1",
     "@types/react": "^17.0.0",
     "@types/react-native": "^0.63.43",
     "@types/react-test-renderer": "^17.0.0",
     "apisauce": "^2.1.5",
     "axios": "^0.19.2",
     "axios-mock-adapter": "^1.21.1",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^29.7.0",
     "base-64": "^1.0.0",
     "deprecated-react-native-prop-types": "^2.3.0",
     "detox": "^18.3.1",
@@ -110,13 +111,14 @@
     "husky": "^8.0.1",
     "i18n-js": "^3.7.1",
     "i18next": "^20.1.0",
-    "jest": "^26.6.3",
-    "jest-circus": "^26.6.3",
+    "jest": "^29",
+    "jest-circus": "^29",
+    "jest-environment-jsdom": "^29",
     "jetifier": "^1.6.6",
     "lint-staged": "^12.4.1",
     "lodash": "^4.17.19",
     "lottie-react-native": "^6.7.2",
-    "metro-react-native-babel-preset": "^0.66.2",
+    "metro-react-native-babel-preset": "0.73.9",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
     "node-html-parser": "^2.0.2",
@@ -147,7 +149,7 @@
     "react-native-dash": "^0.0.11",
     "react-native-deep-linking": "^2.2.0",
     "react-native-device-info": "^10.3.0",
-    "react-native-draggable-flatlist": "^2.6.2",
+    "react-native-draggable-flatlist": "^4.0.1",
     "react-native-fast-image": "^8.6.3",
     "react-native-geocoder": "^0.5.0",
     "react-native-gesture-handler": "^2.17.1",
@@ -158,7 +160,7 @@
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^1.4.1",
-    "react-native-maps": "^1.15.6",
+    "react-native-maps": "1.17.3",
     "react-native-modal": "^13.0.1",
     "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-new-snap-carousel": "^3.9.3",
@@ -169,10 +171,10 @@
     "react-native-permissions": "3.6.0",
     "react-native-popover-view": "^5.1.8",
     "react-native-progress": "^5.0.0",
-    "react-native-reanimated": "3.3.0",
+    "react-native-reanimated": "3.8.1",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
-    "react-native-screens": "^3.32.0",
+    "react-native-screens": "3.32.0",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
     "react-native-svg-transformer": "^0.14.3",
@@ -185,7 +187,7 @@
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "4.5.0",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "string-format": "^2.0.0",
     "sync-directory": "^5.1.7",
     "timezone-mock": "^1.1.3",

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -1,13 +1,13 @@
+import { IconOutline } from '@ant-design/icons-react-native';
+import { factory } from 'factory-girl';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
+import Toast from 'react-native-toast-message';
 import { act, create } from 'react-test-renderer';
-import ItemQuickAction from '../ItemQuickAction';
 import { Colors } from '../../../configs';
 import { AccessibilityLabel } from '../../../configs/Constants';
-import { factory } from 'factory-girl';
 import IconComponent from '../../IconComponent';
-import Toast from 'react-native-toast-message';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import ItemQuickAction from '../ItemQuickAction';
 class Sensor {}
 
 factory.define('Sensor', Sensor, {});
@@ -94,7 +94,7 @@ describe('Test ItemQuickAction', () => {
       await buttonOnActionPress.props.onPress();
     });
 
-    const icon = instance.findByType(AntDesign);
+    const icon = instance.findByType(IconOutline);
     expect(icon.props.color).toEqual(Colors.TextGray);
   });
 
@@ -256,7 +256,7 @@ describe('Test ItemQuickAction', () => {
     await act(async () => {
       await buttonOnActionPress.props.onPress();
     });
-    expect(Toast.show).not.toBeCalled();
+    expect(Toast.show).not.toHaveBeenCalled();
   });
   it('test config value 0 on_state_values 0', async () => {
     sensor.quick_action.on_state_values = [0];

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 import Text from '../Text';
@@ -116,7 +116,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionDown}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_DOWN}
         >
-          <AntDesign name="down" size={32} color={Colors.Primary} />
+          <IconOutline name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
         <Text accessibilityLabel={'text_format'} type="H2">
@@ -132,7 +132,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionUp}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_UP}
         >
-          <AntDesign name="up" size={32} color={Colors.Primary} />
+          <IconOutline name="up" size={32} color={Colors.Primary} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Switch, View } from 'react-native';
 import styles from './ButtonWrapperStyles';
 import Text from '../../../Text';
@@ -28,7 +28,7 @@ const ButtonWrapper = memo(
           </View>
         ) : (
           <View style={styles.wrapHeadline}>
-            <AntDesign name={'lock'} size={20} color={Colors.Gray9} />
+            <IconOutline name={'lock'} size={20} color={Colors.Gray9} />
             <Text style={styles.textAutoLock}>
               {isButtonEnable ? t('auto_lock_enabled') : t('auto_lock_when')}
             </Text>
@@ -49,7 +49,7 @@ const ButtonWrapper = memo(
             <Text type="Body" style={styles.textValue}>
               {t('instant')}
             </Text>
-            <AntDesign name="right" size={20} color={Colors.Gray7} />
+            <IconOutline name="right" size={20} color={Colors.Gray7} />
           </View>
         )}
         {isButtonReLockTiming && (

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 
-import { mockSCStore } from '../../../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
 import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
-import PasscodeList from '../index';
-import { TouchableOpacity } from 'react-native';
+import { mockSCStore } from '../../../../../context/mockStore';
 import Routes from '../../../../../utils/Route';
-import { useNavigation } from '@react-navigation/native';
+import PasscodeList from '../index';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -41,7 +41,7 @@ describe('Test SetupGeneratePasscode', () => {
     await act(async () => {
       await passcode_list[0].props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.SmartLockStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.SmartLockStack, {
       screen: Routes.ItemPasscode,
       params: {
         item: { code: 123361, name: 'Do Loi' },

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { TextInput, View, TouchableOpacity } 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';
@@ -39,7 +39,7 @@ const PasscodeList = memo(() => {
       <View style={styles.wrap}>
         <View style={styles.searchBox}>
           <View>
-            <AntDesign name="search" size={24} style={styles.search} />
+            <IconOutline name="search" size={24} style={styles.search} />
           </View>
           <TextInput
             placeholder={t('search')}
@@ -58,7 +58,7 @@ const PasscodeList = memo(() => {
               <Text style={styles.textCode}>{item.code}</Text>
               <Text style={styles.textName}>{item.name}</Text>
             </View>
-            <AntDesign name="right" size={20} color={Colors.Gray8} />
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         ))}
       </View>

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Text, TouchableOpacity, View } from 'react-native';
 
 import { RadioCircle } from '../../..';
@@ -50,7 +50,7 @@ const ButtonWrapper = memo(
         {isButtonChooseUser && (
           <TouchableOpacity style={styles.buttonValue}>
             <Text style={styles.value}>{value}</Text>
-            <AntDesign name="right" size={20} color={Colors.Gray8} />
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
         {isButtonSetTime && (

package/src/commons/ActionGroup/OnOffTemplate/OnOffSimpleTemplate.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Switch } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import Text from '../../Text';
 import styles from './OnOffSimpleTemplateStyle';
@@ -15,7 +15,7 @@ const OnOffSimpleTemplate = ({
   return (
     <View style={styles.wrap}>
       <View style={styles.iconAndText}>
-        <AntDesign name="poweroff" size={20} style={styles.marginRight} />
+        <IconOutline name="poweroff" size={20} style={styles.marginRight} />
         <Text type="H4">{actionGroup.title}</Text>
       </View>
       {isOn !== null && (

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { View, TouchableOpacity, ScrollView } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 import Text from '../../commons/Text';
@@ -139,7 +139,7 @@ const OptionsDropdownActionTemplate = ({
         >
           {displaySelected}
         </Text>
-        <AntDesign name="right" size={20} />
+        <IconOutline name="right" size={20} />
       </TouchableOpacity>
       <AlertAction
         visible={stateAlert.visible}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -48,18 +48,20 @@ const SliderRangeTemplate = memo(
       clearTimeout(timeout.current);
       if (value) {
         const data = parseInt(value, 10);
+        const numericValue = Math.min(max_value, Math.max(min_value, data));
+        setValue(numericValue);
         await doAction(
           action_data,
           JSON.stringify({
-            value_brness: data,
-            value: data,
+            value_brness: numericValue,
+            value: numericValue,
           })
         );
       }
       timeout.current = setTimeout(() => {
         setProcessing(false);
       }, 3000);
-    }, [action_data, doAction, value]);
+    }, [action_data, doAction, max_value, min_value, value]);
 
     useEffect(() => {
       if (!processing) {
@@ -72,12 +74,10 @@ const SliderRangeTemplate = memo(
 
     const onInputChange = (text) => {
       if (text === '' || isNaN(text)) {
-        setValue(min_value);
+        setValue(0);
         return;
       }
-
-      const numericValue = Number(text);
-      setValue(Math.min(max_value, Math.max(min_value, numericValue)));
+      setValue(Number(text));
     };
 
     return (

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -5,7 +5,7 @@ import styles from './SmartTiviActionTemplateStyles';
 import Text from '../../Text';
 import { Colors } from '../../../configs';
 import { SMART_TIVI_BUTTON } from '../../../configs/Constants';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import CircleButton from './component/CircleButton';
 import RectangleButton from './component/RectangleButton';
 import ControlPlay from './component/ControlPlay';
@@ -97,7 +97,7 @@ const SmartTiviActionTemplate = memo(
               <CircleButton
                 type="small"
                 icon={
-                  <AntDesign
+                  <IconOutline
                     name="poweroff"
                     size={20}
                     color={Colors.Gray6}

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/CircleButton.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, View, Image } from 'react-native';
 import styles from './CircleButtonStyles';
 import Text from '../../../Text';
 import { Colors, Images } from '../../../../configs';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const CircleButton = memo(
@@ -46,7 +46,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.UP_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretup'} />
+                <IconOutline size={14} name={'caret-up'} />
               </TouchableOpacity>
             </View>
             <View style={styles.bodyMultipleButton}>
@@ -57,7 +57,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.LEFT_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretleft'} />
+                <IconOutline size={14} name={'caret-left'} />
               </TouchableOpacity>
               <TouchableOpacity
                 style={[styles.okButton]}
@@ -77,7 +77,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.RIGHT_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caret-right'} />
+                <IconOutline size={14} name={'caret-right'} />
               </TouchableOpacity>
             </View>
             <View style={styles.footerMultipleButton}>
@@ -88,7 +88,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.DOWN_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretdown'} />
+                <IconOutline size={14} name={'caret-down'} />
               </TouchableOpacity>
             </View>
           </View>

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -6,7 +6,7 @@ import styles from './ControlPlayStyles';
 import { Pause } from './Icon';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ControlPlay = memo(
   ({ onPressPrev, onPressStop, onPressNext, wrapStyle }) => {
@@ -19,9 +19,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepbackward'}
+            name={'backward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />
@@ -42,9 +42,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepforward'}
+            name={'forward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './TerminalBoxTemplateStyle';
@@ -174,7 +174,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
           disabled={!value}
         >
-          <AntDesign name="send" size={25} />
+          <IconOutline name="send" size={25} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { AlertAction } from '../../commons';
 import { useDropdownAction } from './hooks/useDropdownAction';
@@ -48,7 +48,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <AntDesign name="edit" size={25} />
+          <IconOutline name="edit" size={25} />
         </TouchableOpacity>
       </View>
       <AlertAction

package/src/commons/ActionGroup/ThreeButtonTemplate/__test__/ThreeButtonCircle.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
 
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
@@ -47,6 +47,6 @@ describe('Test ThreeButtonCircle', () => {
     await act(async () => {
       touchableOpacities[0].props.onPress();
     });
-    expect(mockOnButton1Press).toBeCalled();
+    expect(mockOnButton1Press).toHaveBeenCalled();
   });
 });

package/src/commons/ActionGroup/ThreeButtonTemplate/__test__/ThreeButtonDefault.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
 
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
@@ -47,6 +47,6 @@ describe('Test ThreeButtonDefault', () => {
     await act(async () => {
       touchableOpacities[0].props.onPress();
     });
-    expect(mockOnButton1Press).toBeCalled();
+    expect(mockOnButton1Press).toHaveBeenCalled();
   });
 });

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Switch, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import { watchMultiConfigs } from '../../iot/Monitor';
@@ -183,7 +183,10 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
           <Text>{title}</Text>
           {configuration.config_hour && configuration.config_minute && (
             <View style={styles.wrapTimer}>
-              <AntDesign style={styles.iconClockCircle} name={'clock-circle'} />
+              <IconOutline
+                style={styles.iconClockCircle}
+                name={'clock-circle'}
+              />
               <Text type="Label" color={Colors.Gray7}>
                 {textTimer ? textTimer : t('set_time')}
               </Text>
@@ -193,7 +196,7 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
         {configuration.config_hour && !configuration.config_minute && (
           <View style={styles.timerButton}>
             <Text style={styles.textTimerEndLine}>{textTimer}</Text>
-            <AntDesign name="right" size={20} />
+            <IconOutline name="right" size={20} />
           </View>
         )}
       </TouchableOpacity>

package/src/commons/ActionGroup/TwoButtonTemplate/index.js

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import React, { memo, useState, useCallback, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
@@ -122,7 +122,7 @@ const TwoButtonTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
             key={index}
           >
             <View style={styles.smallCircle}>
-              <AntDesign
+              <IconOutline
                 name={button?.isCheckOnOff ? button?.icon_on : button?.icon_off}
                 size={44}
                 color={button?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}

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

@@ -1,13 +1,12 @@
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import React, { useContext } from 'react';
+import ColorPicker from 'react-native-wheel-color-picker';
 import { act, create } from 'react-test-renderer';
-import ColorPickerTemplate from '../ColorPickerTemplate';
-import { WheelColorPicker } from '../ColorPickerTemplate';
+import { DEVICE_TYPE } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
-import ColorPicker from 'react-native-wheel-color-picker';
-import { DEVICE_TYPE } from '../../../configs/Constants';
+import ColorPickerTemplate, { WheelColorPicker } from '../ColorPickerTemplate';
 
 const mockSetAction = jest.fn();
 
@@ -106,7 +105,7 @@ describe('Test ColorPickerTemplate', () => {
     await act(async () => {
       await wheelpicker.props.onStart();
     });
-    expect(mockSetAction).toBeCalled();
+    expect(mockSetAction).toHaveBeenCalled();
   });
 
   it('test WheelColorPicker onChangeColorComplete', async () => {
@@ -123,13 +122,13 @@ describe('Test ColorPickerTemplate', () => {
     await act(async () => {
       await wheelpicker.props.onStart();
     });
-    expect(mockSetAction).toBeCalledTimes(1);
-    expect(mockDoAction).toBeCalledTimes(0);
+    expect(mockSetAction).toHaveBeenCalledTimes(1);
+    expect(mockDoAction).toHaveBeenCalledTimes(0);
 
     await act(async () => {
       await wheelpicker.props.onChangeColorComplete('#ffffff');
     });
-    expect(mockSetAction).toBeCalledTimes(2);
-    expect(mockDoAction).toBeCalledTimes(1);
+    expect(mockSetAction).toHaveBeenCalledTimes(2);
+    expect(mockDoAction).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,11 +1,11 @@
-import { AccessibilityLabel } from '../../../configs/Constants';
-import { watchMultiConfigs } from '../../../iot/Monitor';
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import OnOffSmartLock from '../OnOffSmartLock/OnOffSmartLock';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
+import OnOffSmartLock from '../OnOffSmartLock/OnOffSmartLock';
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -76,7 +76,7 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(actionOnData, '{"door_lock":0}');
+    expect(mockDoAction).toHaveBeenCalledWith(actionOnData, '{"door_lock":0}');
   });
 
   it('render with template OnOffSmartLockActionTemplate doAction unlock', async () => {
@@ -96,6 +96,6 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(mockDoAction).toBeCalledWith(actionOffData, '{"door_lock":1}');
+    expect(mockDoAction).toHaveBeenCalledWith(actionOffData, '{"door_lock":1}');
   });
 });