principles-ui-components/__tests__/BreathMotion-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 BreathMotion from '../UI_Component/common/BreathMotion';

jest.useFakeTimers();
describe('<BreathMotion />', () => {
    it('normal case, set breath initial, than start animaiton', () => {
        const breathWrapper = mount(<BreathMotion doBreath={true}/>);
        expect(breathWrapper.props().doBreath).toEqual(true);

        const breathInst = breathWrapper.instance();
        expect(breathInst).toBeInstanceOf(BreathMotion);

        const e ={target: 'div', currentTarget: 'div', type: 'animationend', preventDefault: jest.fn()};
        breathInst.animationDone(e);

        jest.runTimersToTime(10000); //start animation, change animation name to breathin

        breathInst.animationDone(e);
        breathInst.animationDone(e);
        breathInst.animationDone(e);
        breathInst.animationDone(e);
            
        breathWrapper.setProps({doBreath: false,});
        breathWrapper.unmount();
    });

    it('reset props, didmount, then start breath animaiton', () => {
        const breathWrapper = mount(<BreathMotion doBreath={false}/>);

        breathWrapper.setProps({doBreath: true,});
        jest.runTimersToTime(10000);

        breathWrapper.unmount();
    });

    it('reset props, do not start breath animaiton', () => {
        const breathWrapper = mount(<BreathMotion doBreath={false}/>);
        breathWrapper.setProps({doBreath: false,});
        breathWrapper.unmount();
    });

    it('abnormal case, do not start breath animaiton', () => {
        const breathWrapper = mount(<BreathMotion doBreath={true}/>);
        expect(breathWrapper.props().doBreath).toEqual(true);

        const breathInst = breathWrapper.instance();
        expect(breathInst).toBeInstanceOf(BreathMotion);

        jest.runTimersToTime(10000);

        // animation capture phase, do not start
        const e2 ={target: 'div', currentTarget: 'div-child', type: 'animationend', preventDefault: jest.fn()};
        breathInst.animationDone(e2);

        // animation name is not "animationend", do not start
        const e3 ={target: 'div', currentTarget: 'div', type: 'animationend2', preventDefault: jest.fn()};
        breathInst.animationDone(e3);
            
        breathWrapper.unmount();
    });
});