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

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

@@ -0,0 +1,393 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import DeviceModbusDetail 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 { PERMISSION_TYPE } from '../../../../configs/Constants';
+import Detail from '../../components/Detail';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceModbusDetail />
+  </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 DeviceModbusDetail', () => {
+  let tree;
+  beforeEach(() => {
+    useRoute.mockReturnValue({
+      params: {
+        device: { id: 1, name: 'abc' },
+        gatewayId: 1,
+        isModbus: true,
+      },
+    });
+  });
+  afterEach(() => {
+    mock.reset();
+    mock.resetHistory();
+    mockNavigate.mockClear();
+    Toast.show.mockClear();
+  });
+
+  it('test render DeviceModbusDetail', 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 DeviceModbusDetail onPress more and onPress DeviceGatewayInfo', 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.DeviceGatewayInfo, {
+      device: { id: 1, name: 'abc' },
+      isDevice: true,
+      isModbus: true,
+    });
+  });
+
+  it('test render DeviceZigbeeDetail onPress more and onPress Delete zigbee', 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[1].doAction();
+    });
+    expect(Alert.alert.mock.calls[0][0]).toEqual(
+      'Are you sure you want to delete device "undefined" ?'
+    );
+    mock.onDelete(API.DEV_MODE.ZIGBEE.DEVICE_DETAIL(1, 1)).reply(200);
+    await act(async () => {
+      await Alert.alert.mock.calls[0][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 DeviceZigbeeDetail onPress TabPanel config write', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.REGISTER(1, 1)).reply(200, [
+      { id: 1, func: 1 },
+      { id: 2, func: 6 },
+    ]);
+    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([{ func: 6, id: 2 }]);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(
+      PERMISSION_TYPE.CONFIG_WRITE
+    );
+  });
+
+  it('test render DeviceZigbeeDetail onPress TabPanel config read', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.REGISTER(1, 1)).reply(200, [
+      { id: 1, func: 1 },
+      { id: 2, func: 6 },
+    ]);
+    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([{ func: 1, id: 1 }]);
+    expect(tabPaneCT.props.listTabs[1].title).toEqual(
+      PERMISSION_TYPE.CONFIG_READ
+    );
+  });
+
+  it('test render DeviceZigbeeDetail onPress TabPanel action', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.ACTION(1, 1)).reply(200, [
+      {
+        id: 1,
+        name: 'action 1',
+        items: [{ id: 1, len1: 1, len2: 2, ex: '' }],
+      },
+    ]);
+    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: 2 },
+      });
+    });
+    expect(tabPaneCT.props.listTabs[2].data).toEqual([
+      {
+        id: 1,
+        name: 'action 1',
+        items: [
+          {
+            ex: '',
+            id: 1,
+            len1: 1,
+            len2: 2,
+          },
+        ],
+      },
+    ]);
+    expect(tabPaneCT.props.listTabs[2].title).toEqual(PERMISSION_TYPE.ACTION);
+  });
+
+  it('test render DeviceZigbeeDetail onPress TabPanel config write onPressRow', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.REGISTER(1, 1)).reply(200, [
+      { id: 1, func: 1 },
+      { id: 2, func: 6 },
+    ]);
+    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 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.DetailConfigActionModbus, {
+      gatewayId: 1,
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: false,
+      isConfigRead: false,
+      isConfigWrite: true,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render DeviceZigbeeDetail onPress TabPanel config read onPressRow', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.REGISTER(1, 1)).reply(200, [
+      { id: 1, func: 1 },
+      { id: 2, func: 6 },
+    ]);
+    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.DetailConfigActionModbus, {
+      gatewayId: 1,
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: false,
+      isConfigRead: true,
+      isConfigWrite: false,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render DeviceZigbeeDetail onPress TabPanel action onPressRow', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.ACTION(1, 1)).reply(200, [
+      {
+        id: 1,
+        name: 'action 1',
+        items: [{ id: 1, len1: 1, len2: 2, ex: '' }],
+      },
+    ]);
+    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: 2 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.DetailConfigActionModbus, {
+      gatewayId: 1,
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: true,
+      isConfigRead: false,
+      isConfigWrite: false,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render DeviceZigbeeDetail onPress TabPanel config write onRefresh', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.REGISTER(1, 1)).reply(200, [
+      { id: 1, func: 1 },
+      { id: 2, func: 6 },
+    ]);
+
+    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([{ func: 6, id: 2 }]);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(
+      PERMISSION_TYPE.CONFIG_WRITE
+    );
+  });
+
+  it('test render DeviceZigbeeDetail onPress TabPanel action onRefresh', async () => {
+    mock.onGet(API.DEV_MODE.MODBUS.ACTION(1, 1)).reply(200, [
+      {
+        id: 1,
+        name: 'action 1',
+        items: [{ id: 1, len1: 1, len2: 2, ex: '' }],
+      },
+    ]);
+
+    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: 2 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onRefresh();
+    });
+    expect(tabPaneCT.props.listTabs[2].data).toEqual([
+      {
+        id: 1,
+        items: [
+          {
+            ex: '',
+            id: 1,
+            len1: 1,
+            len2: 2,
+          },
+        ],
+        name: 'action 1',
+      },
+    ]);
+    expect(tabPaneCT.props.listTabs[2].title).toEqual(PERMISSION_TYPE.ACTION);
+  });
+});

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

