@eohjsc/react-native-smart-city 0.3.86 → 0.3.88

package/src/screens/Device/components/__test__/VisualChart.test.js

@@ -0,0 +1,440 @@
+import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
+import moment from 'moment';
+import HighchartsReactNative from '@eohjsc/highcharts';
+import { act, create } from 'react-test-renderer';
+
+import VisualChart from '../VisualChart';
+import { API } from '../../../../configs';
+import { getPusher } from '../../../../utils/Pusher';
+import { flushPromises } from '../../../AllGateway/test-utils';
+import api from '../../../../utils/Apis/axios';
+import ChartAggregationOption from '../../../../commons/ChartAggregationOption';
+import DateTimeRangeChange from '../../../../commons/DateTimeRangeChange';
+
+const render = async (component) => {
+  let tree;
+  await act(async () => {
+    tree = await create(component);
+  });
+  return tree;
+};
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: jest.fn(),
+  };
+});
+
+const mockAxios = new MockAdapter(api.axiosInstance);
+
+describe('Test LinearChartWidget', () => {
+  let tree;
+  beforeEach(() => {
+    mockAxios.reset();
+  });
+
+  const assertChartData = (data, expected) => {
+    const expected2 = expected.map((item) => [
+      moment(item[0]).valueOf(),
+      item[1],
+    ]);
+    expect([expected.toString(), expected2.toString()]).toContain(
+      data.toString()
+    );
+  };
+
+  it('Test render fetch data from api', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [{ x: 1000, y: 100 }],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
+  });
+
+  it('Test render fetch data from api and cache', async () => {
+    const cacheUrl1 = 'https://s3.eoh.io/xxx1.json';
+    const cacheUrl2 = 'https://s3.eoh.io/xxx2.json';
+    const cacheUrl3 = 'https://s3.eoh.io/xxx3.json';
+    const cacheUrl4 = 'https://s3.eoh.io/xxx4.json';
+    const responseData = {
+      configs: [
+        {
+          id: 1,
+          head: [{ x: 1, y: 2 }],
+          tail: [{ x: 2, y: 3 }],
+          middle: {
+            ready: [
+              { date: '2022-03-02', url: cacheUrl1 },
+              { date: '2022-03-04', url: cacheUrl3 },
+            ],
+            not_ready: [
+              { date: '2022-03-03', url: cacheUrl2 },
+              { date: '2022-03-05', url: cacheUrl4 },
+            ],
+            channel: 'cache-xxx',
+          },
+        },
+      ],
+    };
+    mockAxios.onGet(cacheUrl1).reply(200, [{ x: 3, y: 4 }]);
+    mockAxios.onGet(cacheUrl2).reply(200, [{ x: 4, y: 5 }]);
+    mockAxios.onGet(cacheUrl3).reply(200, [{ x: 5, y: 6 }]);
+    mockAxios.onGet(cacheUrl4).reply(200, [{ x: 7, y: 8 }]);
+
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, responseData);
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [
+      [moment(1), 2],
+      [moment(3), 4],
+      [moment(5), 6],
+      [moment(2), 3],
+    ]);
+
+    await act(async () => {
+      await getPusher()
+        .subscribe('cache-xxx')
+        .trigger('caching-value-log-process', {
+          success: true,
+        });
+    });
+
+    await flushPromises();
+
+    assertChartData(chart.props.options.series[0].data, [
+      [moment(1), 2],
+      [moment(3), 4],
+      [moment(4), 5],
+      [moment(5), 6],
+      [moment(7), 8],
+      [moment(2), 3],
+    ]);
+  });
+
+  it('Test render aggregation sum', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [
+            { x: 1000, y: 100 },
+            { x: 1000 + 86400000, y: 100 },
+          ],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            value_type: 'sum',
+            aggregation_period: 'day',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [
+      ['1970-01-01', 100],
+      ['1970-01-02', 100],
+    ]);
+
+    const groupByOption = instance.findByType(ChartAggregationOption);
+
+    await act(async () => {
+      groupByOption.props.setGroupBy('month');
+    });
+    assertChartData(chart.props.options.series[0].data, [['1970-01', 200]]);
+  });
+
+  it('Test render aggregation sum', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [
+            { x: 1000, y: 100 },
+            { x: 1000, y: 100 },
+          ],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            value_type: 'sum',
+            aggregation_period: 'day',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [['1970-01-01', 200]]);
+  });
+
+  it('Test render aggregation average', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [
+            { x: 1000, y: 100 },
+            { x: 1000, y: 200 },
+          ],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            value_type: 'avg',
+            aggregation_period: 'day',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [['1970-01-01', 150]]);
+  });
+
+  it('Test render not demo', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(400);
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'line_chart',
+            configs: [
+              {
+                data: [{ x: 1000, y: 100 }],
+                title: 'xxx',
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
+  });
+
+  it('Test render bar chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'bar_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('column');
+  });
+
+  it('Test render horizontal_bar_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'horizontal_bar_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('bar');
+  });
+
+  it('Test render area_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'area_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('area');
+  });
+
+  it('Test render stacked_bar_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'stacked_bar_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('column');
+    expect(chart.props.options.plotOptions.column.stacking).toEqual('normal');
+  });
+
+  it('Test render scatter_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'scatter_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('scatter');
+  });
+
+  it('not fetch data if empty config', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'line_chart',
+            configs: [{}],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    expect(mockAxios.history.get).toHaveLength(0);
+  });
+
+  it('not fetch data when change date', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'line_chart',
+            configs: [{ id: 1 }],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    expect(mockAxios.history.get).toHaveLength(1);
+
+    const instance = tree.root;
+    const dateRange = instance.findByType(DateTimeRangeChange);
+    await act(async () => {
+      dateRange.props.selectStart(moment().subtract(5, 'days'));
+    });
+    expect(mockAxios.history.get).toHaveLength(2);
+
+    await act(async () => {
+      dateRange.props.selectEnd(moment().subtract(1, 'days'));
+    });
+    expect(mockAxios.history.get).toHaveLength(3);
+  });
+});

