@eohjsc/react-native-smart-city 0.3.48 → 0.3.49

package/src/screens/Gateway/GatewayDetail/__test__/index.test.js

@@ -0,0 +1,298 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import GatewayDetail from '..';
+import { useRoute } from '@react-navigation/native';
+import { HeaderCustom } from '../../../../commons';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import Routes from '../../../../utils/Route';
+import TabPaneCT from '../../components/TabPaneCT';
+import MenuActionMore from '../../../../commons/MenuActionMore';
+import { Alert } from 'react-native';
+import Toast from 'react-native-toast-message';
+import SegmentedControl from '@react-native-community/segmented-control';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+import { DEVICE_TYPE } from '../../../../configs/Constants';
+import Detail from '../../components/Detail';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <GatewayDetail />
+  </SCProvider>
+);
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+  return Object.setPrototypeOf(
+    {
+      Alert: {
+        ...RN.Alert,
+        alert: jest.fn(),
+      },
+    },
+    RN
+  );
+});
+
+const mockPop = jest.fn();
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      pop: mockPop,
+    }),
+    useRoute: jest.fn(),
+    useIsFocused: () => true,
+  };
+});
+
+const headerCustomOnPressMore = async (instance) => {
+  const headerCustom = instance?.findAllByType(HeaderCustom);
+  const buttonMore = headerCustom[0].findByProps({
+    accessibilityLabel: AccessibilityLabel.MENU_POPPER_MORE,
+  });
+  await act(async () => {
+    buttonMore.props.onPress();
+  });
+};
+
+describe('Test GatewayDetail', () => {
+  let tree;
+  beforeEach(() => {
+    useRoute.mockReturnValue({
+      params: {
+        item: {
+          id: 1,
+          modbus_gateway: 1,
+          zigbee_gateway: 1,
+        },
+      },
+    });
+  });
+  afterEach(() => {
+    mock.reset();
+    mock.resetHistory();
+    mockNavigate.mockClear();
+    Toast.show.mockClear();
+  });
+
+  it('test render GatewayDetail', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const headerCustom = detail.findAllByType(HeaderCustom);
+    const tabPaneCT = detail.findAllByType(TabPaneCT);
+    const menuActionMore = detail.findAllByType(MenuActionMore);
+
+    expect(headerCustom).toHaveLength(1);
+    expect(tabPaneCT).toHaveLength(1);
+    expect(menuActionMore).toHaveLength(1);
+  });
+
+  it('test render GatewayDetail onPress more and onPress gateway info', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    headerCustomOnPressMore(detail);
+    const menuActionMore = detail?.findAllByType(MenuActionMore);
+    expect(menuActionMore[0].props.isVisible).toEqual(true);
+    await act(async () => {
+      menuActionMore[0].props.listMenuItem[0].doAction();
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.GatewayInfo, {
+      chipId: 1,
+    });
+  });
+
+  it('test render GatewayDetail onPress more and onPress reboot', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    headerCustomOnPressMore(detail);
+    const menuActionMore = detail?.findAllByType(MenuActionMore);
+    expect(menuActionMore[0].props.isVisible).toEqual(true);
+    await act(async () => {
+      menuActionMore[0].props.listMenuItem[1].doAction();
+    });
+    expect(Alert.alert).toHaveBeenCalled();
+  });
+
+  it('test render GatewayDetail onPress more and onPress Delete', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    headerCustomOnPressMore(detail);
+    const menuActionMore = detail?.findByType(MenuActionMore);
+    expect(menuActionMore.props.isVisible).toEqual(true);
+    await act(async () => {
+      menuActionMore.props.listMenuItem[2].doAction();
+    });
+    expect(Alert.alert.mock.calls[1][0]).toEqual(
+      'Are you sure you want to delete gateway "undefined" ?'
+    );
+    mock.onDelete(API.DEV_MODE.GATEWAY.DETAIL(1)).reply(200);
+    await act(async () => {
+      await Alert.alert.mock.calls[1][2][1].onPress();
+    });
+    expect(mockPop).toBeCalledWith(1);
+    expect(Toast.show).toBeCalledWith({
+      position: 'bottom',
+      text1: 'Delete successfully!',
+      text2: undefined,
+      type: 'success',
+      visibilityTime: 1000,
+    });
+  });
+
+  it('test render GatewayDetail onPress TabPanel zigbee', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.DEVICE(1))
+      .reply(200, [{ id: 1, name: 'device 1' }]);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 0 },
+      });
+    });
+    expect(tabPaneCT.props.listTabs[0].data).toEqual([
+      { id: 1, name: 'device 1' },
+    ]);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(DEVICE_TYPE.ZIGBEE);
+  });
+
+  it('test render GatewayDetail onPress TabPanel modbus', async () => {
+    mock
+      .onGet(API.DEV_MODE.MODBUS.DEVICE(1))
+      .reply(200, [{ id: 1, name: 'device 1' }]);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 1 },
+      });
+    });
+    expect(tabPaneCT.props.listTabs[1].data).toEqual([
+      { id: 1, name: 'device 1' },
+    ]);
+    expect(tabPaneCT.props.listTabs[1].title).toEqual(DEVICE_TYPE.MODBUS);
+  });
+
+  it('test render GatewayDetail onPress TabPanel zigbee onPressRow', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.DEVICE(1))
+      .reply(200, [{ id: 1, name: 'device 1' }]);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.DeviceZigbeeDetail, {
+      device: 1,
+      gatewayId: 1,
+      isModbus: false,
+      isZigbee: true,
+    });
+  });
+
+  it('test render GatewayDetail onPress TabPanel modbus onPressRow', async () => {
+    mock
+      .onGet(API.DEV_MODE.MODBUS.DEVICE(1))
+      .reply(200, [{ id: 1, name: 'device 1' }]);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 1 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.DeviceModbusDetail, {
+      device: 1,
+      gatewayId: 1,
+      isModbus: true,
+      isZigbee: false,
+    });
+  });
+
+  it('test render GatewayDetail onPress TabPanel error onPressRow', async () => {
+    mock
+      .onGet(API.DEV_MODE.MODBUS.DEVICE(1))
+      .reply(200, [{ id: 1, name: 'device 1' }]);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: -1 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith('', {
+      device: 1,
+      gatewayId: null,
+      isModbus: false,
+      isZigbee: false,
+    });
+  });
+
+  it('test render GatewayDetail onPress TabPanel modbus onRefresh', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.DEVICE(1))
+      .reply(200, [{ id: 1, name: 'device 1' }]);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    await act(async () => {
+      await detail.props.onRefresh();
+    });
+    expect(tabPaneCT.props.listTabs[0].data).toEqual([
+      { id: 1, name: 'device 1' },
+    ]);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(DEVICE_TYPE.ZIGBEE);
+  });
+});

