@eohjsc/react-native-smart-city 0.7.25 → 0.7.27

package/src/commons/SelectUnit/index.js

@@ -1,12 +1,14 @@
 import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
 
 import { API } from '../../configs';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosGet } from '../../utils/Apis/axios';
+import { convertToSlug } from '../../utils/Functions/Search';
 import Text from '../../commons/Text';
+import { Search } from '../../commons/DevMode';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import styles from './styles';
 import { HeaderCustom } from '../Header';
@@ -48,11 +50,20 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [search, setSearch] = useState('');
   const [units, setUnits] = useState([]);
 
+  const filterUnits = useMemo(() => {
+    setSelectedIndex(-1);
+    return units.filter((unit) => {
+      const text = convertToSlug(search);
+      return convertToSlug(unit.name).includes(text);
+    });
+  }, [units, search]);
+
   const onRightClick = useCallback(() => {
-    onPressNext(units[selectedIndex]);
-  }, [onPressNext, selectedIndex, units]);
+    onPressNext(filterUnits[selectedIndex]);
+  }, [onPressNext, selectedIndex, filterUnits]);
 
   useEffect(() => {
     (async () => {
@@ -66,6 +77,7 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
       }
     })();
   }, []);
+
   return (
     <View
       style={styles.container}
@@ -73,6 +85,7 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
     >
       <HeaderCustom title={title} isShowSeparator />
       <Text style={styles.subtitle}>{subTitle}</Text>
+      <Search onSearch={setSearch} />
       <View style={styles.contentContainer}>
         <ScrollView
           style={styles.scrollContainer}
@@ -80,13 +93,14 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
           scrollIndicatorInsets={{ right: 1 }}
         >
           <Section type={'border'}>
-            {units.map((item, index) => (
+            {filterUnits.map((item, index) => (
               <UnitItem
                 key={item?.id?.toString()}
                 item={item}
                 index={index}
                 setSelectedIndex={setSelectedIndex}
                 selectedIndex={selectedIndex}
+                accessibilityLabel={AccessibilityLabel.ITEM_UNIT}
               />
             ))}
           </Section>

package/src/commons/SelectUnit/styles.js

@@ -28,7 +28,6 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     marginTop: 16,
     marginLeft: 16,
-    marginBottom: 16,
   },
   row: {
     flex: 1,

package/src/commons/Widgets/IFrame/IFrameStyles.js

@@ -34,5 +34,6 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     height: 200,
+    marginBottom: 16,
   },
 });

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfigStyles.js

@@ -5,5 +5,6 @@ export const styles = {
   wrapper: {
     width: '100%',
     display: 'flex',
+    marginBottom: 16,
   },
 };

package/src/configs/API.js

@@ -41,6 +41,10 @@ const API = {
     STAR_AUTOMATE_SCRIPTS: (id) =>
       `/property_manager/units/${id}/star_automate_scripts/`,
   },
+  UNIT_V2: {
+    MY_UNITS: (page, pageSize) =>
+      `/property_manager/units_v2/my_with_devices/?page=${page}&page_size=${pageSize}`,
+  },
   SUB_UNIT: {
     END_DEVICES_STATUS: (stationId) =>
       `/property_manager/iot_dashboard/stations_v2/${stationId}/end_devices_status/`,

package/src/configs/Constants.js

@@ -98,6 +98,9 @@ const marginItem = 12;
 const marginHorizontal = 16;
 const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
 const heightItem = (widthItem / 166) * 106;
+
+export const PAGE_SIZE = 10;
+
 export const DEVICE_SIZE = {
   width: widthItem,
   height: heightItem,

package/src/context/reducer.ts

@@ -15,7 +15,6 @@ import {
   BluetoothType,
 } from './actionType';
 import _ from 'lodash';
-import { STORAGE_KEY, removeMultiple } from '../utils/Storage.js';
 import { AppState } from 'react-native';
 
 export type ContextData = {
@@ -582,10 +581,6 @@ export const reducer = (currentState: ContextData, action: Action) => {
       };
 
     case Action.LOGOUT:
-      removeMultiple([
-        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS,
-        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_SHARE_UNIT,
-      ]);
       return {
         ...currentState,
       };

package/src/navigations/UnitStack.js

@@ -60,6 +60,7 @@ import TDSGuide from '../screens/TDSGuide';
 import ChooseLocation from '../screens/Unit/ChooseLocation';
 import UnitDetail from '../screens/Unit/Detail';
 import ManageUnit from '../screens/Unit/ManageUnit';
+import GoToDetailUnit from '../screens/Unit/GoToDetailUnit';
 import SelectAddress from '../screens/Unit/SelectAddress';
 import SelectAddToFavorites from '../screens/Unit/SelectAddToFavorites';
 import ListSmartAccount from '../screens/Unit/SmartAccount';
@@ -223,6 +224,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.GoToDetailUnit}
+        component={GoToDetailUnit}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.ListSmartAccount}
         component={ListSmartAccount}

package/src/screens/ActivityLog/FilterPopup.js

@@ -1,6 +1,5 @@
 import React, { useState, useCallback } from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 
 import BottomButtonView from '../../commons/BottomButtonView';
@@ -8,7 +7,6 @@ import Text from '../../commons/Text';
 import RadioCircle from '../../commons/RadioCircle';
 import DateTimeRangeChange from '../../commons/DateTimeRangeChange';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useBoolean } from '../../hooks/Common';
 
 import { Colors } from '../../configs';
 import styles from './styles/filterPopupStyles';
@@ -42,21 +40,16 @@ const RowMember = ({ member, isSelected, onSelect }) => {
 const FilterPopup = ({
   isVisible,
   onHide,
-  onShow,
   members,
   filters,
   userFilterEnabled,
   onApply,
 }) => {
   const t = useTranslations();
-  const [lockShowing, acquireLockShowing, releaseLockShowing] =
-    useBoolean(false);
   const [selectedUsers, setSelectedUsers] = useState(filters.users);
   const [stateDatePicker, setStateDatePicker] = useState({
-    visible: false,
     startDate: filters.date_from,
     endDate: filters.date_to,
-    currentTimeChange: 'start',
   });
 
   const handleOnSelectUser = useCallback(
@@ -78,90 +71,38 @@ const FilterPopup = ({
     [selectedUsers, setSelectedUsers]
   );
 
-  const selectStart = useCallback(() => {
-    onHide();
-    acquireLockShowing();
-    setStateDatePicker((state) => ({
-      ...state,
-      visible: true,
-      currentTimeChange: 'start',
-    }));
-  }, [onHide, acquireLockShowing]);
-
-  const selectEnd = useCallback(() => {
-    onHide();
-    acquireLockShowing();
-    setStateDatePicker((state) => ({
-      ...state,
-      visible: true,
-      currentTimeChange: 'end',
-    }));
-  }, [onHide, acquireLockShowing]);
-
-  const onConfirmStartDate = useCallback((date) => {
+  const selectStart = useCallback((date) => {
     setStateDatePicker((state) => {
       if (moment(date).valueOf() < state.endDate) {
         return {
           ...state,
-          visible: false,
           startDate: moment(date).valueOf(),
         };
       }
       return {
         ...state,
-        visible: false,
         startDate: moment(date).valueOf(),
         endDate: moment(date).add(1, 'days').valueOf(),
       };
     });
   }, []);
 
-  const onConfirmEndDate = useCallback((date) => {
+  const selectEnd = useCallback((date) => {
     setStateDatePicker((state) => {
       if (moment(date).valueOf() > state.startDate) {
         return {
           ...state,
-          visible: false,
           endDate: moment(date).valueOf(),
         };
       }
       return {
         ...state,
-        visible: false,
         startDate: moment(date).add(-1, 'days').valueOf(),
         endDate: moment(date).valueOf(),
       };
     });
   }, []);
 
-  const onConfirmDate = useCallback(
-    (date) => {
-      if (stateDatePicker.currentTimeChange === 'start') {
-        onConfirmStartDate(date);
-      } else {
-        onConfirmEndDate(date);
-      }
-      onShow();
-      acquireLockShowing();
-    },
-    [
-      onConfirmStartDate,
-      onConfirmEndDate,
-      stateDatePicker,
-      acquireLockShowing,
-      onShow,
-    ]
-  );
-
-  const onPickerCancel = useCallback(() => {
-    setStateDatePicker((state) => ({
-      ...state,
-      visible: false,
-    }));
-    acquireLockShowing();
-    onShow();
-  }, [acquireLockShowing, onShow]);
-
   const handleOnApply = useCallback(() => {
     onApply({
       users: selectedUsers,
@@ -184,10 +125,9 @@ const FilterPopup = ({
   return (
     <>
       <ModalCustom
-        isVisible={isVisible && !lockShowing}
+        isVisible={isVisible}
         onBackButtonPress={handleOnCancel}
         onBackdropPress={handleOnCancel}
-        onModalHide={releaseLockShowing}
         useNativeDriver={true}
         useNativeDriverForBackdrop={true}
         animationIn={'zoomIn'}
@@ -211,6 +151,7 @@ const FilterPopup = ({
               selectStart={selectStart}
               selectEnd={selectEnd}
               formatType="date"
+              style={styles.datePicker}
               inline={true}
             />
             {userFilterEnabled && (
@@ -245,22 +186,6 @@ const FilterPopup = ({
           />
         </View>
       </ModalCustom>
-      <DateTimePickerModal
-        isVisible={stateDatePicker.visible && !lockShowing}
-        date={
-          stateDatePicker.currentTimeChange === 'start'
-            ? new Date(stateDatePicker.startDate)
-            : new Date(stateDatePicker.endDate)
-        }
-        mode={'date'}
-        onConfirm={onConfirmDate}
-        onCancel={onPickerCancel}
-        onHide={releaseLockShowing}
-        display="spinner"
-        headerTextIOS={t('pick_a_date')}
-        cancelTextIOS={t('cancel')}
-        confirmTextIOS={t('confirm')}
-      />
     </>
   );
 };

package/src/screens/ActivityLog/__test__/FilterPopup.test.js

@@ -8,7 +8,6 @@ import RadioCircle from '../../../commons/RadioCircle';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import BottomButtonView from '../../../commons/BottomButtonView';
 import DateTimeRangeChange from '../../../commons/DateTimeRangeChange';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 
 const wrapComponent = (props) => (
@@ -125,7 +124,6 @@ it('test date picker pick valid and invalid date', async () => {
   });
   const instance = tree.root;
   const dateTimeRangeChange = instance.findByType(DateTimeRangeChange);
-  const datePicker = instance.findAllByType(DateTimePickerModal)[2];
 
   expect(dateTimeRangeChange.props.startTime).toBe(dateFrom.valueOf());
   expect(dateTimeRangeChange.props.endTime).toBe(dateTo.valueOf());
@@ -133,11 +131,9 @@ it('test date picker pick valid and invalid date', async () => {
   const _pickDateAndTest = async (timeChange) => {
     await act(async () => {
       if (timeChange === 'start') {
-        await dateTimeRangeChange.props.selectStart();
-        await datePicker.props.onConfirm(moment(dateFrom));
+        await dateTimeRangeChange.props.selectStart(dateFrom);
       } else {
-        await dateTimeRangeChange.props.selectEnd();
-        await datePicker.props.onConfirm(moment(dateTo));
+        await dateTimeRangeChange.props.selectEnd(dateTo);
       }
     });
     expect(dateTimeRangeChange.props.startTime).toBe(dateFrom.valueOf());

package/src/screens/ActivityLog/__test__/index.test.js

@@ -1,17 +1,20 @@
+import { act } from '@testing-library/react-hooks';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import { SectionList, Text } from 'react-native';
 import { create } from 'react-test-renderer';
-import { act } from '@testing-library/react-hooks';
-import MockAdapter from 'axios-mock-adapter';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import moment from 'moment';
 
 import ActivityLog from '../';
 import { API, Constants } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ItemLog from '../ItemLog';
+import FilterPopup from '../FilterPopup';
+import BottomButtonView from '../../../commons/BottomButtonView';
 import DateTimeRangeChange from '../../../commons/DateTimeRangeChange';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import Modal from 'react-native-modal';
+import DateTimeButton from '../../../commons/DateTimeRangeChange/DateTimeButton';
 import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
 
@@ -88,13 +91,15 @@ describe('Test Activity log', () => {
     expect(items).toHaveLength(1);
   });
 
-  it('test open and close 2 modal', async () => {
+  it('test filter and date picker popup', async () => {
+    const dateFrom = moment('2025-08-18T10:00:00.000Z');
+    const dateTo = moment(dateFrom).add(7, 'days');
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const filterPopup = instance.findAllByType(Modal);
-    expect(filterPopup[0].props.isVisible).toBeFalsy();
+    const filterPopup = instance.findByType(FilterPopup);
+    expect(filterPopup.props.isVisible).toBeFalsy();
 
     const filterButton = instance.findByProps({
       accessibilityLabel: AccessibilityLabel.FILTER_BUTTON,
@@ -102,43 +107,60 @@ describe('Test Activity log', () => {
     await act(async () => {
       filterButton.props.onPress();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
 
     const dateTimeRangeChange = instance.findByType(DateTimeRangeChange);
-    const datePicker = instance.findAllByType(DateTimePickerModal)[2];
+    const datePickers = instance.findAllByType(DateTimePickerModal);
+    const buttonPickers = instance.findAllByType(DateTimeButton);
+
+    // open popup start date
+    await act(async () => {
+      await buttonPickers[0].props.onPress();
+    });
+    expect(datePickers[0].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
 
     // pick start date
     await act(async () => {
-      await dateTimeRangeChange.props.selectStart();
-      await filterPopup[0].props.onModalHide();
+      await dateTimeRangeChange.props.selectStart(dateFrom);
     });
-    expect(filterPopup[0].props.isVisible).toBeFalsy();
-    // cancel
+    expect(datePickers[0].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // cancel start date
     await act(async () => {
-      await datePicker.props.onCancel();
-      await datePicker.props.onHide();
+      await datePickers[0].props.onCancel();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
-    expect(datePicker.props.isVisible).toBeFalsy();
-    // open popup
+    expect(datePickers[0].props.isVisible).toBeFalsy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // open popup end date
     await act(async () => {
-      await filterButton.props.onPress();
+      await buttonPickers[1].props.onPress();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
+    expect(datePickers[1].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
     // pick end date
     await act(async () => {
-      await dateTimeRangeChange.props.selectEnd();
-      await filterPopup[0].props.onModalHide();
+      await dateTimeRangeChange.props.selectEnd(dateTo);
     });
-    expect(filterPopup[0].props.isVisible).toBeFalsy();
-    expect(datePicker.props.isVisible).toBeTruthy();
-    // confirm
+    expect(datePickers[1].props.isVisible).toBeTruthy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // confirm end date
+    await act(async () => {
+      await datePickers[1].props.onConfirm();
+    });
+    expect(datePickers[1].props.isVisible).toBeFalsy();
+    expect(filterPopup.props.isVisible).toBeTruthy();
+
+    // apply filter
+    const applyButton = instance.findByType(BottomButtonView);
     await act(async () => {
-      await datePicker.props.onConfirm();
-      await datePicker.props.onHide();
+      await applyButton.props.onPressMain();
     });
-    expect(filterPopup[0].props.isVisible).toBeTruthy();
-    expect(datePicker.props.isVisible).toBeFalsy();
+    expect(filterPopup.props.isVisible).toBeFalsy();
   });
 
   const setUpActionLogScreen = () => {

package/src/screens/ActivityLog/index.js

@@ -121,7 +121,6 @@ const ActivityLogScreen = ({ route }) => {
         <FilterPopup
           isVisible={showFilterPopup}
           onHide={setHideFilterPopup}
-          onShow={setShowFilterPopup}
           members={members}
           filters={filters}
           userFilterEnabled={filterEnabled.user}

package/src/screens/ActivityLog/styles/filterPopupStyles.js

@@ -3,16 +3,19 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   wrapPopup: {
-    marginHorizontal: 16,
+    marginHorizontal: 12,
   },
   popup: {
     backgroundColor: Colors.White,
     width: '100%',
     height: (Constants.height * 80) / 100,
-    padding: 24,
+    padding: 20,
     paddingBottom: 100,
     borderRadius: 10,
   },
+  datePicker: {
+    justifyContent: 'center',
+  },
   heigh50percent: {
     height: (Constants.height * 50) / 100,
   },

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -18,6 +18,7 @@ import MockAdapter from 'axios-mock-adapter';
 import api from '../../../utils/Apis/axios';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import LabelValue from '../../../commons/Device/LabelValue';
+import Text from '../../../commons/Text';
 
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
@@ -51,6 +52,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'Chart',
       is_configuration_ready: true,
     };
 
@@ -65,6 +67,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const visualChart = instance.findAllByType(VisualChart);
     expect(visualChart).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Chart');
   });
 
   it('render ActionGroup', async () => {
@@ -82,6 +86,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'LED',
       is_configuration_ready: true,
     };
 
@@ -96,6 +101,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const actionGroup = instance.findAllByType(ActionGroup);
     expect(actionGroup).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('LED');
   });
 
   it('render camera', async () => {
@@ -113,6 +120,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'Camera',
       is_configuration_ready: true,
     };
 
@@ -127,6 +135,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const mediaPlayerDetail = instance.findAllByType(MediaPlayerDetail);
     expect(mediaPlayerDetail).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Camera');
   });
 
   it('render flat_list', async () => {
@@ -213,6 +223,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'gauge',
       },
+      label: 'Gauge',
       is_configuration_ready: true,
     };
 
@@ -227,6 +238,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Anemometer);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Gauge');
   });
 
   it('test render progress_bar', async () => {
@@ -237,6 +250,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'progress_bar',
       },
+      label: 'Brightness',
       is_configuration_ready: true,
     };
 
@@ -251,6 +265,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(ProgressBar);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Brightness');
   });
 
   it('test render Compass', async () => {
@@ -261,6 +277,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'compass',
       },
+      label: 'Compass',
       is_configuration_ready: true,
     };
 
@@ -275,6 +292,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Compass);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Compass');
   });
 
   it('test render alert_status', async () => {
@@ -314,6 +333,8 @@ describe('Test SensorDisplayItem', () => {
 
     const currentRainSensor = instance.findByType(CurrentRainSensor);
     expect(currentRainSensor.props).toEqual(expectProps);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Circle');
   };
 
   it('render circle_mini', async () => {
@@ -332,6 +353,7 @@ describe('Test SensorDisplayItem', () => {
           color: 'blue',
         },
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -371,6 +393,7 @@ describe('Test SensorDisplayItem', () => {
           color: 'blue',
         },
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -400,6 +423,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         config: null,
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -417,6 +441,7 @@ describe('Test SensorDisplayItem', () => {
       order: 0,
       template: 'LabelValue',
       configuration: {},
+      label: 'Label',
       is_configuration_ready: true,
     };
 
@@ -431,5 +456,7 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const displayItems = instance.findAllByType(LabelValue);
     expect(displayItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Label');
   });
 });