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

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

@@ -2,14 +2,20 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import AddNewGateway 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 { TextInput } from 'react-native';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewGateway route={route} />
+  </SCProvider>
+);
 
 jest.mock('axios');
 
@@ -53,22 +59,25 @@ describe('Test AddNewGateway', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textAdd = getText(instance, TESTID.ADD_NEW_GATEWAY_ADD);
     const textThen = getText(instance, TESTID.ADD_NEW_GATEWAY_THEN_SELECT);
-    expect(textAdd.props.children).toEqual(t('add_new_gateway'));
-    expect(textThen.props.children).toEqual(t('then_select_a_sub_unit_to_add'));
+    expect(textAdd.props.children).toEqual(
+      getTranslate('en', 'add_new_gateway')
+    );
+    expect(textThen.props.children).toEqual(
+      getTranslate('en', 'please_add_your_phone_number_and_chip_name')
+    );
 
     const groupCheckBox = instance.findAllByType(GroupCheckBox);
-    expect(groupCheckBox).toHaveLength(1);
-    expect(groupCheckBox[0].props.data).toEqual([]);
+    expect(groupCheckBox).toHaveLength(0);
   });
 
   test('onChange chipName and phoneNumber', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TextInput);
@@ -76,8 +85,12 @@ describe('Test AddNewGateway', () => {
     expect(textInputs[0].props.value).toEqual('');
     expect(textInputs[1].props.value).toEqual('');
 
-    expect(textInputs[0].props.placeholder).toEqual(t('phone_number'));
-    expect(textInputs[1].props.placeholder).toEqual(t('chip_name'));
+    expect(textInputs[0].props.placeholder).toEqual(
+      getTranslate('en', 'phone_number_of_data_sim')
+    );
+    expect(textInputs[1].props.placeholder).toEqual(
+      getTranslate('en', 'gateway_name')
+    );
 
     await act(async () => {
       await textInputs[0].props.onChangeText('New phone number');
@@ -88,63 +101,24 @@ describe('Test AddNewGateway', () => {
     expect(textInputs[1].props.value).toEqual('New chip name');
   });
 
-  test('fetchDetails success', async () => {
-    const response = {
-      status: 200,
-      data: {
-        id: 1,
-        name: 'Unit name',
-        stations: [{ id: 2, name: 'Station name' }],
-      },
-    };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
-
-    await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
-    });
-    const instance = tree.root;
-    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
-
-    const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([
-      { id: 2, name: 'Station name', title: 'Station name' },
-    ]);
-  });
-
-  test('fetchDetails fail', async () => {
-    const response = {
-      data: {},
-    };
-    axios.get.mockImplementation(async () => {
-      return response;
-    });
-
-    await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
-    });
-    const instance = tree.root;
-    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
-
-    const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([]);
-  });
-
   test('ViewButtonBottom', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway 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(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -156,7 +130,7 @@ describe('Test AddNewGateway', () => {
 
   test('ViewButtonBottom onRightClick without select stationId', async () => {
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -180,25 +154,14 @@ describe('Test AddNewGateway', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 
-    const groupCheckBox = instance.findByType(GroupCheckBox);
-    await act(async () => {
-      groupCheckBox.props.onSelect({ id: 2 }); // select stationId
-    });
-
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScanChipQR, {
-      chipName: '',
-      phoneNumber: '',
-      station_id: 2,
-      unit_id: 1,
-      unit_name: 'Unit name',
-    });
+    expect(mockedNavigate).not.toBeCalled();
   });
 });

package/src/screens/AddNewGateway/__test__/ConnectedGateway.test.js

@@ -2,9 +2,11 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import { TESTID } from '../../../configs/Constants';
 import ConnectedGateway from '../ConnectedGateway';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
 
 jest.mock('axios');
 
@@ -18,6 +20,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectedGateway route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectedGateway', () => {
   let tree;
   let route;
@@ -48,7 +56,7 @@ describe('Test ConnectedGateway', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<ConnectedGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -57,9 +65,11 @@ describe('Test ConnectedGateway', () => {
     const textChipName = getText(instance, TESTID.CONNECTED_GATEWAY_CHIP_NAME);
     const textDone = getText(instance, TESTID.CONNECTED_GATEWAY_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(textChipName.props.children).toEqual('Chip name - ABC123');
-    expect(textDone.props.children).toEqual(t('done'));
+    expect(textDone.props.children).toEqual(getTranslate('en', 'done'));
   });
 });

package/src/screens/AddNewGateway/__test__/ConnectingGateway.test.js

@@ -4,9 +4,11 @@ import axios from 'axios';
 
 import ConnectingGateway from '../ConnectingGateway';
 import Text from '../../../commons/Text';
-import { t } from 'i18n-js';
 import API from '../../../configs/API';
 import Routes from '../../../utils/Route';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -20,6 +22,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingGateway route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectingGateway', () => {
   let tree;
   let route;
@@ -41,14 +49,16 @@ describe('Test ConnectingGateway', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<ConnectingGateway route={route} />);
+      tree = await 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_gateway'));
+    expect(texts).toHaveLength(6);
+    expect(texts[0].props.children).toEqual(
+      getTranslate('en', 'connecting_your_gateway')
+    );
     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,18 +73,18 @@ describe('Test ConnectingGateway', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();
     });
     expect(setInterval).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED, {
+    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED(), {
       params: {
         chip_id: 1,
       },
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(
+    expect(mockedNavigate).not.toHaveBeenCalledWith(
       Routes.ConnectedGateway,
       route.params
     );
@@ -91,13 +101,13 @@ describe('Test ConnectingGateway', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingGateway route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();
     });
     expect(setInterval).toHaveBeenCalled();
-    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED, {
+    expect(axios.get).toHaveBeenCalledWith(API.CHIP.CHECK_FINALIZED(), {
       params: {
         chip_id: 1,
       },

package/src/screens/AddNewGateway/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/AddNewGateway/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { ScrollView, SafeAreaView, TextInput } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import { Section, ViewButtonBottom } from '../../commons';
@@ -11,6 +11,7 @@ import { TESTID } from '../../configs/Constants';
 import styles from './AddNewGatewayStyles';
 
 const AddNewGateway = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id, wifiName, wifiPass, imei } = route.params;
   const { navigate, goBack } = useNavigation();
   const [phoneNumber, setPhoneNumber] = useState('');

package/src/screens/AddNewOneTap/AddNewOneTapStyles.js

@@ -0,0 +1,44 @@
+import { StatusBar, StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  containerAndroid: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: StatusBar.currentHeight,
+  },
+  containerIOS: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: 0,
+  },
+  textHeader: {
+    marginTop: 16,
+    marginLeft: 16,
+    marginBottom: 8,
+    lineHeight: 28,
+  },
+  noMarginTop: {
+    margin: 16,
+  },
+  textInput: {
+    marginTop: 0,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray4,
+    paddingLeft: 0,
+    backgroundColor: Colors.Gray2,
+  },
+  viewBottomFixed: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 32,
+    paddingTop: 24,
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

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

@@ -0,0 +1,130 @@
+import axios from 'axios';
+import React from 'react';
+import { Platform, TextInput, TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+
+import AddNewOneTap from '..';
+import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import Routes from '../../../utils/Route';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewOneTap route={route} />
+  </SCProvider>
+);
+jest.mock('axios');
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: () => 'vi',
+  };
+});
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('axios');
+let tree;
+
+describe('test AddNewOneTap', () => {
+  beforeEach(() => {
+    axios.post.mockClear();
+    mockedNavigate.mockClear();
+  });
+  test('create AddNewOneTap success', async () => {
+    Platform.OS = 'ios';
+    let route = {
+      params: { type: 'one_tap', unit: { id: 1 } },
+    };
+
+    const response = {
+      status: 200,
+      data: {
+        id: 1,
+        unit: 1,
+        type: 'one_tap',
+        weekday_repeat: [],
+        script: { id: 1, name: 'William Miller' },
+      },
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const inputName = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.NAME_YOUR_BUTTON && el.type === TextInput
+    );
+    expect(inputName).toHaveLength(1);
+
+    await act(async () => {
+      await inputName[0].props.onChangeText('Tap to up');
+    });
+
+    const item = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      havePermission: true,
+      id: 1,
+      type: 'one_tap',
+      name: 'Tap to up',
+      unit: {
+        id: 1,
+      },
+      isCreateScriptSuccess: true,
+    });
+  });
+  test('create AddNewOneTap fail', async () => {
+    Platform.OS = 'android';
+    let route = {
+      params: { type: 'one_tap' },
+    };
+
+    const response = {
+      status: 400,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+
+    const item = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).not.toBeCalled();
+  });
+});

