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

package/src/commons/Device/__test__/DeviceAlertStatus.test.js

@@ -1,8 +1,16 @@
 import DeviceAlertStatus from '../DeviceAlertStatus';
 import React from 'react';
-import { t } from 'i18n-js';
 import renderer, { act } from 'react-test-renderer';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
+
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceAlertStatus data={data} />
+  </SCProvider>
+);
 
 describe('Test Device Alert Status', () => {
   let tree;
@@ -22,13 +30,13 @@ describe('Test Device Alert Status', () => {
         },
       ];
       act(() => {
-        tree = renderer.create(<DeviceAlertStatus data={data} />);
+        tree = renderer.create(wrapComponent(data));
       });
       const instance = tree.root;
       const item = instance.find(
         (el) => el.props.testID === TESTID.ALERT_STATUS_MACHINE
       );
-      expect(item.props.message).toEqual(t(standard));
+      expect(item.props.message).toEqual(getTranslate('en', standard));
     });
   });
   test('render Device Alert Status data value == 0', () => {
@@ -39,7 +47,7 @@ describe('Test Device Alert Status', () => {
       },
     ];
     act(() => {
-      tree = renderer.create(<DeviceAlertStatus data={data} />);
+      tree = renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const item = instance.findAll(
@@ -54,7 +62,7 @@ describe('Test Device Alert Status', () => {
       },
     ];
     act(() => {
-      tree = renderer.create(<DeviceAlertStatus data={data} />);
+      tree = renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const item = instance.findAll(

package/src/commons/Device/__test__/DisconnectedView.test.js

@@ -1,6 +1,14 @@
 import { DisconnectedView } from '../DisconnectedView';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DisconnectedView sensor={sensor} />
+  </SCProvider>
+);
 
 describe('Test DisconnectedView', () => {
   let tree;
@@ -8,7 +16,7 @@ describe('Test DisconnectedView', () => {
   test('render DisconnectedView icon dooor', () => {
     const sensor = { icon: 'door' };
     act(() => {
-      tree = renderer.create(<DisconnectedView sensor={sensor} />);
+      tree = renderer.create(wrapComponent(sensor));
     });
     expect(tree.toJSON()).toMatchSnapshot();
   });
@@ -16,7 +24,7 @@ describe('Test DisconnectedView', () => {
   test('render DisconnectedView icon sensor', () => {
     const sensor = { icon: 'sensor' };
     act(() => {
-      tree = renderer.create(<DisconnectedView sensor={sensor} />);
+      tree = renderer.create(wrapComponent(sensor));
     });
     expect(tree.toJSON()).toMatchSnapshot();
   });
@@ -24,7 +32,7 @@ describe('Test DisconnectedView', () => {
   test('render DisconnectedView icon barrier', () => {
     const sensor = { icon: 'barrier' };
     act(() => {
-      tree = renderer.create(<DisconnectedView sensor={sensor} />);
+      tree = renderer.create(wrapComponent(sensor));
     });
     expect(tree.toJSON()).toMatchSnapshot();
   });
@@ -32,7 +40,7 @@ describe('Test DisconnectedView', () => {
   test('render DisconnectedView icon wind', () => {
     const sensor = { icon: 'wind' };
     act(() => {
-      tree = renderer.create(<DisconnectedView sensor={sensor} />);
+      tree = renderer.create(wrapComponent(sensor));
     });
     expect(tree.toJSON()).toMatchSnapshot();
   });
@@ -40,7 +48,7 @@ describe('Test DisconnectedView', () => {
   test('render DisconnectedView icon test', () => {
     const sensor = { icon: 'test' };
     act(() => {
-      tree = renderer.create(<DisconnectedView sensor={sensor} />);
+      tree = renderer.create(wrapComponent(sensor));
     });
     expect(tree.toJSON()).toMatchSnapshot();
   });

package/src/commons/Device/__test__/FlatListItems.test.js

@@ -3,6 +3,14 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <FlatListItems data={data} title={'filters'} />
+  </SCProvider>
+);
 
 describe('Test FlatListItems', () => {
   let tree;
@@ -19,7 +27,7 @@ describe('Test FlatListItems', () => {
       },
     ];
     act(() => {
-      tree = renderer.create(<FlatListItems data={data} title={'filters'} />);
+      tree = renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const touch = instance.find(

package/src/commons/Device/__test__/FooterInfo.test.js

@@ -3,16 +3,25 @@ import renderer, { act } from 'react-test-renderer';
 import FooterInfo from '../FooterInfo';
 import { Image } from 'react-native';
 
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <FooterInfo data={data} />
+  </SCProvider>
+);
+
 describe('Test FooterInfo', () => {
   let wrapper;
 
-  test('render FooterInfo', () => {
+  test('render FooterInfo', async () => {
     const data = { icon_powered_by: 'icon', hotline: 'hotline' };
-    act(() => {
-      wrapper = renderer.create(<FooterInfo data={data} />);
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(data));
     });
     const instance = wrapper.root;
     const text = instance.findAllByType(Image);
-    expect(text.length).toEqual(1);
+    expect(text.length).toEqual(0);
   });
 });

package/src/commons/Device/__test__/SensorConnectedStatus.test.js

@@ -2,13 +2,21 @@ import SensorConnectedStatus from '../SensorConnectedStatus';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <SensorConnectedStatus />
+  </SCProvider>
+);
 
 describe('Test Sensor Connected Status', () => {
   let tree;
 
   test('render Sensor Connected Status', () => {
     act(() => {
-      tree = renderer.create(<SensorConnectedStatus />);
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const item = instance.find(

package/src/commons/Device/__test__/__snapshots__/DisconnectedView.test.js.snap

@@ -88,7 +88,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -143,7 +143,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -191,7 +191,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -238,7 +238,7 @@ exports[`Test DisconnectedView render DisconnectedView icon barrier 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -333,7 +333,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -388,7 +388,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -436,7 +436,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -483,7 +483,7 @@ exports[`Test DisconnectedView render DisconnectedView icon dooor 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -578,7 +578,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -633,7 +633,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -681,7 +681,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -728,7 +728,7 @@ exports[`Test DisconnectedView render DisconnectedView icon sensor 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -823,7 +823,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -878,7 +878,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -926,7 +926,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -973,7 +973,7 @@ exports[`Test DisconnectedView render DisconnectedView icon test 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>
@@ -1068,7 +1068,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
         ]
       }
     >
-      Ngắt kết nối
+      Disconnected
     </Text>
   </View>
   <View
@@ -1123,7 +1123,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
           ]
         }
       >
-        Gợi ý
+        Suggestions
         :
       </Text>
     </View>
@@ -1171,7 +1171,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
           ]
         }
       >
-        Kiểm tra lại nguồn điện của thiết bị.
+        Check the power on your device.
       </Text>
     </View>
     <View
@@ -1218,7 +1218,7 @@ exports[`Test DisconnectedView render DisconnectedView icon wind 1`] = `
           ]
         }
       >
-        Kiểm tra lại Wi-Fi/tín hiệu di động hoặc thử khởi động lại.
+        Check the Wi-Fi/Cellular signal or try to reset it.
       </Text>
     </View>
   </View>

package/src/commons/DisplayChecking/__test__/DisplayChecking.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import LoadingMessage from '../index';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (visible, onClose, message) => (
+  <SCProvider initState={mockSCStore({})}>
+    <LoadingMessage visible={visible} onClose={onClose} message={message} />
+  </SCProvider>
+);
+
+describe('Test DisplayChecking', () => {
+  let tree;
+  let visible = true;
+  let message = '';
+  let onClose = () => {};
+
+  test('create LoadingMessage', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent(visible, message, onClose));
+    });
+    const instance = tree.root;
+    const textInputs = instance.findAllByType(TouchableOpacity);
+    expect(textInputs.length).toBe(1);
+  });
+});

package/src/commons/EmergencyButton/AlertSendConfirm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ButtonPopup } from '../index';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -14,6 +14,7 @@ const AlertSendConfirm = ({
   unit,
   station,
 }) => {
+  const t = useTranslations();
   return (
     <ButtonPopup
       rowButton

package/src/commons/EmergencyButton/AlertSent.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { ButtonPopup } from '../index';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { IconFill } from '@ant-design/icons-react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -16,6 +16,7 @@ const AlertSent = ({
   station,
   isDashboard,
 }) => {
+  const t = useTranslations();
   const data = useMemo(() => {
     if (isDashboard) {
       return {
@@ -34,7 +35,7 @@ const AlertSent = ({
         typeMain: 'alertBorder',
       };
     }
-  }, [isDashboard]);
+  }, [isDashboard, t]);
 
   return (
     <ButtonPopup

package/src/commons/Explore/CityItem/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
@@ -12,6 +12,7 @@ import { formatNumberCompact } from '../../../utils/Utils';
 import { axiosPost } from '../../../utils/Apis/axios';
 
 const CityItem = memo(({ item, onSelect }) => {
+  const t = useTranslations();
   const { id, name, icon, is_pin, count_pin } = item;
 
   const onPressPinPublicUnit = useCallback(async () => {

package/src/commons/Explore/HeaderExplore/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Theme from '../../../configs/Theme';
 
 import { Colors } from '../../../configs';
@@ -8,6 +8,7 @@ import Text from '../../../commons/Text';
 import { useSCContextSelector } from '../../../context';
 
 const HeaderExplore = memo(() => {
+  const t = useTranslations();
   useSCContextSelector((state) => state.language);
   return (
     <View style={styles.container}>

package/src/commons/Explore/HeaderLabel/index.js

@@ -1,11 +1,12 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 
 const HeaderLabel = memo(({ title, style, onPress, seeMore }) => {
+  const t = useTranslations();
   return (
     <View style={[styles.labelHeader, style]}>
       <Text fontSize={14} color={Colors.Gray8} style={styles.textLineHeight}>

package/src/commons/Explore/SearchBox/__test__/SearchBox.test.js

@@ -2,9 +2,17 @@ import SearchBox from '../index';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
 const mockedNavigate = jest.fn();
 
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <SearchBox isBack={true} />
+  </SCProvider>
+);
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -18,7 +26,7 @@ describe('Test SearchBox', () => {
   let wrapper;
   test('SearchBox render', () => {
     act(() => {
-      wrapper = renderer.create(<SearchBox isBack={true} />);
+      wrapper = renderer.create(wrapComponent());
     });
     const instance = wrapper.root;
     const button = instance.findByType(TouchableOpacity);
@@ -26,7 +34,6 @@ describe('Test SearchBox', () => {
     act(() => {
       button.props.onPress();
     });
-    expect(wrapper.toJSON()).toMatchSnapshot();
     expect(mockedNavigate.mock.calls.length).toBe(1);
   });
 });

package/src/commons/Explore/SearchBox/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import { TextInput, View, StyleSheet, TouchableOpacity } 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 Theme from '../../../configs/Theme';
@@ -9,6 +9,7 @@ import Search from '../../../../assets/images/Explore/Search.svg';
 import ArrowBack from '../../../../assets/images/Explore/ArrowBack.svg';
 
 const SearchBox = memo(({ isBack, style, onFocus }) => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   const onBack = useCallback(() => {
     goBack();

package/src/commons/Explore/__test__/CityItem.test.js

@@ -6,9 +6,17 @@ import axios from 'axios';
 import { API } from '../../../configs';
 import Pin from '../../../../assets/images/Explore/Pin.svg';
 import PinOutline from '../../../../assets/images/Explore/PinOutline.svg';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockedDispatch = jest.fn();
 
+const wrapComponent = (item, mockeSelect) => (
+  <SCProvider initState={mockSCStore({})}>
+    <CityItem item={item} onSelect={mockeSelect} />
+  </SCProvider>
+);
+
 jest.mock('axios');
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -38,9 +46,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const buttons = instance.findAllByType(TouchableOpacity);
@@ -82,9 +88,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
 
@@ -111,9 +115,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
 
@@ -140,9 +142,7 @@ describe('Test CityItem', () => {
       return response;
     });
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const pin = instance.findAllByType(Pin);
@@ -164,9 +164,7 @@ describe('Test CityItem', () => {
     const mockeSelect = jest.fn();
 
     await act(async () => {
-      tree = await renderer.create(
-        <CityItem item={item} onSelect={mockeSelect} />
-      );
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const buttons = instance.findAllByType(TouchableOpacity);

package/src/commons/Explore/__test__/HeaderExplore.test.js

@@ -1,18 +1,22 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import Text from '../../Text';
+import Text from '../../../commons/Text';
 import HeaderExplore from '../HeaderExplore';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <HeaderExplore />
+  </SCProvider>
+);
 
-let tree;
 describe('Test HeaderExplore', () => {
+  let tree;
+
   test('render HeaderExplore', () => {
     act(() => {
-      tree = renderer.create(<HeaderExplore />);
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const button = instance.findAllByType(Text);

package/src/commons/Explore/__test__/HeaderLabel.test.js

@@ -2,19 +2,25 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 import HeaderLabel from '../HeaderLabel';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (mockFunc) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HeaderLabel
+      seeMore={true}
+      title={'popular_locations'}
+      onPress={mockFunc}
+    />
+  </SCProvider>
+);
 
 let tree;
 describe('Test HeaderLabel', () => {
-  test('render HeaderLabel', () => {
+  test('render HeaderLabel', async () => {
     const mockFunc = jest.fn();
-    act(() => {
-      tree = renderer.create(
-        <HeaderLabel
-          seeMore={true}
-          title={'popular_locations'}
-          onPress={mockFunc}
-        />
-      );
+    await act(() => {
+      tree = renderer.create(wrapComponent(mockFunc));
     });
     const instance = tree.root;
     const button = instance.findAllByType(TouchableOpacity);