@eohjsc/react-native-smart-city 0.2.65 → 0.2.69

package/src/screens/SharedUnit/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import { View, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+
 import { axiosGet } from '../../utils/Apis/axios';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-
 import { API } from '../../configs';
 import Text from '../../commons/Text';
 import SharedUnit from '../../commons/Unit/SharedUnit';
@@ -24,7 +24,7 @@ const Shared = () => {
   useTitleHeader(t('text_shared_with_me'));
   const navigation = useNavigation();
   const [tab, setTabActiveState] = useState(0);
-
+  const isFocused = useIsFocused();
   const [sharedUnits, setSharedUnits] = useState([]);
 
   const dataStarred = useMemo(
@@ -73,8 +73,10 @@ const Shared = () => {
   }, [language, forceUpdate]);
 
   useEffect(() => {
-    filterSharedUnits(filter);
-  }, [filterSharedUnits, filter]);
+    if (isFocused) {
+      filterSharedUnits(filter);
+    }
+  }, [filterSharedUnits, filter, isFocused]);
 
   const onRefresh = useCallback(() => {
     filterSharedUnits(filter);

package/src/screens/Sharing/Components/SensorItem.js

@@ -5,11 +5,13 @@ import { Colors } from '../../../configs';
 import styles from './Styles/SensorItemStyles';
 import FImage from '../../../commons/FImage';
 import { TitleCheckBox } from '.';
+import { CheckBoxCustom } from '.';
 
 const SensorItem = ({
   item = {},
   isRenderSeparated,
   onTickedChild,
+  onTickedSensor,
   titleGroup,
   activeItemId,
   setActiveItemId,
@@ -21,21 +23,22 @@ const SensorItem = ({
     actions = [],
     read_configs = [],
     icon_kit = '',
+    isChecked,
   } = item;
-  const [expanded, setExpanded] = useState(activeItemId === id);
   const [dataConfig, setDataConfig] = useState([
     ...actions,
     ...read_configs.map((i) => ({ ...i, isConfig: true })),
   ]);
 
+  const expanded = activeItemId === id;
+
   const onPressItem = () => {
-    setActiveItemId(id);
-    if (activeItemId === id) {
-      setExpanded(!expanded);
+    if (dataConfig.length > 0) {
+      expanded ? setActiveItemId(-1) : setActiveItemId(id);
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     } else {
-      setExpanded(false);
+      handleOnTickedSensor();
     }
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
   };
 
   const handleOnTickedChild = (idGroup, isChecked, childId) => {
@@ -56,6 +59,10 @@ const SensorItem = ({
       );
   };
 
+  const handleOnTickedSensor = () => {
+    onTickedSensor && onTickedSensor(idGroup, id, !isChecked);
+  };
+
   useEffect(() => {
     if (
       Platform.OS === 'android' &&
@@ -97,12 +104,20 @@ const SensorItem = ({
           <Text numberOfLines={1} style={styles.text} onPress={onPressItem}>
             {name}
           </Text>
-          <IconOutline
-            onPress={onPressItem}
-            name={expanded ? 'up' : 'down'}
-            size={20}
-            color={Colors.Gray6}
-          />
+          {dataConfig.length > 0 ? (
+            <IconOutline
+              onPress={onPressItem}
+              name={expanded ? 'up' : 'down'}
+              size={20}
+              color={Colors.Gray6}
+            />
+          ) : (
+            <CheckBoxCustom
+              isChecked={isChecked}
+              onPress={onPressItem}
+              wrapStyle={styles.checkBox}
+            />
+          )}
         </View>
         {expanded && <View style={styles.wrapExpand}>{renderData}</View>}
         {isRenderSeparated && <View style={styles.viewSeparated} />}

package/src/screens/Sharing/Components/Styles/SensorItemStyles.js

@@ -53,4 +53,8 @@ export default StyleSheet.create({
   wrapExpand: {
     marginTop: 10,
   },
+  checkBox: {
+    width: normalize(20),
+    height: normalize(20),
+  },
 });

package/src/screens/Sharing/SelectPermission.js

@@ -38,11 +38,12 @@ const SelectPermission = ({ route }) => {
         ...i,
         isChecked,
       }));
-      for (let sensor in data) {
-        for (let item in data[sensor].sensors) {
-          const itemTemp = data[sensor].sensors[item];
-          data[sensor].sensors[item] = {
+      for (let station in data) {
+        for (let item in data[station].sensors) {
+          const itemTemp = data[station].sensors[item];
+          data[station].sensors[item] = {
             ...itemTemp,
+            isChecked,
             actions: itemTemp.actions.map((i) => ({
               ...i,
               isChecked,
@@ -63,6 +64,7 @@ const SelectPermission = ({ route }) => {
         isChecked,
         sensors: data[index]?.sensors.map((i) => ({
           ...i,
+          isChecked,
           actions: i.actions.map((j) => ({ ...j, isChecked })),
           read_configs: i.read_configs.map((j) => ({ ...j, isChecked })),
         })),
@@ -80,33 +82,38 @@ const SelectPermission = ({ route }) => {
     isReadConfig
   ) => {
     let data = [...dataStationTemp];
-    const indexGroup = data.findIndex((item) => item.id === idGroup);
-    const indexSensor = (data[indexGroup]?.sensors || []).findIndex(
-      (item) => item.id === sensorId
+    const group = data.find((i) => i.id === idGroup);
+    const sensor = group.sensors.find((i) => i.id === sensorId);
+    const child = sensor[`${isReadConfig ? 'read_configs' : 'actions'}`].find(
+      (i) => i.id === childId
     );
-    const indexChild = (data[indexGroup]?.sensors || [])[indexSensor][
-      `${isReadConfig ? 'read_configs' : 'actions'}`
-    ].findIndex((item) => item.id === childId);
-    (data[indexGroup]?.sensors || [])[indexSensor][
-      `${isReadConfig ? 'read_configs' : 'actions'}`
-    ][indexChild] = {
-      ...(data[indexGroup]?.sensors || [])[indexSensor][
-        `${isReadConfig ? 'read_configs' : 'actions'}`
-      ][indexChild],
-      isChecked,
-    };
-    for (let i of data) {
-      if (i.sensors.length) {
-        let isChecked;
-        let arrChecked = [];
-        for (let j of i.sensors) {
-          isChecked = !(
-            j.actions.some((k) => !k.isChecked) ||
-            j.read_configs.some((k) => !k.isChecked)
-          );
-          arrChecked.push(isChecked);
-        }
-        i.isChecked = !arrChecked.some((i) => !i);
+
+    child.isChecked = isChecked;
+    sensor.isChecked = !(
+      sensor.read_configs.some((i) => !i.isChecked) ||
+      sensor.actions.some((i) => !i.isChecked)
+    );
+
+    for (let station of data) {
+      if (station.sensors.length) {
+        station.isChecked = !station.sensors.some((i) => !i.isChecked);
+      }
+    }
+    setIsTickAllDevices(!dataStationTemp.some((i) => !i.isChecked));
+    dataStationTemp = data;
+    setDataStations(data);
+  };
+
+  const onTickedSensor = (idGroup, sensorId, isChecked) => {
+    let data = [...dataStationTemp];
+    const group = data.find((i) => i.id === idGroup);
+    const sensor = group.sensors.find((i) => i.id === sensorId);
+
+    sensor.isChecked = isChecked;
+
+    for (let station of data) {
+      if (station.sensors.length) {
+        station.isChecked = !station.sensors.some((i) => !i.isChecked);
       }
     }
     setIsTickAllDevices(!dataStationTemp.some((i) => !i.isChecked));
@@ -133,6 +140,7 @@ const SelectPermission = ({ route }) => {
               key={i.id}
               isRenderSeparated={index !== sensors.length - 1}
               onTickedChild={onTickedChild}
+              onTickedSensor={onTickedSensor}
               titleGroup={name}
               activeItemId={activeItemId}
               setActiveItemId={setActiveItemId}
@@ -147,8 +155,8 @@ const SelectPermission = ({ route }) => {
   const onPressNext = () => {
     let read_permissions = [],
       control_permissions = [];
-    for (let sensor of dataStationTemp) {
-      for (let item of sensor.sensors) {
+    for (let station of dataStationTemp) {
+      for (let item of station.sensors) {
         let arrIdControlTemp = [],
           arrIdReadTemp = [];
         for (let i of item.actions) {
@@ -161,6 +169,10 @@ const SelectPermission = ({ route }) => {
           control_permissions.push({ id: item.id, values: arrIdControlTemp });
         arrIdReadTemp.length &&
           read_permissions.push({ id: item.id, values: arrIdReadTemp });
+        !arrIdControlTemp.length &&
+          !arrIdReadTemp.length &&
+          item.isChecked &&
+          read_permissions.push({ id: item.id, values: [] });
       }
     }
     if (!read_permissions.length && !control_permissions.length) {

package/src/screens/Sharing/__test__/SelectPermission.test.js

@@ -144,6 +144,7 @@ describe('Test SelectPermission', () => {
           {
             actions: [{ id: 136, isChecked: true, name: 'action 1' }],
             id: 123,
+            isChecked: true,
             name: 'child1',
             read_configs: [{ id: 137, isChecked: true, name: 'config 1' }],
           },
@@ -165,7 +166,7 @@ describe('Test SelectPermission', () => {
     const SensorItemElement = instance.findAllByType(SensorItem);
     expect(SensorItemElement).toHaveLength(1);
     act(() => {
-      SensorItemElement[0].props.onTickedChild(204, 123, 136, true, true);
+      SensorItemElement[0].props.onTickedChild(204, 123, 137, true, true);
     });
     expect(mockSetDataStations).toBeCalled();
   });

package/src/screens/SubUnit/AddSubUnit.js

@@ -13,7 +13,6 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import ImageResizer from 'react-native-image-resizer';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
@@ -25,29 +24,11 @@ import { axiosPost, createFormData } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { TESTID } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
-
-const MAX_FILE_SIZE_BYTES = 1.5 * 1024 * 1024; // 1.5mb
-
-const prepareImageToUpload = async (image) => {
-  if (!image || image.size < MAX_FILE_SIZE_BYTES) {
-    return image;
-  }
-  const result = await ImageResizer.createResizedImage(
-    image.path,
-    1280,
-    1280,
-    'JPEG',
-    70
-  );
-  return {
-    fileName: result?.name,
-    type: 'image/jpeg',
-    uri: result?.uri,
-  };
-};
+import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
+  const { dismissKeyboard } = useKeyboardShow();
   const { navigate, goBack } = useNavigation();
   const { unit, addType, isAddUnit, location = '' } = route?.params;
   const [roomName, setRoomName] = useState('');
@@ -72,7 +53,6 @@ const AddSubUnit = ({ route }) => {
           address: location,
           background: wallpaper,
         };
-        dataObj.background = await prepareImageToUpload(dataObj.background);
         const formData = createFormData(dataObj, ['background']);
         const { success, data } = await axiosPost(
           API.UNIT.CREATE_UNIT(),
@@ -99,7 +79,6 @@ const AddSubUnit = ({ route }) => {
       if (!awaitCreate.current) {
         awaitCreate.current = true;
         const dataObj = { name: roomName, background: wallpaper };
-        dataObj.background = await prepareImageToUpload(dataObj.background);
         const formData = createFormData(dataObj, ['background']);
         const { success } = await axiosPost(
           API.SUB_UNIT.CREATE_SUB_UNIT(unit.id),
@@ -149,8 +128,9 @@ const AddSubUnit = ({ route }) => {
   ]);
 
   const onChoosePhoto = useCallback(() => {
+    dismissKeyboard();
     setShowImagePicker(true);
-  }, []);
+  }, [dismissKeyboard]);
 
   useEffect(() => {
     if (imageUrl) {

package/src/screens/TDSGuide/index.js

@@ -22,12 +22,12 @@ const TDSGuide = memo(() => {
         >
           {t('what_is_tds_title')}
         </Text>
-        <Text type="Body">{t('what_is_tds_text')}</Text>
+        <Text style={styles.tdsText}>{t('what_is_tds_text')}</Text>
         <Text type="H3" semibold style={styles.titlePadding}>
           {t('tds_guidlines_title')}
         </Text>
         <>
-          <Text type="Body">
+          <Text style={styles.tdsText}>
             {t('tds_guidlines_text_1')}
             {'\n'}
             {'\n'}
@@ -56,4 +56,7 @@ const styles = StyleSheet.create({
     paddingTop: 20,
     paddingBottom: 10,
   },
+  tdsText: {
+    fontSize: 15,
+  },
 });

package/src/screens/Unit/AddMenu.js

@@ -4,6 +4,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import AddSubUnitIcon from '../../../assets/images/Popover/Dashboard/AddSubUnit.svg';
 import AddDeviceIcon from '../../../assets/images/Popover/Dashboard/AddDevice.svg';
+import SmartAccount from '../../../assets/images/Popover/Dashboard/SmartAccount.svg';
 import AddMemberIcon from '../../../assets/images/Popover/Dashboard/AddMember.svg';
 import { useNavigation } from '@react-navigation/native';
 
@@ -50,6 +51,20 @@ const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
         image: <AddDeviceIcon width={43} height={43} />, // TODO change icon
         data: { screen: Routes.SetupGatewayWifi, params: { unit_id: unit.id } },
       },
+      {
+        id: 5,
+        route: Routes.AddGatewayStack,
+        text: t('gateway') + ' Wifi',
+        image: <AddDeviceIcon width={43} height={43} />,
+        data: { screen: Routes.FirstWarning, params: { unit_id: unit.id } },
+      },
+      {
+        id: 6,
+        route: Routes.SmartAccount,
+        text: t('name_smart_account'),
+        image: <SmartAccount width={43} height={43} />, // TODO change icon
+        type: Routes.SmartAccount,
+      },
     ];
   }, [t, unit]);
 

package/src/screens/Unit/Detail.js

@@ -31,7 +31,14 @@ import { AUTOMATE_TYPE } from '../../configs/Constants';
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
 
-  const { unitId, unitData, isOneTap, routeName, isAddSubUnit } = route.params;
+  const {
+    unitId,
+    unitData,
+    isOneTap,
+    routeName,
+    isAddSubUnit,
+    isSuccessfullyConnected,
+  } = route.params;
 
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
@@ -115,12 +122,12 @@ const UnitDetail = ({ route }) => {
         if (success) {
           setListAutomate([
             {
-              text: t(AUTOMATE_TYPE.SCENARIO),
+              text: t(AUTOMATE_TYPE.ONE_TAP),
               data: data.filter((item) => item.type === AUTOMATE_TYPE.ONE_TAP),
               type: AUTOMATE_TYPE.ONE_TAP,
             },
             {
-              text: t(AUTOMATE_TYPE.AUTOMATION),
+              text: t(AUTOMATE_TYPE.SCENARIO),
               data: data.filter((item) => item.type !== AUTOMATE_TYPE.ONE_TAP),
               type: AUTOMATE_TYPE.AUTOMATION,
             },
@@ -298,6 +305,10 @@ const UnitDetail = ({ route }) => {
     navigate(routeName);
   }, [navigate, routeName]);
 
+  const Dashboard = useCallback(() => {
+    navigate(Routes.Dashboard);
+  }, [navigate]);
+
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
@@ -310,7 +321,7 @@ const UnitDetail = ({ route }) => {
       onAdd={setShowAdd}
       onMore={showPopoverWithRef}
       hideRightPlus={!isOwner}
-      onBack={routeName && onBack}
+      onBack={(isSuccessfullyConnected && Dashboard) || (routeName && onBack)}
     >
       <View style={styles.container}>
         <Summaries unit={unit} />

package/src/screens/Unit/SmartAccount.js

@@ -14,9 +14,10 @@ import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { axiosDelete, axiosGet } from '../../utils/Apis/axios';
 import { SmartAccountItem } from './SmartAccountItem';
-import { usePopover } from '../../hooks/Common';
-import { MenuActionMore } from '../../commons';
+import { usePopover, useBoolean } from '../../hooks/Common';
+import { MenuActionMore, AlertAction } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -36,6 +37,9 @@ const ListSmartAccount = ({ route }) => {
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
+  const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
+  const { stateAlertRemove, onShowRemoveAlert, hideAlertAction } =
+    useStateAlertRemove();
 
   useEffect(() => {
     getAllSmartAccounts();
@@ -50,29 +54,31 @@ const ListSmartAccount = ({ route }) => {
     [showPopoverWithRef]
   );
 
-  const deleteSmartAccount = useCallback(async () => {
-    if (!smartAccountRef?.current) {
-      return;
-    }
-    const id = smartAccountRef.current.id;
-    const { success } = await axiosDelete(
-      API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
-    );
-    success && getAllSmartAccounts();
-  }, [getAllSmartAccounts]);
-
   const onItemClick = useCallback(
     (item) => {
       if (!smartAccountRef?.current) {
         return;
       }
       if (item.action === 'remove') {
-        deleteSmartAccount();
+        acquireLockShowing();
+        onShowRemoveAlert(smartAccountRef.current.brand)();
       }
     },
-    [deleteSmartAccount]
+    [acquireLockShowing, onShowRemoveAlert]
   );
 
+  const deleteSmartAccount = useCallback(async () => {
+    hideAlertAction();
+    if (!smartAccountRef?.current) {
+      return;
+    }
+    const id = smartAccountRef.current.id;
+    const { success } = await axiosDelete(
+      API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
+    );
+    success && getAllSmartAccounts();
+  }, [getAllSmartAccounts, hideAlertAction]);
+
   const listMenuItem = useMemo(() => {
     return [{ action: 'remove', text: t('remove_account') }];
   }, [t]);
@@ -88,6 +94,7 @@ const ListSmartAccount = ({ route }) => {
     },
     [navigate, unitId]
   );
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -109,12 +116,26 @@ const ListSmartAccount = ({ route }) => {
             );
           })}
         </View>
+        <AlertAction
+          visible={stateAlertRemove.visible && !lockShowing}
+          hideModal={hideAlertAction}
+          title={stateAlertRemove.title}
+          message={stateAlertRemove.message}
+          leftButtonTitle={stateAlertRemove.leftButton}
+          leftButtonClick={deleteSmartAccount}
+          rightButtonTitle={stateAlertRemove.rightButton}
+          rightButtonClick={hideAlertAction}
+          boxLeftButtonStyle={styles.boxButtonNotSelect}
+          boxRightButtonStyle={styles.boxButtonSelect}
+          rightButtonStyle={styles.textRightButton}
+        />
         <MenuActionMore
           isVisible={showingPopover}
           hideMore={hidePopover}
           listMenuItem={listMenuItem}
           childRef={childRef}
           onItemClick={onItemClick}
+          hideComplete={releaseLockShowing}
         />
       </WrapHeaderScrollable>
     </View>

package/src/screens/Unit/SmartAccountStyles.js

@@ -42,4 +42,24 @@ export default StyleSheet.create({
     borderColor: Colors.ShadownTransparent,
     borderTopWidth: 1,
   },
+  boxButtonNotSelect: {
+    marginVertical: 16,
+    height: 45,
+    borderRadius: 30,
+    borderColor: Colors.Primary,
+    borderWidth: 1,
+    paddingVertical: 0,
+  },
+  boxButtonSelect: {
+    marginVertical: 16,
+    height: 45,
+    borderRadius: 30,
+    borderColor: Colors.Primary,
+    backgroundColor: Colors.Primary,
+    borderWidth: 1,
+    paddingVertical: 0,
+  },
+  textRightButton: {
+    color: Colors.White,
+  },
 });

package/src/screens/Unit/components/__test__/MyUnitDevice.test.js

@@ -1,17 +1,23 @@
 import React from 'react';
 import { View } from 'react-native';
 import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import MyUnitDevice from '../MyUnitDevice';
 
+const wrapComponent = (sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MyUnitDevice sensor={sensor} />
+  </SCProvider>
+);
+
 describe('Test MyUnitDevice', () => {
   let tree;
 
   it('Test render with status', async () => {
     await act(() => {
       tree = create(
-        <MyUnitDevice
-          sensor={{ status: 'Ok', name: 'Test', station_name: '' }}
-        />
+        wrapComponent({ status: 'Ok', name: 'Test', station_name: '' })
       );
     });
     const instance = tree.root;
@@ -21,9 +27,7 @@ describe('Test MyUnitDevice', () => {
 
   it('Test render without status', async () => {
     await act(() => {
-      tree = create(
-        <MyUnitDevice sensor={{ name: 'Test', station_name: '' }} />
-      );
+      tree = create(wrapComponent({ name: 'Test', station_name: '' }));
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);

package/src/screens/Unit/hook/useStateAlertRemove.js

@@ -5,10 +5,10 @@ export const useStateAlertRemove = () => {
   const t = useTranslations();
   const [stateAlertRemove, setStateAlertRemove] = useState({
     visible: false,
-    title: t('delete_smart_account'),
+    title: t('remove_account'),
     message: '',
-    leftButton: t('cancel'),
-    rightButton: t('remove'),
+    leftButton: t('yes_remove'),
+    rightButton: t('cancel'),
   });
   const hideAlertAction = useCallback(() => {
     setStateAlertRemove((state) => ({
@@ -22,9 +22,7 @@ export const useStateAlertRemove = () => {
       setStateAlertRemove((state) => ({
         ...state,
         visible: true,
-        message: `${t('are_you_sure_want_to_delete', {
-          text: brand === 'google_home' ? 'Điện Quang' : brand,
-        })}`,
+        message: t('this_action_will_remove_all_related_devices'),
       }));
     },
     [t]

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -77,10 +77,8 @@ const PowerConsumption = memo(({ summaryDetail }) => {
   const dataTotal = [];
   dataTotal.push(totalPower);
 
-  const [startDate, setStartDate] = useState(
-    moment().subtract(6, 'days').valueOf()
-  );
-  const [endDate, setEndDate] = useState(moment().valueOf());
+  const [startDate, setStartDate] = useState(moment().subtract(6, 'days'));
+  const [endDate, setEndDate] = useState(moment());
   const [groupBy, setGroupBy] = useState('date');
   const [getData, setData] = useState([]);
   const [chartConfig, setChartConfig] = useState({

package/src/screens/UnitSummary/components/RunningDevices/__test__/index.test.js

@@ -3,6 +3,14 @@ import { act, create } from 'react-test-renderer';
 import RunningDevices from '..';
 import { TouchableOpacity } from 'react-native';
 import ItemDevice from '../../../../../commons/Device/ItemDevice';
+import { mockSCStore } from '../../../../../context/mockStore';
+import { SCProvider } from '../../../../../context';
+
+const wrapComponent = (unit, summaryDetail) => (
+  <SCProvider initState={mockSCStore({})}>
+    <RunningDevices unit={unit} summaryDetail={summaryDetail} />
+  </SCProvider>
+);
 
 const mockedNavigate = jest.fn();
 
@@ -55,9 +63,7 @@ describe('test RunningDevices', () => {
       };
 
       await act(async () => {
-        tree = await create(
-          <RunningDevices unit={unit} summaryDetail={summaryDetail} />
-        );
+        tree = await create(wrapComponent(unit, summaryDetail));
       });
       const instance = tree.root;
       const texts = instance.findAllByType(ItemDevice);
@@ -95,9 +101,7 @@ describe('test RunningDevices', () => {
     };
 
     await act(async () => {
-      tree = await create(
-        <RunningDevices unit={unit} summaryDetail={summaryDetail} />
-      );
+      tree = await create(wrapComponent(unit, summaryDetail));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(ItemDevice);