@eohjsc/react-native-smart-city 0.2.72 → 0.2.76

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/ControlPlay.test.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import ControlPlay from '../component/ControlPlay';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+import { TESTID } from '../../../../configs/Constants';
+
+const wrapComponent = (onPressPrev, onPressStop, onPressNext) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ControlPlay
+      onPressPrev={onPressPrev}
+      onPressStop={onPressStop}
+      onPressNext={onPressNext}
+    />
+  </SCProvider>
+);
+
+describe('Test ControlPlay', () => {
+  let wrapper;
+  test('render ControlPlay', async () => {
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const prevButton = instance.findAllByType(TouchableOpacity);
+    expect(prevButton).toHaveLength(3);
+  });
+  test('render ControlPlay Prev', async () => {
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const PrevButton = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(PrevButton).toBeDefined();
+  });
+  test('OnPress ControlPlay Prev', async () => {
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const PrevButton = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(PrevButton).toBeDefined();
+    act(() => {
+      PrevButton.props.onPress();
+    });
+  });
+  test('render ControlPlay Stop', async () => {
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const StopButton = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(StopButton).toBeDefined();
+  });
+  test('OnPress ControlPlay Stop', async () => {
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const StopButton = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(StopButton).toBeDefined();
+    act(() => {
+      StopButton.props.onPress();
+    });
+  });
+  test('render ControlPlay Next', async () => {
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const NextButton = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(NextButton).toBeDefined();
+  });
+  test('OnPress ControlPlay Next', async () => {
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const NextButton = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(NextButton).toBeDefined();
+    act(() => {
+      NextButton.props.onPress();
+    });
+  });
+});

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/RectangleButton.test.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import RectangleButton from '../component/RectangleButton';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+import { TESTID } from '../../../../configs/Constants';
+
+const wrapComponent = (type, onPress, onPressUp, onPressDown, icon) => (
+  <SCProvider initState={mockSCStore({})}>
+    <RectangleButton
+      type={type}
+      icon={icon}
+      onPress={onPress}
+      onPressUp={onPressUp}
+      onPressDown={onPressDown}
+    />
+  </SCProvider>
+);
+
+describe('Test RectangleButton', () => {
+  let wrapper;
+  let type;
+  test('render all RectangleButton column', async () => {
+    type = 'column';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(type, mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(2);
+  });
+  test('render RectangleButtonUp column', async () => {
+    type = 'column';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(type, mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const RectangleButtonUp = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(RectangleButtonUp).toBeDefined();
+  });
+  test('onPress RectangleButtonUp column', async () => {
+    type = 'column';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(type, mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const RectangleButtonUp = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(RectangleButtonUp).toBeDefined();
+    act(() => {
+      RectangleButtonUp.props.onPress();
+    });
+  });
+  test('render RectangleButtonDown column', async () => {
+    type = 'column';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(type, mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const RectangleButtonDown = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(RectangleButtonDown).toBeDefined();
+  });
+  test('onPress RectangleButtonDown column', async () => {
+    type = 'column';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(type, mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+
+    const RectangleButtonDown = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(RectangleButtonDown).toBeDefined();
+    act(() => {
+      RectangleButtonDown.props.onPress();
+    });
+  });
+});

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/SmartTiviActionTemplate.test.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import SmartTiviActionTemplate from '../SmartTiviActionTemplate';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { ScrollView } from 'react-native';
+import { TESTID } from '../../../../configs/Constants';
+
+const wrapComponent = (actionGroup, doAction) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SmartTiviActionTemplate actionGroup={actionGroup} doAction={doAction} />
+  </SCProvider>
+);
+
+describe('Test SmartTiviActionTemplate', () => {
+  let wrapper;
+  test('render SmartTiviActionTemplate', async () => {
+    await act(async () => {
+      wrapper = await create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const touchableOpacity = instance.findAllByType(ScrollView);
+    expect(touchableOpacity).toHaveLength(1);
+  });
+  test('render CircleButton small OnOff and exit', async () => {
+    await act(async () => {
+      wrapper = await create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const circleButtonOnOff = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON
+    );
+    expect(circleButtonOnOff).toBeDefined();
+    await act(() => {
+      circleButtonOnOff.props.onPress();
+    });
+
+    const circleButtonExit = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON
+    );
+    expect(circleButtonExit).toBeDefined();
+    // expect(circleButton).toHaveLength(2);
+
+    await act(() => {
+      circleButtonExit.props.onPress();
+    });
+  });
+  test('render RectangleButton column Volume and CH', async () => {
+    await act(async () => {
+      wrapper = await create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const RectangleButtonVolume = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON
+    );
+    expect(RectangleButtonVolume).toBeDefined();
+    await act(() => {
+      RectangleButtonVolume.props.onPressUp();
+    });
+    await act(() => {
+      RectangleButtonVolume.props.onPressDown();
+    });
+    const RectangleButtonCH = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON
+    );
+    expect(RectangleButtonCH).toBeDefined();
+    await act(() => {
+      RectangleButtonCH.props.onPressUp();
+    });
+    await act(() => {
+      RectangleButtonCH.props.onPressDown();
+    });
+  });
+  test('render CircleButton big button', async () => {
+    await act(async () => {
+      wrapper = await create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const CircleButtonBig = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON
+    );
+    expect(CircleButtonBig).toBeDefined();
+    await act(() => {
+      CircleButtonBig.props.onPressUp();
+    });
+    await act(() => {
+      CircleButtonBig.props.onPressDown();
+    });
+    await act(() => {
+      CircleButtonBig.props.onPressLeft();
+    });
+    await act(() => {
+      CircleButtonBig.props.onPressRight();
+    });
+    await act(() => {
+      CircleButtonBig.props.onPressOk();
+    });
+  });
+  test('render ControlPlay button', async () => {
+    await act(async () => {
+      wrapper = await create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const ControlPlay = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON
+    );
+    expect(ControlPlay).toBeDefined();
+    await act(() => {
+      ControlPlay.props.onPressPrev();
+    });
+    await act(() => {
+      ControlPlay.props.onPressStop();
+    });
+    await act(() => {
+      ControlPlay.props.onPressNext();
+    });
+  });
+  test('render controlHome button', async () => {
+    await act(async () => {
+      wrapper = await create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const controlHome = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON
+    );
+    expect(controlHome).toBeDefined();
+    await act(() => {
+      controlHome.props.onPress();
+    });
+  });
+  test('render controlBack button', async () => {
+    await act(async () => {
+      wrapper = await create(wrapComponent());
+    });
+    const instance = wrapper.root;
+    const controlBack = instance.find(
+      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON
+    );
+    expect(controlBack).toBeDefined();
+    await act(() => {
+      controlBack.props.onPress();
+    });
+  });
+});

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/CircleButton.js

@@ -0,0 +1,91 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View, Image } from 'react-native';
+import styles from './CircleButtonStyles';
+import Text from '../../../Text';
+import { Colors, Images } from '../../../../configs';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { TESTID } from '../../../../configs/Constants';
+
+const CircleButton = memo(
+  ({
+    icon,
+    onPress,
+    wrapStyle,
+    type,
+    onPressUp,
+    onPressDown,
+    onPressLeft,
+    onPressRight,
+    onPressOk,
+  }) => {
+    switch (type) {
+      case 'small':
+        return (
+          <TouchableOpacity
+            style={[styles.circleSmallButton, wrapStyle]}
+            onPress={onPress}
+          >
+            <View style={styles.backgroundButton}>
+              {!!icon && icon}
+              <Image
+                source={Images.shadowButton}
+                resizeMode={'contain'}
+                style={styles.positionAbsolute}
+              />
+            </View>
+          </TouchableOpacity>
+        );
+      case 'big':
+        return (
+          <View style={styles.multipleButton}>
+            <View style={styles.headerMultipleButton}>
+              <TouchableOpacity
+                style={[styles.upButton, styles.padding16]}
+                onPress={onPressUp}
+                testID={TESTID.SMART_TIVI_TEMPLATE.UP_BUTTON}
+              >
+                <IconOutline size={14} name={'caret-up'} />
+              </TouchableOpacity>
+            </View>
+            <View style={styles.bodyMultipleButton}>
+              <TouchableOpacity
+                style={[styles.leftButton, styles.padding16]}
+                onPress={onPressLeft}
+                testID={TESTID.SMART_TIVI_TEMPLATE.LEFT_BUTTON}
+              >
+                <IconOutline size={14} name={'caret-left'} />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.okButton]}
+                onPress={onPressOk}
+                testID={TESTID.SMART_TIVI_TEMPLATE.OK_BUTTON}
+              >
+                <Text type="H4" color={Colors.Gray9} bold>
+                  OK
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.rightButton, styles.padding16]}
+                onPress={onPressRight}
+                testID={TESTID.SMART_TIVI_TEMPLATE.RIGHT_BUTTON}
+              >
+                <IconOutline size={14} name={'caret-right'} />
+              </TouchableOpacity>
+            </View>
+            <View style={styles.footerMultipleButton}>
+              <TouchableOpacity
+                style={[styles.downButton, styles.padding16]}
+                onPress={onPressDown}
+                testID={TESTID.SMART_TIVI_TEMPLATE.DOWN_BUTTON}
+              >
+                <IconOutline size={14} name={'caret-down'} />
+              </TouchableOpacity>
+            </View>
+          </View>
+        );
+      default:
+        return <></>;
+    }
+  }
+);
+export default CircleButton;

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/CircleButtonStyles.js

@@ -0,0 +1,79 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Device } from '../../../../configs';
+
+const centerRowItem = {
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+const betweenRowItem = {
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+};
+const widthMonitor = Device.screenWidth;
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  circleSmallButton: {
+    ...centerRowItem,
+    width: 56,
+    height: 56,
+  },
+  backgroundButton: {
+    flex: 1,
+    ...centerRowItem,
+  },
+  positionAbsolute: {
+    position: 'absolute',
+    zIndex: 1,
+  },
+  multipleButton: {
+    flexWrap: 'nowrap',
+    width: widthMonitor - 206.5,
+    height: 186,
+    borderRadius: 900,
+    borderColor: Colors.Gray4,
+    borderWidth: 1,
+  },
+  padding16: {
+    padding: 16,
+  },
+  headerMultipleButton: {
+    ...centerRowItem,
+  },
+  bodyMultipleButton: {
+    flexWrap: 'nowrap',
+    ...betweenRowItem,
+    justifyContent: 'space-around',
+  },
+  footerMultipleButton: {
+    ...centerRowItem,
+  },
+  upButton: {
+    height: 58,
+    justifyContent: 'flex-start',
+  },
+  downButton: {
+    height: 58,
+    justifyContent: 'flex-end',
+  },
+  leftButton: {
+    width: 58,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  rightButton: {
+    width: 58,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  okButton: {
+    paddingTop: 5,
+    width: 70,
+    height: 70,
+    backgroundColor: Colors.Gray4,
+    borderRadius: 600,
+    ...centerRowItem,
+  },
+});

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -0,0 +1,51 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Colors } from '../../../../configs';
+
+import styles from './ControlPlayStyles';
+import { Pause } from './Icon';
+import { TESTID } from '../../../../configs/Constants';
+
+import { IconOutline } from '@ant-design/icons-react-native';
+
+const ControlPlay = memo(
+  ({ onPressPrev, onPressStop, onPressNext, wrapStyle }) => {
+    return (
+      <View style={[styles.wrapControlPlay, wrapStyle]}>
+        <TouchableOpacity
+          style={[styles.controlButton, styles.controlPrev]}
+          onPress={onPressPrev}
+          testID={TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON}
+        >
+          <IconOutline
+            size={32}
+            name={'backward'}
+            color={Colors.Gray9}
+            style={[styles.button]}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.controlButton, styles.controlStop]}
+          onPress={onPressStop}
+          testID={TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON}
+        >
+          <Pause size={48} />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.controlButton, styles.controlNext]}
+          onPress={onPressNext}
+          testID={TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON}
+        >
+          <IconOutline
+            size={32}
+            name={'forward'}
+            color={Colors.Gray9}
+            style={[styles.button]}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+);
+
+export default ControlPlay;

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlayStyles.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { Device } from '../../../../configs';
+
+const widthMonitor = Device.screenWidth;
+const centerRowItem = {
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+const betweenRowItem = {
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+};
+
+export default StyleSheet.create({
+  controlButton: {
+    padding: 16,
+    ...centerRowItem,
+  },
+  wrapControlPlay: {
+    flexWrap: 'nowrap',
+    width: widthMonitor - 130,
+    ...betweenRowItem,
+  },
+});

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/Icon.js

@@ -0,0 +1,25 @@
+import SvgInput from '../../../../Images/Common/input.svg';
+import VolumeUp from '../../../../Images/Common/volume_up.svg';
+import KeyboardArrowUp from '../../../../Images/Common/keyboard_arrow_up.svg';
+import KeyboardArrowDown from '../../../../Images/Common/keyboard_arrow_down.svg';
+import Pause from '../../../../Images/Common/pause.svg';
+import KeyboardReturn from '../../../../Images/Common/keyboard_return.svg';
+import Home from '../../../../Images/Common/home.svg';
+import Disney from '../../../../Images/Common/disney.svg';
+import Youtube from '../../../../Images/Common/youtube.svg';
+import Netflix from '../../../../Images/Common/netflix.svg';
+import Spotify from '../../../../Images/Common/spotify.svg';
+
+export {
+  SvgInput,
+  VolumeUp,
+  KeyboardArrowUp,
+  KeyboardArrowDown,
+  Pause,
+  KeyboardReturn,
+  Home,
+  Disney,
+  Youtube,
+  Netflix,
+  Spotify,
+};