principles-ui-components/__tests__/Tooltip-test.js

Supporting UI controller for Tizen TV web application, which developed base on React Framework.

import React from 'react';
import {shallow, mount} from 'enzyme';
import Tooltip from '../UI_Component/Tooltip';
import CommonAPI from '../UI_Component/common/CommonAPI';

const getTextWidth = jest.fn(()=>{return 100;});
const getTextWidth2 = jest.fn(()=>{return 10;});

const OSD = { layout: { l: 0,t: 0,w: 414,h: 116,}, text: ['tool tip']};

describe('<Tooltip />', () => {
  it('Tooltip unit test, Postion: start/center/end, Direction: top/bottom/right/left', () => {
    CommonAPI.getTextWidth = getTextWidth;

    const tooltipWrapper = mount(<Tooltip showFlag={true} tailPostion={'start'} tailDirection={'top'} OSD={OSD}></Tooltip>);
    expect(tooltipWrapper.props().OSD.text[0]).toEqual('tool tip');

    OSD.icon = { l: 0, t: 0, w: 414, h: 116, url: '' };
    tooltipWrapper.setProps({OSD});

    tooltipWrapper.setProps({tailPostion: 'start', tailDirection: 'bottom'});
    tooltipWrapper.setProps({tailPostion: 'start', tailDirection: 'left'});
   

    tooltipWrapper.setProps({tailPostion: 'center', tailDirection: 'bottom'});
    tooltipWrapper.setProps({tailPostion: 'center', tailDirection: 'top'});
    tooltipWrapper.setProps({tailPostion: 'center', tailDirection: 'right'});
    tooltipWrapper.setProps({tailPostion: 'center', tailDirection: 'left'});

    tooltipWrapper.setProps({tailPostion: 'end', tailDirection: 'top'});
    tooltipWrapper.setProps({tailPostion: 'end', tailDirection: 'bottom'});
    tooltipWrapper.setProps({tailPostion: 'end', tailDirection: 'left'});

    tooltipWrapper.setProps({showFlag: false});
    
    tooltipWrapper.unmount();
  });

  it('Tooltip unit test, get parent width, set more line text', () => {
    const tooltipWrapper = mount(<Tooltip ShowFlag={true} tailPostion={'center'} tailDirection={'top'} OSD={OSD}></Tooltip>);
    tooltipWrapper.setProps({parentwidth: 10});

    const OSD4 = { layout: { l: 0,t: 0,w: 414,h: 116,}, text: ['tool tip','tool tip']};
    tooltipWrapper.setProps({OSD: OSD4});
    tooltipWrapper.unmount();
  });

  it('Tooltip unit test, get width extend the setting value', () => {
    
    const tooltipWrapper = mount(<Tooltip ShowFlag={true} tailPostion={'end'} tailDirection={'top'} OSD={OSD}></Tooltip>);

    const OSD1 = { layout: { l: 0,t: 0,w: 131,h: 116,}, text: ['tool tip']};
    tooltipWrapper.setProps({OSD: OSD1,});

    const OSD2 = { layout: { l: 0,t: 0,w: 903,h: 116,}, text: ['tool tip']};
    tooltipWrapper.setProps({OSD: OSD2,});
    
    tooltipWrapper.unmount();
  });

  it('Tooltip unit test, test acc', () => {
    const tooltipWrapper = mount(<Tooltip ShowFlag={true} tailPostion={'center'} tailDirection={'top'} OSD={OSD}></Tooltip>);
    tooltipWrapper.setProps({enlarge: true, highContrast: true});
    tooltipWrapper.unmount();
  });
});