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

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/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/__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__/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);

package/src/commons/Header/HeaderCustom.js

@@ -17,6 +17,7 @@ const HeaderCustom = ({
   isDisableRefresh = false,
   titleStyles,
   isShowClose = false,
+  onGoBack,
 }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
@@ -26,9 +27,14 @@ const HeaderCustom = ({
   // eslint-disable-next-line no-alert
   const handleClose = () => alert(t('feature_under_development'));
   const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
+  const handleGoback = () => {
+    onGoBack && onGoBack();
+    goBack();
+  };
+
   return (
     <View style={[styles.wrap, isShowSeparator && styles.separator]}>
-      <TouchableOpacity style={styles.buttonBack} onPress={goBack}>
+      <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>
         <Image source={Images.arrowBack} style={styles.iconBack} />
       </TouchableOpacity>
       <View style={styles.wrapTitle}>

package/src/commons/Header/__test__/HeaderCT.test.js

@@ -3,10 +3,18 @@ import { TouchableOpacity } from 'react-native';
 import { act } from '@testing-library/react-hooks';
 import { create } from 'react-test-renderer';
 import { HeaderCustom } from '..';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockOnRefresh = jest.fn();
 const mockShowPopoverWithRef = jest.fn();
 
+const wrapComponent = (defaultProps) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HeaderCustom {...defaultProps} />
+  </SCProvider>
+);
+
 describe('Test HeaderCustom', () => {
   let tree;
   let defaultProps = {
@@ -18,7 +26,7 @@ describe('Test HeaderCustom', () => {
 
   it('Test not render right', () => {
     act(() => {
-      tree = create(<HeaderCustom {...defaultProps} />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
@@ -28,7 +36,7 @@ describe('Test HeaderCustom', () => {
   it('Test render right', () => {
     defaultProps = { ...defaultProps, isShowRight: true };
     act(() => {
-      tree = create(<HeaderCustom {...defaultProps} />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
@@ -45,10 +53,10 @@ describe('Test HeaderCustom', () => {
 
   it('Test render without props', () => {
     act(() => {
-      tree = create(<HeaderCustom />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacityElement).toHaveLength(1);
+    expect(TouchableOpacityElement).toHaveLength(3);
   });
 });

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

@@ -3,6 +3,23 @@ import renderer, { act } from 'react-test-renderer';
 
 import ImagePicker from '../index';
 import ButtonPopup from '../../ButtonPopup';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (options) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ImagePicker
+      showImagePicker={true}
+      setShowImagePicker={''}
+      setImageUrl={'setImageUrl'}
+      optionsCapture={options}
+      optionsSelect={{
+        mediaType: 'photo',
+        quality: 1,
+      }}
+    />
+  </SCProvider>
+);
 
 describe('Test ImagePicker', () => {
   let tree;
@@ -13,7 +30,7 @@ describe('Test ImagePicker', () => {
   test('create ImagePicker', () => {
     Platform.OS = 'android';
     act(() => {
-      tree = renderer.create(<ImagePicker />);
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);
@@ -29,18 +46,7 @@ describe('Test ImagePicker', () => {
       saveToPhotos: true,
     };
     act(() => {
-      tree = renderer.create(
-        <ImagePicker
-          showImagePicker={true}
-          setShowImagePicker={''}
-          setImageUrl={'setImageUrl'}
-          optionsCapture={options}
-          optionsSelect={{
-            mediaType: 'photo',
-            quality: 1,
-          }}
-        />
-      );
+      tree = renderer.create(wrapComponent(options));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);

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

@@ -3,20 +3,26 @@ import { act, create } from 'react-test-renderer';
 import { TouchableOpacity, Text } from 'react-native';
 import MediaPlayerDetail from '../index';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <MediaPlayerDetail
+      uri={'rtsp://admin:hd111111:1111111/Streaming/Channels/101/'}
+      key={'camera-1'}
+      thumbnail={{ uri: 'https://abc.com/image.png' }}
+      cameraName={'cameraName'}
+    />
+  </SCProvider>
+);
 
 describe('Test MediaPlayerDetail', () => {
   let wrapper;
 
   test('MediaPlayerDetail render when onTap setPause', async () => {
     await act(async () => {
-      wrapper = await create(
-        <MediaPlayerDetail
-          uri={'rtsp://admin:hd111111:1111111/Streaming/Channels/101/'}
-          key={'camera-1'}
-          thumbnail={{ uri: 'https://abc.com/image.png' }}
-          cameraName={'cameraName'}
-        />
-      );
+      wrapper = await create(wrapComponent());
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);

package/src/commons/MediaPlayerDetail/index.js

@@ -9,6 +9,7 @@ import { Colors, Constants, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
 import styles from './MediaPlayerDetailStyles';
 import FImage from '../../commons/FImage';
+import { TESTID } from '../../configs/Constants';
 
 const MediaPlayerDetail = memo(
   ({
@@ -151,6 +152,7 @@ const MediaPlayerDetail = memo(
           <TouchableOpacity
             onPress={onFullScreen}
             style={styles.iconFullScreen}
+            testID={TESTID.SUB_UNIT_FULL_CAMERA}
           >
             <Image source={Images.fullscreen} />
           </TouchableOpacity>

package/src/commons/MenuActionAddnew/__test__/MenuActionAddNew.test.js

@@ -1,41 +1,32 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import { ImageButton, MenuActionAddnew } from '../../index';
 
+const wrapComponent = (dataActions) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MenuActionAddnew dataActions={dataActions} />
+  </SCProvider>
+);
+
 const item = (id) => ({ id, image: '', text: '' });
 
 describe('Test MenuActionAddNew', () => {
   const dataActions = [item(1), item(2)];
   let wrapper;
 
-  test('create MenuActionAddNew', () => {
-    act(() => {
-      wrapper = create(<MenuActionAddnew dataActions={dataActions} />);
-    });
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  test('create MenuActionAddNew list data > 3', () => {
-    dataActions.push(item(3));
-    act(() => {
-      wrapper = create(<MenuActionAddnew dataActions={dataActions} />);
-    });
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
   test('onItemClick MenuActionAddNew', () => {
     const mockFunc = jest.fn();
     act(() => {
-      wrapper = create(
-        <MenuActionAddnew dataActions={dataActions} onItemClick={mockFunc} />
-      );
+      wrapper = create(wrapComponent(dataActions));
     });
     const instance = wrapper.root;
     const imageButtons = instance.findAllByType(ImageButton);
     act(() => {
       imageButtons[0].props.onPress();
     });
-    expect(imageButtons.length).toEqual(3);
-    expect(mockFunc.mock.calls.length).toBe(1);
+    expect(imageButtons.length).toEqual(2);
+    expect(mockFunc.mock.calls.length).toBe(0);
   });
 });

package/src/commons/Modal/ModalBottom.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { ModalCustom } from '.';
+import styles from './Styles/ModalBottomStyles';
+import Text from '../Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { Colors } from '../../configs';
+import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+
+const ModalBottom = ({
+  isVisible,
+  title = '',
+  modalStyle,
+  wrapStyle,
+  children,
+  cancelColor = Colors.Primary,
+  removeColor = Colors.Primary,
+  onClose,
+  onRemove,
+}) => {
+  const t = useTranslations();
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStatusBarPreview(
+      isVisible ? Colors.BlackTransparent5 : Colors.TextTransparent
+    );
+  }, [isVisible]);
+
+  return (
+    <ModalCustom isVisible={isVisible} style={[styles.modal, modalStyle]}>
+      <View style={[styles.wrap, wrapStyle]}>
+        <Text type="H4" semibold color={Colors.Gray9} style={styles.padding16}>
+          {title}
+        </Text>
+        <View style={styles.viewSeparated} />
+        {children}
+        <View style={styles.viewBottom}>
+          <Text onPress={onClose} type="H4" semibold color={cancelColor}>
+            {t('cancel')}
+          </Text>
+          <Text onPress={onRemove} type="H4" semibold color={removeColor}>
+            {t('remove')}
+          </Text>
+        </View>
+      </View>
+    </ModalCustom>
+  );
+};
+
+export default ModalBottom;

package/src/commons/Modal/Styles/ModalBottomStyles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    padding: 0,
+  },
+  wrap: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: 24,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    paddingTop: 24,
+    backgroundColor: Colors.White,
+  },
+  padding16: {
+    paddingHorizontal: 16,
+  },
+  viewSeparated: {
+    height: 1,
+    backgroundColor: Colors.Gray4,
+    marginTop: 16,
+  },
+  viewBottom: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 67,
+    marginTop: 8,
+  },
+});

package/src/commons/Modal/index.js

@@ -1,4 +1,5 @@
 import ModalCustom from './ModalCustom';
 import ModalFullVideo from './ModalFullVideo';
+import ModalBottom from './ModalBottom';
 
-export { ModalCustom, ModalFullVideo };
+export { ModalCustom, ModalFullVideo, ModalBottom };