@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/screens/AddNewAction/__test__/SelectDevice.test.js

@@ -0,0 +1,191 @@
+import React, { useState } from 'react';
+import renderer, { act } from 'react-test-renderer';
+import axios from 'axios';
+
+import SelectDevice from '../SelectDevice';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import Device from '../Device';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import NavBar from '../../../commons/NavBar';
+import API from '../../../configs/API';
+
+jest.mock('axios');
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+  };
+});
+
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectDevice route={route} />
+  </SCProvider>
+);
+
+describe('Test SelectDevice', () => {
+  let tree;
+  const route = {
+    params: {
+      unit: { id: 1, name: 'Unit test' },
+      automateId: 1,
+      scriptName: 'scriptName test',
+    },
+  };
+
+  beforeEach(() => {
+    axios.get.mockClear();
+  });
+
+  test('fetch Device success', async () => {
+    const response = {
+      status: 200,
+      success: true,
+      data: [
+        {
+          id: 1,
+          name: 'Device 1',
+          sensors: [
+            { id: 1, name: 'sensor' },
+            { id: 2, name: 'sensor' },
+          ],
+        },
+      ],
+    };
+    axios.get.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+
+    expect(axios.get).toHaveBeenCalledWith(API.UNIT.DEVICE_CONTROL(1), {});
+    expect(mockSetState).toHaveBeenCalledTimes(3);
+  });
+
+  test('onPress continue', async () => {
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const bottomButton = instance.findByType(BottomButtonView);
+    act(() => {
+      bottomButton.props.onPressMain();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
+
+  test('test onPressDevice', async () => {
+    const data = [
+      {
+        id: 1,
+        name: 'Device 1',
+        sensors: [
+          { id: 1, name: 'sensor' },
+          { id: 2, name: 'sensor' },
+        ],
+      },
+    ];
+    const mockSetSelectedDevice = jest.fn();
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [data, mockSetState]);
+    useState.mockImplementationOnce((init) => [false, mockSetSelectedDevice]);
+
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const device = instance.findAllByType(Device);
+    expect(device).toHaveLength(2);
+
+    act(() => {
+      device[0].props.onPress({ id: 1, name: 'sensor' });
+    });
+    expect(mockSetSelectedDevice).toHaveBeenCalledWith({
+      id: 1,
+      name: 'sensor',
+    });
+  });
+
+  test('test onPressDevice false', async () => {
+    const data = [
+      {
+        id: 1,
+        name: 'Device 1',
+        sensors: [
+          { id: 1, name: 'sensor' },
+          { id: 2, name: 'sensor' },
+        ],
+      },
+    ];
+    const mockSetSelectedDevice = jest.fn();
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [data, mockSetState]);
+    useState.mockImplementationOnce((init) => [
+      { id: 1, name: 'sensor' },
+      mockSetSelectedDevice,
+    ]);
+
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const device = instance.findAllByType(Device);
+    expect(device).toHaveLength(2);
+
+    act(() => {
+      device[0].props.onPress({ id: 1, name: 'sensor' });
+    });
+    expect(mockSetSelectedDevice).toHaveBeenCalledWith(false);
+  });
+
+  test('test onSnapItem', async () => {
+    const data = [
+      {
+        id: 1,
+        name: 'Device 1',
+        sensors: [
+          { id: 1, name: 'sensor' },
+          { id: 2, name: 'sensor' },
+        ],
+      },
+    ];
+    const mockSetIndexStation = jest.fn();
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetState]);
+    useState.mockImplementationOnce((init) => [init, mockSetIndexStation]);
+    useState.mockImplementationOnce((init) => [data, mockSetState]);
+
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const navBar = instance.findByType(NavBar);
+
+    act(() => {
+      navBar.props.onSnapToItem({ id: 1, name: 'sensor' }, 0);
+    });
+
+    expect(mockSetIndexStation).toBeCalledWith(0);
+  });
+});