package/src/screens/Gateway/GatewayDetail/index.js

@@ -0,0 +1,148 @@
+import React, { memo, useMemo, useEffect, useCallback } from 'react';
+import { View, Alert } from 'react-native';
+import t from '../../../hooks/Common/useTranslations';
+import {
+  useRoute,
+  useNavigation,
+  useIsFocused,
+} from '@react-navigation/native';
+
+import { useGateway } from '../hooks/useGateway';
+import Routes from '../../../utils/Route';
+import { DEVICE_TYPE } from '../../../configs/Constants';
+import Detail from '../components/Detail';
+import styles from './styles';
+
+const GatewayDetail = () => {
+  const { params = {} } = useRoute();
+  const { item = {} } = params;
+  const { navigate } = useNavigation();
+  const isFocused = useIsFocused();
+
+  const {
+    selectedIndex,
+    setSelectedIndex,
+    fetchDevicesGateway,
+    deleteGatewayDetail,
+    setRefresh,
+    refresh,
+    gatewayDevices,
+  } = useGateway();
+
+  const listTabs = useMemo(
+    () => [
+      {
+        id: 1,
+        title: DEVICE_TYPE.ZIGBEE,
+        data: gatewayDevices?.zigbee,
+      },
+      {
+        id: 2,
+        title: DEVICE_TYPE.MODBUS,
+        data: gatewayDevices?.modbus,
+      },
+    ],
+    [gatewayDevices?.modbus, gatewayDevices?.zigbee]
+  );
+
+  const listMenuItem = useMemo(() => {
+    const RouteGatewayInformation = {
+      id: 1,
+      text: t('gateway_information'),
+      doAction: () =>
+        navigate(Routes.GatewayInfo, {
+          chipId: item?.id,
+          gatewayName: item?.name,
+        }),
+    };
+    const RouteRebootGateway = {
+      id: 2,
+      text: t('reboot'),
+      textStyle: styles.textColorRed,
+      doAction: () => Alert.alert(t('feature_under_development')),
+    };
+    const ListDeleteGateway = {
+      id: 3,
+      text: t('delete'),
+      textStyle: styles.textColorRed,
+      doAction: () =>
+        Alert.alert(t('message_delete_gateway', { name: item?.name }), '', [
+          {
+            text: t('cancel'),
+          },
+          {
+            text: t('ok'),
+            onPress: () => deleteGatewayDetail(item?.id),
+            style: 'destructive',
+          },
+        ]),
+    };
+    return [RouteGatewayInformation, RouteRebootGateway, ListDeleteGateway];
+  }, [deleteGatewayDetail, item?.id, item?.name, navigate]);
+
+  const isModbus = useMemo(() => {
+    return listTabs[selectedIndex]?.title === DEVICE_TYPE.MODBUS;
+  }, [listTabs, selectedIndex]);
+
+  const isZigbee = useMemo(() => {
+    return listTabs[selectedIndex]?.title === DEVICE_TYPE.ZIGBEE;
+  }, [listTabs, selectedIndex]);
+
+  const gatewayId = useMemo(() => {
+    return isModbus
+      ? item?.modbus_gateway
+      : isZigbee
+      ? item?.zigbee_gateway
+      : null;
+  }, [isModbus, isZigbee, item?.modbus_gateway, item?.zigbee_gateway]);
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchDevicesGateway(gatewayId, isModbus, isZigbee);
+    }
+  }, [fetchDevicesGateway, gatewayId, isModbus, isZigbee, isFocused]);
+
+  const onPressRow = useCallback(
+    (device) => {
+      navigate(
+        (isZigbee && Routes.DeviceZigbeeDetail) ||
+          (isModbus && Routes.DeviceModbusDetail) ||
+          '',
+        {
+          device: device,
+          gatewayId,
+          isZigbee,
+          isModbus,
+        }
+      );
+    },
+    [isModbus, isZigbee, gatewayId, navigate]
+  );
+
+  const title = useMemo(() => {
+    return item?.name || '';
+  }, [item?.name]);
+
+  const onRefresh = useCallback(() => {
+    setRefresh(true);
+    fetchDevicesGateway(gatewayId, isModbus, isZigbee);
+    setRefresh(false);
+  }, [fetchDevicesGateway, isModbus, isZigbee, gatewayId, setRefresh]);
+
+  return (
+    <View style={styles.wrap}>
+      <Detail
+        title={title}
+        listMenuItem={listMenuItem}
+        listTabs={listTabs}
+        selectedIndex={selectedIndex}
+        setSelectedIndex={setSelectedIndex}
+        onPressRow={onPressRow}
+        onRefresh={onRefresh}
+        refresh={refresh}
+      />
+    </View>
+  );
+};
+
+export default memo(GatewayDetail);