package/src/screens/AddNewOneTap/index.js

@@ -0,0 +1,83 @@
+import React, { memo, useCallback, useState } from 'react';
+import { ScrollView, SafeAreaView, Platform } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { API, Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import _TextInput from '../../commons/Form/TextInput';
+import styles from './AddNewOneTapStyles';
+import { HeaderCustom } from '../../commons/Header';
+import BottomButtonView from '../../commons/BottomButtonView';
+import Text from '../../commons/Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { axiosPost } from '../../utils/Apis/axios';
+import Routes from '../../utils/Route';
+
+const AddNewOneTap = memo(({ route }) => {
+  const { type, unit, automateData = {} } = route.params;
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const [name, setName] = useState('');
+
+  const handleContinue = useCallback(async () => {
+    const { success, data } = await axiosPost(API.AUTOMATE.CREATE_AUTOMATE(), {
+      unit: unit.id,
+      type: type,
+      name: name,
+      ...automateData,
+    });
+    if (success) {
+      navigate(Routes.ScriptDetail, {
+        unit: unit,
+        id: data.id,
+        name: name,
+        type: type,
+        havePermission: true,
+        isCreateScriptSuccess: true,
+      });
+    }
+  }, [type, name, unit, automateData, navigate]);
+
+  const onChangeName = useCallback((text) => {
+    setName(text);
+  }, []);
+
+  return (
+    <SafeAreaView
+      style={
+        Platform.OS === 'android'
+          ? styles.containerAndroid
+          : styles.containerIOS
+      }
+    >
+      <HeaderCustom isShowClose />
+      <ScrollView>
+        <Text
+          testID={TESTID.ADD_NEW_DEVICE_ADD}
+          semibold
+          size={20}
+          color={Colors.Gray9}
+          style={styles.textHeader}
+        >
+          {t('name_your_button')}
+        </Text>
+        <_TextInput
+          placeholder={t('name_your_button')}
+          wrapStyle={styles.noMarginTop}
+          onChange={onChangeName}
+          textInputStyle={styles.textInput}
+          value={name}
+          testID={TESTID.NAME_YOUR_BUTTON}
+        />
+      </ScrollView>
+      <BottomButtonView
+        style={styles.viewBottomFixed}
+        mainTitle={t('save')}
+        onPressMain={handleContinue}
+        typeMain={name !== '' ? 'primary' : 'disabled'}
+      />
+    </SafeAreaView>
+  );
+});
+
+export default AddNewOneTap;