@eohjsc/react-native-smart-city 0.2.96 → 0.2.99

package/src/commons/FieldTemplate/ChooseUserField/__test__/index.test.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import axios from 'axios';
+import { act, create } from 'react-test-renderer';
+import { TESTID } from '../../../../configs/Constants';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import ChooseUserField from '../index';
+import { TouchableOpacity } from 'react-native';
+import { ModalCustom } from '../../../Modal';
+
+jest.mock('axios');
+
+const wrapComponent = (
+  unit = { id: 1 },
+  dataItem = {
+    type: 'choose_user',
+    key: 'user_id',
+    action: {
+      type: 'action_zigbee',
+      id: 1,
+    },
+  },
+  index = 0,
+  setDataForm,
+  dataForm = [
+    {
+      type: 'choose_user',
+      key: 'user_id',
+      action: {
+        type: 'action_zigbee',
+        id: 1,
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ChooseUserField
+      unit={unit}
+      dataItem={dataItem}
+      index={index}
+      setDataForm={jest.fn()}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test ChooseUserField', () => {
+  let tree;
+
+  afterEach(() => {
+    axios.get.mockClear();
+  });
+
+  const onPressCancel = async (instance, popup) => {
+    const buttonCancel = instance.find(
+      (el) =>
+        el.props.testID ===
+          TESTID.CHOOSE_POPUP + TESTID.BOTTOM_VIEW_SECONDARY &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await buttonCancel.props.onPress();
+    });
+    expect(popup.props.isVisible).toBeFalsy();
+  };
+
+  const onPressApply = async (instance, popup) => {
+    const buttonApply = instance.find(
+      (el) =>
+        el.props.testID === TESTID.CHOOSE_POPUP + TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await buttonApply.props.onPress();
+    });
+    expect(popup.props.isVisible).toBeFalsy();
+  };
+
+  test('render ChooseUserField handleOnApply', async () => {
+    const response_unit_members = {
+      status: 200,
+      data: [{ id: 1, name: 'Ken' }],
+    };
+
+    axios.get.mockImplementation(() => {
+      return response_unit_members;
+    });
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+
+    const instance = tree.root;
+
+    const ChooseField = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_FIELD &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      await ChooseField.props.onPress();
+    });
+
+    const popup = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_POPUP && item.type === ModalCustom
+    );
+    expect(popup.props.isVisible).toBeTruthy();
+    await onPressCancel(instance, popup);
+    await onPressApply(instance, popup);
+  });
+});

package/src/commons/FieldTemplate/ChooseUserField/index.js

@@ -0,0 +1,62 @@
+import React, { memo, useEffect, useState } from 'react';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { TouchableOpacity, View } from 'react-native';
+
+import styles from './ChooseFieldStyles';
+import ChoosePopup from './ChoosePopup';
+import { useBoolean } from '../../../hooks/Common';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API, Colors } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+import Text from '../../Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ChooseUserField = ({ unit, dataItem, index, setDataForm, dataForm }) => {
+  const [showFilterPopup, setShowFilterPopup, setHideFilterPopup] =
+    useBoolean();
+  const [choose, setChoose] = useState({});
+  const [members, setMembers] = useState([]);
+  const t = useTranslations();
+  const fetchMembers = async () => {
+    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unit.id));
+    if (success) {
+      setMembers(data);
+    }
+  };
+
+  useEffect(() => {
+    if (!members.length) {
+      fetchMembers();
+      return;
+    }
+
+    dataItem.data = choose.id;
+    dataItem.valid = true;
+    dataItem[dataItem.action.type] = dataItem.action.id;
+    dataForm[index] = dataItem;
+    setDataForm([...dataForm]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [choose]);
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.textHeadLine}>{t('choose_user')}</Text>
+      <TouchableOpacity
+        testID={TESTID.CHOOSE_FIELD}
+        style={styles.buttonValue}
+        onPress={setShowFilterPopup}
+      >
+        <Text style={styles.value}>{choose.name}</Text>
+        <IconOutline name="right" size={20} color={Colors.Gray8} />
+      </TouchableOpacity>
+      <ChoosePopup
+        isVisible={showFilterPopup}
+        onHide={setHideFilterPopup}
+        members={members}
+        title={t('choose_user')}
+        onApply={setChoose}
+      />
+    </View>
+  );
+};
+export default memo(ChooseUserField);

package/src/commons/FieldTemplate/PasscodeField/PasscodeFieldStyles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingTop: 30,
+  },
+  invalid: {
+    width: 90,
+    textAlign: 'center',
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Red,
+  },
+  valid: {
+    width: 90,
+    textAlign: 'center',
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Primary,
+  },
+  textHeadLine: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+});

package/src/commons/FieldTemplate/PasscodeField/__test__/index.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import axios from 'axios';
+import { act, create } from 'react-test-renderer';
+import { TESTID } from '../../../../configs/Constants';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import PasscodeField from '../index';
+
+jest.mock('axios');
+const mockSetState = jest.fn();
+
+const wrapComponent = (
+  dataItem = {
+    type: 'passcode',
+    key: 'passcode',
+    action: {
+      type: 'action_zigbee',
+      id: 1,
+    },
+  },
+  index = 0,
+  dataForm = [
+    {
+      type: 'passcode',
+      key: 'passcode',
+      action: {
+        type: 'action_zigbee',
+        id: 1,
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <PasscodeField
+      dataItem={dataItem}
+      index={index}
+      setDataForm={mockSetState}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test PasscodeField', () => {
+  let tree;
+
+  afterEach(() => {
+    axios.get.mockClear();
+    mockSetState.mockClear();
+  });
+
+  test('render PasscodeField', async () => {
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const inputPasscode = instance.find(
+      (item) => item.props.testID === TESTID.PASSCODE_FIELD
+    );
+
+    await act(async () => {
+      await inputPasscode.props.onChangeText('123');
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'passcode',
+        type: 'passcode',
+        valid: false,
+        action: {
+          id: 1,
+          type: 'action_zigbee',
+        },
+      },
+    ]);
+
+    await act(async () => {
+      await inputPasscode.props.onChangeText('123456');
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'passcode',
+        type: 'passcode',
+        data: '123456',
+        valid: true,
+        action: {
+          id: 1,
+          type: 'action_zigbee',
+        },
+        action_zigbee: 1,
+      },
+    ]);
+  });
+});

