@eohjsc/react-native-smart-city 0.2.57 → 0.2.61

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__/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/components/MyUnitDevice/index.js

@@ -1,16 +1,32 @@
-import React, { useState } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { Image, StyleSheet, View, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
 import ItemQuickAction from '../../../../commons/Action/ItemQuickAction';
 import Text from '../../../../commons/Text';
+import Routes from '../../../../utils/Route';
 
 import { Colors, Images } from '../../../../configs';
 
-const MyUnitDevice = ({ sensor }) => {
+const MyUnitDevice = ({ sensor, unit }) => {
   const [status, setStatus] = useState(sensor.status);
+  const { navigate } = useNavigation();
+
+  const goToSensorDisplay = useCallback(() => {
+    navigate(Routes.UnitStack, {
+      screen: Routes.DeviceDetail,
+      params: {
+        unit,
+        sensor,
+        title: sensor?.name,
+        station: sensor?.station,
+      },
+    });
+  }, [navigate, sensor, unit]);
 
   return (
     <View style={styles.item}>
-      <View style={styles.rowCenter}>
+      <TouchableOpacity style={styles.rowCenter} onPress={goToSensorDisplay}>
         <Image style={styles.image} source={Images.mainDoor} />
         <View style={styles.marginTop3}>
           <Text semibold style={styles.nameDevice}>
@@ -23,7 +39,7 @@ const MyUnitDevice = ({ sensor }) => {
             </Text>
           </View>
         </View>
-      </View>
+      </TouchableOpacity>
       <ItemQuickAction
         sensor={sensor}
         wrapperStyle={styles.iconCircle}

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

@@ -12,7 +12,7 @@ import HistoryChart from '../../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../../utils/Apis/axios';
 import { TESTID } from '../../../../configs/Constants';
 
-const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
+const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
   const t = useTranslations();
   const {
     volt1Value,
@@ -133,8 +133,59 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
     return !!listConfigs;
   }, [listConfigs]);
 
-  const listIdsConfig = useMemo(() => {
-    return listConfigs;
+  const configs = useMemo(() => {
+    return [
+      {
+        id: listConfigs?.volt_1,
+        title: 'Volt 1',
+        color: Colors.Red6,
+      },
+      {
+        id: listConfigs?.volt_2,
+        title: 'Volt 2',
+        color: Colors.Red8,
+      },
+      {
+        id: listConfigs?.volt_3,
+        title: 'Volt 3',
+        color: Colors.Red9,
+      },
+      {
+        id: listConfigs?.current_1,
+        title: 'Current 1',
+        color: Colors.Blue10,
+      },
+      {
+        id: listConfigs?.current_2,
+        title: 'Current 2',
+        color: Colors.Blue11,
+      },
+      {
+        id: listConfigs?.current_3,
+        title: 'Current 3',
+        color: Colors.Blue12,
+      },
+      {
+        id: listConfigs?.active_power,
+        title: 'Active Power',
+        color: Colors.Orange6,
+      },
+      {
+        id: listConfigs?.power_factor_1,
+        title: 'Power Factor 1',
+        color: Colors.Green6,
+      },
+      {
+        id: listConfigs?.power_factor_2,
+        title: 'Power Factor 2',
+        color: Colors.Green9,
+      },
+      {
+        id: listConfigs?.power_factor_3,
+        title: 'Power Factor 3',
+        color: Colors.Green10,
+      },
+    ];
   }, [listConfigs]);
 
   const [startDate, setStartDate] = useState(
@@ -168,7 +219,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
     if (listConfigs?.total_power) {
       fetchData();
     }
-  }, [startDate, endDate, listConfigs, groupBy]);
+  }, [startDate, endDate, listConfigs?.total_power, groupBy]);
   return (
     <>
       <Section type={'border'}>
@@ -180,60 +231,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
         />
         {showBoxHistory && (
           <View>
-            <ConfigHistoryChart
-              configs={[
-                {
-                  id: listIdsConfig.volt_1,
-                  title: 'Volt 1',
-                  color: Colors.Red6,
-                },
-                {
-                  id: listIdsConfig.volt_2,
-                  title: 'Volt 2',
-                  color: Colors.Red8,
-                },
-                {
-                  id: listIdsConfig.volt_3,
-                  title: 'Volt 3',
-                  color: Colors.Red9,
-                },
-                {
-                  id: listIdsConfig.current_1,
-                  title: 'Current 1',
-                  color: Colors.Blue10,
-                },
-                {
-                  id: listIdsConfig.current_2,
-                  title: 'Current 2',
-                  color: Colors.Blue11,
-                },
-                {
-                  id: listIdsConfig.current_3,
-                  title: 'Current 3',
-                  color: Colors.Blue12,
-                },
-                {
-                  id: listIdsConfig.active_power,
-                  title: 'Active Power',
-                  color: Colors.Orange6,
-                },
-                {
-                  id: listIdsConfig.power_factor_1,
-                  title: 'Power Factor 1',
-                  color: Colors.Green6,
-                },
-                {
-                  id: listIdsConfig.power_factor_2,
-                  title: 'Power Factor 2',
-                  color: Colors.Green9,
-                },
-                {
-                  id: listIdsConfig.power_factor_3,
-                  title: 'Power Factor 3',
-                  color: Colors.Green10,
-                },
-              ]}
-            />
+            <ConfigHistoryChart configs={configs} />
           </View>
         )}
       </Section>

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

@@ -108,7 +108,29 @@ const PowerConsumption = memo(({ summaryDetail }) => {
     if (listConfigs?.total_power) {
       fetchData();
     }
-  }, [startDate, endDate, listConfigs, groupBy]);
+  }, [startDate, endDate, listConfigs?.total_power, groupBy]);
+
+  const configs = useMemo(() => {
+    return [
+      { id: listIdsConfig?.volt, title: 'Volt', color: 'red' },
+      {
+        id: listIdsConfig?.current,
+        title: 'Current',
+        color: 'blue',
+      },
+      {
+        id: listIdsConfig?.active_power,
+        title: 'Active Power',
+        color: 'orange',
+      },
+      {
+        id: listIdsConfig?.power_factor,
+        title: 'Power Factor',
+        color: 'green',
+      },
+    ];
+  }, [listIdsConfig]);
+
   return (
     <>
       <Section type={'border'}>
@@ -120,26 +142,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
         />
         {showBoxHistory && (
           <View>
-            <ConfigHistoryChart
-              configs={[
-                { id: listIdsConfig.volt, title: 'Volt', color: 'red' },
-                {
-                  id: listIdsConfig.active_power,
-                  title: 'Current',
-                  color: 'blue',
-                },
-                {
-                  id: listIdsConfig.current,
-                  title: 'Active Power',
-                  color: 'orange',
-                },
-                {
-                  id: listIdsConfig.power_factor,
-                  title: 'Power Factor',
-                  color: 'green',
-                },
-              ]}
-            />
+            <ConfigHistoryChart configs={configs} />
           </View>
         )}
       </Section>
@@ -160,6 +163,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
             endDate={endDate}
             setEndDate={setEndDate}
             setStartDate={setStartDate}
+            groupBy={groupBy}
             setGroupBy={setGroupBy}
             configuration={{
               type: 'horizontal_bar_chart',

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

@@ -56,6 +56,20 @@ const Temperature = memo(({ summaryDetail }) => {
     [summaryDetail]
   );
 
+  const configs = useMemo(() => {
+    return [
+      {
+        id: listConfigs?.temp,
+        title: t('text_temperature'),
+        color: Colors.Blue10,
+      },
+      {
+        id: listConfigs?.humi,
+        title: t('text_humidity'),
+        color: Colors.Red6,
+      },
+    ];
+  }, [listConfigs?.humi, listConfigs?.temp, t]);
   return (
     <>
       <Section type={'border'}>
@@ -78,20 +92,7 @@ const Temperature = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              {
-                id: listConfigs.temp,
-                title: t('text_temperature'),
-                color: Colors.Blue10,
-              },
-              {
-                id: listConfigs.humi,
-                title: t('text_humidity'),
-                color: Colors.Red6,
-              },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

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

@@ -22,6 +22,11 @@ const UvIndex = memo(({ summaryDetail }) => {
   } else if (summaryDetail.uv_value > 10) {
     valueRefined = 10;
   }
+
+  const configs = useMemo(() => {
+    return [{ id: uv_id, title: t('text_uv_index'), color: Colors.Blue10 }];
+  }, [t, uv_id]);
+
   return (
     <>
       <Section type={'border'}>
@@ -70,11 +75,7 @@ const UvIndex = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { id: uv_id, title: t('text_uv_index'), color: Colors.Blue10 },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

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

@@ -12,6 +12,14 @@ const WaterQuality = memo(({ summaryDetail }) => {
   const showBoxHistory = useMemo(() => {
     return ph_id || tur_id || clo_id ? true : false;
   }, [ph_id, tur_id, clo_id]);
+
+  const configs = useMemo(() => {
+    return [
+      { id: ph_id, title: 'pH', color: 'red' },
+      { id: tur_id, title: 'Turbidity', color: 'blue' },
+      { id: clo_id, title: 'Chlorine residual', color: 'orange' },
+    ];
+  }, [ph_id, tur_id, clo_id]);
   return (
     <>
       <Section type={'border'}>
@@ -52,13 +60,7 @@ const WaterQuality = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { id: ph_id, title: 'pH', color: 'red' },
-              { id: tur_id, title: 'Turbidity', color: 'blue' },
-              { id: clo_id, title: 'Chlorine residual', color: 'orange' },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>