nexshop-web-contents/spec/component/playlist/playlist-editor/playlist-editor-spec.js

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import {shallow} from "enzyme";
import configureStore from 'redux-mock-store';
import * as Redux from 'redux';
import sinon from "sinon";
import {previewActions, playlistActions} from "nexshop-web-store";
import PlaylistEditor from '../../../../src/component/playlist/playlist-editor/playlist-editor';
import PlaylistEditorView from "../../../../src/component/playlist/playlist-editor/playlist-editor-view";

describe('Playlist Editor Spec', () => {
    let wrapper;
    let mockStore;
    let spyDropDragContentsItem;
    let spyDeleteContentItem;
    let spyChangeContentItemsOrderStart;
    let spyChangeContentItemsOrderProcess;
    let spyChangeContentItemsOrderEnd;
    let spySelectPreviewItem;
    let spyOpenPopup;
    let spyClosePopup;
    let spyUpdateContentItemTransition;
    let spyUpdateContentItemDuration;
    let spyMoveToPreview;
    let spyUpdateContentItemFitMode;

    const {selectPreviewItem} = previewActions;
    const {
        changeContentItemsOrderEnd,
        changeContentItemsOrderProcess, changeContentItemsOrderStart, deleteContentItem,
        dropDragContentsItem, updateContentItemTransition, updateContentItemDuration, updateContentItemFitMode
    } = playlistActions;

    beforeEach(() => {
        mockStore = configureStore()({
            playlist: {
                resolution: {
                    value: 'QHD',
                    orientation: 'horizontal'
                },
                contentItems: ['media1', 'media2'],
                blankIndex: -1,
            },
            popup: {
                name: 'my name'
            }
        });

        spyDropDragContentsItem = sinon.spy();
        spyDeleteContentItem = sinon.spy();
        spyChangeContentItemsOrderStart = sinon.spy();
        spyChangeContentItemsOrderProcess = sinon.spy();
        spyChangeContentItemsOrderEnd = sinon.spy();
        spySelectPreviewItem = sinon.spy();
        spyOpenPopup = sinon.spy();
        spyClosePopup = sinon.spy();
        spyUpdateContentItemTransition = sinon.spy();
        spyUpdateContentItemDuration = sinon.spy();
        spyMoveToPreview = sinon.spy();
        spyUpdateContentItemFitMode = sinon.spy();

        sinon.stub(Redux, "bindActionCreators").returns({
            dropDragContentsItem: spyDropDragContentsItem,
            deleteContentItem: spyDeleteContentItem,
            changeContentItemsOrderStart: spyChangeContentItemsOrderStart,
            changeContentItemsOrderProcess: spyChangeContentItemsOrderProcess,
            changeContentItemsOrderEnd: spyChangeContentItemsOrderEnd,
            selectPreviewItem: spySelectPreviewItem,
            openPopup: spyOpenPopup,
            closePopup: spyClosePopup,
            updateContentItemTransition: spyUpdateContentItemTransition,
            updateContentItemDuration: spyUpdateContentItemDuration,
            updateContentItemFitMode: spyUpdateContentItemFitMode
        });

        wrapper = shallow(<PlaylistEditor moveToPreview={spyMoveToPreview} store={mockStore}/>).dive();
    });

    afterEach(() => {
        Redux.bindActionCreators.restore();
    });

    describe('Mapping props', () => {
        it('maps dropDragContentsItem & deleteContentItemsItem & changeContentItemsOrder & selectPreviewItem actions', () => {
            expect(Redux.bindActionCreators.calledWith({
                dropDragContentsItem,
                deleteContentItem,
                changeContentItemsOrderStart,
                changeContentItemsOrderProcess,
                changeContentItemsOrderEnd,
                selectPreviewItem,
                updateContentItemTransition,
                updateContentItemDuration,
                updateContentItemFitMode,
            }, mockStore.dispatch)).to.be.true;
        });

        it('has props.resolution', () => {
            expect(wrapper.instance().props.resolution).to.deep.equal({
                value: 'QHD',
                orientation: 'horizontal'
            });
        });

        it('has props.contentItems', () => {
            expect(wrapper.instance().props.contentItems).to.deep.equal(['media1', 'media2']);
        });
    });

    it('calls moveToPreview when onSelectPreviewItem is called', () => {
        wrapper.instance().onSelectPreviewItem();

        expect(spyMoveToPreview.called).to.be.true;
    });

    describe('rendering', () => {
        it('pass props to PlaylistEditorView', () => {
            expect(wrapper.find(PlaylistEditorView).prop('resolution')).to.deep.equal({
                value: 'QHD',
                orientation: 'horizontal'
            });
            expect(wrapper.find(PlaylistEditorView).prop('contentItems')).to.deep.equal(['media1', 'media2']);
            expect(wrapper.find(PlaylistEditorView).prop('onDropDragContentsItem')).to.deep.equal(spyDropDragContentsItem);
            expect(wrapper.find(PlaylistEditorView).prop('onDeleteItem')).to.deep.equal(spyDeleteContentItem);
            expect(wrapper.find(PlaylistEditorView).prop('onOrderChangeStart')).to.deep.equal(spyChangeContentItemsOrderStart);
            expect(wrapper.find(PlaylistEditorView).prop('onOrderChangeProcess')).to.deep.equal(spyChangeContentItemsOrderProcess);
            expect(wrapper.find(PlaylistEditorView).prop('onOrderChangeEnd')).to.deep.equal(spyChangeContentItemsOrderEnd);
            expect(wrapper.find(PlaylistEditorView).prop('blankIndex')).to.deep.equal(-1);
            expect(wrapper.find(PlaylistEditorView).prop('onSelectPreviewItem')).to.deep.equal(wrapper.instance().onSelectPreviewItem);
            expect(wrapper.find(PlaylistEditorView).prop('onUpdateContentItemTransition')).to.deep.equal(spyUpdateContentItemTransition);
            expect(wrapper.find(PlaylistEditorView).prop('onUpdateContentItemDuration')).to.deep.equal(spyUpdateContentItemDuration);
            expect(wrapper.find(PlaylistEditorView).prop('onUpdateContentItemFitMode')).to.deep.equal(spyUpdateContentItemFitMode);
        });
    });
});