@eohjsc/react-native-smart-city 0.2.23 → 0.2.26

package/src/commons/SelectActionCard/SelectActionStyles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrapcontent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  card: {
+    marginTop: 16,
+    marginBottom: 0,
+  },
+  mt4: {
+    marginTop: 4,
+  },
+});

package/src/commons/SelectActionCard/index.js

@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+
+import { Card } from '../CardShadow';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './SelectActionStyles';
+
+const SelectActionCard = memo(({ title, action, onPress }) => {
+  return (
+    <Card style={styles.card}>
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.wrapcontent}>
+          <View>
+            <Text type="Body" color={Colors.Gray7}>
+              {title}
+            </Text>
+            <Text bold type="H4" style={styles.mt4}>
+              {action}
+            </Text>
+          </View>
+          <IconOutline name="right" size={20} />
+        </View>
+      </TouchableOpacity>
+    </Card>
+  );
+});
+
+export default SelectActionCard;

package/src/commons/Sharing/__test__/DevicePermissionsCheckbox.test.js

@@ -2,6 +2,18 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 import DevicePermissionsCheckbox from '../DevicePermissionsCheckbox';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (sensor, mockFunction) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DevicePermissionsCheckbox
+      sensor={sensor}
+      selectedIndexes={[1]}
+      onSelectIndexes={mockFunction}
+    />
+  </SCProvider>
+);
 
 jest.mock('axios');
 describe('Test DevicePermissionsCheckbox', () => {
@@ -13,15 +25,9 @@ describe('Test DevicePermissionsCheckbox', () => {
     actions: [13],
   };
   const mockFunction = jest.fn();
-  test('test create DevicePermissionsCheckbox', () => {
-    act(() => {
-      tree = renderer.create(
-        <DevicePermissionsCheckbox
-          sensor={sensor}
-          selectedIndexes={[1]}
-          onSelectIndexes={mockFunction}
-        />
-      );
+  test('test create DevicePermissionsCheckbox', async () => {
+    await act(() => {
+      tree = renderer.create(wrapComponent(sensor, mockFunction));
     });
     const instance = tree.root;
     const dropdownButtons = instance.findAllByType(TouchableOpacity);

package/src/commons/Sharing/__test__/MemberList.test.js

@@ -3,6 +3,19 @@ import renderer, { act } from 'react-test-renderer';
 import MemberList from '../MemberList';
 import RowMember from '../RowMember';
 import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (dataMember, ownerId, currentUserId, mockFunc) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MemberList
+      dataMember={dataMember}
+      ownerId={ownerId}
+      currentUserId={currentUserId}
+      onPressRemove={mockFunc}
+    />
+  </SCProvider>
+);
 
 describe('MemberList', () => {
   let tree;
@@ -10,14 +23,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember === ownerId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={1}
-          currentUserId={2}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 1, 2, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -26,13 +32,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember !== ownerId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={2}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 2, null, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -41,14 +41,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember === currentUserId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={2}
-          currentUserId={1}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 2, 1, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -56,9 +49,8 @@ describe('MemberList', () => {
   });
   test('MemberList dataMember null', () => {
     const dataMember = [];
-    const component = <MemberList dataMember={dataMember} />;
     act(() => {
-      tree = renderer.create(component);
+      tree = renderer.create(wrapComponent(dataMember));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(RowMember);

package/src/commons/Sharing/__test__/StationDevicePermission.test.js

@@ -3,10 +3,18 @@ import renderer, { act } from 'react-test-renderer';
 import StationDevicePermissions from '../StationDevicePermissions';
 import { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (dataStation) => (
+  <SCProvider initState={mockSCStore({})}>
+    <StationDevicePermissions dataStation={dataStation} />
+  </SCProvider>
+);
 
 describe('StationDevicePermission', () => {
   let tree;
-  test('StationDevicePermission', () => {
+  test('StationDevicePermission', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -19,9 +27,8 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TouchableOpacity);
@@ -35,7 +42,7 @@ describe('StationDevicePermission', () => {
     iconOutline = instance.findAllByType(IconOutline);
     expect(iconOutline[0].props.name).toEqual('up');
   });
-  test('StationDevicePermission  icon: barrier', () => {
+  test('StationDevicePermission  icon: barrier', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -48,15 +55,14 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TouchableOpacity);
     expect(textInputs.length).toBe(5);
   });
-  test('StationDevicePermission  icon: sensor', () => {
+  test('StationDevicePermission  icon: sensor', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -68,9 +74,8 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
 
     const instance = tree.root;

package/src/commons/Sharing/__test__/WrapHeaderScrollable.test.js

@@ -6,15 +6,6 @@ import WrapHeaderScrollable from '../WrapHeaderScrollable';
 describe('WrapHeaderScrollable', () => {
   let tree;
 
-  test('WrapHeaderScrollable snapshot', () => {
-    const loadMore = jest.fn();
-    const component = <WrapHeaderScrollable onLoadMore={loadMore} />;
-    act(() => {
-      tree = renderer.create(component);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
-
   test('WrapHeaderScrollable scroll to end', () => {
     const loadMore = jest.fn();
     act(() => {

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -12,18 +12,26 @@ import styles from './ItemOneTapStyles.js';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import { axiosPost } from '../../../utils/Apis/axios';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useNavigation } from '@react-navigation/core';
+import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route';
+import { useGetIdUser } from '../../../hooks/Common';
+import { TESTID } from '../../../configs/Constants';
 
-const ItemOneTap = memo(({ automate }) => {
+const ItemOneTap = memo(({ isOwner, automate, unit }) => {
   const { navigate } = useNavigation();
-  const { id, script, activate_at } = automate;
-
+  const { id, type, user, script, activate_at } = automate;
   const t = useTranslations();
+  const idUser = useGetIdUser();
+
   const goToDetail = useCallback(() => {
-    navigate(Routes.ScriptDetail, { id, name: script?.name });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    navigate(Routes.ScriptDetail, {
+      id,
+      name: script?.name,
+      type: type,
+      havePermission: isOwner || user === idUser,
+      unit,
+    });
+  }, [isOwner, user, idUser, navigate, id, script, type, unit]);
 
   const handleScriptAction = useCallback(async () => {
     const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
@@ -51,11 +59,14 @@ const ItemOneTap = memo(({ automate }) => {
       <View style={styles.container}>
         <View style={styles.boxIcon}>
           {displayIcon()}
-          <TouchableOpacity onPress={handleScriptAction}>
+          <TouchableOpacity
+            testID={TESTID.AUTOMATE_SCRIPT_ACTION}
+            onPress={handleScriptAction}
+          >
             <CheckCircle />
           </TouchableOpacity>
         </View>
-        <TouchableOpacity onPress={goToDetail}>
+        <TouchableOpacity testID={TESTID.GO_DETAIL} onPress={goToDetail}>
           <Text
             numberOfLines={1}
             semibold

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -0,0 +1,149 @@
+import axios from 'axios';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Toast from 'react-native-toast-message';
+import { act, create } from 'react-test-renderer';
+import SubUnitAutomate from '..';
+import { TESTID } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Routes from '../../../../utils/Route';
+
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SubUnitAutomate {...data} />
+  </SCProvider>
+);
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: () => 'vi',
+  };
+});
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('axios');
+
+let tree;
+let data = {
+  isOwner: true,
+  type: 'one_tap',
+  automates: [
+    {
+      id: 1,
+      user: 6,
+      type: 'one_tap',
+      activate_at: '2021-09-17T05:30:00Z',
+      script: {
+        name: 'Joshua Ray',
+        icon: '',
+        icon_kit: '',
+      },
+    },
+  ],
+};
+
+describe('test Item', () => {
+  beforeEach(() => {
+    axios.post.mockClear();
+    mockedNavigate.mockClear();
+  });
+  test('render SubUnitAutomate isOwner', async () => {
+    const response = {
+      status: 200,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(data));
+    });
+
+    const instance = tree.root;
+    const item = instance.findAll(
+      (el) => el.props.testID === TESTID.PLUS && el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewOneTap, {
+      type: 'one_tap',
+    });
+    mockedNavigate.mockClear();
+
+    const goDetail = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.GO_DETAIL && el.type === TouchableOpacity
+    );
+    expect(goDetail).toHaveLength(1);
+    await act(async () => {
+      await goDetail[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      havePermission: true,
+      id: 1,
+      name: 'Joshua Ray',
+      type: 'one_tap',
+    });
+
+    const handleScriptAction = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.AUTOMATE_SCRIPT_ACTION &&
+        el.type === TouchableOpacity
+    );
+    expect(handleScriptAction).toHaveLength(1);
+    await act(async () => {
+      await handleScriptAction[0].props.onPress();
+    });
+    expect(Toast.show).toBeCalledWith({
+      type: 'success',
+      position: 'bottom',
+      text1: 'Activated successfully.',
+      visibilityTime: 1000,
+    });
+  });
+
+  test('render SubUnitAutomate handleScriptAction fail', async () => {
+    const response = {
+      status: 400,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(data));
+    });
+
+    const handleScriptAction = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.AUTOMATE_SCRIPT_ACTION &&
+        el.type === TouchableOpacity
+    );
+    expect(handleScriptAction).toHaveLength(1);
+    await act(async () => {
+      await handleScriptAction[0].props.onPress();
+    });
+    expect(Toast.show).toBeCalledWith({
+      type: 'error',
+      position: 'bottom',
+      text1: 'Activation failed.',
+      visibilityTime: 1000,
+    });
+  });
+});

package/src/commons/SubUnit/OneTap/index.js

@@ -8,22 +8,32 @@ import ItemOneTap from './ItemOneTap';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route/index.js';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
 
-const SubUnitOneTap = ({ automates }) => {
+const SubUnitAutomate = ({ isOwner, type, automates, unit }) => {
   const t = useTranslations();
-  const navigation = useNavigation();
+  const { navigate } = useNavigation();
   const handleOnAddNew = () => {
-    navigation.navigate(Routes.AddNewOneTap);
+    switch (type) {
+      case AUTOMATE_TYPE.ONE_TAP:
+        navigate(Routes.AddNewOneTap, { type: type, unit });
+        break;
+      case AUTOMATE_TYPE.VALUE_CHANGE:
+        navigate(Routes.AddNewAutoSmart, { type: type });
+        break;
+    }
   };
   return (
     <Section style={styles.noShadow}>
       <View style={styles.boxDevices}>
-        <ItemAddNew title={t('add_new')} onAddNew={handleOnAddNew} />
         {!!automates.length &&
-          automates.map((item) => <ItemOneTap automate={item} />)}
+          automates.map((item) => (
+            <ItemOneTap isOwner={isOwner} automate={item} unit={unit} />
+          ))}
+        <ItemAddNew title={t('add_new')} onAddNew={handleOnAddNew} />
       </View>
     </Section>
   );
 };
 
-export default SubUnitOneTap;
+export default SubUnitAutomate;

package/src/commons/SubUnit/ShortDetail.js

@@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Images, Device } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { SubUnitName, TESTID } from '../../configs/Constants';
 import { Section } from '../Section';
 import Text from '../Text';
 import ItemDevice from '../Device/ItemDevice';
@@ -75,9 +75,13 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
     }
   };
 
-  const itemAddNewTitle = station.isFavorites
-    ? t('add_to_favorites')
-    : t('add_new_device');
+  const itemAddNewTitle = t(
+    station?.isFavorites
+      ? 'add_to_favorites'
+      : station?.name === SubUnitName.scenario
+      ? 'add_script'
+      : 'add_new_device'
+  );
 
   return (
     <Section style={styles.noShadow}>
@@ -90,7 +94,6 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
       )}
 
       <View style={styles.boxDevices}>
-        <ItemAddNew title={itemAddNewTitle} onAddNew={handleOnAddNew} />
         {!!station.sensors &&
           station.sensors.map((sensor, index) => (
             <ItemDevice
@@ -108,6 +111,7 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
               isGGHomeConnected={isGGHomeConnected}
             />
           ))}
+        <ItemAddNew title={itemAddNewTitle} onAddNew={handleOnAddNew} />
       </View>
     </Section>
   );

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -2,8 +2,16 @@ import React from 'react';
 import { Image, View, TouchableWithoutFeedback } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import Routes from '../../../utils/Route';
 
+const wrapComponent = (unit, station) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ShortDetailSubUnit unit={unit} station={station} />
+  </SCProvider>
+);
+
 import ShortDetailSubUnit from '../ShortDetail';
 
 const mockedNavigate = jest.fn();
@@ -54,20 +62,20 @@ describe('test ShortDetail Subunit', () => {
 
   test('render ShortDetail', () => {
     act(() => {
-      tree = create(<ShortDetailSubUnit unit={unit} station={station} />);
+      tree = create(wrapComponent(unit, station));
     });
     const instance = tree.root;
     const image = instance.findAllByType(Image);
     const imageBackground = image.find(
       (item) => item.props.testID === TESTID.SUB_UNIT_BACKGROUND
     );
-    expect(imageBackground).toBeDefined();
+    expect(imageBackground).not.toBeDefined();
   });
 
   test('render ShortDetail without background', () => {
     station.background = '';
     act(() => {
-      tree = create(<ShortDetailSubUnit unit={unit} station={station} />);
+      tree = create(wrapComponent(unit, station));
     });
     const instance = tree.root;
     const image = instance.findAllByType(Image);
@@ -86,7 +94,7 @@ describe('test ShortDetail Subunit', () => {
     };
 
     act(() => {
-      tree = create(<ShortDetailSubUnit unit={unit} station={station} />);
+      tree = create(wrapComponent(unit, station));
     });
     const instance = tree.root;
     const view = instance.findAllByType(View);
@@ -120,7 +128,7 @@ describe('test ShortDetail Subunit', () => {
     ];
 
     act(() => {
-      tree = create(<ShortDetailSubUnit unit={unit} station={station} />);
+      tree = create(wrapComponent(unit, station));
     });
     const instance = tree.root;
     const itemDevice = instance.findAll(
@@ -132,7 +140,7 @@ describe('test ShortDetail Subunit', () => {
 
   test('render ShortDetail add new device', () => {
     act(() => {
-      tree = create(<ShortDetailSubUnit unit={unit} station={station} />);
+      tree = create(wrapComponent(unit, station));
     });
     const instance = tree.root;
     const buttonAddNew = instance.findAllByType(TouchableWithoutFeedback);

package/src/commons/Today/__test__/Today.test.js

@@ -1,13 +1,21 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import Today from '../index';
 
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <Today />
+  </SCProvider>
+);
+
 describe('Test Today', () => {
   let tree;
   test('create Today', () => {
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
     act(() => {
-      tree = renderer.create(<Today />);
+      tree = renderer.create(wrapComponent());
     });
     expect(tree.toJSON()).toMatchSnapshot();
   });

package/src/commons/Today/__test__/__snapshots__/Today.test.js.snap

@@ -20,7 +20,7 @@ exports[`Test Today create Today 1`] = `
       ]
     }
   >
-    Hôm nay, 24 tháng 1
+    Today, Jan 24
   </Text>
 </View>
 `;