@eohjsc/react-native-smart-city 0.4.40 → 0.4.41

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

@@ -10,152 +10,150 @@ 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(({ item = {}, doAction, sensor = {} }) => {
+  const { configuration = {} } = item;
+  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);
-        }
-      }
-      if (
-        sensor?.is_managed_by_backend &&
-        sensor.device_type === DEVICE_TYPE.LG_THINQ
-      ) {
-        configuration.config && watchMultiConfigs([configuration.config]);
+  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);
       }
-    }, [
-      button2?.action_off_data,
-      button2?.action_on_data,
-      configuration.config,
-      doAction,
-      isStart,
-      sensor?.is_managed_by_backend,
-      sensor.device_type,
-    ]);
-
-    useUnwatchLGDeviceConfigControl(sensor, [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,
+  ]);
 
-    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;
-      }
+  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
 
-      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,
-    ]);
+  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;
+    }
 
-    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}
-              key={index}
-            >
-              <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>
-          ))}
-        </>
-      );
-    };
+    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 (
       <>
-        <View style={styles.wrap}>
-          <RenderTwoButtonAction />
-        </View>
-        {!!actionGroup.title && !isLight && (
-          <Text size={20} semibold center>
-            {actionGroup.title}
-          </Text>
-        )}
+        {buttons.map((button, index) => (
+          <TouchableOpacity
+            accessibilityLabel={button.accessibilityLabel}
+            style={styles.bigCircle}
+            onPress={button.onPress}
+            key={index}
+          >
+            <View style={styles.smallCircle}>
+              <Icon
+                name={button?.isCheckOnOff ? button?.icon_on : button?.icon_off}
+                size={44}
+                color={button?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}
+              />
+              <Text
+                style={[
+                  styles.textBig,
+                  { color: button?.isCheckOnOff ? Colors.Gray8 : Colors.Gray6 },
+                ]}
+              >
+                {button?.isCheckOnOff ? button?.text_on : button?.text_off}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ))}
       </>
     );
-  }
-);
+  };
+
+  return (
+    <>
+      <View style={styles.wrap}>
+        <RenderTwoButtonAction />
+      </View>
+      {!!item.title && !isLight && (
+        <Text size={20} semibold center>
+          {item.title}
+        </Text>
+      )}
+    </>
+  );
+});
 
 export default TwoButtonTemplate;

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

@@ -25,21 +25,17 @@ jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: jest.fn(),
 }));
 
