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

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

@@ -0,0 +1,265 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import DeviceZigbeeDetail 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({})}>
+    <DeviceZigbeeDetail />
+  </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 DeviceZigbeeDetail', () => {
+  let tree;
+  beforeEach(() => {
+    useRoute.mockReturnValue({
+      params: {
+        device: { id: 1, name: 'abc' },
+        gatewayId: 1,
+        isZigbee: true,
+      },
+    });
+  });
+  afterEach(() => {
+    mock.reset();
+    mock.resetHistory();
+    mockNavigate.mockClear();
+    Toast.show.mockClear();
+  });
+
+  it('test render DeviceZigbeeDetail', 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 DeviceZigbeeDetail 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,
+      isZigbee: 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', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.CONFIG_MAP(1, 1))
+      .reply(200, [{ id: 1, name: 'config 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: 'config 1' },
+    ]);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(PERMISSION_TYPE.CONFIG);
+  });
+
+  it('test render GatewayDetail onPress TabPanel isAction', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.ACTION(1, 1))
+      .reply(200, [{ id: 1, name: 'action 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: 'action 1' },
+    ]);
+    expect(tabPaneCT.props.listTabs[1].title).toEqual(PERMISSION_TYPE.ACTION);
+  });
+
+  it('test render GatewayDetail onPress TabPanel config onPressRow', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.CONFIG_MAP(1, 1))
+      .reply(200, [{ id: 1, name: 'config 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.DetailConfigActionZigbee, {
+      gatewayId: 1,
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: false,
+      isConfig: true,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render GatewayDetail onPress TabPanel action onPressRow', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.ACTION(1, 1))
+      .reply(200, [{ id: 1, name: 'action 1 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.DetailConfigActionZigbee, {
+      gatewayId: 1,
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: true,
+      isConfig: false,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render GatewayDetail onPress TabPanel zigbee config onRefresh', async () => {
+    mock
+      .onGet(API.DEV_MODE.ZIGBEE.CONFIG_MAP(1, 1))
+      .reply(200, [{ id: 1, name: 'config 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: 'config 1' },
+    ]);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(PERMISSION_TYPE.CONFIG);
+  });
+});

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

@@ -0,0 +1,148 @@
+import React, { memo, useMemo, useEffect, useCallback } from 'react';
+import { View, Alert } from 'react-native';
+import {
+  useRoute,
+  useNavigation,
+  useIsFocused,
+} from '@react-navigation/native';
+
+import { PERMISSION_TYPE } from '../../../configs/Constants';
+import { useGateway } from '../hooks/useGateway';
+import t from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
+import Detail from '../components/Detail';
+import styles from './styles';
+
+const DeviceZigbeeDetail = () => {
+  const { params = {} } = useRoute();
+  const { device = {}, gatewayId = '', isZigbee } = params;
+  const { navigate } = useNavigation();
+  const isFocused = useIsFocused();
+
+  const {
+    selectedIndex,
+    setSelectedIndex,
+    fetchActionConfigDevice,
+    deleteDeviceDetail,
+    detailDeviceZigbee,
+    setRefresh,
+    refresh,
+  } = useGateway();
+
+  const listTabs = useMemo(
+    () => [
+      {
+        id: 1,
+        title: PERMISSION_TYPE.CONFIG,
+        data: detailDeviceZigbee?.configs,
+      },
+      {
+        id: 2,
+        title: PERMISSION_TYPE.ACTION,
+        data: detailDeviceZigbee?.actions,
+      },
+    ],
+    [detailDeviceZigbee?.actions, detailDeviceZigbee?.configs]
+  );
+
+  const listMenuItem = useMemo(() => {
+    const RouteGatewayInformation = {
+      id: 1,
+      text: t('device_information'),
+      doAction: () =>
+        navigate(Routes.DeviceGatewayInfo, {
+          device,
+          isDevice: true,
+          isZigbee,
+        }),
+    };
+
+    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, isZigbee, false),
+              style: 'destructive',
+            },
+          ]
+        ),
+    };
+    return [RouteGatewayInformation, ListDeleteGateway];
+  }, [deleteDeviceDetail, gatewayId, isZigbee, device, navigate]);
+
+  const isConfig = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.CONFIG;
+  }, [listTabs, selectedIndex]);
+
+  const isAction = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.ACTION;
+  }, [listTabs, selectedIndex]);
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchActionConfigDevice(gatewayId, device?.id, isConfig, isAction);
+    }
+  }, [
+    fetchActionConfigDevice,
+    gatewayId,
+    isAction,
+    isConfig,
+    isFocused,
+    device?.id,
+  ]);
+
+  const onPressRow = useCallback(
+    (item) => {
+      navigate(Routes.DetailConfigActionZigbee, {
+        itemActionConfig: item,
+        gatewayId: gatewayId,
+        device,
+        isConfig,
+        isAction,
+      });
+    },
+    [device, gatewayId, isAction, isConfig, navigate]
+  );
+
+  const onRefresh = useCallback(() => {
+    setRefresh(true);
+    fetchActionConfigDevice(gatewayId, device?.id, isConfig, isAction);
+    setRefresh(false);
+  }, [
+    device?.id,
+    fetchActionConfigDevice,
+    gatewayId,
+    isAction,
+    isConfig,
+    setRefresh,
+  ]);
+
+  return (
+    <View style={styles.wrap}>
+      <Detail
+        title={device?.sensor?.name || ''}
+        listMenuItem={listMenuItem}
+        listTabs={listTabs}
+        selectedIndex={selectedIndex}
+        setSelectedIndex={setSelectedIndex}
+        isDevice
+        onPressRow={onPressRow}
+        refresh={refresh}
+        onRefresh={onRefresh}
+      />
+    </View>
+  );
+};
+
+export default memo(DeviceZigbeeDetail);

