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

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 />

package/src/commons/Unit/HeaderUnit/index.js

@@ -6,7 +6,7 @@ import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import { Colors, Device } from '../../../configs';
 import Text from '../../Text';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 const HeaderUnit = memo(
   ({
@@ -19,7 +19,7 @@ const HeaderUnit = memo(
     hideRightPlus,
     styleBoxTitle,
     bottomBorder,
-    idButtonMore,
+    idButtonMore = AccessibilityLabel.HEADER_UNIT_BUTTON_MORE,
   }) => {
     const { goBack } = useNavigation();
     const buttonMoreRef = useRef(null);
@@ -43,7 +43,7 @@ const HeaderUnit = memo(
     return (
       <View style={[styles.container, bottomBorder && styles.bottomBorder]}>
         <TouchableOpacity
-          testID={TESTID.HEADER_UNIT_BUTTON_BACK}
+          accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_BACK}
           style={styles.btnLeft}
           onPress={onPressBack}
         >
@@ -65,7 +65,7 @@ const HeaderUnit = memo(
           <View style={styles.boxRight}>
             {!hideRightPlus && (
               <TouchableOpacity
-                testID={TESTID.HEADER_UNIT_BUTTON_ADD}
+                accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_ADD}
                 style={styles.btnAdd}
                 onPress={onPressAdd}
               >
@@ -77,7 +77,6 @@ const HeaderUnit = memo(
               </TouchableOpacity>
             )}
             <TouchableOpacity
-              testID={TESTID.HEADER_UNIT_BUTTON_MORE}
               style={styles.btnMore}
               onPress={onPressMore}
               ref={buttonMoreRef}

package/src/commons/Unit/SharedUnit.js

@@ -9,7 +9,7 @@ import Routes from '../../utils/Route';
 import { axiosPost } from '../../utils/Apis/axios';
 
 import styles from './styles';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const SharedUnit = ({
   item,
@@ -67,8 +67,7 @@ const SharedUnit = ({
       style={styles.row}
       key={item.id.toString()}
       onPress={goToDetail}
-      testID={`${TESTID.TOUCH_SHARED_UNIT}-${item.id}`}
-      accessibilityLabel={`${TESTID.TOUCH_SHARED_UNIT}-${item.id}`}
+      accessibilityLabel={`${AccessibilityLabel.TOUCH_SHARED_UNIT}-${item.id}`}
     >
       <Image
         source={{ uri: unit.icon }}
@@ -78,7 +77,10 @@ const SharedUnit = ({
       <View style={styles.ownerContainer}>
         <Text style={styles.name}>{unit.name}</Text>
         {unit.owner_name ? (
-          <Text style={styles.textBy} testID={TESTID.SHARED_UNIT_OWN_BY}>
+          <Text
+            style={styles.textBy}
+            accessibilityLabel={AccessibilityLabel.SHARED_UNIT_OWN_BY}
+          >
             {t('text_by')}
             <Text style={styles.textOwner}>{unit.owner_name}</Text>
           </Text>
@@ -94,14 +96,14 @@ const SharedUnit = ({
                 size={20}
                 color={Colors.Blue10}
                 onPress={removePinSharedUnit}
-                testID={`${TESTID.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
+                accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
               />
             ) : (
               <IconOutline
                 name="pushpin"
                 size={20}
                 onPress={addPinSharedUnit}
-                testID={`${TESTID.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
+                accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
               />
             )}
             {item.is_star ? (
@@ -110,14 +112,14 @@ const SharedUnit = ({
                 size={20}
                 color={Colors.Yellow6}
                 onPress={removeStarSharedUnit}
-                testID={`${TESTID.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
+                accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
               />
             ) : (
               <IconOutline
                 name="star"
                 size={20}
                 onPress={addStarSharedUnit}
-                testID={`${TESTID.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}
+                accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}
               />
             )}
           </Fragment>

package/src/commons/Unit/__test__/HeaderUnit.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import HeaderUnit from '../HeaderUnit/index';
 
 const mockedGoBack = jest.fn();
@@ -46,7 +46,9 @@ describe('Test HeaderUnit', () => {
     });
     const instance = tree.root;
     const item = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_UNIT_BUTTON_BACK
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.HEADER_UNIT_BUTTON_BACK
     );
     expect(item.props.style).toEqual(style);
     await act(async () => {
@@ -68,7 +70,9 @@ describe('Test HeaderUnit', () => {
     });
     const instance = tree.root;
     const item = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_UNIT_BUTTON_BACK
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.HEADER_UNIT_BUTTON_BACK
     );
     await act(async () => {
       item.props.onPress();
@@ -91,10 +95,14 @@ describe('Test HeaderUnit', () => {
     });
     const instance = tree.root;
     const buttonAdd = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_UNIT_BUTTON_ADD
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.HEADER_UNIT_BUTTON_ADD
     );
     const buttonMore = instance.find(
-      (el) => el.props.testID === TESTID.HEADER_UNIT_BUTTON_MORE
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.HEADER_UNIT_BUTTON_MORE
     );
     await act(async () => {
       buttonAdd.props.onPress();

package/src/commons/Unit/__test__/SharedUnit.test.js

@@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native';
 import MockAdapter from 'axios-mock-adapter';
 
 import SharedUnit from '../SharedUnit';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { API } from '../../../configs';
 import Routes from '../../../utils/Route';
 import { SCProvider } from '../../../context';
@@ -72,16 +72,22 @@ describe('Test SharedUnit', () => {
     });
     const instance = tree.root;
     const touchSharedUnit = instance.find(
-      (el) => el.props.testID === TESTID.TOUCH_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.TOUCH_SHARED_UNIT + '-69'
     );
     act(() => {
       touchSharedUnit.props.onPress();
     });
     const iconRemovePinSharedUnit = instance.findAll(
-      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
     );
     const iconAddPinSharedUnit = instance.find(
-      (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT + '-69'
     );
     mock.onPost(API.UNIT.PIN_UNIT(3)).reply(200);
     act(() => {
@@ -92,7 +98,9 @@ describe('Test SharedUnit', () => {
       iconAddPinSharedUnit.props.onPress();
     });
     const iconAddStarSharedUnit = instance.find(
-      (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
     );
     mock.onPost(API.UNIT.STAR_UNIT(3)).reply(200);
     act(() => {
@@ -121,7 +129,8 @@ describe('Test SharedUnit', () => {
     });
     const instance = tree.root;
     const ownerName = instance.findAll(
-      (el) => el.props.testID === TESTID.SHARED_UNIT_OWN_BY
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.SHARED_UNIT_OWN_BY
     );
 
     expect(ownerName).toHaveLength(0);
@@ -136,10 +145,14 @@ describe('Test SharedUnit', () => {
     const instance = tree.root;
 
     const iconAddPinSharedUnit = instance.findAll(
-      (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT + '-69'
     );
     const iconStarUnit = instance.findAll(
-      (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
     );
 
     expect(iconAddPinSharedUnit).toHaveLength(0);
@@ -156,7 +169,9 @@ describe('Test SharedUnit', () => {
     });
     const instance = tree.root;
     const iconRemovePinSharedUnit = instance.find(
-      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
     );
     mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(200);
     act(() => {
@@ -167,7 +182,9 @@ describe('Test SharedUnit', () => {
       iconRemovePinSharedUnit.props.onPress();
     });
     const iconRemoveStarSharedUnit = instance.find(
-      (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
     );
     mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
     act(() => {
@@ -178,7 +195,9 @@ describe('Test SharedUnit', () => {
       iconRemoveStarSharedUnit.props.onPress();
     });
     const iconRemoveStar = instance.findAll(
-      (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
     );
     expect(iconRemoveStar).toHaveLength(3);
   });

package/src/commons/UnitSummary/AirQuality/__test__/index.test.js

@@ -4,7 +4,7 @@ import { act, create } from 'react-test-renderer';
 import AirQuality from '../index';
 import { Section } from '../../../index';
 import Text from '../../../Text';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 
@@ -79,7 +79,8 @@ describe('Test AirQuality', () => {
     const instance = tree.root;
     const buttons = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(3);
@@ -103,7 +104,8 @@ describe('Test AirQuality', () => {
     const instance = tree.root;
     const buttons = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(3);
@@ -127,8 +129,8 @@ describe('Test AirQuality', () => {
     const instance = tree.root;
     const text = instance.find(
       (el) =>
-        el.props.testID === TESTID.AIR_QUALITY_OUTDOOR_ADVICE_TEXT &&
-        el.type === Text
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AIR_QUALITY_OUTDOOR_ADVICE_TEXT && el.type === Text
     );
     expect(text.props.children).toEqual('Amazing Good Chop');
   });
@@ -141,7 +143,8 @@ describe('Test AirQuality', () => {
     const instance = tree.root;
     const buttons = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(2);
@@ -155,7 +158,8 @@ describe('Test AirQuality', () => {
     const instance = tree.root;
     const buttons = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(2);
@@ -169,7 +173,8 @@ describe('Test AirQuality', () => {
     const instance = tree.root;
     const buttons = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.AIR_QUALITY_OUTDOOR_VALUE_TOUCH &&
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(2);

package/src/commons/UnitSummary/AirQuality/index.js

@@ -9,7 +9,7 @@ import Text from '../../../commons/Text';
 import ConfigHistoryChart from '../ConfigHistoryChart';
 
 import SegmentedRoundDisplay from './SegmentedRoundDisplay';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import styles from './styles';
 
 const AirQuality = memo(({ summaryDetail }) => {
@@ -106,7 +106,9 @@ const AirQuality = memo(({ summaryDetail }) => {
               const borderWidth = active ? 0 : 1;
               return (
                 <TouchableOpacity
-                  testID={TESTID.AIR_QUALITY_OUTDOOR_VALUE_TOUCH}
+                  accessibilityLabel={
+                    AccessibilityLabel.AIR_QUALITY_OUTDOOR_VALUE_TOUCH
+                  }
                   style={[
                     styles.touchOption,
                     {
@@ -149,7 +151,9 @@ const AirQuality = memo(({ summaryDetail }) => {
                     style={[styles.boxDot, { backgroundColor: outdoorColor }]}
                   />
                   <Text
-                    testID={TESTID.AIR_QUALITY_OUTDOOR_ADVICE_TEXT}
+                    accessibilityLabel={
+                      AccessibilityLabel.AIR_QUALITY_OUTDOOR_ADVICE_TEXT
+                    }
                     color={Colors.Gray7}
                     type="Body"
                   >

package/src/commons/UnitSummary/TotalPowerBox.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { Colors } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import Text from '../Text';
 
 const TotalPowerBox = memo(({ title, value, measure }) => {
@@ -13,7 +13,7 @@ const TotalPowerBox = memo(({ title, value, measure }) => {
         color={Colors.Gray8}
         size={14}
         style={styles.txtTotal}
-        testID={TESTID.TOTAL_POWER_BOX_TITLE}
+        accessibilityLabel={AccessibilityLabel.TOTAL_POWER_BOX_TITLE}
       >
         {title}
       </Text>

package/src/commons/UnitSummary/TotalPowerConsumption/index.js

@@ -5,7 +5,7 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { Colors } from '../../../configs';
 import TotalPowerBox from '../TotalPowerBox';
 import Text from '../../Text';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 const TotalPowerConsumption = memo(({ time, total }) => {
   const t = useTranslations();
@@ -21,7 +21,7 @@ const TotalPowerConsumption = memo(({ time, total }) => {
         title={t('text_total_power_consumption')}
         value={total.value}
         measure={total.measure}
-        testID={TESTID.TOTAL_POWER_CONSUMPTION}
+        accessibilityLabel={AccessibilityLabel.TOTAL_POWER_CONSUMPTION}
       />
     </View>
   );

package/src/commons/UnitSummary/__test__/TotalPowerBox.test.js

@@ -1,7 +1,7 @@
 import TotalPowerBox from '../TotalPowerBox';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 describe('Test Total Power Box', () => {
   let tree;
@@ -12,7 +12,8 @@ describe('Test Total Power Box', () => {
     });
     const instance = tree.root;
     const item = instance.find(
-      (el) => el.props.testID === TESTID.TOTAL_POWER_BOX_TITLE
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TOTAL_POWER_BOX_TITLE
     );
     expect(item.props.children).toBe('titleTest');
   });

package/src/commons/UnitSummary/__test__/TotalPowerConsumption.test.js

@@ -1,7 +1,7 @@
 import TotalPowerConsumption from '../TotalPowerConsumption/index';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
@@ -24,7 +24,9 @@ describe('Test Total Power Consumption', () => {
     });
     const instance = tree.root;
     const item = instance.find(
-      (el) => el.props.testID === TESTID.TOTAL_POWER_CONSUMPTION
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.TOTAL_POWER_CONSUMPTION
     );
     expect(item.props.value).toBe(10);
   });

package/src/commons/ViewButtonBottom/index.js

@@ -3,7 +3,7 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 // this view support either 1 or 2 button
 const ViewButtonBottom = ({
@@ -18,7 +18,7 @@ const ViewButtonBottom = ({
   styleButtonRightText,
   styleButtonLeft,
   styleButtonRight,
-  testIDPrefix = '',
+  accessibilityLabelPrefix = '',
 }) => {
   const useTwoButton = leftTitle && rightTitle;
 
@@ -34,7 +34,7 @@ const ViewButtonBottom = ({
           ]}
           onPress={onLeftClick}
           disabled={leftDisabled}
-          testID={`${testIDPrefix}${TESTID.VIEW_BUTTON_BOTTOM_LEFT_BUTTON}`}
+          accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_LEFT_BUTTON}`}
         >
           <Text
             semibold
@@ -56,7 +56,7 @@ const ViewButtonBottom = ({
           ]}
           onPress={onRightClick}
           disabled={rightDisabled}
-          testID={`${testIDPrefix}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`}
+          accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`}
         >
           <Text
             semibold

package/src/commons/WheelDateTimePicker/index.js

@@ -10,7 +10,7 @@ import ViewButtonBottom from '../ViewButtonBottom';
 
 import { getDateData } from '../../utils/Converter/time';
 import styles from './styles';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const formatNumber = (number) => {
   return {
@@ -104,7 +104,7 @@ const WheelDateTimePicker = ({
 
   return (
     <BottomSheet
-      testID={TESTID.WHEEL_DATE_TIME_PICKER}
+      accessibilityLabel={AccessibilityLabel.WHEEL_DATE_TIME_PICKER}
       isVisible={isVisible}
       onBackdropPress={onPickerCancel}
       onHide={onHide}
@@ -174,7 +174,9 @@ const WheelDateTimePicker = ({
         onLeftClick={onPickerCancel}
         rightTitle={t('done')}
         onRightClick={onDone}
-        testIDPrefix={TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}
+        accessibilityLabelPrefix={
+          AccessibilityLabel.WHEEL_DATE_TIME_PICKER_BUTTON
+        }
       />
     </BottomSheet>
   );