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

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

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

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

@@ -5,6 +5,24 @@ import Gateway from '..';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../utils/Apis/axios';
+import GatewayItem from '../components/GatewayItem';
+import API from '../../../configs/API';
+import Routes from '../../../utils/Route';
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+    useRoute: jest.fn(),
+    useIsFocused: () => true,
+  };
+});
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -14,6 +32,11 @@ const wrapComponent = (route) => (
 
 describe('Test Gateway screen', () => {
   let tree;
+  afterEach(() => {
+    mock.reset();
+    mock.resetHistory();
+    mockNavigate.mockClear();
+  });
   it('Test render', async () => {
     await act(async () => {
       tree = await create(wrapComponent());
@@ -27,6 +50,41 @@ describe('Test Gateway screen', () => {
     expect(flatLists).toHaveLength(1);
   });
 
+  it('render Gateway goDetail', async () => {
+    mock
+      .onGet(API.DEV_MODE.GATEWAY.LIST())
+      .reply(200, { results: [{ id: 1, name: 'device 1' }] });
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const flatList = instance.findByType(FlatList);
+    const gatewayItems = flatList.findAllByType(GatewayItem);
+    expect(gatewayItems).toHaveLength(1);
+    await act(async () => {
+      await gatewayItems[0].props.onPress();
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.GatewayDetail, {
+      item: { id: 1, name: 'device 1' },
+    });
+  });
+
+  it('render Gateway onRefresh', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const flatList = instance.findByType(FlatList);
+    expect(flatList.props.data).toEqual([]);
+    mock
+      .onGet(API.DEV_MODE.GATEWAY.LIST())
+      .reply(200, { results: [{ id: 1, name: 'device 1' }] });
+    await act(async () => {
+      await flatList.props.onRefresh();
+    });
+    expect(flatList.props.data).toEqual([{ id: 1, name: 'device 1' }]);
+  });
+
   it('Test render empty', async () => {
     await act(async () => {
       tree = await create(wrapComponent());

package/src/screens/Gateway/components/Detail/__test__/index.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+import { HeaderCustom } from '../../../../../commons';
+import MenuActionMore from '../../../../../commons/MenuActionMore';
+import Detail from '../../../components/Detail';
+import TabPaneCT from '../../../components/TabPaneCT';
+
+const wrapComponent = (listMenuItem) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Detail listMenuItem={listMenuItem} />
+  </SCProvider>
+);
+const mockDoAction = jest.fn();
+
+describe('Test Detail', () => {
+  let tree;
+  it('test render Detail', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const headerCustom = instance.findAllByType(HeaderCustom);
+    const tabPaneCT = instance.findAllByType(TabPaneCT);
+    const menuActionMore = instance.findAllByType(MenuActionMore);
+    expect(headerCustom).toHaveLength(1);
+    expect(tabPaneCT).toHaveLength(1);
+    expect(menuActionMore).toHaveLength(1);
+  });
+
+  it('test render Detail and MenuActionMore onPress', async () => {
+    const listMenuItem = [
+      { id: 1, text: 'information', doAction: mockDoAction },
+    ];
+    await act(async () => {
+      tree = await create(wrapComponent(listMenuItem));
+    });
+    const instance = tree.root;
+    const menuActionMore = instance.findAllByType(MenuActionMore);
+    await act(async () => {
+      await menuActionMore[0].props.onItemClick(listMenuItem[0]);
+    });
+    expect(mockDoAction).toBeCalledTimes(1);
+  });
+});

package/src/screens/Gateway/components/Detail/index.js

@@ -0,0 +1,62 @@
+import React, { useCallback, memo } from 'react';
+import { View } from 'react-native';
+import { HeaderCustom } from '../../../../commons';
+import MenuActionMore from '../../../../commons/MenuActionMore';
+import { usePopover } from '../../../../hooks/Common';
+import TabPaneCT from '../TabPaneCT';
+import styles from './styles';
+
+const Detail = ({
+  listMenuItem = [],
+  listTabs = [],
+  title = '',
+  isDevice = false,
+  setSelectedIndex,
+  selectedIndex,
+  onPressRow,
+  isConfig,
+  isAction,
+  onRefresh = () => {},
+  refresh = false,
+}) => {
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+
+  const onItemClick = useCallback((itemMenu) => {
+    itemMenu?.doAction();
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom
+        title={title}
+        isShowRight
+        titleStyles={styles.title}
+        isDisableRefresh
+        showPopoverWithRef={showPopoverWithRef}
+      />
+      <TabPaneCT
+        listTabs={listTabs}
+        selectedIndex={selectedIndex}
+        setSelectedIndex={setSelectedIndex}
+        isDevice={isDevice}
+        onPressRow={onPressRow}
+        isConfig={isConfig}
+        isAction={isAction}
+        onRefresh={onRefresh}
+        refresh={refresh}
+      />
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        onItemClick={onItemClick}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+      />
+    </View>
+  );
+};
+
+export default memo(Detail);

package/src/screens/Gateway/components/Detail/styles.js

@@ -0,0 +1,27 @@
+import { StyleSheet, Platform } from 'react-native';
+import { Colors } from '../../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapStyle: {
+    borderRadius: 8,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    width: 'auto',
+    marginTop: Platform.select({
+      android: -70,
+      ios: 0,
+    }),
+    marginLeft: -15,
+  },
+  title: {
+    textAlign: 'left',
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: 'bold',
+    color: Colors.Black,
+  },
+});

package/src/screens/Gateway/components/DetailActionModbus/__test__/index.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+import { HeaderCustom } from '../../../../../commons';
+import DetailActionModbus from '../../../components/DetailActionModbus';
+import { FlatList, TouchableOpacity } from 'react-native';
+
+const wrapComponent = (listData, title, onPressRow) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DetailActionModbus
+      listData={listData}
+      title={title}
+      onPressRow={onPressRow}
+    />
+  </SCProvider>
+);
+const mockOnPress = jest.fn();
+
+describe('Test DetailActionModbus', () => {
+  let tree;
+  let listData = [{ id: 1, len1: 1, len2: 2, ex: '', delay: 0 }];
+  it('test render DetailActionModbus', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(listData, 'action on'));
+    });
+    const instance = tree.root;
+    const headerCustom = instance.findAllByType(HeaderCustom);
+    const flatList = instance.findAllByType(FlatList);
+    expect(headerCustom[0].props.title).toEqual('action on');
+    expect(headerCustom).toHaveLength(1);
+    expect(flatList).toHaveLength(1);
+  });
+
+  it('test render DetailActionModbus and renderItem onPress', async () => {
+    await act(async () => {
+      tree = await create(
+        wrapComponent(listData, 'action on', () => mockOnPress)
+      );
+    });
+    const instance = tree.root;
+    const flatList = instance.findAllByType(FlatList);
+    const touchableOpacity = flatList[0].findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchableOpacity[0].props.onPress();
+    });
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+});

package/src/screens/Gateway/components/DetailActionModbus/index.js

@@ -0,0 +1,52 @@
+import React, { useCallback, memo, useMemo } from 'react';
+import { View, FlatList, Image, TouchableOpacity } from 'react-native';
+import { Text, HeaderCustom } from '../../../../commons';
+import styles from './styles';
+import Images from '../../../../configs/Images';
+
+const DetailActionModbus = ({
+  listData = [],
+  title,
+  contentContainerStyle,
+  onPressRow = () => {},
+}) => {
+  const renderItem = useCallback(
+    ({ item, index }) => {
+      return (
+        <TouchableOpacity style={styles.itemAction} onPress={onPressRow(item)}>
+          <Text>{item?.actionName}</Text>
+          <Image style={styles.arrowRight} source={Images.arrowLeft} />
+        </TouchableOpacity>
+      );
+    },
+    [onPressRow]
+  );
+
+  const customData = useMemo(() => {
+    return listData?.map((item, index) => ({
+      ...item,
+      actionName: `Action name ${index + 1}`,
+    }));
+  }, [listData]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom title={title} titleStyles={styles.title} />
+      <View style={styles.bodyInfo}>
+        <FlatList
+          contentContainerStyle={[
+            styles.contentContainerStyle,
+            contentContainerStyle,
+          ]}
+          keyExtractor={(item) => item?.id}
+          data={customData}
+          renderItem={renderItem}
+          extraData={customData}
+          numColumns={1}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default memo(DetailActionModbus);

package/src/screens/Gateway/components/DetailActionModbus/styles.js

@@ -0,0 +1,32 @@
+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 },
+  itemAction: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  arrowRight: {
+    width: 12,
+    height: 15,
+    transform: [{ rotate: '180deg' }],
+  },
+});

package/src/screens/Gateway/components/DetailConfigAction/__test__/index.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { create, act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+import { HeaderCustom, Text } from '../../../../../commons';
+import DetailConfigAction from '../../../components/DetailConfigAction';
+
+const wrapComponent = (
+  listData,
+  title,
+  subTitle,
+  onRowOne,
+  isDetailConfigModbus = false
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DetailConfigAction
+      listData={listData}
+      title={title}
+      subTitle={subTitle}
+      isDetailConfigModbus={isDetailConfigModbus}
+      onRowOne={onRowOne}
+    />
+  </SCProvider>
+);
+
+describe('Test DetailConfigAction', () => {
+  let tree;
+  let listData = [{ id: 1, len1: 1, len2: 2, ex: '', delay: 0 }];
+  it('test render DetailConfigAction headerCustom isDetailConfigModbus=false', async () => {
+    await act(async () => {
+      tree = await create(
+        wrapComponent(listData, 'config 1', 'sensor 1', false)
+      );
+    });
+    const instance = tree.root;
+    const headerCustom = instance.findAllByType(HeaderCustom);
+    const flatList = instance.findAllByType(FlatList);
+    const textTitles = headerCustom[0].findAllByType(Text);
+    expect(textTitles[0].props.children).toEqual('config 1');
+    expect(textTitles[1].props.children).toEqual('sensor 1');
+    expect(flatList).toHaveLength(1);
+  });
+
+  it('test render DetailConfigAction headerCustom isDetailConfigModbus=true', async () => {
+    await act(async () => {
+      tree = await create(
+        wrapComponent(listData, 'config 1', 'sensor 1', false, true)
+      );
+    });
+    const instance = tree.root;
+    const headerCustom = instance.findAllByType(HeaderCustom);
+    const flatList = instance.findAllByType(FlatList);
+    const textTitles = headerCustom[0].findAllByType(Text);
+    expect(textTitles[0].props.children).toEqual('config 1');
+    expect(flatList).toHaveLength(1);
+  });
+});

package/src/screens/Gateway/components/DetailConfigAction/index.js

@@ -0,0 +1,69 @@
+import React, { useCallback, memo } from 'react';
+import { View, FlatList } from 'react-native';
+import { Colors } from '../../../../configs';
+import { Text, HeaderCustom } from '../../../../commons';
+import styles from './styles';
+import RowItem from '../RowItem';
+
+const DetailConfigAction = ({
+  listData = [],
+  title,
+  subTitle,
+  isDetailConfigModbus = false,
+  contentContainerStyle,
+  onRowOne,
+}) => {
+  const renderItem = useCallback(
+    ({ item, index }) => {
+      return (
+        <RowItem
+          title={item?.title}
+          subTitle={item?.data}
+          onRowOne={onRowOne}
+        />
+      );
+    },
+    [onRowOne]
+  );
+
+  const TitleCustom = useCallback(() => {
+    if (isDetailConfigModbus) {
+      return (
+        <Text type="H4" bold>
+          {title}
+        </Text>
+      );
+    }
+    return (
+      <>
+        <Text type="H4" bold>
+          {title}
+        </Text>
+        <Text type="Label" color={Colors.Gray20}>
+          {subTitle}
+        </Text>
+      </>
+    );
+  }, [isDetailConfigModbus, subTitle, title]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom customTitle={<TitleCustom />} titleStyles={styles.title} />
+      <View style={styles.bodyInfo}>
+        <FlatList
+          contentContainerStyle={[
+            styles.contentContainerStyle,
+            contentContainerStyle,
+          ]}
+          keyExtractor={(item) => item?.id}
+          data={listData}
+          renderItem={renderItem}
+          extraData={listData}
+          numColumns={1}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default memo(DetailConfigAction);

package/src/screens/Gateway/components/DetailConfigAction/styles.js

@@ -0,0 +1,21 @@
+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 },
+});

package/src/screens/Gateway/components/GatewayItem/__test__/index.test.js

@@ -78,6 +78,6 @@ describe('Test GatewayItem', () => {
     await act(async () => {
       await buttons[0].props.onPress();
     });
-    expect(mockOnPressItem).toHaveBeenCalled();
+    expect(mockOnPressItem).toBeCalledTimes(1);
   });
 });