package/src/commons/FieldTemplate/PasscodeField/index.js

@@ -0,0 +1,43 @@
+import React, { memo, useCallback, useState } from 'react';
+import { Text, TextInput, View } from 'react-native';
+import { TESTID } from '../../../configs/Constants';
+
+import styles from './PasscodeFieldStyles';
+
+const PasscodeField = ({ dataItem, index, setDataForm, dataForm }) => {
+  const [invalid, setInvaild] = useState(false);
+  const onChangeText = useCallback(
+    (value) => {
+      if (value.length >= 4 && value.length <= 10) {
+        dataItem.data = value;
+        dataItem.valid = true;
+        dataItem[dataItem.action.type] = dataItem.action.id;
+        dataForm[index] = dataItem;
+        setInvaild(false);
+        setDataForm([...dataForm]);
+      } else {
+        dataItem.valid = false;
+        dataForm[index] = dataItem;
+        setInvaild(true);
+        setDataForm([...dataForm]);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.textHeadLine}>{'Passcode'}</Text>
+      <TextInput
+        testID={TESTID.PASSCODE_FIELD}
+        style={invalid ? styles.invalid : styles.valid}
+        placeholder={'******'}
+        keyboardType={'numeric'}
+        maxLength={10}
+        onChangeText={onChangeText}
+      />
+    </View>
+  );
+};
+export default memo(PasscodeField);

package/src/commons/FieldTemplate/ScheduleField/ScheduleFieldStyles.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapper: {
+    paddingTop: 30,
+  },
+  textHeadLine: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+});

package/src/commons/FieldTemplate/ScheduleField/__test__/index.test.js

@@ -0,0 +1,182 @@
+import React from 'react';
+import axios from 'axios';
+import { act, create } from 'react-test-renderer';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import ScheduleField from '../index';
+import { TESTID } from '../../../../configs/Constants';
+import { TouchableOpacity } from 'react-native';
+
+jest.mock('axios');
+const mockSetState = jest.fn();
+
+const wrapComponent = (
+  dataItem = {
+    type: 'schedule',
+    key: 'schedule',
+    action: {
+      type: 'action_zigbee',
+      id: {
+        always: 2,
+        recurring: 4,
+        temporary: 5,
+      },
+    },
+  },
+  index = 0,
+  dataForm = [
+    {
+      type: 'schedule',
+      key: 'schedule',
+      action: {
+        type: 'action_zigbee',
+        id: {
+          always: 2,
+          recurring: 4,
+          temporary: 5,
+        },
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ScheduleField
+      dataItem={dataItem}
+      index={index}
+      setDataForm={mockSetState}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test ScheduleField', () => {
+  let tree;
+  beforeEach(() => {
+    Date.now = jest.fn(() => new Date('2022-05-30T15:50:36+01:00'));
+  });
+  afterEach(() => {
+    axios.get.mockClear();
+    mockSetState.mockClear();
+  });
+
+  const onPressRecurring = async (instance, schedule) => {
+    await act(async () => {
+      await schedule.props.onPress();
+    });
+    const recurring = instance.find(
+      (el) =>
+        el.props.testID === '0' + TESTID.RECURRING_REPEAT_ITEM &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await recurring.props.onPress();
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: {
+          access_schedule: 'recurring',
+          recurring_time_end: '2022-05-30T16:50:36+01:00',
+          recurring_time_repeat: ['6'],
+          recurring_time_start: '2022-05-30T15:50:36+01:00',
+        },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 4,
+      },
+    ]);
+    mockSetState.mockClear();
+  };
+
+  const onPressTemporary = async (instance, schedule) => {
+    await act(async () => {
+      await schedule.props.onPress();
+    });
+
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: {
+          access_schedule: 'temporary',
+          temporary_time_end: '2022-05-31T15:50:36+01:00',
+          temporary_time_start: '2022-05-30T15:50:36+01:00',
+        },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 5,
+      },
+    ]);
+    const temporaryEnd = instance.find(
+      (el) =>
+        el.props.testID === TESTID.TEMPORARY_END_TEXT_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await temporaryEnd.props.onPress();
+    });
+    const dateTimePicker = instance.find(
+      (el) => el.props.testID === TESTID.WHEEL_DATE_TIME_PICKER
+    );
+    expect(dateTimePicker.props.isVisible).toBeTruthy();
+    const popupDateTimePickerDone = instance.find(
+      (el) =>
+        el.props.testID ===
+          `${TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await popupDateTimePickerDone.props.onPress();
+    });
+    expect(dateTimePicker.props.isVisible).toBeFalsy();
+    mockSetState.mockClear();
+  };
+
+  test('render ScheduleField choose schedule', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: { access_schedule: 'always' },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 2,
+      },
+    ]);
+    mockSetState.mockClear();
+    const instance = tree.root;
+    const schedule = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.ACCESS_SCHEDULE_RADIO_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(schedule).toHaveLength(3);
+    await onPressRecurring(instance, schedule[1]);
+    await onPressTemporary(instance, schedule[2]);
+  });
+});