package/src/screens/Gateway/DeviceZigbeeDetail/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/GatewayConnectionMethods/__test__/index.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import GatewayConnectionMethods from '..';
+import { HeaderCustom } from '../../../../commons';
+import { FlatList } from 'react-native';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <GatewayConnectionMethods />
+  </SCProvider>
+);
+
+describe('Test GatewayConnectionMethods', () => {
+  let tree;
+
+  it('test render GatewayConnectionMethods', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const headerCustom = instance.findAllByType(HeaderCustom);
+    const text = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.GATEWAY_CONNECTION_METHODS_TEXT,
+    });
+    const flatList = instance.findAllByType(FlatList);
+
+    expect(headerCustom).toHaveLength(1);
+    expect(text.props.children).toEqual(
+      'Visit EoH Web to set up other connection options.'
+    );
+    expect(flatList).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,73 @@
+import React, { useCallback, memo, useMemo } from 'react';
+import { View, FlatList } from 'react-native';
+import { Colors } from '../../../configs';
+import t from '../../../hooks/Common/useTranslations';
+import { Text, HeaderCustom } from '../../../commons';
+import styles from './styles';
+import { AccessibilityLabel } from '../../../configs/Constants';
+
+const GatewayConnectionMethods = () => {
+  const RowConnection = ({ item }) => {
+    return (
+      <View style={styles.wrapRow}>
+        <View style={[styles.rowTitle, item?.baud && styles.noneBorderBottom]}>
+          <Text type="H4">{t(item?.title)}</Text>
+        </View>
+        {item?.baud && (
+          <View style={styles.rowBaud}>
+            <Text type="H4">{t('baud_speed')}</Text>
+            <Text color={Colors.Gray20}>{item?.baud}</Text>
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const gatewayInformation = useMemo(
+    () => [
+      {
+        id: 1,
+        title: 'zigbee_method',
+      },
+      {
+        id: 2,
+        title: 'modbus_method',
+        baud: '9600',
+      },
+    ],
+    []
+  );
+
+  const renderItem = useCallback(({ item, index }) => {
+    return <RowConnection item={item} key={index} />;
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom
+        title={t('connection_methods')}
+        titleStyles={styles.title}
+      />
+      <View style={styles.bodyInfo}>
+        <Text
+          color={Colors.Gray20}
+          accessibilityLabel={
+            AccessibilityLabel.GATEWAY_CONNECTION_METHODS_TEXT
+          }
+        >
+          {t('visit_eoh_web_to_set_up_other_connection')}
+        </Text>
+        <FlatList
+          contentContainerStyle={styles.contentContainerStyle}
+          keyExtractor={(item) => item?.id}
+          data={gatewayInformation}
+          renderItem={renderItem}
+          extraData={gatewayInformation}
+          numColumns={1}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default memo(GatewayConnectionMethods);

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

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  title: {
+    textAlign: 'left',
+    paddingLeft: 16,
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: 'bold',
+    color: Colors.Black,
+  },
+  contentContainerStyle: {
+    paddingVertical: 8,
+  },
+  bodyInfo: { paddingHorizontal: 16, flex: 1 },
+  wrapRow: {
+    marginVertical: 8,
+  },
+  rowTitle: {
+    backgroundColor: Colors.Gray21,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  rowBaud: {
+    padding: 16,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    borderBottomWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderColor: Colors.Gray19,
+    backgroundColor: Colors.White,
+    overflow: 'hidden',
+  },
+  noneBorderBottom: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+});