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

package/src/screens/SubUnit/__test__/ManageSubUnit.test.js

@@ -1,412 +1,79 @@
-/* eslint-disable promise/prefer-await-to-callbacks */
-import React from 'react';
-import { TouchableOpacity, Image } from 'react-native';
-import axios from 'axios';
-import { AlertAction, ImagePicker, ViewButtonBottom } from '../../../commons';
-import { API } from '../../../configs';
-import { useSelector } from 'react-redux';
-import { act, create } from 'react-test-renderer';
-import Toast from 'react-native-toast-message';
-
-import Routes from '../../../utils/Route';
+import React, { useState } from 'react';
+import { ScrollView } from 'react-native';
+import { create } from 'react-test-renderer';
+import { act } from '@testing-library/react-hooks';
 import ManageSubUnit from '../ManageSubUnit';
-import { t } from 'i18n-js';
-import { removeSubUnit, manageSubUnit } from '../../../redux/Actions/unit';
-import { TESTID } from '../../../configs/Constants';
-import Text from '../../../commons/Text';
-import _TextInput from '../../../commons/Form/TextInput';
-
-const mockedNavigate = jest.fn();
-const mockedDispatch = jest.fn();
-const mockedDangerouslyGetState = jest.fn();
-const mockedPop = jest.fn();
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { RowItem } from '../../../commons/RowItem';
+import Routes from '../../../utils/Route';
 
-jest.mock('axios');
-jest.mock('react-native-toast-message');
+const mockSetState = jest.fn();
 
-jest.mock('react-redux', () => {
+jest.mock('react', () => {
   return {
-    ...jest.requireActual('react-redux'),
-    useDispatch: () => mockedDispatch,
-    useSelector: jest.fn(),
-    connect: () => {
-      return (component) => component;
-    },
-    useIsFocused: jest.fn(),
+    ...jest.requireActual('react'),
+    useState: jest.fn((init) => [init, mockSetState]),
+    memo: (x) => x,
   };
 });
-
+const mockedNavigate = jest.fn();
+const mockUseIsFocused = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
     useNavigation: () => ({
       navigate: mockedNavigate,
-      dangerouslyGetState: mockedDangerouslyGetState,
-      pop: mockedPop,
     }),
-    useIsFocused: jest.fn(),
+    useIsFocused: () => ({
+      useIsFocused: mockUseIsFocused,
+    }),
   };
 });
 
