@eohjsc/react-native-smart-city 0.4.41 → 0.4.42

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
@@ -34,8 +33,6 @@ const wrapComponent = ({ ...rest }) => (
   </SCProvider>
 );
 
-// NOTE: Hinh will fix it later
-
 describe('Test ChangePosition', () => {
   let tree;
 
@@ -45,36 +42,37 @@ describe('Test ChangePosition', () => {
   });
 
   it('render ChangePosition', async () => {
-    // const mockFetchData = jest.fn();
-    // const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
-    // useRoute.mockReturnValue({
-    //   params: {
-    //     sensor: { id: 1, name: 'device' },
-    //     display: { items: [{ id: 1 }, { id: 2 }] },
-    //     setDisplay: mockSetDisplay,
-    //     station: { id: 1, name: 'station' },
-    //     evaluate: {},
-    //     fetchDataDeviceDetail: mockFetchData,
-    //   },
-    // });
-    // mock.onPut(API.DEVICE.ORDER_DISPLAY_ITEMS(1)).reply(200);
-    // await act(async () => {
-    //   tree = await create(wrapComponent({}));
-    // });
-    // const instance = tree.root;
-    // const flatListDnD = instance.findAllByType(DraggableFlatList);
-    // expect(flatListDnD).toHaveLength(1);
-    // const bottomButtonView = instance.findAllByType(BottomButtonView);
-    // expect(bottomButtonView).toHaveLength(1);
-    // await act(async () => {
-    //   flatListDnD[0].props.onDragEnd({ data: [{ id: 2 }, { id: 1 }] });
-    // });
-    // await act(async () => {
-    //   bottomButtonView[0].props.onPressMain();
-    // });
-    // expect(mockGoBack).toHaveBeenCalled();
-    // expect(mockFetchData).toHaveBeenCalled();
-    // expect(mockSetDisplay).toHaveBeenCalled();
-    // expect(spyToastSuccess).toBeCalledWith('Updated widget successfully');
+    const mockFetchData = jest.fn();
+    const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
+    useRoute.mockReturnValue({
+      params: {
+        sensor: { id: 1, name: 'device' },
+        display: { items: [{ id: 1 }, { id: 2 }] },
+        setDisplay: mockSetDisplay,
+        station: { id: 1, name: 'station' },
+        evaluate: {},
+        fetchDataDeviceDetail: mockFetchData,
+      },
+    });
+    mock.onPut(API.DEVICE.ORDER_DISPLAY_ITEMS(1)).reply(200);
+    await act(async () => {
+      tree = await create(wrapComponent({}));
+    });
+    const instance = tree.root;
+    const flatListDnD = instance.findAllByType(DraggableFlatList);
+    expect(flatListDnD).toHaveLength(1);
+
+    const bottomButtonView = instance.findAllByType(BottomButtonView);
+    expect(bottomButtonView).toHaveLength(1);
+    await act(async () => {
+      flatListDnD[0].props.onDragEnd({ data: [{ id: 2 }, { id: 1 }] });
+    });
+    await act(async () => {
+      bottomButtonView[0].props.onPressMain();
+    });
+    expect(mockGoBack).toHaveBeenCalled();
+    expect(mockFetchData).toHaveBeenCalled();
+    expect(mockSetDisplay).toHaveBeenCalled();
+    expect(spyToastSuccess).toBeCalledWith('Updated widget successfully');
   });
 });

package/src/screens/ConfirmUnitDeletion/__test__/ConfirmUnitDeletion.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import renderer, { act } from 'react-test-renderer';
 
 import { SCProvider } from '../../../context';