package/src/screens/Gateway/GatewayDetail/styles.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  textColorRed: {
+    color: Colors.Red,
+  },
+});

package/src/screens/Gateway/GatewayInfo/__test__/index.test.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { FlatList, Alert } from 'react-native';
+import MockAdapter from 'axios-mock-adapter';
+import { useRoute } from '@react-navigation/native';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { HeaderCustom, Text } from '../../../../commons';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import API from '../../../../configs/API';
+import Routes from '../../../../utils/Route';
+import api from '../../../../utils/Apis/axios';
+import GatewayInfo from '..';
+import t from '../../../../hooks/Common/useTranslations';
+
+const mockPop = jest.fn();
+const mock = new MockAdapter(api.axiosInstance);
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <GatewayInfo />
+  </SCProvider>
+);
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+  return Object.setPrototypeOf(
+    {
+      Alert: {
+        ...RN.Alert,
+        alert: jest.fn(),
+      },
+    },
+    RN
+  );
+});
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      pop: mockPop,
+    }),
+    useIsFocused: () => true,
+    useRoute: jest.fn(),
+  };
+});
+
+const buttonConnect = (instance) => {
+  return instance?.findByProps({
+    accessibilityLabel:
+      AccessibilityLabel.GATEWAY_INFO_BUTTON_GOTO_CONNECTION_METHODS,
+  });
+};
+const buttonDelete = (instance) => {
+  return instance?.findByProps({
+    accessibilityLabel: AccessibilityLabel.GATEWAY_INFO_BUTTON_DELETE_GATEWAY,
+  });
+};
+
+describe('Test GatewayInfo', () => {
+  let tree;
+  beforeEach(() => {
+    useRoute.mockReturnValue({
+      params: {
+        chipId: 1,
+      },
+    });
+    mockNavigate.mockClear();
+  });
+
+  it('test render GatewayInfo', async () => {
+    useRoute.mockReturnValue({
+      params: { chipId: 1 },
+    });
+    mock
+      .onGet(API.DEV_MODE.GATEWAY.DETAIL(1))
+      .reply(200, { results: [{ id: 1, name: 'device 1' }] });
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const headerCustom = instance.findAllByType(HeaderCustom);
+    const alert = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.GATEWAY_INFO_ALERT,
+    });
+    const flatList = instance.findAllByType(FlatList);
+    const btnConnect = buttonConnect(instance);
+    const btnDelete = buttonDelete(instance);
+    expect(headerCustom).toHaveLength(1);
+    expect(alert.props.children[1].props.children).toEqual(
+      t('go_to_eoh_web_to_see_firmware')
+    );
+    expect(flatList).toHaveLength(1);
+    const textConnect = btnConnect.findAllByType(Text);
+    expect(textConnect[0].props.children).toEqual(t('connection_methods'));
+    const textDelete = btnDelete.findAllByType(Text);
+    expect(textDelete[0].props.children).toEqual(t('delete_gateway'));
+  });
+
+  it('test render GatewayInfo onPress method connect', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const btnConnect = buttonConnect(instance);
+    await act(async () => {
+      btnConnect.props.onPress();
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.GatewayConnectionMethods);
+  });
+
+  it('test render GatewayInfo onPress delete gateway', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const btnDelete = buttonDelete(instance);
+    await act(async () => {
+      await btnDelete.props.onPress();
+    });
+    expect(Alert.alert.mock.calls[0][0]).toEqual(
+      t('message_delete_gateway', { name: '' })
+    );
+    expect(Alert.alert.mock.calls[0][2][1].text).toEqual('OK');
+    mock
+      .onDelete(API.DEV_MODE.GATEWAY.DETAIL(1))
+      .reply(200, { results: [{ id: 1, name: 'device 1' }] });
+    await act(async () => {
+      await Alert.alert.mock.calls[0][2][1].onPress();
+    });
+    expect(mockPop).toBeCalledWith(2);
+  });
+});