-describe('Test ManageSubUnit', () => {
-  let route;
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ManageSubUnit route={route} />
+  </SCProvider>
+);
 
-  beforeEach(() => {
-    route = {
-      params: {
-        station: {
-          id: 2,
-          name: 'Station name',
-          background: '',
-          group: {
-            id: 1,
-          },
-        },
-      },
-    };
-    const localState = {
-      language: 'en',
-      unit: {
-        unitDetail: {
-          id: 1,
-        },
-      },
-    };
-    useSelector.mockImplementation((cb) => {
-      return cb(localState);
-    });
-  });
-
-  afterEach(() => {
-    mockedDispatch.mockClear();
-    Toast.show.mockClear();
-    axios.delete.mockClear();
-    axios.patch.mockClear();
-  });
+describe('Test ManageSubUnit', () => {
   let tree;
 
-  test('alertAction', async () => {
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    expect(alertAction.props.leftButtonTitle).toEqual(t('cancel'));
-    expect(alertAction.props.rightButtonTitle).toEqual(t('remove'));
-  });
-
-  test('alertAction rightButtonClick success, previous screen Routes.UnitDetail', async () => {
-    const response = {
-      status: 200,
-    };
-    axios.delete.mockImplementation(async () => {
-      return response;
-    });
-
-    mockedDangerouslyGetState.mockImplementation(() => ({
-      routes: [
-        { name: Routes.UnitDetail },
-        { name: 'route 2' },
-        { name: 'route 3' },
-      ],
-    }));
-
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      await alertAction.props.rightButtonClick();
-    });
-    expect(alertAction.props.visible).toEqual(false);
-    expect(axios.delete).toHaveBeenCalledWith(
-      API.SUB_UNIT.REMOVE_SUB_UNIT(1, 2)
-    );
-    expect(Toast.show).toHaveBeenCalledWith({
-      type: 'success',
-      position: 'bottom',
-      text1: t('text_remove_sub_unit_success'),
-      visibilityTime: 1000,
-    });
-    expect(mockedDispatch).toHaveBeenCalledWith(removeSubUnit(2));
-    expect(mockedPop).toHaveBeenCalledWith(2);
-  });
-
-  test('alertAction rightButtonClick success', async () => {
-    const response = {
-      status: 200,
-    };
-    axios.delete.mockImplementation(async () => {
-      return response;
-    });
-
-    mockedDangerouslyGetState.mockImplementation(() => ({
-      routes: [{ name: 'route 1' }, { name: 'route 2' }, { name: 'route 3' }],
-    }));
-
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      await alertAction.props.rightButtonClick();
-    });
-    expect(mockedPop).toHaveBeenCalledWith(3);
-  });
-
-  test('alertAction rightButtonClick fail', async () => {
-    const response = {
-      data: '',
-    };
-    axios.delete.mockImplementation(async () => {
-      return response;
-    });
-
-    mockedDangerouslyGetState.mockImplementation(() => ({
-      routes: [{ name: 'route 1' }, { name: 'route 2' }, { name: 'route 3' }],
-    }));
-
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      await alertAction.props.rightButtonClick();
-    });
-
-    expect(Toast.show).toHaveBeenCalledWith({
-      type: 'error',
-      position: 'bottom',
-      text1: t('text_remove_sub_unit_fail'),
-      visibilityTime: 1000,
-    });
-  });
-
-  test('alertAction leftButtonClick', async () => {
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      await alertAction.props.leftButtonClick();
-    });
-    expect(alertAction.props.visible).toEqual(false);
-  });
-
-  test('alertAction hideModal', async () => {
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      await alertAction.props.hideModal();
-    });
-    expect(alertAction.props.visible).toEqual(false);
-  });
-
-  test('viewBottomButton onLeftClick', async () => {
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const modal = instance.find(
-      (el) => el.props.testID === TESTID.MANAGE_SUB_UNIT_MODAL
-    );
-    const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
-    const viewBottomButton = viewBottomButtons[0];
-
-    expect(viewBottomButton.props.leftTitle).toEqual(t('cancel'));
-    expect(viewBottomButton.props.rightTitle).toEqual(t('rename'));
-
-    await act(async () => {
-      await viewBottomButton.props.onLeftClick();
-    });
-
-    expect(modal.props.isVisible).toEqual(false);
-  });
-
-  test('viewBottomButton onRightClick success', async () => {
-    const response = {
-      status: 200,
-      data: { name: 'Station name' },
-    };
-    axios.patch.mockImplementation(async () => {
-      return response;
-    });
-
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const text = instance.find(
-      (el) =>
-        el.props.testID === TESTID.MANAGE_SUB_UNIT_NAME && el.type === Text
-    );
-    const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
-    const viewBottomButton = viewBottomButtons[0];
-
-    await act(async () => {
-      await viewBottomButton.props.onRightClick();
-    });
-
-    expect(axios.patch).toHaveBeenCalledWith(
-      API.SUB_UNIT.MANAGE_SUB_UNIT(1, 2),
-      { name: 'Station name' },
-      {}
-    );
-    expect(mockedDispatch).toHaveBeenCalledWith(
-      manageSubUnit(2, { name: 'Station name' })
-    );
-    expect(Toast.show).toHaveBeenCalledWith({
-      type: 'success',
-      position: 'bottom',
-      text1: t('text_rename_sub_unit_success'),
-      visibilityTime: 1000,
-    });
-    expect(text.props.children).toEqual('Station name');
-  });
-
-  test('viewBottomButton onRightClick fail', async () => {
-    const response = {
-      data: '',
-    };
-    axios.patch.mockImplementation(async () => {
-      return response;
-    });
-
-    await act(async () => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
-    const viewBottomButton = viewBottomButtons[0];
-
-    await act(async () => {
-      await viewBottomButton.props.onRightClick();
-    });
-
-    expect(axios.patch).toHaveBeenCalledWith(
-      API.SUB_UNIT.MANAGE_SUB_UNIT(1, 2),
-      { name: 'Station name' },
-      {}
-    );
-    expect(mockedDispatch).not.toHaveBeenCalled();
-    expect(Toast.show).not.toHaveBeenCalled();
-  });
-
-  test('onPressRemove', async () => {
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const button = instance.find(
-      (el) =>
-        el.props.testID === TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON &&
-        el.type === TouchableOpacity
-    );
-    const alertAction = instance.findByType(AlertAction);
-    expect(alertAction.props.visible).toEqual(false);
-
-    act(() => {
-      button.props.onPress();
-    });
-
-    expect(alertAction.props.visible).toEqual(true);
-  });
-
-  test('onChangeName', async () => {
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const textInput = instance.findByType(_TextInput);
-    act(() => {
-      textInput.props.onChange('New sub-unit name');
-    });
-    // This dont have expect
-  });
-
-  test('selectFile', async () => {
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const button = instance.find(
-      (el) =>
-        el.props.testID === TESTID.MANAGE_SUB_UNIT_SELECT_FILE_BUTTON &&
-        el.type === TouchableOpacity
-    );
-    const imagePicker = instance.findByType(ImagePicker);
-    expect(imagePicker.props.showImagePicker).toEqual(false);
-    act(() => {
-      button.props.onPress();
-    });
-    expect(imagePicker.props.showImagePicker).toEqual(true);
+  afterEach(() => {
+    mockSetState.mockClear();
+    mockUseIsFocused.mockClear();
+    mockedNavigate.mockClear();
   });
 
-  test('setImage and updateBackground success', async () => {
-    const response = {
-      status: 200,
-      data: { name: 'Station name' },
+  it('render ManageSubUnit', async () => {
+    let route = {
+      params: { unit: { id: 1, name: 'unit 1' } },
     };
-    axios.patch.mockImplementation(async () => {
-      return response;
-    });
-
-    act(() => {
-      tree = create(<ManageSubUnit route={route} />);
+    const data = [{ id: 1, name: 'sensor' }];
+    useState.mockImplementationOnce((init) => [data, mockSetState]);
+    useState.mockImplementationOnce((init) => [false, mockSetState]);
+    useState.mockImplementationOnce((init) => [false, mockSetState]);
+    await act(() => {
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
-    const imagePicker = instance.findByType(ImagePicker);
-    const image = instance.findByType(Image);
-    expect(image.props.source).toEqual({
-      uri: '',
-    });
-    await act(async () => {
-      await imagePicker.props.setImageUrl({ uri: 'path' });
-    });
-    expect(image.props.source).toEqual({
-      uri: 'path',
-    });
-    expect(axios.patch).toHaveBeenCalled();
-    expect(Toast.show).toHaveBeenCalledWith({
-      type: 'success',
-      position: 'bottom',
-      text1: t('text_change_background_sub_unit_success'),
-      visibilityTime: 1000,
-    });
-  });
-
-  test('setImage and updateBackground but fail', async () => {
-    const response = {
-      data: '',
-    };
-    axios.patch.mockImplementation(async () => {
-      return response;
-    });
-
+    const subUnitScrollViews = instance.findAllByType(ScrollView);
+    expect(subUnitScrollViews).toHaveLength(2);
+    const rowItem = instance.findAllByType(RowItem);
+    expect(rowItem).toHaveLength(1);
     act(() => {
-      tree = create(<ManageSubUnit route={route} />);
-    });
-    const instance = tree.root;
-    const imagePicker = instance.findByType(ImagePicker);
-    const image = instance.findByType(Image);
-    expect(image.props.source).toEqual({
-      uri: '',
-    });
-    await act(async () => {
-      await imagePicker.props.setImageUrl({ uri: 'path' });
+      rowItem[0].props.onPress();
     });
-    expect(image.props.source).toEqual({
-      uri: 'path',
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      params: {
+        station: { id: 1, name: 'sensor' },
+        unit: {
+          id: 1,
+          name: 'unit 1',
+        },
+      },
+      screen: 'EditSubUnit',
     });
-    expect(axios.patch).toHaveBeenCalled();
-    expect(Toast.show).not.toHaveBeenCalled();
   });
 });

package/src/screens/SubUnit/hooks/__test__/useManageSubUnit.test.js

@@ -0,0 +1,85 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useManageSubUnit from '../useManageSubUnit';
+import axios from 'axios';
+import API from '../../../../configs/API';
+
+const mockRoute = jest.fn();
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: () => mockRoute,
+    useNavigation: () => ({
+      goBack: jest.fn(),
+    }),
+    useIsFocused: jest.fn(),
+  };
+});
+
+jest.mock('axios');
+
+describe('Test Manage Access', () => {
+  afterEach(() => {
+    axios.get.mockClear();
+  });
+  const unit = { id: 1, name: 'unit name' };
+
+  it('Test init', () => {
+    const { result } = renderHook(() => useManageSubUnit(unit));
+    expect(result.current.station).toEqual([]);
+    expect(result.current.isLoading).toBeFalsy();
+    expect(result.current.isRefreshing).toBeFalsy();
+  });
+
+  it('Test onRefresh', () => {
+    const { result } = renderHook(() => useManageSubUnit(unit));
+    axios.get.mockImplementation(() => ({
+      status: 200,
+      data: [
+        {
+          id: 1,
+          name: 'unit 1',
+          stations: [
+            {
+              id: 1,
+              name: 'station 1',
+              sensors: [
+                {
+                  id: 1,
+                  icon: '',
+                  action: { icon: '', color: '' },
+                  name: 'sensor name',
+                  value: '',
+                },
+              ],
+            },
+            {
+              id: 2,
+              name: 'station 2',
+              sensors: [
+                {
+                  id: 1,
+                  icon: '',
+                  action: { icon: '', color: '' },
+                  name: 'sensor name',
+                  value: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    }));
+    act(() => {
+      result.current.onRefresh();
+    });
+    expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(unit?.id), {});
+  });
+});

package/src/screens/SubUnit/hooks/useManageSubUnit.js

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react';
+import { axiosGet } from '../../../utils/Apis/axios';
+import API from '../../../configs/API';
+
+export default (unit) => {
+  const [station, setStation] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefresh, setRefresh] = useState(false);
+
+  const fetchData = useCallback(async (unit) => {
+    setIsLoading(true);
+    const { success, data } = await axiosGet(
+      API.UNIT.UNIT_DETAIL(unit?.id),
+      {},
+      true
+    );
+    if (success) {
+      setStation(data?.stations);
+    }
+    setIsLoading(false);
+  }, []);
+
+  const onRefresh = useCallback(async () => {
+    setRefresh(true);
+    await fetchData(unit);
+    setRefresh(false);
+  }, [unit, fetchData]);
+
+  return {
+    station,
+    isRefresh,
+    onRefresh,
+    isLoading,
+  };
+};

package/src/screens/SyncLGDevice/AddLGDevice.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView, SafeAreaView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './AddLGDeviceStyles';
 import { API, Colors } from '../../configs';
@@ -15,6 +15,7 @@ import { ToastBottomHelper } from '../../utils/Utils';
 import { SCConfig } from '../../configs';
 
 const AddLGDevice = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id, code, backend_url } = route.params;
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });
@@ -68,7 +69,7 @@ const AddLGDevice = memo(({ route }) => {
 
     ToastBottomHelper.success(t('lg_sync_success'));
     navigate(Routes.Dashboard);
-  }, [backend_url, code, navigate, stationId]);
+  }, [backend_url, code, navigate, stationId, t]);
 
   const stations = unit.stations.map((item) => ({
     ...item,

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

@@ -5,6 +5,14 @@ import { Text } from 'react-native';
 import { TESTID } from '../../../configs/Constants';
 
 import TDSGuide from '../index';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <TDSGuide />
+  </SCProvider>
+);
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -21,7 +29,7 @@ describe('Test TDS Guide', () => {
   test('render tds guide', () => {
     let tree;
     act(() => {
-      tree = create(<TDSGuide />);
+      tree = create(wrapComponent());
     });
 
     const instance = tree.root;

package/src/screens/TDSGuide/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, SafeAreaView } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import i18n from 'i18n-js';
 import { TESTID } from '../../configs/Constants';
 
@@ -9,6 +9,7 @@ import Text from '../../commons/Text';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
 
 const TDSGuide = memo(() => {
+  const t = useTranslations();
   useTitleHeader(t('tds_infomation'));
   const currentLanguage = i18n.currentLocale();
 

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

@@ -5,6 +5,14 @@ import { Text } from 'react-native';
 import { TESTID } from '../../../configs/Constants';
 
 import UVIndexGuide from '../index';
+import { mockSCStore } from '../../../context/mockStore';
+import { SCProvider } from '../../../context';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <UVIndexGuide />
+  </SCProvider>
+);
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -21,7 +29,7 @@ describe('Test UV Index Guide', () => {
   test('render UV Index Guide', async () => {
     let tree;
     act(() => {
-      tree = create(<UVIndexGuide />);
+      tree = create(wrapComponent());
     });
 
     const instance = tree.root;

package/src/screens/UVIndexGuide/index.js

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   SafeAreaView,
 } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors, Theme } from '../../configs';
 import Text from '../../commons/Text';
@@ -15,6 +15,7 @@ import { TESTID } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const UVIndexGuide = memo(() => {
+  const t = useTranslations();
   useTitleHeader(t('UV Index Guide'));
   const language = useSCContextSelector((state) => state.language);