@@ -0,0 +1,176 @@
+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 { PERMISSION_TYPE } from '../../../configs/Constants';
+import Detail from '../components/Detail';
+import styles from './styles';
+
+const DeviceModbusDetail = () => {
+  const { params = {} } = useRoute();
+  const { device = {}, gatewayId = '', isModbus } = params;
+  const { navigate } = useNavigation();
+  const isFocused = useIsFocused();
+
+  const {
+    selectedIndex,
+    detailDeviceModbus,
+    setSelectedIndex,
+    deleteDeviceDetail,
+    fetchRegistersModbus,
+    fetchActionsModbus,
+    setRefresh,
+    refresh,
+  } = useGateway();
+  const listTabs = useMemo(
+    () => [
+      {
+        id: 1,
+        title: PERMISSION_TYPE.CONFIG_WRITE,
+        data: detailDeviceModbus?.config_write,
+      },
+      {
+        id: 2,
+        title: PERMISSION_TYPE.CONFIG_READ,
+        data: detailDeviceModbus?.config_read,
+      },
+      {
+        id: 3,
+        title: PERMISSION_TYPE.ACTION,
+        data: detailDeviceModbus?.actions,
+      },
+    ],
+    [
+      detailDeviceModbus?.actions,
+      detailDeviceModbus?.config_read,
+      detailDeviceModbus?.config_write,
+    ]
+  );
+
+  const listMenuItem = useMemo(() => {
+    const RouteGatewayInformation = {
+      id: 1,
+      text: t('device_information'),
+      doAction: () =>
+        navigate(Routes.DeviceGatewayInfo, {
+          device,
+          isDevice: true,
+          isModbus,
+        }),
+    };
+    const ListDeleteGateway = {
+      id: 2,
+      text: t('delete_device'),
+      textStyle: styles.textColorRed,
+      doAction: () =>
+        Alert.alert(
+          t('message_delete_device', { name: device?.sensor?.name }),
+          '',
+          [
+            {
+              text: t('cancel'),
+            },
+            {
+              text: t('ok'),
+              onPress: () =>
+                deleteDeviceDetail(gatewayId, device?.id, false, isModbus),
+              style: 'destructive',
+            },
+          ]
+        ),
+    };
+    return [RouteGatewayInformation, ListDeleteGateway];
+  }, [deleteDeviceDetail, gatewayId, isModbus, device, navigate]);
+
+  const isConfigRead = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.CONFIG_READ;
+  }, [listTabs, selectedIndex]);
+
+  const isConfigWrite = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.CONFIG_WRITE;
+  }, [listTabs, selectedIndex]);
+
+  const isAction = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.ACTION;
+  }, [listTabs, selectedIndex]);
+
+  useEffect(() => {
+    if (isFocused) {
+      if (isConfigRead || isConfigWrite) {
+        fetchRegistersModbus(gatewayId, device?.id);
+        return;
+      }
+      if (isAction) {
+        fetchActionsModbus(gatewayId, device?.id);
+        return;
+      }
+    }
+  }, [
+    fetchRegistersModbus,
+    gatewayId,
+    isFocused,
+    device?.id,
+    isConfigRead,
+    isConfigWrite,
+    isAction,
+    fetchActionsModbus,
+  ]);
+
+  const onPressRow = useCallback(
+    (item) => {
+      navigate(Routes.DetailConfigActionModbus, {
+        itemActionConfig: item,
+        gatewayId: gatewayId,
+        device: device,
+        isConfigRead,
+        isConfigWrite,
+        isAction,
+      });
+    },
+    [device, gatewayId, isAction, isConfigRead, isConfigWrite, navigate]
+  );
+
+  const onRefresh = useCallback(() => {
+    setRefresh(true);
+    if (isConfigRead || isConfigWrite) {
+      fetchRegistersModbus(gatewayId, device?.id);
+    }
+    if (isAction) {
+      fetchActionsModbus(gatewayId, device?.id);
+    }
+    setRefresh(false);
+  }, [
+    device?.id,
+    fetchActionsModbus,
+    fetchRegistersModbus,
+    gatewayId,
+    isAction,
+    isConfigRead,
+    isConfigWrite,
+    setRefresh,
+  ]);
+
+  return (
+    <View style={styles.wrap}>
+      <Detail
+        title={device?.sensor?.name || ''}
+        listMenuItem={listMenuItem}
+        listTabs={listTabs}
+        selectedIndex={selectedIndex}
+        setSelectedIndex={setSelectedIndex}
+        isDevice
+        onPressRow={onPressRow}
+        onRefresh={onRefresh}
+        refresh={refresh}
+      />
+    </View>
+  );
+};
+
+export default memo(DeviceModbusDetail);

package/src/screens/Gateway/DeviceModbusDetail/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,
+  },
+});