@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/commons/ImagePicker/__test__/ImagePicker.test.js

@@ -3,6 +3,23 @@ import renderer, { act } from 'react-test-renderer';
 
 import ImagePicker from '../index';
 import ButtonPopup from '../../ButtonPopup';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (options) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ImagePicker
+      showImagePicker={true}
+      setShowImagePicker={''}
+      setImageUrl={'setImageUrl'}
+      optionsCapture={options}
+      optionsSelect={{
+        mediaType: 'photo',
+        quality: 1,
+      }}
+    />
+  </SCProvider>
+);
 
 describe('Test ImagePicker', () => {
   let tree;
@@ -13,7 +30,7 @@ describe('Test ImagePicker', () => {
   test('create ImagePicker', () => {
     Platform.OS = 'android';
     act(() => {
-      tree = renderer.create(<ImagePicker />);
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);
@@ -29,18 +46,7 @@ describe('Test ImagePicker', () => {
       saveToPhotos: true,
     };
     act(() => {
-      tree = renderer.create(
-        <ImagePicker
-          showImagePicker={true}
-          setShowImagePicker={''}
-          setImageUrl={'setImageUrl'}
-          optionsCapture={options}
-          optionsSelect={{
-            mediaType: 'photo',
-            quality: 1,
-          }}
-        />
-      );
+      tree = renderer.create(wrapComponent(options));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);

package/src/commons/ImagePicker/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Platform, PermissionsAndroid } from 'react-native';
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import ButtonPopup from '../ButtonPopup';
 
@@ -12,6 +12,8 @@ const ImagePicker = ({
   optionsCapture,
   optionsSelect,
 }) => {
+  const t = useTranslations();
+
   const requestCameraPermission = useCallback(async () => {
     if (Platform.OS === 'android') {
       try {

package/src/commons/MediaPlayer/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
 import { Colors, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
@@ -93,6 +93,7 @@ const PreviewPlayer = memo(({ uri, start }) => {
 });
 
 const MediaPlayer = memo(({ uri, previewUri, thumbnail, style }) => {
+  const t = useTranslations();
   const [started, setStarted] = useState(false);
   const [paused, setPaused] = useState(true);
 

package/src/commons/MediaPlayerDetail/__test__/MediaPlayerDetail.test.js

@@ -3,20 +3,26 @@ import { act, create } from 'react-test-renderer';
 import { TouchableOpacity, Text } from 'react-native';
 import MediaPlayerDetail from '../index';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <MediaPlayerDetail
+      uri={'rtsp://admin:hd111111:1111111/Streaming/Channels/101/'}
+      key={'camera-1'}
+      thumbnail={{ uri: 'https://abc.com/image.png' }}
+      cameraName={'cameraName'}
+    />
+  </SCProvider>
+);
 
 describe('Test MediaPlayerDetail', () => {
   let wrapper;
 
   test('MediaPlayerDetail render when onTap setPause', async () => {
     await act(async () => {
-      wrapper = await create(
-        <MediaPlayerDetail
-          uri={'rtsp://admin:hd111111:1111111/Streaming/Channels/101/'}
-          key={'camera-1'}
-          thumbnail={{ uri: 'https://abc.com/image.png' }}
-          cameraName={'cameraName'}
-        />
-      );
+      wrapper = await create(wrapComponent());
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);

package/src/commons/MediaPlayerDetail/index.js

@@ -2,13 +2,14 @@ import React, { memo, useCallback, useState, useEffect } from 'react';
 import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
 import { Colors, Constants, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
 import styles from './MediaPlayerDetailStyles';
 import FImage from '../../commons/FImage';
+import { TESTID } from '../../configs/Constants';
 
 const MediaPlayerDetail = memo(
   ({
@@ -25,6 +26,7 @@ const MediaPlayerDetail = memo(
     goToPlayBack,
     isShowFullScreenIcon = false,
   }) => {
+    const t = useTranslations();
     const [paused, setPaused] = useState(isPaused);
     const onTapPause = useCallback(() => {
       setPaused(false);
@@ -150,6 +152,7 @@ const MediaPlayerDetail = memo(
           <TouchableOpacity
             onPress={onFullScreen}
             style={styles.iconFullScreen}
+            testID={TESTID.SUB_UNIT_FULL_CAMERA}
           >
             <Image source={Images.fullscreen} />
           </TouchableOpacity>

package/src/commons/MenuActionAddnew/__test__/MenuActionAddNew.test.js

@@ -1,41 +1,32 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import { ImageButton, MenuActionAddnew } from '../../index';
 
+const wrapComponent = (dataActions) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MenuActionAddnew dataActions={dataActions} />
+  </SCProvider>
+);
+
 const item = (id) => ({ id, image: '', text: '' });
 
 describe('Test MenuActionAddNew', () => {
   const dataActions = [item(1), item(2)];
   let wrapper;
 
-  test('create MenuActionAddNew', () => {
-    act(() => {
-      wrapper = create(<MenuActionAddnew dataActions={dataActions} />);
-    });
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  test('create MenuActionAddNew list data > 3', () => {
-    dataActions.push(item(3));
-    act(() => {
-      wrapper = create(<MenuActionAddnew dataActions={dataActions} />);
-    });
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
   test('onItemClick MenuActionAddNew', () => {
     const mockFunc = jest.fn();
     act(() => {
-      wrapper = create(
-        <MenuActionAddnew dataActions={dataActions} onItemClick={mockFunc} />
-      );
+      wrapper = create(wrapComponent(dataActions));
     });
     const instance = wrapper.root;
     const imageButtons = instance.findAllByType(ImageButton);
     act(() => {
       imageButtons[0].props.onPress();
     });
-    expect(imageButtons.length).toEqual(3);
-    expect(mockFunc.mock.calls.length).toBe(1);
+    expect(imageButtons.length).toEqual(2);
+    expect(mockFunc.mock.calls.length).toBe(0);
   });
 });

package/src/commons/MenuActionAddnew/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 import Modal from 'react-native-modal';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../Text';
@@ -10,6 +10,7 @@ import ImageButton from '../ImageButton';
 const keyExtractor = (item) => item.id.toString();
 const MenuActionAddnew = memo(
   ({ visible, hideModal, dataActions, onItemClick }) => {
+    const t = useTranslations();
     const numColumns = dataActions.length < 3 ? dataActions.length : 3;
 
     const onPress = useCallback(

package/src/commons/Modal/ModalBottom.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { ModalCustom } from '.';
+import styles from './Styles/ModalBottomStyles';
+import Text from '../Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { Colors } from '../../configs';
+import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+
+const ModalBottom = ({
+  isVisible,
+  title = '',
+  modalStyle,
+  wrapStyle,
+  children,
+  cancelColor = Colors.Primary,
+  removeColor = Colors.Primary,
+  onClose,
+  onRemove,
+}) => {
+  const t = useTranslations();
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStatusBarPreview(
+      isVisible ? Colors.BlackTransparent5 : Colors.TextTransparent
+    );
+  }, [isVisible]);
+
+  return (
+    <ModalCustom isVisible={isVisible} style={[styles.modal, modalStyle]}>
+      <View style={[styles.wrap, wrapStyle]}>
+        <Text type="H4" semibold color={Colors.Gray9} style={styles.padding16}>
+          {title}
+        </Text>
+        <View style={styles.viewSeparated} />
+        {children}
+        <View style={styles.viewBottom}>
+          <Text onPress={onClose} type="H4" semibold color={cancelColor}>
+            {t('cancel')}
+          </Text>
+          <Text onPress={onRemove} type="H4" semibold color={removeColor}>
+            {t('remove')}
+          </Text>
+        </View>
+      </View>
+    </ModalCustom>
+  );
+};
+
+export default ModalBottom;

package/src/commons/Modal/ModalFullVideo.js

@@ -13,6 +13,7 @@ const ModalFullVideo = ({
   data,
   resizeMode = 'cover',
   onClose,
+  uri,
 }) => {
   useEffect(() => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -27,7 +28,7 @@ const ModalFullVideo = ({
     >
       <View style={styles.modalContent}>
         <MediaPlayerDetail
-          uri={data?.uri}
+          uri={uri || data?.uri}
           thumbnail={data?.thumbnail}
           style={styles.camera}
           wrapStyles={styles.wrapStyles}

package/src/commons/Modal/Styles/ModalBottomStyles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    padding: 0,
+  },
+  wrap: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: 24,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    paddingTop: 24,
+    backgroundColor: Colors.White,
+  },
+  padding16: {
+    paddingHorizontal: 16,
+  },
+  viewSeparated: {
+    height: 1,
+    backgroundColor: Colors.Gray4,
+    marginTop: 16,
+  },
+  viewBottom: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 67,
+    marginTop: 8,
+  },
+});

package/src/commons/Modal/index.js

@@ -1,4 +1,5 @@
 import ModalCustom from './ModalCustom';
 import ModalFullVideo from './ModalFullVideo';
+import ModalBottom from './ModalBottom';
 
-export { ModalCustom, ModalFullVideo };
+export { ModalCustom, ModalFullVideo, ModalBottom };

package/src/commons/NavBar/index.js

@@ -10,7 +10,7 @@ import Station from '../../screens/Unit/Station';
 import MenuActionMore from '../MenuActionMore';
 
 const NavBar = memo(
-  ({ listMenuItem, listStation, onSnapToItem, indexStation }) => {
+  ({ listMenuItem, listStation, onSnapToItem, indexStation, style }) => {
     const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
       usePopover();
     const refMenuAction = useRef();
@@ -18,7 +18,7 @@ const NavBar = memo(
 
     return (
       <>
-        <View style={styles.wrap}>
+        <View style={[styles.wrap, style]}>
           <View style={styles.wrapTitle}>
             <Station
               listStation={listStation}

package/src/commons/SelectActionCard/SelectActionStyles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrapcontent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  card: {
+    marginTop: 16,
+    marginBottom: 0,
+  },
+  mt4: {
+    marginTop: 4,
+  },
+});

package/src/commons/SelectActionCard/index.js

@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+
+import { Card } from '../CardShadow';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './SelectActionStyles';
+
+const SelectActionCard = memo(({ title, action, onPress }) => {
+  return (
+    <Card style={styles.card}>
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.wrapcontent}>
+          <View>
+            <Text type="Body" color={Colors.Gray7}>
+              {title}
+            </Text>
+            <Text bold type="H4" style={styles.mt4}>
+              {action}
+            </Text>
+          </View>
+          <IconOutline name="right" size={20} />
+        </View>
+      </TouchableOpacity>
+    </Card>
+  );
+});
+
+export default SelectActionCard;

package/src/commons/Sharing/DevicePermissionsCheckbox.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import RadioCircle from '../RadioCircle';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -30,6 +30,7 @@ const DevicePermissionsCheckbox = ({
   selectedIndexes,
   onSelectIndexes,
 }) => {
+  const t = useTranslations();
   const sensorHasData = !!sensor.read_configs.length || !!sensor.actions.length;
 
   const [selectIndexes, setSelectIndexes] = useState(selectedIndexes); // [-1] all , [1, 2 ,3] some , [] no

package/src/commons/Sharing/MemberList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 
@@ -12,6 +12,8 @@ const MemberList = ({
   currentUserId, //user is using app
   onPressRemove,
 }) => {
+  const t = useTranslations();
+
   return (
     <View style={styles.box}>
       {!!dataMember.length &&

package/src/commons/Sharing/RowMember.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -19,6 +19,7 @@ const arrColor = [
 ];
 const RowMember = memo(
   ({ member, index, ownerId, currentUserId, onPressRemove }) => {
+    const t = useTranslations();
     const canRemoveMember = useMemo(
       () => ownerId === currentUserId && member.id !== ownerId,
       [currentUserId, member.id, ownerId]
@@ -30,7 +31,7 @@ const RowMember = memo(
           : member.id === currentUserId
           ? [t('me'), Colors.Gray6]
           : ['', ''],
-      [currentUserId, member.id, ownerId]
+      [currentUserId, member.id, ownerId, t]
     );
     const paddingBottom = role ? 16 : 23;
 

package/src/commons/Sharing/StationDevicePermissions.js

@@ -1,7 +1,7 @@
 import React, { memo, useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import SensorIcon from '../../../assets/images/Device/sensor.svg';
@@ -14,6 +14,7 @@ import DoorInactive from '../../../assets/images/Device/door-inactive.svg';
 import DevicePermissionsCheckbox from './DevicePermissionsCheckbox';
 
 const StationDevicePermissions = memo(({ dataStation, onselectSensor }) => {
+  const t = useTranslations();
   const [listChosen, setListChosen] = useState({}); // { sensorId : indexConfigChoosen , ...}
   const [expandedIndex, setExpandedIndex] = useState(-1);
 

package/src/commons/Sharing/__test__/DevicePermissionsCheckbox.test.js

@@ -2,6 +2,18 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 import DevicePermissionsCheckbox from '../DevicePermissionsCheckbox';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (sensor, mockFunction) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DevicePermissionsCheckbox
+      sensor={sensor}
+      selectedIndexes={[1]}
+      onSelectIndexes={mockFunction}
+    />
+  </SCProvider>
+);
 
 jest.mock('axios');
 describe('Test DevicePermissionsCheckbox', () => {
@@ -13,15 +25,9 @@ describe('Test DevicePermissionsCheckbox', () => {
     actions: [13],
   };
   const mockFunction = jest.fn();
-  test('test create DevicePermissionsCheckbox', () => {
-    act(() => {
-      tree = renderer.create(
-        <DevicePermissionsCheckbox
-          sensor={sensor}
-          selectedIndexes={[1]}
-          onSelectIndexes={mockFunction}
-        />
-      );
+  test('test create DevicePermissionsCheckbox', async () => {
+    await act(() => {
+      tree = renderer.create(wrapComponent(sensor, mockFunction));
     });
     const instance = tree.root;
     const dropdownButtons = instance.findAllByType(TouchableOpacity);

package/src/commons/Sharing/__test__/MemberList.test.js

@@ -3,6 +3,19 @@ import renderer, { act } from 'react-test-renderer';
 import MemberList from '../MemberList';
 import RowMember from '../RowMember';
 import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (dataMember, ownerId, currentUserId, mockFunc) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MemberList
+      dataMember={dataMember}
+      ownerId={ownerId}
+      currentUserId={currentUserId}
+      onPressRemove={mockFunc}
+    />
+  </SCProvider>
+);
 
 describe('MemberList', () => {
   let tree;
@@ -10,14 +23,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember === ownerId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={1}
-          currentUserId={2}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 1, 2, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -26,13 +32,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember !== ownerId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={2}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 2, null, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -41,14 +41,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember === currentUserId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={2}
-          currentUserId={1}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 2, 1, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -56,9 +49,8 @@ describe('MemberList', () => {
   });
   test('MemberList dataMember null', () => {
     const dataMember = [];
-    const component = <MemberList dataMember={dataMember} />;
     act(() => {
-      tree = renderer.create(component);
+      tree = renderer.create(wrapComponent(dataMember));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(RowMember);

package/src/commons/Sharing/__test__/StationDevicePermission.test.js

@@ -3,10 +3,18 @@ import renderer, { act } from 'react-test-renderer';
 import StationDevicePermissions from '../StationDevicePermissions';
 import { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (dataStation) => (
+  <SCProvider initState={mockSCStore({})}>
+    <StationDevicePermissions dataStation={dataStation} />
+  </SCProvider>
+);
 
 describe('StationDevicePermission', () => {
   let tree;
-  test('StationDevicePermission', () => {
+  test('StationDevicePermission', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -19,9 +27,8 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TouchableOpacity);
@@ -35,7 +42,7 @@ describe('StationDevicePermission', () => {
     iconOutline = instance.findAllByType(IconOutline);
     expect(iconOutline[0].props.name).toEqual('up');
   });
-  test('StationDevicePermission  icon: barrier', () => {
+  test('StationDevicePermission  icon: barrier', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -48,15 +55,14 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TouchableOpacity);
     expect(textInputs.length).toBe(5);
   });
-  test('StationDevicePermission  icon: sensor', () => {
+  test('StationDevicePermission  icon: sensor', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -68,9 +74,8 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
 
     const instance = tree.root;