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

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/ButtonWrapper.js

@@ -8,7 +8,7 @@ import styles from './SetupGeneratePasscodeStyles';
 
 const ButtonWrapper = memo(
   ({
-    testID,
+    accessibilityLabel,
     textHeadline,
     textMinutes,
     value,
@@ -27,7 +27,7 @@ const ButtonWrapper = memo(
     const boxNotSelect = { ...styles.boxSetTime, ...styles.boxSetTimeDuration };
     return (
       <View
-        testID={testID}
+        accessibilityLabel={accessibilityLabel}
         style={
           !isButtonDuration
             ? styles.buttonWrapper

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/__test__/index.test.js

@@ -3,7 +3,7 @@ import { act, create } from 'react-test-renderer';
 
 import SetupGeneratePasscode from '../index';
 import { mockSCStore } from '../../../../../context/mockStore';
-import { TESTID } from '../../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
 
 const mockNavigate = jest.fn();
@@ -32,13 +32,19 @@ describe('Test SetupGeneratePasscode', () => {
 
   const getElement = (instance) => {
     const changeName = instance.findAll(
-      (item) => item.props.testID === TESTID.GENERATE_PASSCODE_CHOOSE_USER
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.GENERATE_PASSCODE_CHOOSE_USER
     );
     const changeTime = instance.findAll(
-      (item) => item.props.testID === TESTID.GENERATE_PASSCODE_SET_TIME
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.GENERATE_PASSCODE_SET_TIME
     );
     const changeDuration = instance.findAll(
-      (item) => item.props.testID === TESTID.GENERATE_PASSCODE_SET_DURATION
+      (item) =>
+        item.props.accessibilityLabel ===
+        AccessibilityLabel.GENERATE_PASSCODE_SET_DURATION
     );
 
     return {
@@ -66,8 +72,8 @@ describe('Test SetupGeneratePasscode', () => {
 
     const wheelDateTimePicker = instance.findAll(
       (item) =>
-        item.props.testID ===
-        `${TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.WHEEL_DATE_TIME_PICKER_BUTTON}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
     );
     await wheelDateTimePicker[5].props.onClick();
     await wheelDateTimePicker[11].props.onClick();

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/index.js

@@ -11,7 +11,7 @@ import TemporaryDetail from '../../../../screens/GuestInfo/components/TemporaryD
 import AccessScheduleItem from '../../../../screens/GuestInfo/components/AccessScheduleItem';
 import BottomButtonView from '../../../BottomButtonView';
 import { ACCESS_SCHEDULE } from '../../../../screens/GuestInfo/constant';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import ButtonWrapper from './ButtonWrapper';
 import moment from 'moment';
 import styles from './SetupGeneratePasscodeStyles';
@@ -187,14 +187,16 @@ const SetupGeneratePasscode = memo(() => {
             textHeadline={t('choose_user')}
             value={'Name'}
             isButtonChooseUser
-            testID={TESTID.GENERATE_PASSCODE_CHOOSE_USER}
+            accessibilityLabel={
+              AccessibilityLabel.GENERATE_PASSCODE_CHOOSE_USER
+            }
           />
           <ButtonWrapper
             textHeadline={t('set_time')}
             valueTime={time.format('HH:mm')}
             onPressSetTime={handleSetTime}
             isButtonSetTime
-            testID={TESTID.GENERATE_PASSCODE_SET_TIME}
+            accessibilityLabel={AccessibilityLabel.GENERATE_PASSCODE_SET_TIME}
           />
           <ButtonWrapper
             textHeadline={t('duration')}
@@ -204,7 +206,9 @@ const SetupGeneratePasscode = memo(() => {
             onPressSelectCircle={handleSelectCircle}
             isButtonDuration
             isSelectCircle={isSelectCircle}
-            testID={TESTID.GENERATE_PASSCODE_SET_DURATION}
+            accessibilityLabel={
+              AccessibilityLabel.GENERATE_PASSCODE_SET_DURATION
+            }
           />
           <View>
             <Text style={styles.textHeadLine}>{t('access_schedule')}</Text>

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -5,11 +5,12 @@ import React, { memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 const OnOffButtonTemplate = memo(
-  ({ isOn, triggerAction, actionGroup, isLight = false }) => {
-    const { configuration, id } = actionGroup;
+  ({ isOn, triggerAction, actionGroup = {}, isLight = false }) => {
+    const { configuration = {}, id } = actionGroup;
+    const { icon_on, icon_off, text_on, text_off } = configuration;
 
     return (
       <>
@@ -17,12 +18,11 @@ const OnOffButtonTemplate = memo(
           <TouchableOpacity
             style={styles.bigCircle}
             onPress={triggerAction}
-            testID={`${TESTID.ON_OFF_BUTTON}-${id}`}
-            accessibilityLabel={`${TESTID.ON_OFF_BUTTON}-${id}`}
+            accessibilityLabel={`${AccessibilityLabel.ON_OFF_BUTTON}-${id}`}
           >
             <View style={styles.smallCircle}>
               <Icon
-                name={isOn ? configuration.icon_on : configuration.icon_off}
+                name={isOn ? icon_on : icon_off}
                 size={44}
                 color={isOn ? Colors.Green7 : Colors.Gray6}
               />
@@ -31,16 +31,15 @@ const OnOffButtonTemplate = memo(
                   styles.textBig,
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
-                testID={`${TESTID.SENSOR_STATUS}-${id}`}
-                accessibilityLabel={`${TESTID.SENSOR_STATUS}-${id}`}
+                accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${id}`}
               >
-                {isOn ? configuration.text_on : configuration.text_off}
+                {isOn ? text_on : text_off}
               </Text>
             </View>
           </TouchableOpacity>
         </View>
         {!!actionGroup.title && !isLight && (
-          <Text size={20} semibold center>
+          <Text type="H3" semibold center>
             {actionGroup.title}
           </Text>
         )}

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -20,8 +20,8 @@ const getComponent = (template) => {
   }
 };
 
-const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
+const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
+  const { configuration = {} } = actionGroup;
   const { action_data, action_on_data, action_off_data } = configuration;
 
   // eslint-disable-next-line no-unused-vars

package/src/commons/ActionGroup/OneBigButtonTemplate.js

@@ -6,9 +6,9 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 import styles from './OneBigButtonTemplateStyle';
 
-const OneBigButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
-  const { text, action_data } = configuration || {};
+const OneBigButtonTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
+  const { configuration = {} } = actionGroup;
+  const { text, action_data, icon } = configuration;
 
   const onPressDoAction = useCallback(() => {
     doAction(action_data, null);
@@ -19,13 +19,13 @@ const OneBigButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       <View style={styles.barrierControlContainer}>
         <TouchableOpacity style={styles.bigCircle} onPress={onPressDoAction}>
           <View style={styles.smallCircle}>
-            <Icon name={configuration.icon} size={44} color={Colors.Green7} />
+            <Icon name={icon} size={44} color={Colors.Green7} />
             <Text style={styles.textBig}>{text}</Text>
           </View>
         </TouchableOpacity>
       </View>
       {!!actionGroup.title && (
-        <Text size={20} semibold center>
+        <Text type="H3" semibold center>
           {actionGroup.title}
         </Text>
       )}

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -10,7 +10,7 @@ import { useConfigGlobalState } from '../../iot/states';
 import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import styles from './OptionsDropdownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
-import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
 import IconComponent from '../../commons/IconComponent';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import SvgDoorState from '../../../assets/images/Device/door-state.svg';
@@ -24,38 +24,48 @@ function getOptionValue(option) {
   return option.value_int;
 }
 
-const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
+const OptionsDropdownActionTemplate = ({
+  actionGroup = {},
+  doAction,
+  sensor = {},
+}) => {
   const t = useTranslations();
-  const { configuration, title } = actionGroup;
-  const { action_data, options, icon_kit_data, icon, icon_outlined } =
-    configuration;
+  const { configuration = {}, title } = actionGroup;
+  const {
+    action_data,
+    options = [],
+    icon_kit_data,
+    icon,
+    icon_outlined,
+    config,
+  } = configuration;
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
   const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
   const selectedOption = useMemo(() => {
-    const currentValue = configValues[configuration.config]?.value;
+    const currentValue = configValues[config]?.value;
     if (currentValue === null || currentValue === undefined) {
-      return configuration.options[0];
+      return options[0];
     }
 
-    for (let i = 0; i < configuration.options.length; i++) {
-      const option = configuration.options[i];
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
       const value = getOptionValue(option);
       if (value === currentValue) {
         return option;
       }
     }
-    return configuration.options[0];
-  }, [configValues, configuration.config, configuration.options]);
+    return options[0];
+  }, [configValues, config, options]);
 
   const { stateAlert, hideAlertAction, onShowAlert } = useDropdownAction();
   const [selectedIndex, setSelectedIndex] = useState(
-    configuration.options.indexOf(selectedOption)
+    options.indexOf(selectedOption)
   );
 
   useEffect(() => {
-    setSelectedIndex(configuration.options.indexOf(selectedOption));
-  }, [configuration.options, selectedOption]);
+    setSelectedIndex(options.indexOf(selectedOption));
+  }, [options, selectedOption]);
 
   const onDone = useCallback(() => {
     const newOption = options[selectedIndex];
@@ -68,14 +78,14 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
 
     doAction(action_data, data);
     if (sensor?.is_managed_by_backend) {
-      configuration.config &&
+      config &&
         sensor.device_type === DEVICE_TYPE.LG_THINQ &&
-        watchMultiConfigs([configuration.config]);
+        watchMultiConfigs([config]);
     }
     hideAlertAction();
   }, [
     action_data,
-    configuration.config,
+    config,
     doAction,
     hideAlertAction,
     options,
@@ -89,11 +99,11 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
   const displaySelected = useMemo(() => {
-    if (!configuration.config) {
+    if (!config) {
       return t('not_available');
     }
     return selectedOption.text;
-  }, [configuration?.config, selectedOption?.text, t]);
+  }, [config, selectedOption?.text, t]);
 
   const iconSvg = useMemo(() => {
     switch (icon) {
@@ -128,7 +138,9 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
       </View>
       <TouchableOpacity style={styles.iconAndTextOption} onPress={onShowAlert}>
         <Text
-          testID={TESTID.OPTIONS_DROPDOWN_ACTION_DISPLAY_SELECTED}
+          accessibilityLabel={
+            AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_DISPLAY_SELECTED
+          }
           color={
             displaySelected === t('not_available') ? Colors.Gray6 : Colors.Gray8
           }
@@ -157,7 +169,9 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
               <Text
                 color={Colors.Gray6}
                 style={styles.writeNotAvailable}
-                testID={TESTID.OPTIONS_DROPDOWN_ACTION_WRITE_NOT_AVAILABLE}
+                accessibilityLabel={
+                  AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_WRITE_NOT_AVAILABLE
+                }
               >
                 {t('write_not_available')}
               </Text>
@@ -166,7 +180,9 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
               <View key={index} style={styles.rowContainer}>
                 <RadioCircle active={selectedIndex === index} />
                 <TouchableOpacity
-                  testID={TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM}
+                  accessibilityLabel={
+                    AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM
+                  }
                   style={styles.row}
                   onPress={() => {
                     setSelectedIndex(index);

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
+import React, { memo, useCallback, useState, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './SliderRangeTemplateStyles';
@@ -8,35 +8,43 @@ import SvgBrightness from '../../../assets/images/brightness.svg';
 import SliderRange from 'react-native-slider';
 import { useConfigGlobalState } from '../../iot/states';
 
-const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
+const SliderRangeTemplate = memo(({ actionGroup = {}, doAction }) => {
   const t = useTranslations();
-  const { configuration } = actionGroup;
+  const { configuration = {} } = actionGroup;
   const [valueBrightness, setValueBrightness] = useState(0);
   const [valueBrightnessTemp, setValueBrightnessTemp] = useState(0);
+  const [isFirstTime, setIsFirstTime] = useState(true);
+
   const [configValues] = useConfigGlobalState('configValues');
 
   const onChangeBrightness = useCallback(
-    (value) => {
-      doAction(
+    async (value) => {
+      await doAction(
         configuration?.action_brightness_data,
         JSON.stringify({ value_brness: value })
       );
+      await setValueBrightness(value);
+      await setValueBrightnessTemp(value);
     },
     [configuration?.action_brightness_data, doAction]
   );
 
-  const percentBrightness = useMemo(() => {
-    return valueBrightnessTemp || valueBrightness || 0;
-  }, [valueBrightness, valueBrightnessTemp]);
-
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    let valueBrness = configValue?.value;
-    if (valueBrness >= 0 && valueBrightness >= 0) {
-      setValueBrightness(valueBrness);
+    if (configValue?.value >= 0 && isFirstTime) {
+      setValueBrightness(configValue?.value);
+      setIsFirstTime(false);
+    } else if (configValue?.value === valueBrightnessTemp) {
+      setValueBrightness(valueBrightnessTemp);
     }
-  }, [configuration.config, configValues, configuration, valueBrightness]);
+  }, [
+    configuration.config,
+    configValues,
+    configuration,
+    isFirstTime,
+    valueBrightnessTemp,
+  ]);
 
   return (
     <View style={styles.viewBrightness}>
@@ -49,9 +57,9 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
       <View style={styles.RightBrightness}>
         <View style={styles.slider}>
           <SliderRange
-            value={valueBrightnessTemp}
+            value={valueBrightness}
             onSlidingComplete={onChangeBrightness}
-            onValueChange={setValueBrightnessTemp}
+            onValueChange={setValueBrightness}
             step={1}
             minimumValue={0}
             maximumValue={100}
@@ -64,7 +72,7 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
         </View>
         <View style={styles.valuePercent}>
           <Text type="Label" style={styles.textValuePercent}>
-            {`${percentBrightness}%`}
+            {`${valueBrightness}%`}
           </Text>
         </View>
       </View>

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -9,7 +9,7 @@ import { IconOutline } from '@ant-design/icons-react-native';
 import CircleButton from './component/CircleButton';
 import RectangleButton from './component/RectangleButton';
 import ControlPlay from './component/ControlPlay';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import {
@@ -109,13 +109,17 @@ const SmartTiviActionTemplate = memo(
                   />
                 }
                 onPress={onPressButton(SMART_TIVI_BUTTON.ONOFF_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.ONOFF_BUTTON
+                }
               />
               <CircleButton
                 type="small"
                 icon={<SvgInput size={20} style={styles.iconButtonExit} />}
                 onPress={onPressButton(SMART_TIVI_BUTTON.EXIT_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.EXIT_BUTTON
+                }
               />
             </View>
             <View style={styles.controlDevice}>
@@ -126,7 +130,9 @@ const SmartTiviActionTemplate = memo(
                 onPressDown={onPressButton(
                   SMART_TIVI_BUTTON.VOLUME_DOWN_BUTTON
                 )}
-                testID={TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.VOLUME_BUTTON
+                }
               />
               <CircleButton
                 type="big"
@@ -136,7 +142,9 @@ const SmartTiviActionTemplate = memo(
                 onPressLeft={onPressButton(SMART_TIVI_BUTTON.LEFT_BUTTON)}
                 onPressRight={onPressButton(SMART_TIVI_BUTTON.RIGHT_BUTTON)}
                 onPressOk={onPressButton(SMART_TIVI_BUTTON.OK_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.BIG_BUTTON
+                }
               />
               <RectangleButton
                 type="column"
@@ -147,7 +155,9 @@ const SmartTiviActionTemplate = memo(
                 }
                 onPressUp={onPressButton(SMART_TIVI_BUTTON.CH_UP)}
                 onPressDown={onPressButton(SMART_TIVI_BUTTON.CH_DOWN)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_BUTTON
+                }
               />
             </View>
             <View style={styles.controlPlay}>
@@ -155,7 +165,9 @@ const SmartTiviActionTemplate = memo(
                 onPressPrev={onPressButton(SMART_TIVI_BUTTON.PREV_BUTTON)}
                 onPressStop={onPressButton(SMART_TIVI_BUTTON.STOP_BUTTON)}
                 onPressNext={onPressButton(SMART_TIVI_BUTTON.NEXT_BUTTON)}
-                testID={TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.CONTROL_BUTTON
+                }
               />
             </View>
             <View style={styles.controlHome}>
@@ -163,13 +175,17 @@ const SmartTiviActionTemplate = memo(
                 type="row"
                 onPress={onPressButton(SMART_TIVI_BUTTON.HOME_BUTTON)}
                 icon={<Home />}
-                testID={TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.HOME_BUTTON
+                }
               />
               <RectangleButton
                 type="row"
                 onPress={onPressButton(SMART_TIVI_BUTTON.BACK_BUTTON)}
                 icon={<KeyboardReturn />}
-                testID={TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.BACK_BUTTON
+                }
               />
             </View>
             <View style={styles.channelTV}>

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/ControlPlay.test.js

@@ -4,7 +4,7 @@ import ControlPlay from '../component/ControlPlay';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { TouchableOpacity } from 'react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const wrapComponent = (onPressPrev, onPressStop, onPressNext) => (
   <SCProvider initState={mockSCStore({})}>
@@ -41,7 +41,8 @@ describe('Test ControlPlay', () => {
 
     const PrevButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(PrevButton).toBeDefined();
@@ -57,7 +58,8 @@ describe('Test ControlPlay', () => {
 
     const PrevButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(PrevButton).toBeDefined();
@@ -76,7 +78,8 @@ describe('Test ControlPlay', () => {
 
     const StopButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(StopButton).toBeDefined();
@@ -92,7 +95,8 @@ describe('Test ControlPlay', () => {
 
     const StopButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(StopButton).toBeDefined();
@@ -111,7 +115,8 @@ describe('Test ControlPlay', () => {
 
     const NextButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(NextButton).toBeDefined();
@@ -127,7 +132,8 @@ describe('Test ControlPlay', () => {
 
     const NextButton = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(NextButton).toBeDefined();

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/RectangleButton.test.js

@@ -4,7 +4,7 @@ import RectangleButton from '../component/RectangleButton';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { TouchableOpacity } from 'react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const wrapComponent = (type, onPress, onPressUp, onPressDown, icon) => (
   <SCProvider initState={mockSCStore({})}>
@@ -45,7 +45,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonUp = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonUp).toBeDefined();
@@ -62,7 +63,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonUp = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonUp).toBeDefined();
@@ -82,7 +84,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonDown = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonDown).toBeDefined();
@@ -99,7 +102,8 @@ describe('Test RectangleButton', () => {
 
     const RectangleButtonDown = instance.find(
       (el) =>
-        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
         el.type === TouchableOpacity
     );
     expect(RectangleButtonDown).toBeDefined();