package/src/screens/AddNewAutoSmart/__test__/AddNewAutoSmart.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import AddNewAutoSmart from '..';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { TESTID } from '../../../configs/Constants';
+import ItemAutomate from '../../../commons/Automate/ItemAutomate';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewAutoSmart route={route} />
+  </SCProvider>
+);
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: () => 'vi',
+  };
+});
+
+describe('test AddNewAutoSmart', () => {
+  test('render AddNewAutoSmart', async () => {
+    let tree;
+    let route = {
+      params: { type: 'value_change' },
+    };
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const addNewAutoSmart = instance.findAllByType(ItemAutomate);
+    expect(addNewAutoSmart).toHaveLength(2);
+  });
+  test('render BottomButtonView', async () => {
+    let tree;
+    let route = {
+      params: { type: 'change_value' },
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const bottomButton = instance.find(
+      (item) =>
+        item.props.testID ===
+        `${TESTID.PREFIX.BUTTON_ADD_AUTO_SMART}${TESTID.BOTTOM_VIEW_MAIN}`
+    );
+    expect(bottomButton).toBeTruthy();
+    await act(async () => {
+      await bottomButton.props.onPress();
+    });
+  });
+});

package/src/screens/AddNewAutoSmart/index.js

@@ -0,0 +1,85 @@
+import React, { memo, useState } from 'react';
+import { Alert, View } from 'react-native';
+import { HeaderCustom } from '../../commons/Header';
+import styles from './styles/AddNewAutoSmartStyles';
+import Text from '../../commons/Text';
+import BottomButtonView from '../../commons/BottomButtonView';
+import ItemAutomate from '../../commons/Automate/ItemAutomate';
+import { AUTOMATE_TYPE, TESTID } from '../../configs/Constants';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const AddNewAutoSmart = memo(({ route }) => {
+  const t = useTranslations();
+  const { type } = route.params;
+  const typeAutoSmart = {
+    automate: [
+      {
+        type: AUTOMATE_TYPE.ONE_TAP,
+      },
+      {
+        type: AUTOMATE_TYPE.VALUE_CHANGE,
+      },
+      {
+        type: AUTOMATE_TYPE.SCHEDULE,
+      },
+    ],
+    value_change: [
+      {
+        type: AUTOMATE_TYPE.VALUE_CHANGE,
+      },
+      {
+        type: AUTOMATE_TYPE.SCHEDULE,
+      },
+    ],
+  };
+
+  // eslint-disable-next-line no-alert
+  const onPress = () => {
+    Alert.alert(t('feature_under_development'));
+  };
+
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [data] = useState(typeAutoSmart[type]);
+
+  const handleSelectIndex = (index) => {
+    if (index !== selectedIndex) {
+      setSelectedIndex(index);
+    } else {
+      setSelectedIndex(-1);
+    }
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose />
+      <View style={styles.container}>
+        <Text semibold type={'H2'} style={styles.titleCreate}>
+          {t('create_smart')}
+        </Text>
+        <Text type={'Body'} style={styles.titleChoose}>
+          {t('choose_the_automation_method_you_want')}
+        </Text>
+        <View>
+          {!!data &&
+            data.map((item, index) => (
+              <ItemAutomate
+                type={item.type}
+                isSelected={selectedIndex === index}
+                onPress={() => handleSelectIndex(index)}
+              />
+            ))}
+        </View>
+      </View>
+      <BottomButtonView
+        testIDPrefix={TESTID.PREFIX.BUTTON_ADD_AUTO_SMART}
+        onPressMain={onPress}
+        style={styles.bottomButton}
+        mainTitle={t('continue')}
+        typeMain={selectedIndex === -1 ? 'disabled' : 'primary'}
+      />
+    </View>
+  );
+});
+
+export default AddNewAutoSmart;

package/src/screens/AddNewAutoSmart/styles/AddNewAutoSmartStyles.js

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  titleCreate: {
+    fontStyle: 'normal',
+    fontWeight: '600',
+    color: Colors.Gray9,
+  },
+  titleChoose: {
+    fontStyle: 'normal',
+    fontWeight: '400',
+    color: Colors.Gray8,
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: getBottomSpace() + 10,
+  },
+  bottomButton: {
+    borderWidth: 0,
+    borderColor: Colors.Gray4,
+    paddingTop: 24,
+    paddingBottom: 24,
+    borderTopWidth: 1,
+    borderStyle: 'solid',
+    position: 'absolute',
+    bottom: 0,
+  },
+});

