@eohjsc/react-native-smart-city 0.3.31 → 0.3.34

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { Platform } from 'react-native';
+import MockAdapter from 'axios-mock-adapter';
+
+import SelectUnit from '../index';
+import Text from '../../../commons/Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockedGoBack = jest.fn();
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+  };
+});
+
+const wrapComponent = (title, subTitle, onPressNext) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectUnit {...{ title, subTitle, onPressNext }} />
+  </SCProvider>
+);
+
+describe('test single SelectUnit', () => {
+  let tree;
+
+  test('fetch Unit success', async () => {
+    Platform.OS = 'android';
+    const response = {
+      status: 200,
+      success: true,
+      data: [
+        { id: 1, name: 'Unit 1' },
+        { id: 2, name: 'Unit 2' },
+      ],
+    };
+    mock.onGet(API.SHARE.UNITS()).reply(200, response.data);
+    await act(async () => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const unitName = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_NAME
+        ) === 0 && item.type === Text
+    );
+    const radioButton = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON
+        ) === 0
+    );
+    expect(unitName[0].props.children).toBe('Unit 1');
+    expect(unitName[1].props.children).toBe('Unit 2');
+    expect(radioButton[0].props.active).toBeFalsy();
+    expect(radioButton[1].props.active).toBeFalsy();
+    const selectUnit = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.SELECT_UNIT_SELECT}-1`
+    );
+    await act(async () => {
+      selectUnit[0].props.onPress();
+    });
+    expect(radioButton[0].props.active).toBeTruthy();
+  });
+
+  test('fetch Unit not success', async () => {
+    Platform.OS = 'ios';
+    mock.onGet(500);
+    await act(async () => {
+      tree = renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const unitName = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_NAME
+        ) === 0 && item.type === Text
+    );
+    const radioButton = instance.findAll(
+      (item) =>
+        item.props.accessibilityLabel?.indexOf(
+          AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON
+        ) === 0
+    );
+    expect(unitName).toHaveLength(2);
+    expect(radioButton).toHaveLength(2);
+  });
+
+  test('click goBack', async () => {
+    await act(async () => {
+      tree = renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const goBack = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.PREFIX.SELECT_UNIT}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_LEFT_BUTTON}`
+    );
+
+    await act(async () => {
+      goBack.props.onPress();
+    });
+    expect(mockedGoBack).toBeCalled();
+  });
+});

package/src/commons/SelectUnit/index.js

@@ -0,0 +1,105 @@
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+
+import { API } from '../../configs';
+import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
+import { axiosGet } from '../../utils/Apis/axios';
+import Text from '../../commons/Text';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import styles from './styles';
+import { HeaderCustom } from '../Header';
+
+const UnitItem = memo(({ index, item, setSelectedIndex, selectedIndex }) => {
+  const handleSelectIndex = useCallback(() => {
+    setSelectedIndex((currentIndex) => {
+      if (currentIndex !== index) {
+        return index;
+      }
+      return -1;
+    });
+  }, [index, setSelectedIndex]);
+
+  return (
+    <TouchableOpacity
+      key={index}
+      style={styles.rowContainer}
+      onPress={handleSelectIndex}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_UNIT_SELECT}-${item.id}`}
+    >
+      <RadioCircle
+        active={selectedIndex === index}
+        accessibilityLabel={`${AccessibilityLabel.SELECT_UNIT_RADIO_BUTTON}-${item.id}`}
+      />
+      <View style={styles.row}>
+        <Text
+          style={styles.text}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_UNIT_NAME}-${item.id}`}
+        >
+          {item.name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+const SelectUnit = ({ title, subTitle, onPressNext }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [units, setUnits] = useState([]);
+
+  const onRightClick = useCallback(() => {
+    onPressNext(units[selectedIndex]);
+  }, [onPressNext, selectedIndex, units]);
+
+  useEffect(() => {
+    (async () => {
+      const { data, success } = await axiosGet(API.SHARE.UNITS());
+      if (success) {
+        const normalizeData = data.map((unit) => ({
+          name: unit.name,
+          id: unit.id,
+        }));
+        setUnits(normalizeData);
+      }
+    })();
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <HeaderCustom title={title} isShowSeparator />
+      <Text style={styles.subtitle}>{subTitle}</Text>
+      <View style={styles.contentContainer}>
+        <ScrollView
+          style={styles.scrollContainer}
+          showsVerticalScrollIndicator={false}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
+          <Section type={'border'}>
+            {units.map((item, index) => (
+              <UnitItem
+                key={item?.id?.toString()}
+                item={item}
+                index={index}
+                setSelectedIndex={setSelectedIndex}
+                selectedIndex={selectedIndex}
+              />
+            ))}
+          </Section>
+        </ScrollView>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={goBack}
+          rightTitle={t('next')}
+          rightDisabled={selectedIndex === -1}
+          onRightClick={onRightClick}
+          accessibilityLabelPrefix={AccessibilityLabel.PREFIX.SELECT_UNIT}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default SelectUnit;

package/src/commons/SelectUnit/styles.js

@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  scrollContainer: {
+    width: '100%',
+    flex: 1,
+  },
+  title: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    lineHeight: 28,
+    marginTop: 8,
+    marginBottom: 4,
+    marginLeft: 16,
+  },
+  subtitle: {
+    color: Colors.Gray8,
+    fontSize: 14,
+    lineHeight: 22,
+    marginTop: 16,
+    marginLeft: 16,
+    marginBottom: 16,
+  },
+  row: {
+    flex: 1,
+    paddingVertical: 16,
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 16,
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+});
+
+export default styles;

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -13,7 +13,7 @@ import { isIphoneX } from 'react-native-iphone-x-helper';
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const WrapHeaderScrollable = ({
   children,
@@ -61,7 +61,7 @@ const WrapHeaderScrollable = ({
         onLeft={onGoBack}
       />
       <Animated.ScrollView
-        testID={TESTID.ANIMATED_SCROLL}
+        accessibilityLabel={AccessibilityLabel.ANIMATED_SCROLL}
         scrollEnabled={scrollEnabled}
         scrollEventThrottle={16}
         onScroll={Animated.event(

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -18,7 +18,7 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route';
 import { useGetIdUser } from '../../../hooks/Common';
-import { AUTOMATE_TYPE, TESTID } from '../../../configs/Constants';
+import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 
 const ItemOneTap = memo(
   ({ isOwner, automate = {}, unit, wrapSyles, onPressItem }) => {
@@ -105,14 +105,14 @@ const ItemOneTap = memo(
     return (
       <TouchableWithoutFeedback
         onPress={onPressItem || goToDetail}
-        accessibilityLabel={`${TESTID.AUTOMATE_SCRIPT_NAME}-${id}`}
+        accessibilityLabel={`${AccessibilityLabel.AUTOMATE_SCRIPT_NAME}-${id}`}
       >
         <View style={[styles.container, wrapSyles]}>
           <View style={styles.boxIcon}>
             {displayIcon()}
             {type === AUTOMATE_TYPE.ONE_TAP && (
               <TouchableOpacity
-                testID={TESTID.AUTOMATE_SCRIPT_ACTION}
+                accessibilityLabel={AccessibilityLabel.AUTOMATE_SCRIPT_ACTION}
                 onPress={handleScriptAction}
               >
                 <CheckCircle />
@@ -120,7 +120,7 @@ const ItemOneTap = memo(
             )}
           </View>
           <TouchableOpacity
-            testID={TESTID.GO_DETAIL}
+            accessibilityLabel={AccessibilityLabel.GO_DETAIL}
             onPress={onPressItem || goToDetail}
           >
             <Text

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableWithoutFeedback, TouchableOpacity } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 
 import SubUnitAutomate from '..';
-import { AUTOMATE_TYPE, TESTID } from '../../../../configs/Constants';
+import {
+  AUTOMATE_TYPE,
+  AccessibilityLabel,
+} from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import Routes from '../../../../utils/Route';
@@ -72,7 +75,10 @@ describe('test Item', () => {
 
     const instance = tree.root;
     const item = instance.findAll(
-      (el) => el.props.testID === TESTID.PLUS && el.type === TouchableOpacity
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SUB_UNIT_ADD_DEVICE &&
+        el.type === TouchableWithoutFeedback
     );
 
     expect(item).toHaveLength(1);
@@ -86,7 +92,8 @@ describe('test Item', () => {
 
     const goDetail = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.GO_DETAIL && el.type === TouchableOpacity
+        el.props.accessibilityLabel === AccessibilityLabel.GO_DETAIL &&
+        el.type === TouchableOpacity
     );
     expect(goDetail).toHaveLength(1);
     await act(async () => {
@@ -104,7 +111,8 @@ describe('test Item', () => {
 
     const handleScriptAction = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.AUTOMATE_SCRIPT_ACTION &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AUTOMATE_SCRIPT_ACTION &&
         el.type === TouchableOpacity
     );
     expect(handleScriptAction).toHaveLength(1);
@@ -128,7 +136,8 @@ describe('test Item', () => {
 
     const handleScriptAction = tree.root.findAll(
       (el) =>
-        el.props.testID === TESTID.AUTOMATE_SCRIPT_ACTION &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AUTOMATE_SCRIPT_ACTION &&
         el.type === TouchableOpacity
     );
     expect(handleScriptAction).toHaveLength(1);
@@ -175,7 +184,8 @@ describe('test Item', () => {
 
     const goDetail = tree.root.findAll(
       (el) =>
-        el.props.testID === TESTID.GO_DETAIL && el.type === TouchableOpacity
+        el.props.accessibilityLabel === AccessibilityLabel.GO_DETAIL &&
+        el.type === TouchableOpacity
     );
     expect(goDetail).toHaveLength(1);
     await act(async () => {
@@ -220,7 +230,10 @@ describe('test Item', () => {
 
     const instance = tree.root;
     const item = instance.findAll(
-      (el) => el.props.testID === TESTID.PLUS && el.type === TouchableOpacity
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SUB_UNIT_ADD_DEVICE &&
+        el.type === TouchableWithoutFeedback
     );
 
     expect(item).toHaveLength(1);
@@ -235,7 +248,8 @@ describe('test Item', () => {
 
     const goDetail = tree.root.findAll(
       (el) =>
-        el.props.testID === TESTID.GO_DETAIL && el.type === TouchableOpacity
+        el.props.accessibilityLabel === AccessibilityLabel.GO_DETAIL &&
+        el.type === TouchableOpacity
     );
     expect(goDetail).toHaveLength(1);
   });
@@ -247,7 +261,8 @@ describe('test Item', () => {
     const instance = tree.root;
     const touchableOpacity = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.SUB_UNIT_SELECT_AUTOMATE_TYPE &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SUB_UNIT_SELECT_AUTOMATE_TYPE &&
         el.type === TouchableOpacity
     );
     act(() => {

package/src/commons/SubUnit/OneTap/index.js

@@ -7,7 +7,7 @@ import ItemOneTap from './ItemOneTap';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route/index.js';
-import { AUTOMATE_TYPE, TESTID } from '../../../configs/Constants';
+import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import Text from '../../Text/index.js';
 
 import styles from './OneTapStyles.js';
@@ -43,7 +43,10 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
   }, [listAutomate]);
   return (
     <Section style={styles.noShadow}>
-      <View style={styles.boxScenario} testID={TESTID.VIEW_SUB_UNIT_AUTOMATE}>
+      <View
+        style={styles.boxScenario}
+        accessibilityLabel={AccessibilityLabel.VIEW_SUB_UNIT_AUTOMATE}
+      >
         {listAutomate.map((item, index) => (
           <TouchableOpacity
             style={
@@ -53,11 +56,13 @@ const SubUnitAutomate = ({ isOwner, listAutomate, unit, wrapItemStyle }) => {
             }
             onPress={() => onItemClick(item, index)}
             ref={refMenuAction}
-            testID={TESTID.SUB_UNIT_SELECT_AUTOMATE_TYPE}
+            accessibilityLabel={
+              AccessibilityLabel.SUB_UNIT_SELECT_AUTOMATE_TYPE
+            }
           >
             <View style={styles.boxTextScenarito}>
               <Text
-                testID={TESTID.SUB_UNIT_TEXT_DROPDOWN}
+                accessibilityLabel={AccessibilityLabel.SUB_UNIT_TEXT_DROPDOWN}
                 style={styles.textSelection}
                 semibold
               >

package/src/commons/SubUnit/ShortDetail.js

@@ -5,8 +5,8 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useDevicesStatus } from '../../hooks/Common';
 import { useWatchConfigs } from '../../hooks/IoT';
 
-import { Images, Device } from '../../configs';
-import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
+import { Device, Images } from '../../configs';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../configs/Constants';
 import { Section } from '../Section';
 import Text from '../Text';
 import ItemDevice from '../Device/ItemDevice';
@@ -16,12 +16,6 @@ import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import FastImage from 'react-native-fast-image';
 import MediaPlayerDetail from '../MediaPlayerDetail';
-import {
-  keyPermission,
-  OpenSetting,
-  permitPermissionFunction,
-} from '../../utils/Permission/common';
-import { RESULTS } from 'react-native-permissions';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -70,8 +64,7 @@ const ShortDetailSubUnit = ({ unit, station }) => {
               height: standardizeHeight,
             },
           ]}
-          testID={TESTID.SUB_UNIT_CAMERA_VIEW}
-          accessibilityLabel={`${TESTID.SUB_UNIT_CAMERA_VIEW}-${station?.id}`}
+          accessibilityLabel={`${AccessibilityLabel.SUB_UNIT_CAMERA_VIEW}-${station?.id}`}
         >
           <MediaPlayerDetail
             uri={station.camera.uri}
@@ -97,7 +90,7 @@ const ShortDetailSubUnit = ({ unit, station }) => {
             style={styles.image}
             defaultSource={Images.BgDevice}
             resizeMode="cover"
-            testID={TESTID.SUB_UNIT_BACKGROUND}
+            accessibilityLabel={AccessibilityLabel.SUB_UNIT_BACKGROUND}
           />
         </View>
       );
@@ -106,24 +99,13 @@ const ShortDetailSubUnit = ({ unit, station }) => {
   };
 
   const handleOnAddNew = () => {
-    permitPermissionFunction(keyPermission.CAMERA, (res) => {
-      if (res === RESULTS.GRANTED) {
-        navigate(Routes.AddDeviceStack, {
-          screen: Routes.ScanSensorQR,
-          params: {
-            station_id: station?.id,
-            unit_id: unit.id,
-            unit_name: unit.name,
-          },
-        });
-        return;
-      }
-      if (res === RESULTS.BLOCKED) {
-        OpenSetting(
-          t('camera_request_permission'),
-          t('camera_request_permission_des')
-        );
-      }
+    navigate(Routes.AddGatewayStack, {
+      screen: Routes.FirstWarning,
+      params: {
+        stationId: station?.id,
+        unitId: unit.id,
+        unitName: unit.name,
+      },
     });
   };
 

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Image, View } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import mock from 'react-native-permissions/mock';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ShortDetailSubUnit from '../ShortDetail';
@@ -84,7 +84,8 @@ describe('test ShortDetail Subunit', () => {
     const instance = tree.root;
     const image = instance.findAllByType(Image);
     const imageBackground = image.find(
-      (item) => item.props.testID === TESTID.SUB_UNIT_BACKGROUND
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.SUB_UNIT_BACKGROUND
     );
     expect(imageBackground).not.toBeDefined();
   });
@@ -97,7 +98,8 @@ describe('test ShortDetail Subunit', () => {
     const instance = tree.root;
     const image = instance.findAllByType(Image);
     const imageBackground = image.find(
-      (item) => item.props.testID === TESTID.SUB_UNIT_BACKGROUND
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.SUB_UNIT_BACKGROUND
     );
     expect(imageBackground).not.toBeDefined();
   });
@@ -116,7 +118,9 @@ describe('test ShortDetail Subunit', () => {
     const instance = tree.root;
     const view = instance.findAllByType(View);
     const viewCamera = view.find(
-      (item) => item.props.testID === TESTID.SUB_UNIT_CAMERA_VIEW
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.SUB_UNIT_CAMERA_VIEW}-${props.station.id}`
     );
     expect(viewCamera).toBeDefined();
   });
@@ -150,7 +154,8 @@ describe('test ShortDetail Subunit', () => {
     const instance = tree.root;
     const itemDevice = instance.findAll(
       (item) =>
-        item.props.testID === TESTID.SUB_UNIT_DEVICES && item.type === View
+        item.props.accessibilityLabel === AccessibilityLabel.SUB_UNIT_DEVICES &&
+        item.type === View
     );
     expect(itemDevice.length).toBe(0);
   });
@@ -165,12 +170,12 @@ describe('test ShortDetail Subunit', () => {
       buttonAddNew.props.onAddNew();
     });
     await mock.request(keyPermission.CAMERA);
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddDeviceStack, {
-      screen: Routes.ScanSensorQR,
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
+      screen: Routes.FirstWarning,
       params: {
-        station_id: props.station.id,
-        unit_id: props.unit.id,
-        unit_name: props.unit.name,
+        stationId: props.station.id,
+        unitId: props.unit.id,
+        unitName: props.unit.name,
       },
     });
   });

package/src/commons/SummaryItem/index.js

@@ -9,7 +9,7 @@ import Temperature from '../../../assets/images/Temperature.svg';
 import UVIndex from '../../../assets/images/UVIndex.svg';
 import WaterQuality from '../../../assets/images/WaterQuality.svg';
 import Device from '../../../assets/images/Device.svg';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const SummaryItem = memo(({ item, goToSummary }) => {
   const Icon = (() => {
@@ -34,7 +34,7 @@ const SummaryItem = memo(({ item, goToSummary }) => {
     <TouchableOpacity
       onPress={() => goToSummary(item)}
       style={styles.wrapSummaryItem}
-      accessibilityLabel={`${TESTID.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
+      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
     >
       <View style={styles.summaryItem}>
         <Icon />