-const wrapComponent = (actionGroup, doAction, sensor) => (
+const wrapComponent = (item, doAction, sensor) => (
   <SCProvider initState={mockSCStore({})}>
-    <ColorPickerTemplate
-      actionGroup={actionGroup}
-      doAction={doAction}
-      sensor={sensor}
-    />
+    <ColorPickerTemplate item={item} doAction={doAction} sensor={sensor} />
   </SCProvider>
 );
 
 describe('Test ColorPickerTemplate', () => {
   let wrapper;
-  let actionGroup;
+  let displayItem;
 
-  const action_color_data = {
+  const actionColorData = {
     color: '#00979D',
     command_prefer_over_bluetooth: false,
     command_prefer_over_googlehome: false,
@@ -50,11 +46,11 @@ describe('Test ColorPickerTemplate', () => {
   beforeEach(() => {
     watchMultiConfigs.mockClear();
     mockDoAction.mockClear();
-    actionGroup = {
+    displayItem = {
       template: 'ColorPickerTemplate',
       configuration: {
         config: 5,
-        action_color_data: action_color_data,
+        action_color_data: actionColorData,
       },
       title: '',
     };
@@ -68,7 +64,7 @@ describe('Test ColorPickerTemplate', () => {
       name: 'Sensor',
     };
     await act(async () => {
-      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
     });
     const instance = wrapper.root;
     const pickers = instance.findAllByType(ColorPicker);
@@ -94,7 +90,7 @@ describe('Test ColorPickerTemplate', () => {
       device_type: DEVICE_TYPE.LG_THINQ,
     };
     await act(async () => {
-      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
     });
     const instance = wrapper.root;
     const pickers = instance.findAllByType(ColorPicker);
@@ -108,7 +104,7 @@ describe('Test ColorPickerTemplate', () => {
       device_type: DEVICE_TYPE.LG_THINQ,
     };
     await act(async () => {
-      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
     });
     const instance = wrapper.root;
     const wheelpicker = instance.findByType(WheelColorPicker);
@@ -118,4 +114,30 @@ describe('Test ColorPickerTemplate', () => {
     // NOTE: Hinh will fix it later
     expect(mockSetAction).not.toBeCalled();
   });
+
+  it('test WheelColorPicker onChangeColorComplete', async () => {
+    const sensor = {
+      is_managed_by_backend: true,
+      name: 'Sensor',
+      device_type: DEVICE_TYPE.LG_THINQ,
+    };
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const wheelpicker = instance.findByType(WheelColorPicker);
+    await act(async () => {
+      await wheelpicker.props.onStart();
+    });
+    // NOTE: Hinh will fix it later
+    expect(mockSetAction).toBeCalledTimes(0);
+    expect(mockDoAction).toBeCalledTimes(0);
+
+    await act(async () => {
+      await wheelpicker.props.onChangeColorComplete('#ffffff');
+    });
+    // NOTE: Hinh will fix it later
+    expect(mockSetAction).toBeCalledTimes(0);
+    expect(mockDoAction).toBeCalledTimes(1);
+  });
 });

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { ActivityIndicator, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import Text from '../../../commons/Text';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
+import styles from '../NumberUpDownActionTemplateStyle';
 
 jest.mock('../../../iot/Monitor');
 
@@ -20,7 +21,7 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('Test NumberUpDownTemplate', () => {
-  const action_data = {
+  const actionData = {
     color: '#00979D',
     command_prefer_over_bluetooth: true,
     command_prefer_over_googlehome: false,
@@ -31,16 +32,16 @@ describe('Test NumberUpDownTemplate', () => {
     key: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
   };
 
-  let actionGroup;
+  let displayItem;
   let wrapper;
 
   beforeEach(() => {
     watchMultiConfigs.mockClear();
-    actionGroup = {
+    displayItem = {
       configuration: {
         allow_config_store_value: false,
         config: 5,
-        action_data,
+        action_data: actionData,
         min_value: 16,
         max_value: 30,
         text_format: '{number} *C',
@@ -53,7 +54,7 @@ describe('Test NumberUpDownTemplate', () => {
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{
             is_managed_by_backend: true,
@@ -80,7 +81,7 @@ describe('Test NumberUpDownTemplate', () => {
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: false }}
         />
@@ -102,7 +103,7 @@ describe('Test NumberUpDownTemplate', () => {
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{
             is_managed_by_backend: true,
@@ -124,11 +125,11 @@ describe('Test NumberUpDownTemplate', () => {
 
   it('do action watchConfigs cause allow_config_store_value true', async () => {
     const mockDoAction = jest.fn();
-    actionGroup.configuration.allow_config_store_value = true;
+    displayItem.configuration.allow_config_store_value = true;
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{
             is_managed_by_backend: true,
@@ -149,13 +150,13 @@ describe('Test NumberUpDownTemplate', () => {
   });
 
   it('action down without config', async () => {
-    actionGroup.configuration.allow_config_store_value = true;
-    actionGroup.configuration.config = undefined;
+    displayItem.configuration.allow_config_store_value = true;
+    displayItem.configuration.config = undefined;
     const mockDoAction = jest.fn();
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: true }}
         />
@@ -174,12 +175,12 @@ describe('Test NumberUpDownTemplate', () => {
 
   it('action down allow_config_store_value true', async () => {
     const mockDoAction = jest.fn();
-    actionGroup.configuration.allow_config_store_value = true;
-    actionGroup.configuration.config = null;
+    displayItem.configuration.allow_config_store_value = true;
+    displayItem.configuration.config = null;
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: true }}
         />
@@ -201,12 +202,12 @@ describe('Test NumberUpDownTemplate', () => {
 
   it('action up allow_config_store_value true', async () => {
     const mockDoAction = jest.fn();
-    actionGroup.configuration.allow_config_store_value = true;
-    actionGroup.configuration.config = null;
+    displayItem.configuration.allow_config_store_value = true;
+    displayItem.configuration.config = null;
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: true }}
         />
@@ -222,7 +223,7 @@ describe('Test NumberUpDownTemplate', () => {
       await touchs.props.onPress();
     });
     const text = instance.find(
-      (el) => el.props.accessibilityLabel === 'abcd' && el.type === Text
+      (el) => el.props.accessibilityLabel === 'text_format' && el.type === Text
     );
     expect(text.props.children).toEqual('29 *C');
   });
@@ -232,7 +233,7 @@ describe('Test NumberUpDownTemplate', () => {
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: true }}
         />
@@ -258,7 +259,7 @@ describe('Test NumberUpDownTemplate', () => {
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: true }}
         />
@@ -280,12 +281,12 @@ describe('Test NumberUpDownTemplate', () => {
   });
 
   it('action down limit ', async () => {
-    actionGroup.configuration.min_value = 25;
+    displayItem.configuration.min_value = 25;
     const mockDoAction = jest.fn();
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: true }}
         />
@@ -304,12 +305,12 @@ describe('Test NumberUpDownTemplate', () => {
   });
 
   it('action up limit ', async () => {
-    actionGroup.configuration.max_value = 25;
+    displayItem.configuration.max_value = 25;
     const mockDoAction = jest.fn();
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{ is_managed_by_backend: true }}
         />
@@ -328,11 +329,11 @@ describe('Test NumberUpDownTemplate', () => {
   });
   it('render template have title', async () => {
     const mockDoAction = jest.fn();
-    actionGroup.title = 'title';
+    displayItem.title = 'title';
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{
             is_managed_by_backend: true,
@@ -347,11 +348,11 @@ describe('Test NumberUpDownTemplate', () => {
   });
   it('render template watch config not exits', async () => {
     const mockDoAction = jest.fn();
-    actionGroup.configuration.config = 100;
+    displayItem.configuration.config = 100;
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{
             is_managed_by_backend: true,
@@ -368,7 +369,7 @@ describe('Test NumberUpDownTemplate', () => {
     await act(async () => {
       wrapper = await create(
         <NumberUpDownActionTemplate
-          actionGroup={actionGroup}
+          item={displayItem}
           doAction={mockDoAction}
           sensor={{
             is_managed_by_backend: true,
@@ -402,4 +403,43 @@ describe('Test NumberUpDownTemplate', () => {
       26
     );
   });
+
+  it('render isWidgetOrder', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          item={displayItem}
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.LG_THINQ,
+          }}
+          isWidgetOrder
+        />
+      );
+    });
+    const rootElement = wrapper.root.findAllByType(View)[0];
+    expect(rootElement.props.style).toEqual(styles.wrapOrderItem);
+  });
+
+  it('render default value', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.LG_THINQ,
+          }}
+          isWidgetOrder
+        />
+      );
+    });
+    const rootElement = wrapper.root.findByProps({
+      accessibilityLabel: 'text_format',
+    });
+    expect(rootElement.props.children).toEqual('');
+  });
 });