@eohjsc/react-native-smart-city 0.3.30 → 0.3.33

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

@@ -3,156 +3,158 @@ import React, { memo, useState, useCallback, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 import { Colors } from '../../../configs';
-import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
 import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import Text from '../../Text';
 import styles from './TwoButtonTemplateStyles';
 
-const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
-  const { button1, button2 } = configuration;
-  const [isOn, setIsOn] = useState(true);
-  const [isStart, setIsStart] = useState(true);
-  const [configValues] = useConfigGlobalState('configValues');
-  const isLight = false;
+const TwoButtonTemplate = memo(
+  ({ actionGroup = {}, doAction, sensor = {} }) => {
+    const { configuration = {} } = actionGroup;
+    const { button1, button2 } = configuration;
+    const [isOn, setIsOn] = useState(true);
+    const [isStart, setIsStart] = useState(true);
+    const [configValues] = useConfigGlobalState('configValues');
+    const isLight = false;
 
-  const triggerAction1 = useCallback(async () => {
-    if (button1?.action_on_data && button1?.action_off_data) {
-      if (isOn) {
-        await doAction(button1?.action_off_data, null);
-      } else {
-        await doAction(button1?.action_on_data, null);
+    const triggerAction1 = useCallback(async () => {
+      if (button1?.action_on_data && button1?.action_off_data) {
+        if (isOn) {
+          await doAction(button1?.action_off_data, null);
+        } else {
+          await doAction(button1?.action_on_data, null);
+        }
       }
-    }
-    if (sensor?.is_managed_by_backend) {
-      configuration.config &&
-        sensor.device_type === DEVICE_TYPE.LG_THINQ &&
-        watchMultiConfigs([configuration.config]);
-    }
-  }, [
-    button1,
-    configuration.config,
-    doAction,
-    isOn,
-    sensor?.is_managed_by_backend,
-    sensor.device_type,
-  ]);
+      if (sensor?.is_managed_by_backend) {
+        configuration.config &&
+          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
+          watchMultiConfigs([configuration.config]);
+      }
+    }, [
+      button1,
+      configuration.config,
+      doAction,
+      isOn,
+      sensor?.is_managed_by_backend,
+      sensor.device_type,
+    ]);
 
-  const triggerAction2 = useCallback(async () => {
-    if (button2?.action_on_data && button2?.action_off_data) {
-      if (isStart) {
-        await doAction(button2?.action_off_data, null);
-      } else {
-        await doAction(button2?.action_on_data, null);
+    const triggerAction2 = useCallback(async () => {
+      if (button2?.action_on_data && button2?.action_off_data) {
+        if (isStart) {
+          await doAction(button2?.action_off_data, null);
+        } else {
+          await doAction(button2?.action_on_data, null);
+        }
+      }
+      if (
+        sensor?.is_managed_by_backend &&
+        sensor.device_type === DEVICE_TYPE.LG_THINQ
+      ) {
+        configuration.config && watchMultiConfigs([configuration.config]);
       }
-    }
-    if (
-      sensor?.is_managed_by_backend &&
-      sensor.device_type === DEVICE_TYPE.LG_THINQ
-    ) {
-      configuration.config && watchMultiConfigs([configuration.config]);
-    }
-  }, [
-    button2?.action_off_data,
-    button2?.action_on_data,
-    configuration.config,
-    doAction,
-    isStart,
-    sensor?.is_managed_by_backend,
-    sensor.device_type,
-  ]);
+    }, [
+      button2?.action_off_data,
+      button2?.action_on_data,
+      configuration.config,
+      doAction,
+      isStart,
+      sensor?.is_managed_by_backend,
+      sensor.device_type,
+    ]);
+
+    useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
 
-  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+    useEffect(() => {
+      const configValue1 = configValues[button1?.config];
+      const configValue2 = configValues[button2?.config];
+      if (button1?.is_on_value && button1?.is_on_value.length > 0) {
+        setIsOn(button1?.is_on_value.includes(configValue1?.value));
+        return;
+      }
+      if (button2?.is_on_value && button2?.is_on_value.length > 0) {
+        setIsStart(button2?.is_on_value.includes(configValue2?.value));
+        return;
+      }
 
-  useEffect(() => {
-    const configValue1 = configValues[button1?.config];
-    const configValue2 = configValues[button2?.config];
-    if (button1?.is_on_value && button1?.is_on_value.length > 0) {
-      setIsOn(button1?.is_on_value.includes(configValue1?.value));
-      return;
-    }
-    if (button2?.is_on_value && button2?.is_on_value.length > 0) {
-      setIsStart(button2?.is_on_value.includes(configValue2?.value));
-      return;
-    }
+      setIsOn(configValue1?.value);
+      setIsStart(configValue2?.value);
+    }, [
+      configuration.config,
+      configValues,
+      configuration.is_on_value,
+      configuration,
+      button1?.config,
+      button1?.is_on_value,
+      button2?.config,
+      button2?.is_on_value,
+    ]);
 
-    setIsOn(configValue1?.value);
-    setIsStart(configValue2?.value);
-  }, [
-    configuration.config,
-    configValues,
-    configuration.is_on_value,
-    configuration,
-    button1?.config,
-    button1?.is_on_value,
-    button2?.config,
-    button2?.is_on_value,
-  ]);
+    const RenderTwoButtonAction = () => {
+      const buttons = [
+        {
+          icon_on: button1?.icon_on,
+          icon_off: button1?.icon_off,
+          text_on: button1?.text_on,
+          text_off: button1?.text_off,
+          onPress: triggerAction1,
+          isCheckOnOff: isOn,
+          accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_1,
+        },
+        {
+          icon_on: button2?.icon_on,
+          icon_off: button2?.icon_off,
+          text_on: button2?.text_on,
+          text_off: button2?.text_off,
+          onPress: triggerAction2,
+          isCheckOnOff: isStart,
+          accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_1,
+        },
+      ];
+      return (
+        <>
+          {buttons.map((item, index) => (
+            <TouchableOpacity
+              accessibilityLabel={item.accessibilityLabel}
+              style={styles.bigCircle}
+              onPress={item.onPress}
+            >
+              <View style={styles.smallCircle}>
+                <Icon
+                  name={item?.isCheckOnOff ? item?.icon_on : item?.icon_off}
+                  size={44}
+                  color={item?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}
+                />
+                <Text
+                  style={[
+                    styles.textBig,
+                    { color: item?.isCheckOnOff ? Colors.Gray8 : Colors.Gray6 },
+                  ]}
+                >
+                  {item?.isCheckOnOff ? item?.text_on : item?.text_off}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          ))}
+        </>
+      );
+    };
 
-  const RenderTwoButtonAction = () => {
-    const buttons = [
-      {
-        icon_on: button1?.icon_on,
-        icon_off: button1?.icon_off,
-        text_on: button1?.text_on,
-        text_off: button1?.text_off,
-        onPress: triggerAction1,
-        isCheckOnOff: isOn,
-        testID: TESTID.BUTTON_TEMPLATE_1,
-      },
-      {
-        icon_on: button2?.icon_on,
-        icon_off: button2?.icon_off,
-        text_on: button2?.text_on,
-        text_off: button2?.text_off,
-        onPress: triggerAction2,
-        isCheckOnOff: isStart,
-        testID: TESTID.BUTTON_TEMPLATE_1,
-      },
-    ];
     return (
       <>
-        {buttons.map((item, index) => (
-          <TouchableOpacity
-            testID={item.testID}
-            style={styles.bigCircle}
-            onPress={item.onPress}
-          >
-            <View style={styles.smallCircle}>
-              <Icon
-                name={item?.isCheckOnOff ? item?.icon_on : item?.icon_off}
-                size={44}
-                color={item?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}
-              />
-              <Text
-                style={[
-                  styles.textBig,
-                  { color: item?.isCheckOnOff ? Colors.Gray8 : Colors.Gray6 },
-                ]}
-              >
-                {item?.isCheckOnOff ? item?.text_on : item?.text_off}
-              </Text>
-            </View>
-          </TouchableOpacity>
-        ))}
+        <View style={styles.wrap}>
+          <RenderTwoButtonAction />
+        </View>
+        {!!actionGroup.title && !isLight && (
+          <Text size={20} semibold center>
+            {actionGroup.title}
+          </Text>
+        )}
       </>
     );
-  };
-
-  return (
-    <>
-      <View style={styles.wrap}>
-        <RenderTwoButtonAction />
-      </View>
-      {!!actionGroup.title && !isLight && (
-        <Text size={20} semibold center>
-          {actionGroup.title}
-        </Text>
-      )}
-    </>
-  );
-});
+  }
+);
 
 export default TwoButtonTemplate;

package/src/commons/ActionGroup/__test__/NumberUpDownTemplate.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { ActivityIndicator, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import Text from '../../../commons/Text';
-import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
 
@@ -188,7 +188,7 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = wrapper.root;
     const touchs = instance.find(
       (el) =>
-        el.props.testID === TESTID.NUMBER_ACTION_DOWN &&
+        el.props.accessibilityLabel === AccessibilityLabel.NUMBER_ACTION_DOWN &&
         el.type === TouchableOpacity
     );
     await act(async () => {
@@ -215,14 +215,14 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = wrapper.root;
     const touchs = instance.find(
       (el) =>
-        el.props.testID === TESTID.NUMBER_ACTION_UP &&
+        el.props.accessibilityLabel === AccessibilityLabel.NUMBER_ACTION_UP &&
         el.type === TouchableOpacity
     );
     await act(async () => {
       await touchs.props.onPress();
     });
     const text = instance.find(
-      (el) => el.props.testID === 'abcd' && el.type === Text
+      (el) => el.props.accessibilityLabel === 'abcd' && el.type === Text
     );
     expect(text.props.children).toEqual('29 *C');
   });
@@ -241,7 +241,7 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = wrapper.root;
     const touchs = instance.find(
       (el) =>
-        el.props.testID === TESTID.NUMBER_ACTION_DOWN &&
+        el.props.accessibilityLabel === AccessibilityLabel.NUMBER_ACTION_DOWN &&
         el.type === TouchableOpacity
     );
 
@@ -267,7 +267,7 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = wrapper.root;
     const touchs = instance.find(
       (el) =>
-        el.props.testID === TESTID.NUMBER_ACTION_UP &&
+        el.props.accessibilityLabel === AccessibilityLabel.NUMBER_ACTION_UP &&
         el.type === TouchableOpacity
     );
 
@@ -381,7 +381,7 @@ describe('Test NumberUpDownActionTemplate', () => {
     const instance = wrapper.root;
     const touchs = instance.find(
       (el) =>
-        el.props.testID === TESTID.NUMBER_ACTION_UP &&
+        el.props.accessibilityLabel === AccessibilityLabel.NUMBER_ACTION_UP &&
         el.type === TouchableOpacity
     );
 

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

@@ -1,4 +1,4 @@
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import React from 'react';
 import { act, create } from 'react-test-renderer';
@@ -82,7 +82,7 @@ describe('Test OnOffTemplate', () => {
     });
     const instance = wrapper.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_ON_OFF
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.BUTTON_ON_OFF
     );
     await act(async () => {
       await button.props.onPress();
@@ -102,7 +102,7 @@ describe('Test OnOffTemplate', () => {
     });
     const instance = wrapper.root;
     const button = instance.find(
-      (el) => el.props.testID === TESTID.BUTTON_ON_OFF
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.BUTTON_ON_OFF
     );
     await act(async () => {
       await button.props.onPress();

package/src/commons/ActionGroup/__test__/OnOffTemplate.test.js

@@ -1,5 +1,5 @@
 /* eslint-disable promise/prefer-await-to-callbacks */
-import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import React from 'react';
 import { View } from 'react-native';
@@ -131,8 +131,8 @@ describe('Test OnOffTemplate', () => {
 
     const templateOnOffButton = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.ON_OFF_BUTTON_ACTION_TEMPLATE &&
-        el.type === View
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_BUTTON_ACTION_TEMPLATE && el.type === View
     );
     const templateOnOffSimple = instance.findAllByType(OnOffSimpleTemplate);
 

package/src/commons/ActionGroup/__test__/OptionsDropdownTemplate.test.js

@@ -5,7 +5,7 @@ import { act, create } from 'react-test-renderer';
 import Text from '../../../commons/Text';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { AlertAction, RadioCircle } from '../../../commons';
-import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -129,7 +129,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     const listChoosingOption = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
         el.type === TouchableOpacity
     );
     expect(listChoosingOption).toHaveLength(2); // 2 option
@@ -197,7 +198,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     const listChoosingOption = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
         el.type === TouchableOpacity
     );
     expect(listChoosingOption).toHaveLength(2);
@@ -244,7 +246,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
     const instance = wrapper.root;
     const textDisplaySelected = instance.find(
       (el) =>
-        el.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_DISPLAY_SELECTED &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_DISPLAY_SELECTED &&
         el.type === Text
     );
     expect(textDisplaySelected.props.children).toEqual(
@@ -273,7 +276,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     const listChoosingOption = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
         el.type === TouchableOpacity
     );
     expect(listChoosingOption).toHaveLength(2);

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

@@ -7,7 +7,7 @@ import moment from 'moment';
 import ActionGroup from '..';
 import Text from '../../Text';
 import { Colors } from '../../../configs';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
@@ -172,9 +172,10 @@ describe('Test ActionGroup', () => {
     const buttons = instance.findAllByType(TouchableOpacity);
     const switchOnOff = instance.findAllByType(Switch);
     const TextDoorLock = instance.find(
-      (el) => el.props.testID === TESTID.TEXT_DOOR_LOOK_ON_OFF
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TEXT_DOOR_LOOK_ON_OFF
     );
-    expect(TextDoorLock.props.children).toEqual(['Door lock', ' ']);
+    expect(TextDoorLock.props.children).toEqual('Door lock ');
     expect(switchOnOff.length).toEqual(1);
     expect(buttons.length).toEqual(3);
     act(() => {
@@ -243,9 +244,10 @@ describe('Test ActionGroup', () => {
     const buttons = instance.findAllByType(TouchableOpacity);
     const switchOnOff = instance.findAllByType(Switch);
     const TextDoorLock = instance.find(
-      (el) => el.props.testID === TESTID.TEXT_DOOR_LOOK_ON_OFF
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TEXT_DOOR_LOOK_ON_OFF
     );
-    expect(TextDoorLock.props.children).toEqual(['Door lock', ' ']);
+    expect(TextDoorLock.props.children).toEqual('Door lock ');
     expect(switchOnOff.length).toEqual(1);
     expect(buttons.length).toEqual(3);
     act(() => {

package/src/commons/ActionGroup/index.js

@@ -1,6 +1,5 @@
+import React, { memo, useCallback, useMemo } from 'react';
 import Text from '../Text';
-import React, { memo, useMemo } from 'react';
-
 import OneBigButtonTemplate from './OneBigButtonTemplate';
 import ThreeButtonTemplate from './ThreeButtonTemplate';
 import StatesGridActionTemplate from './StatesGridActionTemplate';
@@ -14,6 +13,9 @@ import ColorPickerTemplate from './ColorPickerTemplate';
 import SliderRangeTemplate from './SliderRangeTemplate';
 import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
 import TwoButtonTemplate from './TwoButtonTemplate';
+import { CardDevMode } from '../DevMode';
+import t from '../../hooks/Common/useTranslations';
+import { useSCContextSelector } from '../../context';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -52,23 +54,46 @@ export const getActionComponent = (template) => {
   }
 };
 
-const ActionGroup = memo((params) => {
-  const { actionGroup } = params;
+const isWrap = (template) => {
+  switch (template) {
+    case 'OnOffSmartLockActionTemplate':
+      return true;
+    default:
+      return false;
+  }
+};
+
+const ActionGroup = (params = {}) => {
+  const { actionGroup = {}, id } = params;
+  const { template } = actionGroup;
+  const { isEditingTemplate } = useSCContextSelector((state) => state.devMode);
+
+  const getTitle = useCallback(() => {
+    switch (template) {
+      case 'OnOffSmartLockActionTemplate':
+        return isEditingTemplate ? 'label' : 'controller';
+      default:
+        return 'label';
+    }
+  }, [template, isEditingTemplate]);
+
   const ButtonGroupComponent = useMemo(() => {
-    return getActionComponent(actionGroup.template);
-  }, [actionGroup]);
+    return getActionComponent(template);
+  }, [template]);
 
   return (
     <>
       {ButtonGroupComponent ? (
-        <ButtonGroupComponent {...params} />
+        <CardDevMode title={t(getTitle())} id={id} isWrap={isWrap(template)}>
+          <ButtonGroupComponent {...params} />
+        </CardDevMode>
       ) : (
         <Text
           center
-        >{`Invalid action template '${actionGroup.template}'`}</Text>
+        >{`Invalid action template '${actionGroup?.template}'`}</Text>
       )}
     </>
   );
-});
+};
 
-export default ActionGroup;
+export default memo(ActionGroup);

package/src/commons/ActionTemplate/OnOffButtonAction.js

@@ -1,9 +1,10 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import Text from '../Text';
 import styles from './OnOffButtonActionStyles';
 
-const OnOffButtonAction = ({ configuration, onPress, template }) => {
+const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
   const { text_on, text_off, action_on, action_off } = configuration;
   const onPressActionOn = useCallback(() => {
     onPress &&
@@ -26,13 +27,21 @@ const OnOffButtonAction = ({ configuration, onPress, template }) => {
   return (
     <>
       <TouchableOpacity onPress={onPressActionOn}>
-        <Text type="H4" style={styles.textwithline}>
-          {text_on}
+        <Text
+          type="H4"
+          style={styles.textwithline}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {title} {text_on}
         </Text>
       </TouchableOpacity>
       <TouchableOpacity onPress={onPressActionOff}>
-        <Text type="H4" style={styles.textwithline}>
-          {text_off}
+        <Text
+          type="H4"
+          style={styles.textwithline}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {title} {text_off}
         </Text>
       </TouchableOpacity>
     </>

package/src/commons/ActionTemplate/__test__/OnOffButtonAction.test.js

@@ -5,10 +5,17 @@ import { TouchableOpacity } from 'react-native';
 import OnOffButtonAction from '../OnOffButtonAction';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import Text from '../../Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 
 const wrapComponent = (configuration, onPress) => (
   <SCProvider initState={mockSCStore({})}>
-    <OnOffButtonAction configuration={configuration} onPress={onPress} />
+    <OnOffButtonAction
+      configuration={configuration}
+      onPress={onPress}
+      title={'Cong tac 1'}
+      template={'on_off_button_action_template'}
+    />
   </SCProvider>
 );
 
@@ -16,7 +23,12 @@ describe('Test OnOffButtonAction', () => {
   let tree;
 
   test('test onPress', () => {
-    const configuration = {};
+    const configuration = {
+      text_on: 'On',
+      text_off: 'Off',
+      action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+      action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+    };
     const mockFuntion = jest.fn();
     act(() => {
       tree = renderer.create(wrapComponent(configuration, mockFuntion));
@@ -30,5 +42,14 @@ describe('Test OnOffButtonAction', () => {
       touchOpacity[1].props.onPress();
     });
     expect(mockFuntion).toHaveBeenCalled();
+
+    const textTitle = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
+    );
+    expect(textTitle).toHaveLength(2);
+    expect(textTitle[0].props.children).toEqual(['Cong tac 1', ' ', 'On']);
+    expect(textTitle[1].props.children).toEqual(['Cong tac 1', ' ', 'Off']);
   });
 });

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -93,12 +93,14 @@ describe('Test ActionTemplate', () => {
     act(() => {
       threeButtonAction.props.onPress({
         name: 'OPEN',
+        action_name: 'OPEN',
         action: '94ae262d-46e3-42ff-9d10-516831ecc830',
         template: 'three_button_action_template',
       });
     });
     expect(mockOnSelectAction).toBeCalledWith({
       action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+      action_name: 'OPEN',
       data: null,
       template: 'three_button_action_template',
     });

package/src/commons/ActionTemplate/index.js

@@ -25,6 +25,7 @@ const ActionTemplate = memo(({ data, onSelectAction }) => {
       setActionName(action?.name);
       onSelectAction &&
         onSelectAction({
+          action_name: action?.name,
           action: action?.action,
           data: null,
           template: action?.template,