package/src/screens/Gateway/GatewayInfo/index.js

@@ -0,0 +1,115 @@
+import React, { memo, useMemo, useEffect, useCallback } from 'react';
+import { View, Alert } from 'react-native';
+import {
+  useIsFocused,
+  useRoute,
+  useNavigation,
+} from '@react-navigation/native';
+
+import Routes from '../../../utils/Route';
+import Information from '../components/Information';
+import t from '../../../hooks/Common/useTranslations';
+import styles from './styles';
+import { useGateway } from '../hooks/useGateway';
+
+const GatewayInfo = () => {
+  const { params = {} } = useRoute();
+  const isFocused = useIsFocused();
+  const { navigate } = useNavigation();
+  const { chipId = undefined, gatewayName = '' } = params;
+
+  const { fetchDataDetailGateway, gatewayDetail, deleteGatewayDetail } =
+    useGateway();
+
+  const {
+    connection_time = '',
+    wifi_ssid = '',
+    id,
+    date_active = '',
+    expired_at = '',
+  } = gatewayDetail || {};
+
+  const gatewayInformation = useMemo(
+    () => [
+      {
+        id: 1,
+        title: 'system',
+        data: '--',
+      },
+      {
+        id: 2,
+        title: 'connection_time',
+        data: connection_time,
+      },
+      {
+        id: 3,
+        title: 'wifi',
+        data: wifi_ssid || '--',
+      },
+      {
+        id: 4,
+        title: 'device_id',
+        data: id || '--',
+      },
+      {
+        id: 5,
+        title: 'auth_token',
+        data: 'sdfjkhsakdjfaskdjfkalsdsfjghsdklf',
+      },
+      {
+        id: 7,
+        title: 'activate_date',
+        data: date_active || '--',
+      },
+      {
+        id: 8,
+        title: 'warranty_expiration_date',
+        data: expired_at || '--',
+      },
+      {
+        id: 9,
+        title: 'firmware_version',
+        data: '--',
+      },
+    ],
+    [connection_time, date_active, expired_at, id, wifi_ssid]
+  );
+
+  const handleDeleteGateway = useCallback(() => {
+    return Alert.alert(
+      t('message_delete_gateway', { name: gatewayName || '' }),
+      '',
+      [
+        {
+          text: t('cancel'),
+        },
+        {
+          text: t('ok'),
+          onPress: () => deleteGatewayDetail(chipId, 2),
+          style: 'destructive',
+        },
+      ]
+    );
+  }, [chipId, deleteGatewayDetail, gatewayName]);
+
+  const handleConnectionMethods = useCallback(() => {
+    navigate(Routes.GatewayConnectionMethods);
+  }, [navigate]);
+
+  useEffect(() => {
+    isFocused && fetchDataDetailGateway(chipId);
+  }, [isFocused, fetchDataDetailGateway, chipId]);
+
+  return (
+    <View style={styles.wrap}>
+      <Information
+        data={gatewayDetail}
+        listInformation={gatewayInformation}
+        handleDeleteGateway={handleDeleteGateway}
+        handleConnectionMethods={handleConnectionMethods}
+      />
+    </View>
+  );
+};
+
+export default memo(GatewayInfo);