@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

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

@@ -5,11 +5,21 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 
 import ActionGroup from '..';
-import RadioCircle from '../../RadioCircle';
-import IconComponent from '../../IconComponent';
 import Text from '../../Text';
 import { Colors } from '../../../configs';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup, mockDoAction, sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ActionGroup
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      sensor={sensor}
+    />
+  </SCProvider>
+);
 
 describe('Test ActionGroup', () => {
   const configuration_with_none_action_on_off = {
@@ -140,13 +150,11 @@ describe('Test ActionGroup', () => {
     };
   });
 
-  test('render ActionGroup three_button_action_template', () => {
+  test('render ActionGroup three_button_action_template', async () => {
     const actionGroup = actionGroupData;
     const mockDoAction = jest.fn();
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup actionGroup={actionGroup} doAction={mockDoAction} />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction));
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);
@@ -180,13 +188,11 @@ describe('Test ActionGroup', () => {
     );
   });
 
-  test('Three_button_action_template Action OnOff isDisplayLock True', () => {
+  test('Three_button_action_template Action OnOff isDisplayLock True', async () => {
     const actionGroup = actionGroupData;
     const mockDoAction = jest.fn();
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup actionGroup={actionGroup} doAction={mockDoAction} />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction));
     });
     const instance = wrapper.root;
     const switchOnOff = instance.findAllByType(Switch);
@@ -207,16 +213,14 @@ describe('Test ActionGroup', () => {
     );
   });
 
-  test('Three_button_action_template None Action OnOff isDisplayLock True', () => {
+  test('Three_button_action_template None Action OnOff isDisplayLock True', async () => {
     const actionGroup = {
       ...actionGroupData,
       configuration: configuration_with_none_action_on_off,
     };
     const mockDoAction = jest.fn();
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup actionGroup={actionGroup} doAction={mockDoAction} />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction));
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);
@@ -250,22 +254,20 @@ describe('Test ActionGroup', () => {
     );
   });
 
-  test('Three_button_action_template Action OnOff isDisplayLock False', () => {
+  test('Three_button_action_template Action OnOff isDisplayLock False', async () => {
     const actionGroup = {
       ...actionGroupData.configuration,
       is_display_lock: false,
     };
     const mockDoAction = jest.fn();
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup actionGroup={actionGroup} doAction={mockDoAction} />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction));
     });
     const instance = wrapper.root;
     const switchOnOff = instance.findAllByType(Switch);
     expect(switchOnOff.length).toEqual(0);
   });
