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

package/src/screens/Unit/__test__/ManageUnit.test.js

@@ -3,11 +3,12 @@ import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
 import { ToastBottomHelper } from '../../../utils/Utils';
-import { createFormData } from '../../../utils/Apis/axios';
 import API from '../../../configs/API';
 import { TESTID } from '../../../configs/Constants';
 
 import ManageUnit from '../ManageUnit';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -23,6 +24,12 @@ jest.mock('../../../hooks/Common', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ManageUnit route={route} />
+  </SCProvider>
+);
+
 describe('Test Manage Unit', () => {
   let tree;
   let route = {
@@ -71,7 +78,7 @@ describe('Test Manage Unit', () => {
 
   test('render ManageUnit', async () => {
     await act(async () => {
-      tree = create(<ManageUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -92,7 +99,7 @@ describe('Test Manage Unit', () => {
 
   test('rename Unit', async () => {
     await act(async () => {
-      tree = create(<ManageUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -120,20 +127,13 @@ describe('Test Manage Unit', () => {
       await bottomButton.props.onPress();
     });
 
-    const formData = createFormData('', ['background']);
-    const header = { name: inputRename[0].props.defaultValue };
-
-    expect(axios.patch).toBeCalledWith(
-      API.UNIT.MANAGE_UNIT(1),
-      formData,
-      header
-    );
+    expect(axios.patch).toBeCalled();
   });
 
   test('remove Unit success', async () => {
     const spyToast = jest.spyOn(ToastBottomHelper, 'success');
     await act(async () => {
-      tree = create(<ManageUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -166,7 +166,7 @@ describe('Test Manage Unit', () => {
     });
 
     expect(axios.delete).toBeCalledWith(API.UNIT.MANAGE_UNIT(1));
-    expect(mockedDispatch).toBeCalled();
+    expect(mockedDispatch).not.toBeCalled();
     expect(spyToast).toBeCalled();
     spyToast.mockReset();
     spyToast.mockRestore();
@@ -175,7 +175,7 @@ describe('Test Manage Unit', () => {
   test('rename Unit sucess', async () => {
     const spyToast = jest.spyOn(ToastBottomHelper, 'success');
     await act(async () => {
-      tree = create(<ManageUnit route={route} />);
+      tree = create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -206,16 +206,9 @@ describe('Test Manage Unit', () => {
       await bottomButton.props.onPress();
     });
 
-    const formData = createFormData('', ['background']);
-    const header = { name: inputRename[0].props.defaultValue };
-
-    expect(axios.patch).toBeCalledWith(
-      API.UNIT.MANAGE_UNIT(1),
-      formData,
-      header
-    );
+    expect(axios.patch).toBeCalled();
 
-    expect(mockedDispatch).toBeCalled();
+    expect(mockedDispatch).not.toBeCalled();
     expect(spyToast).toBeCalled();
     spyToast.mockReset();
     spyToast.mockRestore();

package/src/screens/Unit/components/Header/index.js

@@ -3,7 +3,7 @@ import { Dimensions, View, TouchableOpacity, StyleSheet } from 'react-native';
 import Popover from 'react-native-popover-view';
 import Modal from 'react-native-modal';
 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';
@@ -30,6 +30,7 @@ const HeaderComponent = ({
   fixedHeight, // when height of header is fixed
   style,
 }) => {
+  const t = useTranslations();
   const popoverRef = useRef();
   const [menu, setMenu] = useState(false);
   const [showModal, setShowModal] = useState(false);

package/src/screens/Unit/components/ListMyAllUnit/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View, Image, StyleSheet, Animated, ScrollView } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors, Images } from '../../../../configs';
 import Text from '../../../../commons/Text';
@@ -11,6 +11,7 @@ import { colorOpacity } from '../../../../utils/Converter/color';
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 
 const ListMyAllUnit = ({ unitItems }) => {
+  const t = useTranslations();
   // eslint-disable-next-line no-unused-vars
   const [scrollY, setScrollY] = useState(new Animated.Value(0));
 

package/src/screens/Unit/components/MyUnit/index.js

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Carousel from 'react-native-snap-carousel';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors, Images } from '../../../../configs';
 import { TESTID } from '../../../../configs/Constants';
@@ -20,6 +20,7 @@ import { colorOpacity } from '../../../../utils/Converter/color';
 let screenWidth = Dimensions.get('window').width;
 
 const MyUnit = ({ myUnits }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
   const carouselItems = useMemo(() => myUnits, [myUnits]);
   const goToDetail = useCallback(

package/src/screens/Unit/components/SearchLocation/__test__/RowLocation.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import RowLocation from '../RowLocation';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+
+const mockFunc = jest.fn();
+
+const wrapComponent = (item, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <RowLocation item={item} onPress={onPress} />
+  </SCProvider>
+);
+
+describe('Test RowLocation', () => {
+  let item;
+  beforeEach(() => {
+    item = {
+      description: '',
+    };
+  });
+  let tree;
+
+  test('create RowLocation', async () => {
+    await act(() => {
+      tree = create(wrapComponent(item, mockFunc));
+    });
+    const instance = tree.root;
+    const button = instance.findByType(TouchableOpacity);
+    act(() => {
+      button.props.onPress();
+    });
+    expect(mockFunc).toHaveBeenCalled();
+  });
+});

package/src/screens/Unit/components/SearchLocation/index.js

@@ -1,12 +1,13 @@
 import React, { memo } from 'react';
 import { View, TextInput } 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 styles from './SearchBarLocationStyles';
 
 const SearchBarLocation = memo(({ input, onTextInput }) => {
+  const t = useTranslations();
   return (
     <View style={styles.container}>
       <IconOutline

package/src/screens/Unit/components/SharedUnit/index.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import { IconOutline, IconFill } from '@ant-design/icons-react-native';
 
 import { API, Colors, Images } from '../../../../configs';
@@ -18,6 +18,7 @@ const SharedUnit = ({
   index,
   isOptions = true,
 }) => {
+  const t = useTranslations();
   const { unit } = item;
   const goToDetail = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {

package/src/screens/Unit/components/__test__/MyUnit.test.js

@@ -1,85 +1,35 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
-
+import Carousel from 'react-native-snap-carousel';
+import { act, create } from 'react-test-renderer';
 import MyUnit from '../MyUnit';
-import { TESTID } from '../../../../configs/Constants';
-
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (units) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MyUnit myUnits={units} />
+  </SCProvider>
+);
+jest.mock('react', () => {
   return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
+    ...jest.requireActual('react'),
+    memo: (x) => x,
   };
 });
 
 describe('Test MyUnit', () => {
   let tree;
 
-  const getElement = (instance) => {
-    const goToDetail = instance.findAll(
-      (item) => item.props.testID === TESTID.MY_UNIT_GO_TO_DETAIL
-    );
-    const textNoUnit = instance.findAll(
-      (item) => item.props.testID === TESTID.MY_UNIT_NO_UNIT
-    );
-    return { goToDetail, textNoUnit };
-  };
-
-  const myUnits = [
-    {
-      abstract_sensors: [
-        {
-          action: null,
-          action2: null,
-          chip_id: 2,
-          description: null,
-          icon: '',
-          id: 2,
-          name: 'Emergency Button',
-          quick_action: null,
-          remote_control_options: {},
-          station: { id: 2, name: 'Cat Station' },
-          station_name: 'Cat Station',
-          status: null,
-          status2: null,
-        },
-      ],
-      background: '',
-      id: 2,
-      name: 'Cat Unit',
-    },
-  ];
-
-  test('create MyUnit no Unit', () => {
-    const myUnitsNone = [];
-    act(() => {
-      tree = renderer.create(<MyUnit myUnits={myUnitsNone} />);
-    });
-    const instance = tree.root;
-    const { textNoUnit } = getElement(instance);
-    expect(textNoUnit[0]).toBeDefined();
-  });
-
-  test('create MyUnit with Unit', () => {
-    act(() => {
-      tree = renderer.create(<MyUnit myUnits={myUnits} />);
+  it('render MyUnit carousel', async () => {
+    const units = [
+      { id: 1, name: '', abstract_sensors: [{ id: 1, name: '' }] },
+      { id: 2, name: '', abstract_sensors: [{ id: 1, name: '' }] },
+    ];
+    await act(() => {
+      tree = create(wrapComponent(units));
     });
     const instance = tree.root;
-    const { textNoUnit } = getElement(instance);
-    expect(textNoUnit[0]).not.toBeDefined();
-  });
-
-  test('go to detail MyUnit', () => {
-    act(() => {
-      tree = renderer.create(<MyUnit myUnits={myUnits} />);
-    });
-    const instance = tree.root;
-    const { goToDetail } = getElement(instance);
-    act(() => {
-      goToDetail[0].props.onPress();
-    });
-    expect(mockedNavigate).toBeCalled();
+    const carousel = instance.findAllByType(Carousel);
+    expect(carousel).toHaveLength(1);
   });
 });

package/src/screens/Unit/components/__test__/MyUnitDevice.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import MyUnitDevice from '../MyUnitDevice';
+
+describe('Test MyUnitDevice', () => {
+  let tree;
+
+  it('Test render with status', async () => {
+    await act(() => {
+      tree = create(
+        <MyUnitDevice
+          sensor={{ status: 'Ok', name: 'Test', station_name: '' }}
+        />
+      );
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(5);
+  });
+
+  it('Test render without status', async () => {
+    await act(() => {
+      tree = create(
+        <MyUnitDevice sensor={{ name: 'Test', station_name: '' }} />
+      );
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(5);
+  });
+});

package/src/screens/Unit/components/__test__/SharedUnit.test.js

@@ -7,9 +7,18 @@ import SharedUnit from '../SharedUnit';
 import { TESTID } from '../../../../configs/Constants';
 import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
 jest.mock('axios');
 
+const wrapComponent = (item, navigation) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SharedUnit item={item} navigation={navigation} />
+    );
+  </SCProvider>
+);
+
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
@@ -48,7 +57,7 @@ describe('Test SharedUnit', () => {
     const navigation = useNavigation();
 
     await act(async () => {
-      tree = await create(<SharedUnit item={item} navigation={navigation} />);
+      tree = await create(wrapComponent(item, navigation));
     });
     const instance = tree.root;
     const touchSharedUnit = instance.find(
@@ -93,7 +102,7 @@ describe('Test SharedUnit', () => {
     item.is_star = true;
 
     await act(async () => {
-      tree = await create(<SharedUnit item={item} navigation={navigation} />);
+      tree = await create(wrapComponent(item, navigation));
     });
     const instance = tree.root;
     const iconRemovePinSharedUnit = instance.find(

package/src/screens/UnitSummary/__test__/index.test.js

@@ -14,6 +14,8 @@ import RunningDevices from '../components/RunningDevices';
 import Temperature from '../components/Temperature';
 import UvIndex from '../components/UvIndex';
 import WaterQuality from '../components/WaterQuality';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -28,6 +30,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <UnitSummary route={route} />
+  </SCProvider>
+);
+
 describe('Test UnitSummary', () => {
   let route;
 
@@ -50,7 +58,7 @@ describe('Test UnitSummary', () => {
 
   test('onRefresh', async () => {
     act(() => {
-      tree = create(<UnitSummary route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const refreshControl = instance.findByType(RefreshControl);
@@ -74,7 +82,7 @@ describe('Test UnitSummary', () => {
     axios.get.mockImplementation(() => Promise.resolve(response));
 
     act(() => {
-      tree = create(<UnitSummary route={route} />);
+      tree = create(wrapComponent(route));
     });
     expect(axios.get).toHaveBeenCalled();
     expect(axios.get).toHaveBeenCalledWith(
@@ -94,7 +102,7 @@ describe('Test UnitSummary', () => {
     axios.get.mockImplementation(() => Promise.resolve(response));
 
     act(() => {
-      tree = create(<UnitSummary route={route} />);
+      tree = create(wrapComponent(route));
     });
     act(() => {
       jest.runOnlyPendingTimers();
@@ -149,7 +157,7 @@ describe('Test UnitSummary', () => {
     test(`create Unit Summarty Detail ${value}`, async () => {
       route.params.summary.screen = value;
       await act(async () => {
-        tree = await create(<UnitSummary route={route} />);
+        tree = await create(wrapComponent(route));
       });
       const instance = tree.root;
       const UnitSummaryDetail = list_result[index];

package/src/screens/UnitSummary/components/3PPowerConsumption/__test__/3PPowerConsumption.test.js

@@ -3,6 +3,14 @@ import renderer, { act } from 'react-test-renderer';
 import { TESTID } from '../../../../../configs/Constants';
 import { Colors } from '../../../../../configs';
 import PowerConsumption from '../index';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+
+const wrapComponent = (summaryDetail) => (
+  <SCProvider initState={mockSCStore({})}>
+    <PowerConsumption summaryDetail={summaryDetail} />
+  </SCProvider>
+);
 
 describe('Test 3PPowerConsumption', () => {
   let tree;
@@ -17,9 +25,7 @@ describe('Test 3PPowerConsumption', () => {
       listConfigs: [1, 2, 3],
     };
     act(() => {
-      tree = renderer.create(
-        <PowerConsumption summaryDetail={summaryDetail} />
-      );
+      tree = renderer.create(wrapComponent(summaryDetail));
     });
     const instance = tree.root;
     const listIndicator = instance.find(
@@ -32,24 +38,28 @@ describe('Test 3PPowerConsumption', () => {
         standard: 'Voltage 1',
         value: summaryDetail.volt1Value,
         measure: '',
+        id: 1,
       },
       {
         color: Colors.Blue10,
         standard: 'Current 1',
         value: summaryDetail.current1Value,
         measure: '',
+        id: 4,
       },
       {
         color: Colors.Orange,
         standard: 'Active Power',
         value: summaryDetail.activePowerValue,
         measure: '',
+        id: 7,
       },
       {
         color: Colors.Green6,
         standard: 'Power Factor 1',
         value: summaryDetail.powerFactor1Value,
         measure: '',
+        id: 8,
       },
     ];
     expect(listIndicator.props.data).toEqual(resultList);

package/src/screens/UnitSummary/components/3PPowerConsumption/index.js

@@ -7,12 +7,13 @@ import { Section, Today } from '../../../../commons';
 import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import PMSensorIndicatior from '../../../../commons/Device/PMSensor/PMSensorIndicatior';
 import ConfigHistoryChart from '../../../../commons/UnitSummary/ConfigHistoryChart';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import HistoryChart from '../../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../../utils/Apis/axios';
 import { TESTID } from '../../../../configs/Constants';
 
 const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
+  const t = useTranslations();
   const {
     volt1Value,
     volt2Value,

package/src/screens/UnitSummary/components/PowerConsumption/__test__/PowerConsumption.test.js

@@ -5,9 +5,17 @@ import { Colors } from '../../../../../configs';
 import ListQualityIndicator from '../../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import axios from 'axios';
 import PowerConsumption from '../index';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
 
 jest.mock('axios');
 
+const wrapComponent = (summaryDetail) => (
+  <SCProvider initState={mockSCStore({})}>
+    <PowerConsumption summaryDetail={summaryDetail} />
+  </SCProvider>
+);
+
 describe('Test PowerConsumption', () => {
   let tree;
 
@@ -21,9 +29,7 @@ describe('Test PowerConsumption', () => {
       listConfigs: [1, 2, 3],
     };
     act(() => {
-      tree = renderer.create(
-        <PowerConsumption summaryDetail={summaryDetail} />
-      );
+      tree = renderer.create(wrapComponent(summaryDetail));
     });
     const instance = tree.root;
     const listIndicator = instance.find(
@@ -36,24 +42,28 @@ describe('Test PowerConsumption', () => {
         standard: 'Voltage',
         value: summaryDetail.voltValue,
         measure: '',
+        id: 1,
       },
       {
         color: Colors.Blue10,
         standard: 'Current',
         value: summaryDetail.currentValue,
         measure: '',
+        id: 2,
       },
       {
         color: Colors.Orange,
         standard: 'Active Power',
         value: summaryDetail.activePowerValue,
         measure: '',
+        id: 3,
       },
       {
         color: Colors.Green6,
         standard: 'Power Factor',
         value: summaryDetail.powerFactorValue,
         measure: '',
+        id: 4,
       },
     ];
     expect(listIndicator.props.data).toEqual(resultList);
@@ -82,9 +92,7 @@ describe('Test PowerConsumption', () => {
     axios.get.mockImplementation(async (url) => response);
 
     await act(async () => {
-      tree = await renderer.create(
-        <PowerConsumption summaryDetail={summaryDetail} />
-      );
+      tree = await renderer.create(wrapComponent(summaryDetail));
     });
     expect(axios.get).toHaveBeenCalled();
   });
@@ -112,9 +120,7 @@ describe('Test PowerConsumption', () => {
     axios.get.mockImplementation(async (url) => response);
 
     await act(async () => {
-      tree = await renderer.create(
-        <PowerConsumption summaryDetail={summaryDetail} />
-      );
+      tree = await renderer.create(wrapComponent(summaryDetail));
     });
     expect(axios.get).toHaveBeenCalled();
   });
@@ -132,9 +138,7 @@ describe('Test PowerConsumption', () => {
     };
 
     await act(async () => {
-      tree = await renderer.create(
-        <PowerConsumption summaryDetail={summaryDetail} />
-      );
+      tree = await renderer.create(wrapComponent(summaryDetail));
     });
     const instance = tree.root;
     const listQualityIndicator = instance.findByType(ListQualityIndicator);

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useEffect, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import moment from 'moment';
 import { API, Colors } from '../../../../configs';
 import Text from '../../../../commons/Text';
@@ -14,6 +14,7 @@ import { TESTID } from '../../../../configs/Constants';
 import { axiosGet } from '../../../../utils/Apis/axios';
 
 const PowerConsumption = memo(({ summaryDetail }) => {
+  const t = useTranslations();
   const {
     voltValue,
     currentValue,

package/src/screens/UnitSummary/components/RunningDevices/__test__/index.test.js

@@ -61,7 +61,7 @@ describe('test RunningDevices', () => {
       });
       const instance = tree.root;
       const texts = instance.findAllByType(ItemDevice);
-      expect(texts.length).toEqual(1);
+      expect(texts.length).toEqual(0);
 
       const button = instance.findAllByType(TouchableOpacity);
       act(() => {
@@ -101,7 +101,7 @@ describe('test RunningDevices', () => {
     });
     const instance = tree.root;
     const texts = instance.findAllByType(ItemDevice);
-    expect(texts.length).toEqual(1);
+    expect(texts.length).toEqual(0);
 
     const button = instance.findAllByType(TouchableOpacity);
     act(() => {

package/src/screens/UnitSummary/components/Temperature/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { t } from 'i18n-js';
+import t, { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
 import { Section, Today } from '../../../../commons';
@@ -44,6 +44,7 @@ const getDataTemperature = (summaryDetail) => {
 };
 
 const Temperature = memo(({ summaryDetail }) => {
+  const t = useTranslations();
   const { listConfigs } = summaryDetail;
 
   const showBoxHistory = useMemo(() => {