package/src/screens/Gateway/components/GatewayItem/styles.js

@@ -3,6 +3,7 @@ import { Colors, Constants } from '../../../../configs';
 
 export default StyleSheet.create({
   wrap: {
+    height: 'auto',
     padding: 16,
     marginBottom: 16,
     backgroundColor: Colors.White,
@@ -12,8 +13,8 @@ export default StyleSheet.create({
     borderColor: Colors.Neutral.Neutral3,
   },
   button: {
-    flex: 1,
     justifyContent: 'space-between',
+    height: 'auto',
   },
   viewTitle: {
     marginBottom: 6,
@@ -24,39 +25,9 @@ export default StyleSheet.create({
   textTitle: {
     lineHeight: 20,
     height: 40,
-    fontWeight: 600,
-    textOverflow: 'ellipsis',
+    fontWeight: '600',
   },
   textValue: {
-    fontWeight: 400,
-  },
-  viewStatus: {
-    width: 65,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 54,
-    backgroundColor: Colors.White,
-    borderColor: Colors.Neutral.Neutral3,
-    borderWidth: 1,
-  },
-  textStatus: {
-    fontStyle: 'normal',
-    fontWeight: 600,
-    letterSpacing: 0.04,
-    fontSize: 12,
-    lineHeight: 16,
-    textTransform: 'uppercase',
-    textAlign: 'center',
-  },
-  listGateways: {
-    width: '100%',
-    paddingVertical: 16,
-  },
-  textOnline: {
-    fontStyle: 'bold',
-  },
-  viewOnline: {
-    backgroundColor: Colors.LightGreen,
-    borderWidth: 0,
+    fontWeight: '400',
   },
 });

package/src/screens/Gateway/components/Information/__test__/index.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+import { HeaderCustom } from '../../../../../commons';
+import Information from '../../../components/Information';
+import { AccessibilityLabel } from '../../../../../configs/Constants';
+import { FlatList } from 'react-native';
+
+const mockHandleDeleteGateway = jest.fn();
+const mockHandleConnectionMethods = jest.fn();
+
+const wrapComponent = (
+  listInformation,
+  handleDeleteGateway,
+  handleConnectionMethods,
+  isDevice = false,
+  isModbus = false
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Information
+      listInformation={listInformation}
+      handleDeleteGateway={handleDeleteGateway}
+      handleConnectionMethods={handleConnectionMethods}
+      isDevice={isDevice}
+      isModbus={isModbus}
+    />
+  </SCProvider>
+);
+
+describe('Test Information', () => {
+  let tree;
+  let listInformation = [{ id: 1, name: 'row1', data: 'dataRow1' }];
+  it('test render Information', async () => {
+    await act(async () => {
+      tree = await create(
+        wrapComponent(
+          listInformation,
+          mockHandleDeleteGateway,
+          mockHandleConnectionMethods
+        )
+      );
+    });
+    const instance = tree.root;
+    const headerCustom = instance.findAllByType(HeaderCustom);
+    const viewAlert = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.GATEWAY_INFO_ALERT,
+    });
+    const flatList = instance.findAllByType(FlatList);
+    expect(headerCustom).toHaveLength(1);
+    expect(flatList).toHaveLength(1);
+    expect(viewAlert.props.children[1].props.children).toEqual(
+      'Go to EoH web to see firmware configuration'
+    );
+    const buttonConnect = instance.findByProps({
+      accessibilityLabel:
+        AccessibilityLabel.GATEWAY_INFO_BUTTON_GOTO_CONNECTION_METHODS,
+    });
+    expect(
+      buttonConnect.props.children.props.children[0].props.children[0].props
+        .children
+    ).toEqual('Connection methods');
+    const buttonDelete = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.GATEWAY_INFO_BUTTON_DELETE_GATEWAY,
+    });
+    expect(buttonDelete.props.children.props.children).toEqual(
+      'Delete gateway'
+    );
+  });
+});