@eohjsc/react-native-smart-city 0.2.58 → 0.2.62

package/src/screens/Unit/SelectAddressStyles.js

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+  },
+  mapView: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  bottomButton: {
+    backgroundColor: Colors.White,
+  },
+  searchLocation: {
+    paddingVertical: 8,
+    position: 'absolute',
+    zIndex: 1,
+    minHeight: 48,
+    top: 0,
+    left: 0,
+    right: 0,
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  searchData: {
+    paddingHorizontal: 16,
+    position: 'relative',
+    width: '100%',
+    maxHeight: 100,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  separated: {
+    height: 1,
+    backgroundColor: Colors.Gray3,
+    marginHorizontal: 16,
+  },
+  text: {
+    marginLeft: 12,
+  },
+});

package/src/screens/Unit/SmartAccount.js

@@ -7,17 +7,16 @@ import React, {
   useState,
   memo,
 } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import styles from './SmartAccountStyles';
 import { API, Colors } from '../../configs';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
 import { axiosDelete, axiosGet } from '../../utils/Apis/axios';
 import { SmartAccountItem } from './SmartAccountItem';
-import { usePopover, useBoolean } from '../../hooks/Common';
-import { AlertAction, MenuActionMore } from '../../commons';
+import { usePopover } from '../../hooks/Common';
+import { MenuActionMore } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useStateAlertRemove } from '../Unit/hook/useStateAlertRemove';
 
 const ListSmartAccount = ({ route }) => {
   const { unitId } = route?.params || {};
@@ -38,10 +37,6 @@ const ListSmartAccount = ({ route }) => {
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
 
-  const [lockShowing, acquireLockShowing, releaseLockShowing] = useBoolean();
-  const { stateAlertRemove, onShowRemoveAlert, hideAlertAction } =
-    useStateAlertRemove();
-
   useEffect(() => {
     getAllSmartAccounts();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -55,21 +50,7 @@ const ListSmartAccount = ({ route }) => {
     [showPopoverWithRef]
   );
 
-  const onItemClick = useCallback(
-    (item) => {
-      if (!smartAccountRef?.current) {
-        return;
-      }
-      if (item.action === 'delete') {
-        acquireLockShowing();
-        onShowRemoveAlert(smartAccountRef.current.brand)();
-      }
-    },
-    [acquireLockShowing, onShowRemoveAlert]
-  );
-
   const deleteSmartAccount = useCallback(async () => {
-    hideAlertAction();
     if (!smartAccountRef?.current) {
       return;
     }
@@ -78,10 +59,22 @@ const ListSmartAccount = ({ route }) => {
       API.SMART_ACCOUNT.REMOVE_SMART_ACCOUNT(id)
     );
     success && getAllSmartAccounts();
-  }, [hideAlertAction, getAllSmartAccounts]);
+  }, [getAllSmartAccounts]);
+
+  const onItemClick = useCallback(
+    (item) => {
+      if (!smartAccountRef?.current) {
+        return;
+      }
+      if (item.action === 'remove') {
+        deleteSmartAccount();
+      }
+    },
+    [deleteSmartAccount]
+  );
 
   const listMenuItem = useMemo(() => {
-    return [{ action: 'delete', text: t('delete') }];
+    return [{ action: 'remove', text: t('remove_account') }];
   }, [t]);
 
   const gotoSmartAccountDetail = useCallback(
@@ -104,33 +97,24 @@ const ListSmartAccount = ({ route }) => {
         headerAniStyle={styles.headerAniStyle}
       >
         <View style={styles.wrapContent}>
-          {data.map((item) => {
+          {data.map((item, index) => {
             return (
-              <SmartAccountItem
-                gotoSmartAccountDetail={gotoSmartAccountDetail}
-                item={item}
-                onShowMenuMore={onShowMenuMore}
-              />
+              <TouchableOpacity key={index}>
+                <SmartAccountItem
+                  gotoSmartAccountDetail={gotoSmartAccountDetail}
+                  item={item}
+                  onShowMenuMore={onShowMenuMore}
+                />
+              </TouchableOpacity>
             );
           })}
         </View>
-        <AlertAction
-          visible={stateAlertRemove.visible && !lockShowing}
-          hideModal={hideAlertAction}
-          title={stateAlertRemove.title}
-          message={stateAlertRemove.message}
-          leftButtonTitle={stateAlertRemove.leftButton}
-          leftButtonClick={hideAlertAction}
-          rightButtonTitle={stateAlertRemove.rightButton}
-          rightButtonClick={deleteSmartAccount}
-        />
         <MenuActionMore
           isVisible={showingPopover}
           hideMore={hidePopover}
           listMenuItem={listMenuItem}
           childRef={childRef}
           onItemClick={onItemClick}
-          hideComplete={releaseLockShowing}
         />
       </WrapHeaderScrollable>
     </View>

package/src/screens/Unit/SmartAccountItem.js

@@ -23,6 +23,7 @@ export const SmartAccountItem = memo(
         <TouchableOpacity
           style={styles.wrapText}
           onPress={onPressGotoSmartAccountDetail}
+          testID={TESTID.SMART_ACCOUNT_ITEM}
         >
           <FImage
             source={{ uri: item?.logo }}
@@ -39,7 +40,7 @@ export const SmartAccountItem = memo(
           </View>
         </TouchableOpacity>
         <TouchableOpacity
-          testID={TESTID.ITEM_QUICK_ACTION_PRESS}
+          testID={TESTID.SMART_ACCOUNT_ITEM_PRESSMORE}
           onPress={onPressMore}
           ref={buttonMoreRef}
         >

package/src/screens/Unit/SmartAccountStyles.js

@@ -26,7 +26,6 @@ export default StyleSheet.create({
   },
   wrapText: {
     flexDirection: 'row',
-    alignItems: 'space-around',
   },
   icon: {
     width: 48,

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import ChooseLocation from '../ChooseLocation';
+import axios from 'axios';
+import { API, SCConfig } from '../../../configs';
+import BottomButtonView from '../../../commons/BottomButtonView';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ChooseLocation route={route} />
+  </SCProvider>
+);
+
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('react-native-maps', () => {
+  const { forwardRef } = require('react');
+  const { View } = require('react-native');
+  const MockMapView = forwardRef((props, ref) => (
+    <View refs={ref}>{props.children}</View>
+  ));
+  return {
+    __esModule: true,
+    default: MockMapView,
+    PROVIDER_GOOGLE: 'google',
+  };
+});
+
+jest.mock('axios');
+
+describe('Test ChooseLocation', () => {
+  let tree;
+  let route;
+  const mockSetAddress = jest.fn();
+  const mockSetLocation = jest.fn();
+
+  beforeAll(() => {
+    axios.get.mockClear();
+    route = {
+      params: {
+        location: {
+          latitude: 10,
+          longitude: 10,
+        },
+        setAddress: mockSetAddress,
+        setLocation: mockSetLocation,
+      },
+    };
+  });
+
+  test('test done choose location', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonBottom = instance.findByType(BottomButtonView);
+
+    const response = {
+      status: 200,
+      data: {
+        results: [
+          {
+            formatted_address: 'address',
+            geometry: {
+              location: {
+                lat: 20,
+                lng: 20,
+              },
+            },
+          },
+        ],
+      },
+    };
+    axios.get.mockImplementation(async () => response);
+    await act(async () => {
+      await buttonBottom.props.onPressMain();
+    });
+    expect(axios.get).toBeCalledWith(
+      API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
+      {
+        params: {
+          latlng: '10,10',
+          key: SCConfig.GOOGLE_MAP_API_KEY,
+        },
+      }
+    );
+    expect(mockSetAddress).toBeCalledWith('address');
+    expect(mockSetLocation).toBeCalledWith({
+      description: 'address',
+      latitude: 20,
+      longitude: 20,
+    });
+    expect(mockGoBack).toBeCalled();
+  });
+});

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

@@ -3,7 +3,6 @@ import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
 import { ToastBottomHelper } from '../../../utils/Utils';
-import API from '../../../configs/API';
 import { TESTID } from '../../../configs/Constants';
 
 import ManageUnit from '../ManageUnit';
@@ -131,7 +130,6 @@ describe('Test Manage Unit', () => {
   });
 
   test('remove Unit success', async () => {
-    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
     await act(async () => {
       tree = create(wrapComponent(route));
     });
@@ -165,11 +163,7 @@ describe('Test Manage Unit', () => {
       await bottomButton.props.onPress();
     });
 
-    expect(axios.delete).toBeCalledWith(API.UNIT.MANAGE_UNIT(1));
     expect(mockedDispatch).not.toBeCalled();
-    expect(spyToast).toBeCalled();
-    spyToast.mockReset();
-    spyToast.mockRestore();
   });
 
   test('rename Unit sucess', async () => {

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SelectAddress from '../SelectAddress';
+import SearchBarLocation from '../../../commons/SearchLocation';
+import RowLocation from '../../../commons/SearchLocation/RowLocation';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import axios from 'axios';
+import { API, SCConfig } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectAddress route={route} />
+  </SCProvider>
+);
+
+const mockNavigate = jest.fn();
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('react-native-maps', () => {
+  const { forwardRef } = require('react');
+  const { View } = require('react-native');
+  const MockMapView = forwardRef((props, ref) => (
+    <View refs={ref}>{props.children}</View>
+  ));
+  const MockMarker = (props) => <View>{props.children}</View>;
+  const MockCircle = (props) => <View>{props.children}</View>;
+  return {
+    __esModule: true,
+    default: MockMapView,
+    Marker: MockMarker,
+    Circle: MockCircle,
+    PROVIDER_GOOGLE: 'google',
+  };
+});
+
+jest.mock('@react-native-community/geolocation', () => {
+  const position = {
+    coords: {
+      latitude: 100,
+      longitude: 100,
+    },
+  };
+  return {
+    getCurrentPosition: (onSuccess, onError, options) => {
+      onSuccess(position);
+    },
+  };
+});
+
+jest.mock('axios');
+
+describe('Test SelectAddress', () => {
+  let tree;
+  let route;
+  const mockUpdateLocation = jest.fn();
+
+  beforeAll(() => {
+    axios.get.mockClear();
+    route = {
+      params: {
+        updateLocation: mockUpdateLocation,
+      },
+    };
+  });
+
+  test('test search location', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const searchBars = instance.findAllByType(SearchBarLocation);
+    expect(searchBars).toHaveLength(1);
+
+    let response = {
+      status: 200,
+      data: {
+        predictions: [
+          { place_id: 1, description: '1' },
+          { place_id: 2, description: '2' },
+          { place_id: 3, description: '3' },
+        ],
+      },
+    };
+    axios.get.mockImplementation(async () => response);
+
+    await act(async () => {
+      await searchBars[0].props.onTextInput('');
+    });
+    let rowLocations = instance.findAllByType(RowLocation);
+    expect(rowLocations).toHaveLength(0);
+
+    await act(async () => {
+      await searchBars[0].props.onTextInput('input');
+    });
+    expect(axios.get).toBeCalledWith(API.EXTERNAL.GOOGLE_MAP.AUTO_COMPLETE, {
+      params: {
+        input: 'input',
+        key: SCConfig.GOOGLE_MAP_API_KEY,
+        sessiontoken: 123456324,
+        strictBounds: false,
+        types: ['establishment'],
+      },
+    });
+    rowLocations = instance.findAllByType(RowLocation);
+    expect(rowLocations).toHaveLength(3);
+
+    axios.get.mockClear();
+    response = {
+      status: 200,
+      data: {
+        result: {
+          geometry: {
+            location: {
+              lat: 10,
+              lng: 10,
+            },
+          },
+        },
+      },
+    };
+    axios.get.mockImplementation(async () => response);
+
+    await act(async () => {
+      await rowLocations[0].props.onPress({ place_id: 1, description: '1' });
+    });
+    expect(axios.get).toBeCalledWith(
+      API.EXTERNAL.GOOGLE_MAP.GET_LAT_LNG_BY_PLACE_ID,
+      {
+        params: {
+          place_id: 1,
+          key: SCConfig.GOOGLE_MAP_API_KEY,
+        },
+      }
+    );
+
+    const bottomButton = instance.findByType(BottomButtonView);
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mockUpdateLocation).toBeCalledWith('1');
+    expect(mockGoBack).toBeCalled();
+  });
+
+  test('test get current location', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+    );
+
+    const response = {
+      status: 200,
+      data: {
+        results: [
+          {
+            formatted_address: 'address',
+            geometry: {
+              location: {
+                lat: 10,
+                lng: 10,
+              },
+            },
+          },
+        ],
+      },
+    };
+    axios.get.mockImplementation(async () => response);
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(axios.get).toBeCalledWith(
+      API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
+      {
+        params: {
+          latlng: '100,100',
+          key: SCConfig.GOOGLE_MAP_API_KEY,
+        },
+      }
+    );
+  });
+
+  test('test choose on map', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_CHOOSE_ON_MAP
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(mockNavigate).toBeCalled();
+  });
+});

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

@@ -6,6 +6,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ListSmartAccount from '../SmartAccount';
 import { SmartAccountItem } from '../SmartAccountItem';
+import { MenuActionMore } from '../../../commons';
 
 const wrapComponent = (route, navigation) => (
   <SCProvider initState={mockSCStore({})}>
@@ -13,6 +14,17 @@ const wrapComponent = (route, navigation) => (
   </SCProvider>
 );
 
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
 jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
@@ -55,4 +67,16 @@ describe('Test SmartAccount', () => {
     const smartAccountItem = instance.findAllByType(SmartAccountItem);
     expect(smartAccountItem.length).toEqual(3);
   });
+
+  test('test render SmartAccountItem', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const menuActionMore = instance.findByType(MenuActionMore);
+    await act(async () => {
+      menuActionMore.props.onItemClick();
+    });
+    expect(menuActionMore.props.isVisible).toEqual(false);
+  });
 });

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { SmartAccountItem } from '../SmartAccountItem';
+import { TouchableOpacity } from 'react-native';
+import { TESTID } from '../../../configs/Constants';
+
+const mockedOnShowMenuMore = jest.fn();
+const mockedGotoSmartAccountDetail = jest.fn();
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SmartAccountItem
+      onShowMenuMore={mockedOnShowMenuMore}
+      gotoSmartAccountDetail={mockedGotoSmartAccountDetail}
+    />
+  </SCProvider>
+);
+
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('axios');
+describe('Test SmartAccountItem', () => {
+  let tree;
+  test('test render SmartAccountItem', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const onPressGotoSmartAccountDetail = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_ACCOUNT_ITEM &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      onPressGotoSmartAccountDetail.props.onPress();
+    });
+
+    expect(mockedGotoSmartAccountDetail).toHaveBeenCalled();
+
+    const onPressMore = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_ACCOUNT_ITEM_PRESSMORE &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      onPressMore.props.onPress();
+    });
+    expect(mockedOnShowMenuMore).toHaveBeenCalled();
+  });
+});