-  test('render ActionGroup one_button_action_template', () => {
+  test('render ActionGroup one_button_action_template', async () => {
     const mockDoAction = jest.fn();
     const actionGroup = {
       template: 'one_button_action_template',
@@ -276,10 +278,8 @@ describe('Test ActionGroup', () => {
         text: 'UP',
       },
     };
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup actionGroup={actionGroup} doAction={mockDoAction} />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction));
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);
@@ -291,7 +291,7 @@ describe('Test ActionGroup', () => {
     expect(mockDoAction).toHaveBeenCalledWith(action_data);
   });
 
-  test('render ActionGroup on_off_button_action_template', () => {
+  test('render ActionGroup on_off_button_action_template', async () => {
     const mockDoAction = jest.fn();
     const actionGroup = {
       template: 'on_off_button_action_template',
@@ -304,14 +304,8 @@ describe('Test ActionGroup', () => {
         text_off: 'OFF',
       },
     };
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction, {}));
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);
@@ -322,7 +316,7 @@ describe('Test ActionGroup', () => {
     expect(mockDoAction).toHaveBeenCalledTimes(1);
   });
 
-  test('render ActionGroup NumberUpDownActionTemplate', () => {
+  test('render ActionGroup NumberUpDownActionTemplate', async () => {
     const mockDoAction = jest.fn();
     const actionGroup = {
       template: 'NumberUpDownActionTemplate',
@@ -334,14 +328,8 @@ describe('Test ActionGroup', () => {
         text_format: '{number} *C',
       },
     };
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction, {}));
     });
     const instance = wrapper.root;
     const text = instance.findByType(Text);
@@ -351,7 +339,7 @@ describe('Test ActionGroup', () => {
     expect(touchs).toHaveLength(2);
   });
 
-  test('render ActionGroup StatesGridActionTemplate', () => {
+  test('render ActionGroup StatesGridActionTemplate', async () => {
     const mockDoAction = jest.fn();
     const actionGroup = {
       template: 'StatesGridActionTemplate',
@@ -377,14 +365,8 @@ describe('Test ActionGroup', () => {
         ],
       },
     };
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction, {}));
     });
     const instance = wrapper.root;
     const texts = instance.findAllByType(Text);
@@ -418,50 +400,6 @@ describe('Test ActionGroup', () => {
     expect(touchs[1].props.style).toEqual([buttonStyle, OnOffStyle.OFF]);
   });
 
-  test('render ActionGroup OptionsDropdownActionTemplate', () => {
-    const mockDoAction = jest.fn();
-    const actionGroup = {
-      template: 'OptionsDropdownActionTemplate',
-      configuration: {
-        action_data,
-        config: 5,
-        action: 'e5d23347-ee31-4fe3-9fb5-bbce05bf4b61',
-        options: [
-          {
-            text: 'Level1',
-            value: 1,
-          },
-          {
-            text: 'Level2',
-            value: 2,
-          },
-        ],
-        icon: 'slack',
-      },
-    };
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
-    });
-    const instance = wrapper.root;
-
-    const icon = instance.findByType(IconComponent);
-    expect(icon.props.icon).toEqual('slack');
-
-    const texts = instance.findAllByType(Text);
-    const radioCircles = instance.findAllByType(RadioCircle);
-    expect(texts[1].props.children).toEqual('Level1'); // selectedOption, get first one
-    expect(radioCircles[0].props.active).toBeTruthy(); // radioCircle tick
-
-    const touchs = instance.findAllByType(TouchableOpacity);
-    expect(touchs).toHaveLength(5); // show-hide alert + 2 options + onDone
-  });
-
   test('render TimerActionTemplate', async () => {
     Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
     const actionGroup = {
@@ -474,19 +412,13 @@ describe('Test ActionGroup', () => {
       },
     };
     const mockDoAction = jest.fn();
-    act(() => {
-      wrapper = renderer.create(
-        <ActionGroup
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup, mockDoAction, {}));
     });
     const instance = wrapper.root;
 
     const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(2);
+    expect(texts).toHaveLength(5);
     expect(texts[0].props.children).toEqual('Timer');
 
     const switchButton = instance.findByType(Switch);

package/src/commons/ActionGroup/hooks/useDropdownAction.js

@@ -1,7 +1,8 @@
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useCallback, useState } from 'react';
 
 export const useDropdownAction = () => {
+  const t = useTranslations();
   const [stateAlert, setStateAlert] = useState({
     visible: false,
     title: 'Fan Speed',

package/src/commons/ActionTemplate/ActionTemplateStyles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+  },
+  modalHeader: {
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+});

package/src/commons/ActionTemplate/OnOffButtonAction.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import styles from './OnOffButtonActionStyles';
+
+const OnOffButtonAction = ({ configuration, onPress }) => {
+  const { text_on, text_off, action_on, action_off } = configuration;
+  const onPressActionOn = () => {
+    onPress &&
+      onPress({
+        name: text_on,
+        action: action_on,
+      });
+  };
+
+  const onPressActionOff = () => {
+    onPress &&
+      onPress({
+        name: text_off,
+        action: action_off,
+      });
+  };
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressActionOn}>
+        <Text type="H4" style={styles.textwithline}>
+          {text_on}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPressActionOff}>
+        <Text type="H4" style={styles.textwithline}>
+          {text_off}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default OnOffButtonAction;

package/src/commons/ActionTemplate/OnOffButtonActionStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  textwithline: {
+    paddingBottom: 16,
+    paddingTop: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionTemplate/OneButtonAction.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import styles from './OneButtonActionStyles';
+
+const OneButtonAction = ({ configuration, onPress }) => {
+  const { text, action } = configuration;
+  const onPressAction = () => {
+    onPress &&
+      onPress({
+        name: text,
+        action: action,
+      });
+  };
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressAction}>
+        <Text type="H4" style={styles.textwithline}>
+          {text}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+export default OneButtonAction;

package/src/commons/ActionTemplate/OneButtonActionStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  textwithline: {
+    paddingBottom: 16,
+    paddingTop: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionTemplate/ThreeButtonAction.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import styles from './ThreeButtonActionStyles';
+
+const ThreeButtonAction = ({ configuration, onPress }) => {
+  const { text1, text2, text3, action1, action2, action3 } = configuration;
+  const onPressAction1 = () => {
+    onPress &&
+      onPress({
+        name: text1,
+        action: action1,
+      });
+  };
+
+  const onPressAction2 = () => {
+    onPress &&
+      onPress({
+        name: text2,
+        action: action2,
+      });
+  };
+
+  const onPressAction3 = () => {
+    onPress &&
+      onPress({
+        name: text3,
+        action: action3,
+      });
+  };
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressAction1}>
+        <Text type="H4" style={styles.textwithline}>
+          {text1}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressAction2}>
+        <Text type="H4" style={styles.textwithline}>
+          {text2}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressAction3}>
+        <Text type="H4" style={styles.textwithline}>
+          {text3}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default ThreeButtonAction;

package/src/commons/ActionTemplate/ThreeButtonActionStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  textwithline: {
+    paddingBottom: 16,
+    paddingTop: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import OnOffButtonAction from '../OnOffButtonAction';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (configuration, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OnOffButtonAction configuration={configuration} onPress={onPress} />
+  </SCProvider>
+);
+
+describe('Test OnOffButtonAction', () => {
+  let tree;
+
+  test('test onPress', () => {
+    const configuration = {};
+    const mockFuntion = jest.fn();
+    act(() => {
+      tree = renderer.create(wrapComponent(configuration, mockFuntion));
+    });
+    const instance = tree.root;
+    const touchOpacity = instance.findAllByType(TouchableOpacity);
+
+    expect(touchOpacity).toHaveLength(2);
+    act(() => {
+      touchOpacity[0].props.onPress();
+      touchOpacity[1].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import OneButtonAction from '../OneButtonAction';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (configuration, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OneButtonAction configuration={configuration} onPress={onPress} />
+  </SCProvider>
+);
+
+describe('Test OneButtonAction', () => {
+  let tree;
+
+  test('test onPress', () => {
+    const configuration = {};
+    const mockFuntion = jest.fn();
+    act(() => {
+      tree = renderer.create(wrapComponent(configuration, mockFuntion));
+    });
+    const instance = tree.root;
+    const touchOpacity = instance.findAllByType(TouchableOpacity);
+
+    expect(touchOpacity).toHaveLength(1);
+    act(() => {
+      touchOpacity[0].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import ThreeButtonAction from '../ThreeButtonAction';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (configuration, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ThreeButtonAction configuration={configuration} onPress={onPress} />
+  </SCProvider>
+);
+
+describe('Test ThreeButtonAction', () => {
+  let tree;
+
+  test('test onPress', () => {
+    const configuration = {};
+    const mockFuntion = jest.fn();
+    act(() => {
+      tree = renderer.create(wrapComponent(configuration, mockFuntion));
+    });
+    const instance = tree.root;
+    const touchOpacity = instance.findAllByType(TouchableOpacity);
+
+    expect(touchOpacity).toHaveLength(3);
+    act(() => {
+      touchOpacity[0].props.onPress();
+      touchOpacity[1].props.onPress();
+      touchOpacity[2].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import ActionTemplate from '..';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SelectActionCard from '../../SelectActionCard';
+import Modal from 'react-native-modal';
+
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
+const wrapComponent = (data, onSelectAction, action) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ActionTemplate
+      data={data}
+      onSelectAction={onSelectAction}
+      action={action}
+    />
+  </SCProvider>
+);
+
+describe('Test ActionTemplate', () => {
+  let tree;
+  test('test state visible', () => {
+    const data = [
+      {
+        title: '',
+        template: 'three_button_action_template',
+        configuration: {
+          action1: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          action2: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          action3: '94ae262d-46e3-42ff-9d10-516831ecc830',
+          icon1: 'up',
+          icon2: 'stop',
+          icon3: 'down',
+          text1: 'OPEN',
+          text2: 'STOP',
+          text3: 'CLOSE',
+          text_lock: 'Door lock',
+          is_display_lock: true,
+        },
+      },
+    ];
+    const setState = jest.fn();
+    const mockFunction = jest.fn();
+    useState.mockImplementation((init) => [init, setState]);
+    act(() => {
+      tree = renderer.create(wrapComponent(data, mockFunction, mockFunction));
+    });
+    const instance = tree.root;
+
+    const selectActionCard = instance.findByType(SelectActionCard);
+    const modal = instance.findByType(Modal);
+    act(() => {
+      selectActionCard.props.onPress();
+    });
+    expect(setState).toHaveBeenCalledWith(true);
+
+    act(() => {
+      modal.props.onBackButtonPress();
+    });
+    expect(setState).toHaveBeenCalledWith(false);
+  });
+});