@@ -30,6 +30,14 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
 describe('Test ConfirmUnitDeletion', () => {
   let tree;
   let route;
@@ -45,6 +53,7 @@ describe('Test ConfirmUnitDeletion', () => {
   });
 
   it('test render ConfirmUnitDeletion', async () => {
+    useState.mockImplementationOnce((init) => ['new_name', mockSetState]);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
@@ -56,6 +65,7 @@ describe('Test ConfirmUnitDeletion', () => {
     });
   });
   it('Onpress button ConfirmUnitDeletion ', async () => {
+    useState.mockImplementationOnce((init) => ['YES', mockSetState]);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });

package/src/screens/Device/__test__/detail.test.js

@@ -107,49 +107,54 @@ describe('test DeviceDetail', () => {
         },
         {
           configuration: {
-            action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
-            action1_data: {
-              color: '#00979D',
-              command_prefer_over_bluetooth: false,
-              command_prefer_over_googlehome: false,
-              command_prefer_over_internet: true,
-              googlehome_actions: [],
-              icon: 'caret-up',
-              id: 9,
-              key: '2b949045-8e03-4c07-a855-7794ade2e69c',
-            },
-            action2: '38347d5e-4418-4ab0-978c-c82f4c034897',
-            action2_data: {
-              color: '#00979D',
-              command_prefer_over_bluetooth: false,
-              command_prefer_over_googlehome: false,
-              command_prefer_over_internet: true,
-              googlehome_actions: [],
-              icon: 'stop',
-              id: 11,
-              key: '38347d5e-4418-4ab0-978c-c82f4c034897',
-            },
-            action3: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
-            action3_data: {
-              color: '#00979D',
-              command_prefer_over_bluetooth: false,
-              command_prefer_over_googlehome: false,
-              command_prefer_over_internet: true,
-              googlehome_actions: [],
-              icon: 'caret-down',
-              id: 10,
-              key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+            id: 1,
+            template: 'three_button_action_template',
+            title: '',
+            configuration: {
+              action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
+              action1_data: {
+                color: '#00979D',
+                command_prefer_over_bluetooth: false,
+                command_prefer_over_googlehome: false,
+                command_prefer_over_internet: true,
+                googlehome_actions: [],
+                icon: 'caret-up',
+                id: 9,
+                key: '2b949045-8e03-4c07-a855-7794ade2e69c',
+              },
+              action2: '38347d5e-4418-4ab0-978c-c82f4c034897',
+              action2_data: {
+                color: '#00979D',
+                command_prefer_over_bluetooth: false,
+                command_prefer_over_googlehome: false,
+                command_prefer_over_internet: true,
+                googlehome_actions: [],
+                icon: 'stop',
+                id: 11,
+                key: '38347d5e-4418-4ab0-978c-c82f4c034897',
+              },
+              action3: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+              action3_data: {
+                color: '#00979D',
+                command_prefer_over_bluetooth: false,
+                command_prefer_over_googlehome: false,
+                command_prefer_over_internet: true,
+                googlehome_actions: [],
+                icon: 'caret-down',
+                id: 10,
+                key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+              },
+              icon1: 'caret-up',
+              icon2: 'stop',
+              icon3: 'caret-down',
+              text1: 'UP',
+              text2: 'STOP/UNLOCK',
+              text3: 'DOWN',
             },
-            icon1: 'caret-up',
-            icon2: 'stop',
-            icon3: 'caret-down',
-            text1: 'UP',
-            text2: 'STOP/UNLOCK',
-            text3: 'DOWN',
           },
           id: 19,
           order: 2,
-          template: 'three_button_action_template',
+          template: 'action',
           type: 'action',
         },
       ],
@@ -744,7 +749,7 @@ describe('test DeviceDetail', () => {
 
   it('Open popup ble when server down', async () => {
     store.bluetooth.isEnabled = false;
-    data_sensor_display.items[2].configuration.action1_data.command_prefer_over_bluetooth = true;
+    data_sensor_display.items[2].configuration.configuration.action1_data.command_prefer_over_bluetooth = true;
     const responseDisplay = data_sensor_display;
 
     const responseDisplayValueV2 = {

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -24,19 +24,6 @@ const wrapComponent = ({ ...rest }) => (
     <SensorDisplayItem {...rest} />
   </SCProvider>
 );
-
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useFocusEffect: (func) => func(),
-  };
-});
-
 describe('Test SensorDisplayItem', () => {
   let tree;
   it('render DetailHistoryChart', async () => {
@@ -76,7 +63,8 @@ describe('Test SensorDisplayItem', () => {
     const item = {
       id: 10452,
       order: 0,
-      template: 'on_off_button_action_template',
+      template: 'action',
+      type: 'action',
       configuration: {
         type: 'on_off_button_action_template',
         configs: [

package/src/screens/Device/components/ChartWrapper.js

@@ -5,7 +5,7 @@ import DateTimeRangeChange from '../../../commons/DateTimeRangeChange';
 import moment from 'moment';
 
 const ChartWrapper = memo(
-  ({ children, onChangeDate, showTime, isWidgetOrder, shouldRenderDate }) => {
+  ({ children, onChangeDate, showTime, isWidgetOrder }) => {
     const [value, setValue] = useState([
       moment().subtract(6, 'days'),
       moment(),
@@ -24,20 +24,18 @@ const ChartWrapper = memo(
 
     return (
       <View>
-        {shouldRenderDate && (
-          <View style={styles.headerContainer}>
-            <View>
-              <DateTimeRangeChange
-                startTime={value[0]}
-                endTime={value[1]}
-                showTime={showTime}
-                selectStart={selectStart}
-                selectEnd={selectEnd}
-                isWidgetOrder={isWidgetOrder}
-              />
-            </View>
+        <View style={styles.headerContainer}>
+          <View>
+            <DateTimeRangeChange
+              startTime={value[0]}
+              endTime={value[1]}
+              showTime={showTime}
+              selectStart={selectStart}
+              selectEnd={selectEnd}
+              isWidgetOrder={isWidgetOrder}
+            />
           </View>
-        )}
+        </View>
         {children}
       </View>
     );

package/src/screens/Device/components/SensorDisplayItem.js

@@ -107,27 +107,11 @@ export const SensorDisplayItem = ({
           />
         </View>
       );
-    // change response format, todo Bang refactor after fix
-    case 'three_button_action_template': // todo refactor later with backend
-    case 'ThreeButtonActionTemplate':
-    case 'on_off_button_action_template': // todo refactor later with backend
-    case 'OnOffButtonActionTemplate':
-    case 'OnOffSimpleActionTemplate':
-    case 'OnOffSmartLockActionTemplate':
-    case 'one_button_action_template': // todo refactor later with backend
-    case 'OneBigButtonActionTemplate':
-    case 'NumberUpDownActionTemplate':
-    case 'StatesGridActionTemplate':
-    case 'OptionsDropdownActionTemplate':
-    case 'TimerActionTemplate':
-    case 'SmartTiviActionTemplate':
-    case 'color_picker_template':
-    case 'slider_range_template':
-    case 'two_button_action_template':
-    case 'switch_button_action_template':
+    case 'action':
       return (
         <ActionGroup
           accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}
+          actionGroup={configuration}
           doAction={doAction}
           sensor={sensor}
           id={idTemplate}

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import moment from 'moment/moment';
 import _ from 'lodash';
+import HighchartsReactNative from '@eohjsc/highcharts';
 
 import ChartWrapper from './ChartWrapper';
 import { useFetchConfigHistory } from '../../../commons/UnitSummary/ConfigHistoryChart';
@@ -10,7 +11,6 @@ import ChartAggregationOption from '../../../commons/ChartAggregationOption';
 import Text from '../../../commons/Text';
 import { CHART_GROUP_TYPE } from '../../../configs/Constants';
 import { getDateRangeOfWeek } from '../../../utils/Utils';
-import Highcharts from '../../../commons/Highcharts';
 
 const groupByTime = (format) => (x) => x[0].format(format);
 
@@ -143,16 +143,8 @@ const chartOptions = {
       text: '',
     },
   },
-  yAxis: {
-    title: {
-      enabled: false,
-    },
-  },
   plotOptions: {},
   series: [],
-  exporting: {
-    enabled: false,
-  },
 };
 
 const groupByOptions = [
@@ -163,12 +155,7 @@ const groupByOptions = [
   { title: 'Y', data: CHART_GROUP_TYPE.YEAR },
 ];
 
-const VisualChart = ({
-  item,
-  isDemo = false,
-  isWidgetOrder,
-  shouldRenderDate,
-}) => {
+const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
   const { configuration = {} } = item;
   const {
     configs = [],
@@ -307,9 +294,8 @@ const VisualChart = ({
         dateFormat={date_format}
         showTime={show_time}
         isWidgetOrder={isWidgetOrder}
-        shouldRenderDate
       >
-        <Highcharts
+        <HighchartsReactNative
           options={options}
           styles={styles.chartStyle}
           webviewStyles={[

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

@@ -1,15 +1,16 @@
 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';
-import Highcharts from '../../../../commons/Highcharts';
 
 const render = async (component) => {
   let tree;
@@ -66,7 +67,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
   });
 
@@ -119,7 +120,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     assertChartData(chart.props.options.series[0].data, [
       [moment(1), 2],
       [moment(3), 4],
@@ -135,6 +136,8 @@ describe('Test LinearChartWidget', () => {
         });
     });
 
+    await flushPromises();
+
     assertChartData(chart.props.options.series[0].data, [
       [moment(1), 2],
       [moment(3), 4],
@@ -179,7 +182,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     assertChartData(chart.props.options.series[0].data, [
       ['1970-01-01', 100],
       ['1970-01-02', 100],
@@ -227,7 +230,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     assertChartData(chart.props.options.series[0].data, [['1970-01-01', 200]]);
   });
 
@@ -265,7 +268,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     assertChartData(chart.props.options.series[0].data, [['1970-01-01', 150]]);
   });
 
@@ -289,7 +292,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
   });
 
@@ -307,7 +310,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     expect(chart.props.options.chart.type).toEqual('column');
   });
 
@@ -325,7 +328,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     expect(chart.props.options.chart.type).toEqual('bar');
   });
 
@@ -343,7 +346,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     expect(chart.props.options.chart.type).toEqual('area');
   });
 
@@ -361,7 +364,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     expect(chart.props.options.chart.type).toEqual('column');
     expect(chart.props.options.plotOptions.column.stacking).toEqual('normal');
   });
@@ -380,7 +383,7 @@ describe('Test LinearChartWidget', () => {
       />
     );
     const instance = tree.root;
-    const chart = instance.findByType(Highcharts);
+    const chart = instance.findByType(HighchartsReactNative);
     expect(chart.props.options.chart.type).toEqual('scatter');
   });
 

package/src/screens/Device/detail.js

@@ -136,8 +136,7 @@ const DeviceDetail = ({ route }) => {
     }
 
     return action.some((item) => {
-      const { configuration } = item?.configuration;
-      return JSON.stringify(configuration).includes(
+      return JSON.stringify(item?.configuration)?.includes(
         '"command_prefer_over_bluetooth":true'
       );
     });
@@ -527,7 +526,7 @@ const DeviceDetail = ({ route }) => {
           });
         }
       });
-      configIdsTemp.current = configIds.filter(Boolean);
+      configIdsTemp.current = configIds;
 
       configIds.map((id) => {
         params.append('config', id);
@@ -701,12 +700,7 @@ const DeviceDetail = ({ route }) => {
           ref={refMenuAction}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE}
         >
-          <Icon
-            name={'ellipsis'}
-            size={27}
-            color={Colors.Black}
-            style={styles.moreIcon}
-          />
+          <Icon name={'more'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),
@@ -759,31 +753,18 @@ const DeviceDetail = ({ route }) => {
             >
               {display.items.map((item, index) => {
                 return (
-                  <>
-                    {!item.is_configuration_ready && (
-                      <Text center>{t('bellow_widget_is_not_configured')}</Text>
-                    )}
-                    {!!item.is_configuration_ready &&
-                      !!item.configuration_error && (
-                        <Text center>
-                          {t('bellow_widget_is_wrongly_configured')}
-                        </Text>
-                      )}
-                    <SensorDisplayItem
-                      accessibilityLabel={
-                        AccessibilityLabel.SENSOR_DISPLAY_ITEM
-                      }
-                      key={(item?.id || index).toString()}
-                      item={item}
-                      evaluate={evaluate}
-                      emergency={onEmergencyButtonPress}
-                      sensor={sensor}
-                      offsetTitle={offsetTitle}
-                      setOffsetTitle={setOffsetTitle}
-                      setShowWindDirection={setShowWindDirection}
-                      background={station?.background}
-                    />
-                  </>
+                  <SensorDisplayItem
+                    accessibilityLabel={AccessibilityLabel.SENSOR_DISPLAY_ITEM}
+                    key={(item?.id || index).toString()}
+                    item={item}
+                    evaluate={evaluate}
+                    emergency={onEmergencyButtonPress}
+                    sensor={sensor}
+                    offsetTitle={offsetTitle}
+                    setOffsetTitle={setOffsetTitle}
+                    setShowWindDirection={setShowWindDirection}
+                    background={station?.background}
+                  />
                 );
               })}
             </SensorConnectStatusViewHeader>

package/src/screens/Device/hooks/__test__/useEvaluateValue.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useEvaluateValue, useGetEvaluateValue } from '../useEvaluateValue';
@@ -105,23 +104,22 @@ describe('Test useEvaluateValue', () => {
     expect(evaluateValue.current(2, 2).text).toBe(2);
   });
 
-  // NOTE: Hinh will fix it later
-  // it('test evaluate fetch from server if not exists', async () => {
-  //   const mock = new MockAdapter(api.axiosInstance);
-  //   mock.onGet(API.FETCH_VALUE_EVALUATION(111)).reply(200, {
-  //     unit_id: 1,
-  //     configs: [111],
-  //   });
-
-  //   const { result: evaluateValue } = renderHook(
-  //     () => useGetEvaluateValue(111),
-  //     {
-  //       wrapper: wrapper(valueEvaluations),
-  //     }
-  //   );
-  //   expect(evaluateValue.current).toBe(undefined);
-  //   await flushPromises();
-
-  //   expect(mock.history.get.length).toBe(1);
-  // });
+  it('test evaluate fetch from server if not exists', async () => {
+    const mock = new MockAdapter(api.axiosInstance);
+    mock.onGet(API.FETCH_VALUE_EVALUATION(111)).reply(200, {
+      unit_id: 1,
+      configs: [111],
+    });
+
+    const { result: evaluateValue } = renderHook(
+      () => useGetEvaluateValue(111),
+      {
+        wrapper: wrapper(valueEvaluations),
+      }
+    );
+    expect(evaluateValue.current).toBe(undefined);
+    await flushPromises();
+
+    expect(mock.history.get.length).toBe(1);
+  });
 });

package/src/screens/Device/styles.js

@@ -97,7 +97,4 @@ export default StyleSheet.create({
     marginLeft: 16,
     marginBottom: 16,
   },
-  moreIcon: {
-    transform: [{ rotate: '90deg' }],
-  },
 });