package/src/screens/AddNewDevice/ConnectDevices.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -14,6 +14,7 @@ import { useStateAlertRename } from './hooks/useStateAlertRename';
 import { TESTID } from '../../configs/Constants';
 
 const ConnectDevices = memo(({ route }) => {
+  const t = useTranslations();
   const { new_sensor, station_id, unit_id, unit_name } = route.params;
   const {
     onPressDone,

package/src/screens/AddNewDevice/ConnectingDevices.js

@@ -3,11 +3,12 @@ import { View, StyleSheet } from 'react-native';
 import { API, Colors } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 import Text from '../../commons/Text';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 
 const ConnectingDevices = memo(({ route }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
   const { new_sensor } = route.params;
 

package/src/screens/AddNewDevice/__test__/AddNewDevice.test.js

@@ -2,13 +2,21 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import AddNewDevice from '../index';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
 import { TESTID } from '../../../configs/Constants';
 import API from '../../../configs/API';
 import { ViewButtonBottom } from '../../../commons';
 import Routes from '../../../utils/Route';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewDevice route={route} />
+  </SCProvider>
+);
 
 jest.mock('axios');
 
@@ -52,13 +60,17 @@ describe('Test AddNewDevice', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textAdd = getText(instance, TESTID.ADD_NEW_DEVICE_ADD);
     const textThen = getText(instance, TESTID.ADD_NEW_DEVICE_THEN_SELECT);
-    expect(textAdd.props.children).toEqual(t('add_new_device'));
-    expect(textThen.props.children).toEqual(t('then_select_a_sub_unit_to_add'));
+    expect(textAdd.props.children).toEqual(
+      getTranslate('en', 'add_new_device')
+    );
+    expect(textThen.props.children).toEqual(
+      getTranslate('en', 'then_select_a_sub_unit_to_add')
+    );
 
     const groupCheckBox = instance.findAllByType(GroupCheckBox);
     expect(groupCheckBox).toHaveLength(1);
@@ -79,7 +91,7 @@ describe('Test AddNewDevice', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
@@ -99,7 +111,7 @@ describe('Test AddNewDevice', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
@@ -110,18 +122,22 @@ describe('Test AddNewDevice', () => {
 
   test('ViewButtonBottom', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
 
-    expect(viewButtonBottom.props.leftTitle).toEqual(t('text_back'));
-    expect(viewButtonBottom.props.rightTitle).toEqual(t('text_next'));
+    expect(viewButtonBottom.props.leftTitle).toEqual(
+      getTranslate('en', 'text_back')
+    );
+    expect(viewButtonBottom.props.rightTitle).toEqual(
+      getTranslate('en', 'text_next')
+    );
   });
 
   test('ViewButtonBottom onLeftClick', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -133,14 +149,14 @@ describe('Test AddNewDevice', () => {
 
   test('ViewButtonBottom onRightClick without select stationId', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).not.toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalled();
   });
 
   test('ViewButtonBottom onRightClick with stationId', async () => {
@@ -157,7 +173,7 @@ describe('Test AddNewDevice', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 

package/src/screens/AddNewDevice/__test__/ConnectDevices.test.js

@@ -2,12 +2,14 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import ConnectDevices from '../ConnectDevices';
 import { TESTID } from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 import _TextInput from '../../../commons/Form/TextInput';
 import { AlertAction } from '../../../commons';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
 
 jest.mock('axios');
 
@@ -21,6 +23,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectDevices route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectDevices', () => {
   let tree;
   let route;
@@ -50,7 +58,7 @@ describe('Test ConnectDevices', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<ConnectDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -66,16 +74,20 @@ describe('Test ConnectDevices', () => {
     );
     const textDone = getText(instance, TESTID.CONNECTED_DEVICE_DONE);
 
-    expect(textSuccess.props.children).toEqual(t('successfully_connected'));
+    expect(textSuccess.props.children).toEqual(
+      getTranslate('en', 'successfully_connected')
+    );
     expect(textUnitName.props.children).toEqual('Unit name');
     expect(textDeviceName.props.children).toEqual('Sensor name');
-    expect(textRenameDevice.props.children).toEqual(t('rename_your_device'));
-    expect(textDone.props.children).toEqual(t('done'));
+    expect(textRenameDevice.props.children).toEqual(
+      getTranslate('en', 'rename_your_device')
+    );
+    expect(textDone.props.children).toEqual(getTranslate('en', 'done'));
   });
 
   test('hide show alert action', async () => {
     await act(async () => {
-      tree = await create(<ConnectDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const button = instance.find(
@@ -97,7 +109,7 @@ describe('Test ConnectDevices', () => {
 
   test('change and rename', async () => {
     await act(async () => {
-      tree = await create(<ConnectDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textDeviceName = getText(

package/src/screens/AddNewDevice/__test__/ConnectingDevices.test.js

@@ -5,8 +5,10 @@ import axios from 'axios';
 import { API } from '../../../configs';
 import ConnectingDevices from '../ConnectingDevices';
 import Text from '../../../commons/Text';
-import { t } from 'i18n-js';
 import Routes from '../../../utils/Route';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
 
 jest.mock('axios');
 
@@ -20,6 +22,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingDevices route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectingDevices', () => {
   let tree;
   let route;
@@ -41,14 +49,16 @@ describe('Test ConnectingDevices', () => {
 
   test('create', () => {
     act(() => {
-      tree = create(<ConnectingDevices route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts).toHaveLength(2);
-    expect(texts[0].props.children).toEqual(t('connecting_your_device'));
+    expect(texts[0].props.children).toEqual(
+      getTranslate('en', 'connecting_your_device')
+    );
     expect(texts[1].props.children).toEqual(
-      t('dont_turn_off_the_device_or_close_this_app')
+      getTranslate('en', 'dont_turn_off_the_device_or_close_this_app')
     );
   });
 
@@ -63,7 +73,7 @@ describe('Test ConnectingDevices', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();
@@ -86,7 +96,7 @@ describe('Test ConnectingDevices', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();

package/src/screens/AddNewDevice/hooks/useStateAlertRename.js

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

package/src/screens/AddNewDevice/index.js

@@ -7,7 +7,7 @@ import {
   Platform,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
 import { Section, ViewButtonBottom } from '../../commons'; //components/Common
@@ -18,6 +18,7 @@ import Routes from '../../utils/Route';
 import { TESTID } from '../../configs/Constants';
 
 const AddNewDevice = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id } = route.params;
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });