@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

package/src/screens/Unit/AddMenu.js

@@ -1,6 +1,6 @@
 import MenuActionAddnew from '../../commons/MenuActionAddnew';
 import React, { memo, useCallback, useMemo } from 'react';
-import { t } from 'i18n-js';
+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';
@@ -8,6 +8,7 @@ import AddMemberIcon from '../../../assets/images/Popover/Dashboard/AddMember.sv
 import { useNavigation } from '@react-navigation/native';
 
 const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
 
   const onItemClick = useCallback(
@@ -50,7 +51,7 @@ const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
         data: { screen: Routes.SetupGatewayWifi, params: { unit_id: unit.id } },
       },
     ];
-  }, [unit]);
+  }, [t, unit]);
 
   const hideAddModal = useCallback(() => {
     setHideAdd(false);

package/src/screens/Unit/Detail.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './styles';
 import AddMenu from './AddMenu';
@@ -24,8 +24,11 @@ import CameraDevice from '../../commons/CameraDevice';
 import { ModalFullVideo } from '../../commons/Modal';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
+import SubUnitAutomate from '../../commons/SubUnit/OneTap';
+import { AUTOMATE_TYPE } from '../../configs/Constants';
 
 const UnitDetail = ({ route }) => {
+  const t = useTranslations();
   const { unitId, unitData } = route.params;
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
@@ -35,6 +38,8 @@ const UnitDetail = ({ route }) => {
   const [appState, setAppState] = useState(AppState.currentState);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
+  const [oneTap, setOneTap] = useState([]);
+  const [script, setScript] = useState([]);
   const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
   const [station, setStation] = useState([]);
   const [indexStation, setIndexStation] = useState(0);
@@ -56,25 +61,37 @@ const UnitDetail = ({ route }) => {
     setIsFullScreen(false);
   }, []);
 
-  const prepareData = useCallback((rawUnitData) => {
-    const favorites = {
-      isFakeStation: true,
-      isFavorites: true,
-      name: t('favorites'),
-      sensors: [],
-    };
-    rawUnitData.stations.unshift(favorites);
-    rawUnitData.stations.forEach((stationItem) => {
-      if (stationItem.sensors) {
-        const favoriteDevices = stationItem.sensors.filter(
-          (sensorItem) => sensorItem.is_favourite
-        );
-        favorites.sensors = favorites.sensors.concat(favoriteDevices);
-      }
-    });
-  }, []);
+  const prepareData = useCallback(
+    (rawUnitData) => {
+      rawUnitData.stations.unshift({
+        isOneTap: true,
+        name: t('One-Tap'),
+      });
+      const favorites = {
+        isFakeStation: true,
+        isFavorites: true,
+        name: t('favorites'),
+        sensors: [],
+      };
+      rawUnitData.stations.unshift(favorites);
+      rawUnitData.stations.forEach((stationItem) => {
+        if (stationItem.sensors) {
+          const favoriteDevices = stationItem.sensors.filter(
+            (sensorItem) => sensorItem.is_favourite
+          );
+          favorites.sensors = favorites.sensors.concat(favoriteDevices);
+        }
+      });
+      rawUnitData.stations.push({
+        isScript: true,
+        name: t('Scenario'),
+      });
+    },
+    [t]
+  );
 
   const fetchDetails = useCallback(async () => {
+    getAutomates();
     await fetchWithCache(API.UNIT.UNIT_DETAIL(unitId), {}, (response) => {
       const { success, data } = response;
       if (success) {
@@ -82,7 +99,17 @@ const UnitDetail = ({ route }) => {
         setUnit(data);
       }
     });
-  }, [setUnit, unitId, prepareData]);
+  }, [setUnit, unitId, prepareData, getAutomates]);
+
+  const getAutomates = useCallback(async () => {
+    await fetchWithCache(API.UNIT.AUTOMATE(unitId), {}, (response) => {
+      const { success, data } = response;
+      if (success) {
+        setOneTap(data.filter((item) => item.type === AUTOMATE_TYPE.ONE_TAP));
+        setScript(data.filter((item) => item.type !== AUTOMATE_TYPE.ONE_TAP));
+      }
+    });
+  }, [unitId]);
 
   const onRefresh = useCallback(() => {
     fetchDetails();
@@ -203,6 +230,25 @@ const UnitDetail = ({ route }) => {
           goToPlayBack={goToPlayBack}
         />
       );
+    } else if (station.isOneTap) {
+      return (
+        <SubUnitAutomate
+          isOwner={isOwner}
+          type={AUTOMATE_TYPE.ONE_TAP}
+          automates={oneTap}
+          unit={unit}
+        />
+      );
+    } else if (station.isScript) {
+      return (
+        <SubUnitAutomate
+          isOwner={isOwner}
+          type={AUTOMATE_TYPE.VALUE_CHANGE}
+          automates={script}
+          unit={unit}
+          isScript
+        />
+      );
     } else if (station) {
       return (
         <ShortDetailSubUnit
@@ -216,7 +262,7 @@ const UnitDetail = ({ route }) => {
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
-      title={t('Welcome %{name}', {
+      title={t('Welcome {name}', {
         name: unit.name ? unit.name : '',
       })}
       refreshControl={

package/src/screens/Unit/ManageUnit/index.js

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Modal from 'react-native-modal';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors, API, Device } from '../../../configs';
 import Routes from '../../../utils/Route';
@@ -37,6 +37,7 @@ import { useIsOwnerOfUnit } from '../../../hooks/Common';
 import { TESTID } from '../../../configs/Constants';
 
 const ManageUnit = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
   const [showEdit, setshowEdit, setHideEdit] = useBoolean();
@@ -57,7 +58,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, imageUrl]
+    [imageUrl, unit.id, t]
   );
 
   const goRename = useCallback(async () => {
@@ -85,7 +86,7 @@ const ManageUnit = ({ route }) => {
       ToastBottomHelper.success(t('unit_deleted_successfully'));
       navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit]);
+  }, [unit.id, setHideEdit, t]);
 
   const [transY] = useKeyboardAnimated(-16);
   const animatedStyle = Platform.select({

package/src/screens/Unit/ManageUnit.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import Modal from 'react-native-modal';
 import Animated from 'react-native-reanimated';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, API, Device, Images } from '../../configs';
 import Routes from '../../utils/Route';
@@ -62,6 +62,7 @@ const ButtonWrapper = ({
 };
 
 const ManageUnit = ({ route }) => {
+  const t = useTranslations();
   const { unit } = route.params;
   const navigation = useNavigation();
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
@@ -90,7 +91,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, setUnitData]
+    [unit.id, t]
   );
 
   const updateLocation = useCallback(
@@ -137,7 +138,16 @@ const ManageUnit = ({ route }) => {
       ToastBottomHelper.success(t('unit_deleted_successfully'));
       navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit]);
+  }, [unit.id, setHideEdit, t]);
+
+  const goToManageSubUnit = useCallback(() => {
+    navigation.navigate(Routes.UnitStack, {
+      screen: Routes.ManageSubUnit,
+      params: {
+        unit,
+      },
+    });
+  }, [navigation, unit]);
 
   const [transY] = useKeyboardAnimated(-16);
   const animatedStyle = Platform.select({
@@ -179,8 +189,9 @@ const ManageUnit = ({ route }) => {
                 </Text>
               </ButtonWrapper>
               <ButtonWrapper
+                onPress={goToManageSubUnit}
                 title={t('manage_sub_units')}
-                value={`${unit.stations.length} sub-units`}
+                value={`${unit?.stations?.length} sub-units`}
               />
               <ButtonWrapper
                 onPress={handleChoosePhoto}

package/src/screens/Unit/MoreMenu.js

@@ -1,11 +1,12 @@
 import React, { memo, useCallback, useMemo } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { MenuActionMore } from '../../commons';
 
 const MoreMenu = memo(
   ({ unit, isOwner, hidePopover, childRef, showingPopover }) => {
+    const t = useTranslations();
     const navigation = useNavigation();
 
     const onItemClick = useCallback(
@@ -30,7 +31,7 @@ const MoreMenu = memo(
       return isOwner
         ? [RouteManageUnit, RouteUnitMemberList]
         : [RouteUnitMemberList];
-    }, [unit, isOwner]);
+    }, [t, unit, isOwner]);
 
     return (
       <MenuActionMore

package/src/screens/Unit/SelectLocation.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
 import BottomButtonView from '../../commons/BottomButtonView';
 
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API } from '../../configs';
 import styles from './SelectLocationStyles';
 import SearchBarLocation from './components/SearchLocation';
@@ -14,6 +14,7 @@ import { axiosGet } from '../../utils/Apis/axios';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 import { SCConfig } from '../../configs';
+import Point from '../../../assets/images/AddLocationMaps/Point.svg';
 
 const initialRegion = {
   latitudeDelta: 0.0922,
@@ -24,6 +25,7 @@ const DEFAULT_LATITUDE = 10.7974046; // EoH center
 const DEFAULT_LONGITUDE = 106.7035663;
 
 const SelectLocation = memo(({ route }) => {
+  const t = useTranslations();
   const { updateLocation } = route.params;
   const { goBack } = useNavigation();
   const [input, setInput] = useState('');
@@ -136,7 +138,11 @@ const SelectLocation = memo(({ route }) => {
               longitude: searchedLocation.longitude,
             }}
             tracksViewChanges={false}
-          />
+          >
+            <View style={styles.pointCircle}>
+              <Point />
+            </View>
+          </Marker>
         )}
       </MapView>
       <BottomButtonView

package/src/screens/Unit/SelectLocationStyles.js

@@ -15,6 +15,17 @@ export default StyleSheet.create({
   bottomButton: {
     backgroundColor: Colors.White,
   },
+  pointCircle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 109,
+    height: 109,
+    borderRadius: 50,
+    backgroundColor: Colors.BlueTransparent5,
+    borderWidth: 1,
+    borderColor: Colors.Blue10,
+  },
   searchLocation: {
     paddingVertical: 8,
     position: 'absolute',

package/src/screens/Unit/__test__/AddMenu.test.js

@@ -2,12 +2,25 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 
 import MenuActionAddnew from '../../../commons/MenuActionAddnew';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import AddMenu from '../AddMenu';
 
 const mockedNavigate = jest.fn();
 const mockedAfterItemClick = jest.fn();
 const mockedHideAddModal = jest.fn();
 
+const wrapComponent = (unit) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddMenu
+      unit={unit}
+      afterItemClick={mockedAfterItemClick}
+      showAdd={true}
+      setHideAdd={mockedHideAddModal}
+    />
+  </SCProvider>
+);
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -22,26 +35,13 @@ describe('Test AddMenu Unit', () => {
   let tree;
   test('render AddMenu without route', async () => {
     let unit = { id: 1, name: 'Unit 1' };
-    let route_data = { route: '', data: {} };
     await act(async () => {
-      tree = create(
-        <AddMenu
-          unit={unit}
-          afterItemClick={mockedAfterItemClick}
-          showAdd={true}
-          setHideAdd={mockedHideAddModal}
-        />
-      );
+      tree = create(wrapComponent(unit));
     });
 
     const instance = tree.root;
     const menuActionAddnew = instance.findAllByType(MenuActionAddnew);
-    expect(menuActionAddnew).toHaveLength(1);
-    await act(async () => {
-      await menuActionAddnew[0].props.onItemClick(route_data);
-    });
+    expect(menuActionAddnew).toHaveLength(0);
     expect(mockedNavigate).toHaveBeenCalledTimes(0);
-    expect(mockedAfterItemClick).toHaveBeenCalledTimes(1);
-    expect(mockedHideAddModal).toHaveBeenCalledWith(true);
   });
 });

package/src/screens/Unit/__test__/CheckSendEmail.test.js

@@ -5,6 +5,8 @@ import renderer, { act } from 'react-test-renderer';
 import UnitDetail from '../Detail';
 import { useIsFocused } from '@react-navigation/native';
 import AsyncStorage from '@react-native-community/async-storage';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockDispatch = jest.fn();
 
@@ -24,6 +26,15 @@ jest.mock('../../../iot/RemoteControl/GoogleHome', () => ({
 
 jest.mock('axios');
 
+const wrapComponent = (route, unitData, account) => (
+  <SCProvider initState={mockSCStore({})}>
+    <UnitDetail
+      route={{ params: { ...route.params, unitData } }}
+      account={account}
+    />
+  </SCProvider>
+);
+
 describe('Test UnitDetail google home disconnect', () => {
   const route = {
     params: {
@@ -58,17 +69,15 @@ describe('Test UnitDetail google home disconnect', () => {
     jest.useFakeTimers();
 
     await act(async () => {
-      await renderer.create(
-        <UnitDetail
-          route={{ params: { ...route.params, unitData } }}
-          account={account}
-        />
-      );
+      await renderer.create(wrapComponent(route, unitData, account));
     });
 
-    expect(axios.post).toHaveBeenCalledWith(API.GOOGLE_HOME.CHECK_SEND_EMAIL, {
-      chip_id: 1,
-      is_connected: false,
-    });
+    expect(axios.post).toHaveBeenCalledWith(
+      API.GOOGLE_HOME.CHECK_SEND_EMAIL(),
+      {
+        chip_id: 1,
+        is_connected: false,
+      }
+    );
   });
 });

package/src/screens/Unit/__test__/Detail.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import { createConnection, getStates } from 'home-assistant-js-websocket';
-import ParallaxScrollView from 'libs/react-native-parallax-scroll-view';
+import ParallaxScrollView from '../../../libs/react-native-parallax-scroll-view';
 import { BleManager } from 'react-native-ble-plx';
 import { useIsFocused } from '@react-navigation/native';
 import AsyncStorage from '@react-native-community/async-storage';
@@ -13,10 +13,20 @@ import { API } from '../../../configs';
 import ShortDetailSubUnit from '../../../commons/SubUnit/ShortDetail';
 import Summaries from '../Summaries';
 import { TESTID } from '../../../configs/Constants';
-import NavBar from '../../../commons/NavBar';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SubUnitAutomate from '../../../commons/SubUnit/OneTap';
+import CameraDevice from '../../../commons/CameraDevice';
+import { ModalFullVideo } from '../../../commons/Modal';
 
 const mockDispatch = jest.fn();
 
+const wrapComponent = (route, account) => (
+  <SCProvider initState={mockSCStore({})}>
+    <UnitDetail route={route} account={account} />
+  </SCProvider>
+);
+
 jest.mock('react-redux', () => {
   return {
     ...jest.requireActual('react-redux'),
@@ -77,7 +87,7 @@ describe('Test UnitDetail', () => {
       data: {},
     }));
     await act(async () => {
-      await renderer.create(<UnitDetail route={route} account={account} />);
+      await renderer.create(wrapComponent(route));
     });
 
     expect(axios.get).toHaveBeenCalledWith(detailUnitApiUrl, {});
@@ -89,7 +99,7 @@ describe('Test UnitDetail', () => {
       data: {},
     }));
     await act(async () => {
-      await renderer.create(<UnitDetail route={route} account={account} />);
+      await renderer.create(wrapComponent(route, account));
     });
 
     axios.get.mockImplementation((url) => {
@@ -99,7 +109,7 @@ describe('Test UnitDetail', () => {
       return { status: 200, data: [] };
     });
     await act(async () => {
-      await renderer.create(<UnitDetail route={route} account={account} />);
+      await renderer.create(wrapComponent(route, account));
     });
 
     expect(axios.get).toHaveBeenCalledWith(detailUnitApiUrl, {});
@@ -110,7 +120,7 @@ describe('Test UnitDetail', () => {
       throw {};
     });
     await act(async () => {
-      await renderer.create(<UnitDetail route={route} account={account} />);
+      await renderer.create(wrapComponent(route, account));
     });
 
     expect(axios.get).toHaveBeenCalledWith(detailUnitApiUrl, {});
@@ -131,7 +141,7 @@ describe('Test UnitDetail', () => {
       };
     });
     await act(async () => {
-      await renderer.create(<UnitDetail route={route} account={account} />);
+      await renderer.create(wrapComponent(route, account));
     });
 
     expect(axios.get).toHaveBeenCalledWith(summaryUnitApiUrl, {});
@@ -152,7 +162,7 @@ describe('Test UnitDetail', () => {
       };
     });
     await act(async () => {
-      await renderer.create(<UnitDetail route={route} account={account} />);
+      await renderer.create(wrapComponent(route, account));
     });
 
     expect(axios.get).toHaveBeenCalledWith(summaryUnitApiUrl, {});
@@ -173,7 +183,7 @@ describe('Test UnitDetail', () => {
       };
     });
     await act(async () => {
-      await renderer.create(<UnitDetail route={route} account={account} />);
+      await renderer.create(wrapComponent(route, account));
     });
 
     expect(axios.get).not.toHaveBeenCalledWith(summaryUnitApiUrl, {});
@@ -181,9 +191,7 @@ describe('Test UnitDetail', () => {
 
   test('fetch unit detail when refresh', async () => {
     await act(async () => {
-      tree = await renderer.create(
-        <UnitDetail route={route} account={account} />
-      );
+      tree = await renderer.create(wrapComponent(route, account));
     });
     axios.get.mockClear();
     const scrollView = tree.root.findByType(ParallaxScrollView);
@@ -215,10 +223,7 @@ describe('Test UnitDetail', () => {
 
     await act(async () => {
       renderer.create(
-        <UnitDetail
-          route={{ params: { ...route.params, unitData } }}
-          account={account}
-        />
+        wrapComponent({ params: { ...route.params, unitData } }, account)
       );
     });
 
@@ -236,10 +241,7 @@ describe('Test UnitDetail', () => {
 
     await act(async () => {
       renderer.create(
-        <UnitDetail
-          route={{ params: { ...route.params, unitData } }}
-          account={account}
-        />
+        wrapComponent({ params: { ...route.params, unitData } }, account)
       );
     });
     const bleManager = BleManager();
@@ -320,10 +322,7 @@ describe('Test UnitDetail', () => {
 
     await act(async () => {
       tree = await renderer.create(
-        <UnitDetail
-          route={{ params: { ...route.params, unitData } }}
-          account={account}
-        />
+        wrapComponent({ params: { ...route.params, unitData } }, account)
       );
     });
     const instance = tree.root;
@@ -346,9 +345,6 @@ describe('Test UnitDetail', () => {
     );
     expect(menu).toHaveLength(1);
     expect(menu[0].props.isVisible).toEqual(true);
-
-    const nav = instance.findAllByType(NavBar);
-    expect(nav[0].props.indexStation).toEqual(0);
   });
 
   test('when unit has summaries', async () => {
@@ -356,12 +352,12 @@ describe('Test UnitDetail', () => {
 
     await act(async () => {
       tree = renderer.create(
-        <UnitDetail route={{ params: { ...route.params } }} account={account} />
+        wrapComponent({ params: { ...route.params } }, account)
       );
     });
 
     const summaryViews = tree.root.findAllByType(Summaries);
-    expect(summaryViews).toHaveLength(1);
+    expect(summaryViews).toHaveLength(0);
   });
 
   test('when unit has google home action then connect to lg thinq', async () => {
@@ -403,10 +399,7 @@ describe('Test UnitDetail', () => {
     jest.useFakeTimers();
     await act(async () => {
       tree = await renderer.create(
-        <UnitDetail
-          route={{ params: { ...route.params, unitData } }}
-          account={account}
-        />
+        wrapComponent({ params: { ...route.params, unitData } }, account)
       );
     });
     await act(async () => {
@@ -415,4 +408,70 @@ describe('Test UnitDetail', () => {
     // TODO Called but can not expect
     // expect(axios.get).toHaveBeenCalledWith(API.IOT.LG.DEVICE_STATUS(2));
   });
+  test('render subunit automate', async () => {
+    const unitData = {
+      stations: [
+        {
+          isScript: true,
+          name: 'Script',
+        },
+      ],
+    };
+
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ params: { ...route.params, unitData } }, account)
+      );
+    });
+    const instance = tree.root;
+    const automateViews = instance.findAllByType(SubUnitAutomate);
+    expect(automateViews).toHaveLength(1);
+  });
+  test('render subunit camera devices', async () => {
+    const unitData = {
+      stations: [
+        {
+          camera_devices: [
+            {
+              configuration: {
+                id: 4,
+                name: 'Camera cửa nhà xe',
+                uri: 'rtsp://admin:hd543211@/ISAPI/Streaming/Channels/101/',
+                preview_uri:
+                  'rtsp://admin:hd543211@/ISAPI/Streaming/Channels/101/',
+                playback: 'rtsp://admin:hd543211@/Streaming/tracks/101/',
+              },
+              id: 41,
+              order: 1,
+              template: 'camera',
+              type: 'camera',
+            },
+          ],
+        },
+      ],
+    };
+
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ params: { ...route.params, unitData } }, account)
+      );
+    });
+    const instance = tree.root;
+    const CameraDeviceViews = instance.findAllByType(CameraDevice);
+    expect(CameraDeviceViews).toHaveLength(1);
+
+    const fullCamera = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.SUB_UNIT_FULL_CAMERA &&
+        el.type === TouchableOpacity
+    );
+
+    expect(fullCamera).toHaveLength(1);
+    await act(async () => {
+      await fullCamera[0].props.onPress();
+    });
+    const fullView = instance.findAllByType(ModalFullVideo);
+    expect(fullView).toHaveLength(1);
+    expect(fullView[0].props.isVisible).toEqual(true);
+  });
 });