package/src/screens/EmergencyContacts/__test__/EmergencyContactsSelectContacts.test.js

@@ -70,12 +70,13 @@ describe('test EmergencyContactsSelectContacts', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const rowUser = instance.findAllByProps(
-      (item) =>
-        item.props.accessibilityLabel ===
-        AccessibilityLabel.EMERGENCY_SELECT_CONTACT + 0
-    );
-    expect(rowUser[0]).toBeDefined();
+    const rowUser = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.EMERGENCY_SELECT_CONTACT + 0,
+    });
+    await act(async () => {
+      rowUser.props.onPress();
+    });
+    expect(rowUser.props.text).toEqual('test');
   });
 
   it('test onSave emergencyContactsSelectContacts', async () => {

package/src/screens/Sharing/InfoMemberUnit.js

@@ -9,7 +9,7 @@ import { HeaderCustom } from '../../commons/Header';
 import RowMemberInfo from '../GuestInfo/components/RowGuestInfo';
 import { useIsOwnerOfUnit } from '../../hooks/Common';
 import { axiosGet } from '../../utils/Apis/axios';
-import { AlertAction } from '../../commons';
+import { AlertAction, ViewButtonBottom } from '../../commons';
 import { useStateAlertAction, useDataMember } from './hooks';
 import ItemChangeRole from './Components/ItemChangeRole';
 import MemberSvg from '../../Images/Common/member.svg';
@@ -18,6 +18,7 @@ import styles from './Styles/inforMemberUnitStyles';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import { AccessibilityLabel } from '../../configs/Constants';
+import ModalPopupCT from '../../commons/ModalPopupCT';
 
 const InfoMemberUnit = memo(({ route }) => {
   const t = useTranslations();
@@ -28,6 +29,7 @@ const InfoMemberUnit = memo(({ route }) => {
     };
   const { navigate } = useNavigation();
   const [isLoading, setIsLoading] = useState(true);
+  const [isShowWarning, setIsShowWarning] = useState(false);
   const [memberInfo, setMemberInfo] = useState({});
   const [itemSelected, setItemSelected] = useState({});
   const isFocused = useIsFocused();
@@ -56,10 +58,7 @@ const InfoMemberUnit = memo(({ route }) => {
       if (stateAlertAction?.is_change) {
         hideAlertAction();
         if (itemSelected?.role?.is_owner) {
-          navigate(Routes.EnterPassword, {
-            dataParams: { unit_id: unit?.id, member },
-            type: 'infoMemberUnit',
-          });
+          setIsShowWarning(true);
         }
       } else {
         removeMember(
@@ -72,14 +71,19 @@ const InfoMemberUnit = memo(({ route }) => {
   }, [
     hideAlertAction,
     itemSelected?.role?.is_owner,
-    member,
-    navigate,
     removeMember,
     stateAlertAction?.is_change,
     stateAlertAction?.member,
-    unit?.id,
   ]);
 
+  const handleChangeOwner = useCallback(() => {
+    setIsShowWarning(false);
+    navigate(Routes.EnterPassword, {
+      dataParams: { unit_id: unit?.id, member },
+      type: 'infoMemberUnit',
+    });
+  }, [member, navigate, unit?.id]);
+
   const fetchMemberInfo = useCallback(async () => {
     setIsLoading(true);
     const { success, data } = await axiosGet(
@@ -158,6 +162,22 @@ const InfoMemberUnit = memo(({ route }) => {
     return <></>;
   }, [isOwner, navigate, unit?.id, memberInfo]);
 
+  const footerWarning = useMemo(() => {
+    return (
+      <>
+        <View style={styles.line} />
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          rightTitle={t('change')}
+          styleButton={styles.styleButton}
+          styleButtonLeftText={styles.textButton}
+          onLeftClick={() => setIsShowWarning(false)}
+          onRightClick={handleChangeOwner}
+        />
+      </>
+    );
+  }, [handleChangeOwner, t]);
+
   useEffect(() => {
     if (isIdentityOwner) {
       setItemSelected(itemsRoleModal[0]);
@@ -223,6 +243,7 @@ const InfoMemberUnit = memo(({ route }) => {
                 <TouchableOpacity
                   onPress={onPressChangeRole}
                   style={styles.role}
+                  accessibilityLabel={AccessibilityLabel.CHANGE_ROLE}
                 >
                   <View style={styles.leftRole}>
                     <Text type="Body" color={Colors.Gray7}>
@@ -271,6 +292,18 @@ const InfoMemberUnit = memo(({ route }) => {
       >
         <ChangeRoleContent />
       </AlertAction>
+
+      <ModalPopupCT
+        isVisible={isShowWarning}
+        title={t('transfer_ownership')}
+        subTitle={t('text_change_owner')}
+        isShowAlert
+        isShowUnderstand={false}
+        textShowAlert={t('text_alert_change_owner')}
+        styleWrapButton={styles.wrapButton}
+        styleRightButton={styles.button}
+        footer={footerWarning}
+      />
     </>
   );
 });

package/src/screens/Sharing/Styles/inforMemberUnitStyles.js

@@ -89,4 +89,15 @@ export default StyleSheet.create({
   removeButtonStyle: {
     color: Colors.Red,
   },
+  line: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.Neutral.Neutral3,
+  },
+  styleButton: {
+    paddingTop: 24,
+    paddingBottom: 0,
+  },
+  textButton: {
+    color: Colors.Gray9,
+  },
 });

package/src/screens/Sharing/__test__/InfoMemberUnit.test.js

@@ -7,10 +7,13 @@ import InfoMemberUnit from '../InfoMemberUnit';
 import { HeaderCustom } from '../../../commons/Header';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { AlertAction } from '../../../commons';
+import { AlertAction, ViewButtonBottom } from '../../../commons';
 import API from '../../../configs/API';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import api from '../../../utils/Apis/axios';
+import ItemChangeRole from '../Components/ItemChangeRole';
+import ModalPopupCT from '../../../commons/ModalPopupCT';
+import Routes from '../../../utils/Route';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -53,6 +56,7 @@ describe('Test InfoMemberUnit', () => {
         unit: {
           id: 1,
           name: 'unit',
+          user_id: 1,
         },
         member: {
           id: 1,
@@ -107,7 +111,7 @@ describe('Test InfoMemberUnit', () => {
 
   it('render InfoMemberUnit delete member', async () => {
     mock.onGet(API.SHARE.UNIT_MEMBER_INFO(1, 1)).reply(200, {
-      id: 1,
+      id: 2,
       identity: 'owner',
       phone_number: '88888',
       name: 'user',
@@ -131,4 +135,60 @@ describe('Test InfoMemberUnit', () => {
     });
     expect(mockGoBack).toBeCalled();
   });
+
+  it('test change owner', async () => {
+    mock.onGet(API.SHARE.UNIT_MEMBER_INFO(1, 1)).reply(200, {
+      id: 2,
+      identity: 'owner',
+      phone_number: '88888',
+      name: 'user',
+      email: 'abc@gmail.com',
+    });
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touchChangeRole = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.CHANGE_ROLE,
+    });
+    await act(async () => {
+      await touchChangeRole.props.onPress();
+    });
+
+    const alertAction = instance.findByType(AlertAction);
+    expect(alertAction.props.visible).toEqual(true);
+
+    const itemChangeRole = instance.findAllByType(ItemChangeRole);
+    expect(itemChangeRole).toHaveLength(2);
+
+    const modalPopupCT = instance.findByType(ModalPopupCT);
+    await act(async () => {
+      await itemChangeRole[0].props.onPress();
+    });
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+    expect(alertAction.props.visible).toEqual(false);
+    expect(modalPopupCT.props.isVisible).toEqual(true);
+
+    const viewButtonBottom = instance.findAllByType(ViewButtonBottom);
+    expect(viewButtonBottom).toHaveLength(2);
+
+    await act(async () => {
+      await viewButtonBottom[1].props.onRightClick();
+    });
+    expect(modalPopupCT.props.isVisible).toEqual(false);
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.EnterPassword, {
+      dataParams: {
+        unit_id: 1,
+        member: {
+          id: 1,
+          name: 'user1',
+          share_id: 1,
+        },
+      },
+      type: 'infoMemberUnit',
+    });
+  });
 });

package/src/screens/SmartAccount/SuccessfullyConnected/__test__/SuccessfullyConnected.test.js

@@ -91,6 +91,9 @@ describe('Test SuccessfullyConnected', () => {
     await flushPromises();
     const instance = tree.root;
     const inputs = instance.findAllByType(_TextInput);
+    await act(async () => {
+      inputs[0].props.onChange();
+    });
     expect(inputs).toHaveLength(3); // sensor + 2 end device
     expect(mock.history.get).toHaveLength(1);
     expect(mock.history.get[0].url).toBe(API.CHIP.RENAME_DEVICES(1));