@eohjsc/react-native-smart-city 0.2.67 → 0.2.71

package/src/screens/Device/components/SensorDisplayItem.js

@@ -20,6 +20,7 @@ import FooterInfo from '../../../commons/Device/FooterInfo';
 import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Device } from '../../../configs';
+import { useSCContextSelector } from '../../../context';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -37,11 +38,12 @@ export const SensorDisplayItem = ({
   background,
 }) => {
   const t = useTranslations();
+  const userId = useSCContextSelector((state) => state.auth.account.user.id);
   const doAction = useCallback(
     (action, data) => {
-      sendRemoteCommand(sensor, action, data);
+      sendRemoteCommand(sensor, action, data, userId);
     },
-    [sensor]
+    [sensor, userId]
   );
   if (item.configuration.type === 'compass') {
     setShowWindDirection(true);

package/src/screens/Notification/components/NotificationItem.js

@@ -67,7 +67,7 @@ const NotificationItem = memo(({ item }) => {
           iconContent: (
             <IconComponent
               icon_outlined={'usergroup-add'}
-              style={styles.iconInviteMember}
+              style={styles.backgroundSummer}
             />
           ),
         };
@@ -220,6 +220,29 @@ const NotificationItem = memo(({ item }) => {
               params: { id: booking_id },
             }),
         };
+      case NOTIFICATION_TYPES.NOTIFY_REMOVE_UNIT:
+        const unitOwerName = paramsJSON?.unit_owner_name;
+        const textNotify = unitOwerName
+          ? t('text_notification_content_remove_unit_to_member')
+          : t('text_notification_content_remove_unit_to_owner');
+        return {
+          content: customColorText(textNotify, arrParams),
+          redirect: () => null,
+          iconContent: (
+            <IconComponent icon={'home'} style={styles.backgroundSummer} />
+          ),
+        };
+      case NOTIFICATION_TYPES.NOTIFY_REMOVE_MEMBER:
+        return {
+          content: customColorText(
+            t('text_notification_content_remove_member'),
+            arrParams
+          ),
+          redirect: () => null,
+          iconContent: (
+            <IconComponent icon={'home'} style={styles.backgroundSummer} />
+          ),
+        };
       default:
         return {
           content: customColorText(t('this_notification_will_be_updated_soon')),

package/src/screens/Notification/styles/NotificationItemStyles.js

@@ -33,7 +33,7 @@ export default StyleSheet.create({
   iconNotification: {
     width: '46%',
   },
-  iconInviteMember: {
+  backgroundSummer: {
     width: '46%',
     color: Colors.Summer,
   },

package/src/screens/ScanChipQR/hooks/index.js

@@ -17,7 +17,7 @@ const useChipScan = (route) => {
       const { success, data: new_chip } = await axiosPost(
         API.UNIT.CHIP_SCAN(unit_id),
         {
-          imei: imei,
+          imei: imei || body.imei,
           qr_code: body.imei,
           phone: phoneNumber,
           name: chipName,
@@ -27,10 +27,19 @@ const useChipScan = (route) => {
         }
       );
       if (success) {
-        navigation.navigate(Routes.ConnectingGateway, {
-          new_chip,
-          ...route.params,
-        });
+        if (new_chip.is_wifi) {
+          navigation.navigate(Routes.ConnectWifiWarning, {
+            wifi_ssid: new_chip.wifi_ssid,
+            wifi_pass: new_chip.wifi_pass,
+            chip_id: new_chip.id,
+            unit_id: unit_id,
+          });
+        } else {
+          navigation.navigate(Routes.ConnectingGateway, {
+            new_chip,
+            ...route.params,
+          });
+        }
       } else {
         navigation.goBack();
       }

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/SelectUser.js

@@ -21,6 +21,7 @@ import {
 import { axiosPost } from '../../utils/Apis/axios';
 import { TESTID } from '../../configs/Constants';
 import Text from '../../commons/Text';
+import { ToastBottomHelper } from '../../utils/Utils';
 
 const SelectUser = ({ route }) => {
   const t = useTranslations();
@@ -46,9 +47,20 @@ const SelectUser = ({ route }) => {
       });
       if (success) {
         setUsers([...users, data.user]);
+      } else {
+        const textTemp = t(
+          data?.phone
+            ? 'text_phone_share_permission'
+            : data?.email
+            ? 'text_email_share_permission'
+            : ''
+        );
+        ToastBottomHelper.error(
+          t('error_share_permission', { data: phone || email, text: textTemp })
+        );
       }
     },
-    [unit, permissions, users]
+    [users, unit.id, permissions, t]
   );
 
   const validate = useCallback(() => {

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

@@ -24,9 +24,11 @@ import { axiosPost, createFormData } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { TESTID } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
+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('');
@@ -126,8 +128,9 @@ const AddSubUnit = ({ route }) => {
   ]);
 
   const onChoosePhoto = useCallback(() => {
+    dismissKeyboard();
     setShowImagePicker(true);
-  }, []);
+  }, [dismissKeyboard]);
 
   useEffect(() => {
     if (imageUrl) {

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);
@@ -266,7 +273,7 @@ const UnitDetail = ({ route }) => {
         />
       );
     }
-    if (station.camera_devices) {
+    if (station?.camera_devices) {
       return (
         <CameraDevice
           station={station}
@@ -274,7 +281,7 @@ const UnitDetail = ({ route }) => {
           goToPlayBack={goToPlayBack}
         />
       );
-    } else if (station.isOneTap) {
+    } else if (station?.isOneTap) {
       return (
         <SubUnitAutomate
           isOwner={isOwner}
@@ -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);