nexshop-web-contents/spec/component/playlist/playlist-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 {ContentsMini} from "nexshop-web-contents-mini-view";
import {playlistActions, contentItemModel, discardConfirmActions} from "nexshop-web-store";
import Playlist from "../../../src/component/playlist/playlist";
import PlayListTitleView from "../../../src/component/playlist/playlist-title-view";
import PlaylistEditor from "../../../src/component/playlist/playlist-editor/playlist-editor";

describe('Playlist Spec', () => {
    const CONTENT_ITEMS = Object.freeze([
        contentItemModel.createContentItem({thumbnailUrls: {thumbnail: 'some nail'}}, 5),
        contentItemModel.createContentItem('contentItem2', 30)]
    );
    const CURRENT_FOLDER = {id: 'folderId'};

    const {discardPlaylist} = playlistActions;

    const DEFAULT_DATA = Object.freeze({
        playlist: {
            name: 'playlist title',
            contentItems: CONTENT_ITEMS,
            resolution: {value: "QHD", text: "2560x1440", orientation: "vertical"},
        },
        update_playlist: {
            name: 'playlist title',
            contentItems: CONTENT_ITEMS,
            resolution: {value: "QHD", text: "2560x1440", orientation: "vertical"},
            id: "some id",
            type: "video",
            durationSeconds: 30,
            transitionEffect: "none",
            fitMode: "contain"
        },
        contents: {
            breadcrumb: [
                CURRENT_FOLDER
            ]
        }
    });

    let wrapper;
    let instance;
    let mockStore;
    let spyBlockNavigation;
    let spyUnblockNavigation;
    let spySavePlaylistAsync;
    let spyMoveToPreview;
    let spyCreatePlaylistPreview;
    let spyOpenDialog;
    let stubUpdatePlaylistAsync;

    let mockHistory = {
        push: () => {
        }
    };

    beforeEach(() => {
        spySavePlaylistAsync = sinon.spy();
        spyBlockNavigation = sinon.spy();
        spyUnblockNavigation = sinon.spy();
        spyMoveToPreview = sinon.spy();
        spyCreatePlaylistPreview = sinon.spy();
        spyOpenDialog = sinon.spy();

        stubUpdatePlaylistAsync = sinon.stub().returns(Promise.resolve({occupied: true}));

        sinon.stub(Redux, "bindActionCreators").returns({
            savePlaylistAsync: spySavePlaylistAsync,
            blockNavigation: spyBlockNavigation,
            unblockNavigation: spyUnblockNavigation,
            createPlaylistPreview: spyCreatePlaylistPreview,
            openDialog: spyOpenDialog,
            updatePlaylistAsync: stubUpdatePlaylistAsync,
        });
        sinon.stub(mockHistory, 'push').returns(sinon.spy());
        sinon.stub(global, 'setTimeout');
        sinon.stub(document, 'getElementsByClassName').returns([{getClientRects: () => [{width: 16, height: 9}]}]);

        mockStore = configureStore()(DEFAULT_DATA);

        wrapper = shallow(<Playlist moveToPreview={spyMoveToPreview} store={mockStore} history={mockHistory}/>).dive();
        instance = wrapper.instance();
    });

    afterEach(() => {
        Redux.bindActionCreators.restore();
        mockHistory.push.restore();
        global.setTimeout.restore();
        document.getElementsByClassName.restore();
    });

    describe('Mapping props and actions', () => {
        it('has props.name', () => {
            expect(wrapper.instance().props.name).to.equal('playlist title');
        });

        it('has props.contentItems', () => {
            expect(wrapper.instance().props.contentItems).to.deep.equal(DEFAULT_DATA.playlist.contentItems);
        });

        it('has props.breadcrumb', () => {
            expect(wrapper.instance().props.breadcrumb[0]).to.deep.equal(CURRENT_FOLDER);
        });

        it('binds actionCreator with blockNavigation and unblockNavigation', () => {
            let actions = Redux.bindActionCreators.lastCall.args[0];
            const actionsKeys = Object.keys(actions);
            expect(actionsKeys).to.deep.equal(['savePlaylistAsync', 'updatePlaylistAsync',
                'openDialog', 'createPlaylistPreview', 'blockNavigation', 'unblockNavigation']);

            expect(actions.blockNavigation).to.equal(discardConfirmActions.blockNavigation);
            expect(actions.unblockNavigation).to.equal(discardConfirmActions.unblockNavigation);
        });

        it('has actions', () => {
            expect(wrapper.instance().props.actions).to.deep.equal({
                blockNavigation: spyBlockNavigation,
                createPlaylistPreview: spyCreatePlaylistPreview,
                unblockNavigation: spyUnblockNavigation,
                savePlaylistAsync: spySavePlaylistAsync,
                openDialog: spyOpenDialog,
                updatePlaylistAsync: stubUpdatePlaylistAsync,
            });
        });
    });

    describe('rendering', () => {
        it('has title and editor component with "playlist-title", "playlist-editor" and  "contents-mini"', () => {
            expect(wrapper.find(PlayListTitleView).length).to.equals(1);
            expect(wrapper.find(PlaylistEditor).length).to.equals(1);
            expect(wrapper.find(ContentsMini).length).to.equals(1);
        });

        it('passes title and onPreviewClick to PlayListTitleView as props', () => {
            expect(wrapper.find(PlayListTitleView).prop('name')).to.equal('playlist title');
            expect(wrapper.find(PlayListTitleView).prop('onPreviewClick')).to.equal(wrapper.instance().moveToPreview);
        });
    });

    it('calls blockNavigation action when componentDidMount is called', () => {
        wrapper.instance().componentDidMount();

        expect(spyBlockNavigation.calledWith('Your work has not been saved.', discardPlaylist())).to.be.true;
    });

    it('calls unblockNavigation action when componentWillUnmount is called', () => {
        wrapper.instance().componentWillUnmount();

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

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

        expect(spyUnblockNavigation.called).to.be.true;
        expect(spyCreatePlaylistPreview.calledWith(DEFAULT_DATA.playlist.name, DEFAULT_DATA.playlist.contentItems, 0,
            {width: 16, height: 9}, {value: "QHD", text: "2560x1440", orientation: "vertical"})).to.be.true;
    });

    describe('calls history.push with "/contents/main"', () => {
        it('when title is undefined', () => {
            wrapper.setProps({title: '', resolution: {}});
            wrapper.instance().componentWillMount();

            expect(mockHistory.push.calledWith('/contents/main'));
        });

        it('when resolution is undefined', () => {
            wrapper.setProps({title: 'some title', resolution: undefined});
            wrapper.instance().componentWillMount();

            expect(mockHistory.push.calledWith('/contents/main'));
        });
    });

    describe('onPreviewClick', () => {
        let setTimeoutArgument;

        beforeEach(() => {
            wrapper.instance().moveToPreview();
            setTimeoutArgument = global.setTimeout.lastCall.args[0];
        });

        it('calls unblockNavigation', () => {
            expect(spyUnblockNavigation.called).to.be.true;
        });

        it('sets history.push', () => {
            setTimeoutArgument();
            expect(mockHistory.push.calledWith('/contents/playlist-preview')).to.be.true;
        });
    });

    describe('onSavePlayList', () => {
        describe('playlist save', () => {

            it('call savePlaylistAsync', () => {
                instance.onSavePlaylist();
                expect(spySavePlaylistAsync.called).to.be.true;
            });

            it('call savePlayListAsync with args', () => {
                instance.onSavePlaylist();
                let args = spySavePlaylistAsync.getCall(0).args[0];
                let playlist = DEFAULT_DATA.playlist;
                const [width, height] = playlist.resolution.text.split('x');

                expect(args.name).to.be.equal(playlist.name);
                expect(args.folderId).to.be.equal(CURRENT_FOLDER.id);
                expect(args.metaData.display.resolution.width).to.be.equal(width);
                expect(args.metaData.display.resolution.height).to.be.equal(height);
                expect(args.thumbnailUrls.thumbnail).to.be.equal(playlist.contentItems[0].contents.thumbnailUrls.thumbnail);
            });
        });

        describe('playlist update', () => {
            beforeEach(() => {
                wrapper.setProps({id: "some id"});
            });

            it('call updatePlaylistAsync when contents id is exist', () => {
                it('without dialog', () => {
                    instance.onSavePlaylist();

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

                it('show update contents item dialog but the playlist is used in others', () => {
                    stubUpdatePlaylistAsync = sinon.stub().returns(Promise.resolve({occupied: true}));

                    instance.onSavePlaylist();

                    expect(spyOpenDialog.calledWith('update-contents-item')).to.true;
                });
            });

            it('call updatePlaylistAsync with args when contents id is exist', () => {
                instance.onSavePlaylist();
                let args = stubUpdatePlaylistAsync.getCall(0).args[0];
                let playlist = DEFAULT_DATA.update_playlist;
                const [width, height] = playlist.resolution.text.split('x');

                expect(args.name).to.be.equal(playlist.name);
                expect(args.metaData.display.resolution.width).to.be.equal(width);
                expect(args.metaData.display.resolution.height).to.be.equal(height);
                expect(args.thumbnailUrls.thumbnail).to.be.equal(playlist.contentItems[0].contents.thumbnailUrls.thumbnail);
                expect(args.metaData.contentItems[0].id).to.be.equal(playlist.contentItems[0].id);
            });
        });
    });

    it('getRelatedContents', () => {
        const expected = [{id: '3'}, {id: '2'}, {id: '1'}];
        expect(instance.getRelatedContents([{contents: {id: '3'}},
            {contents: {id: '2', relatedContents: [{id: '3'}, {id: '1'}]}}])).to.deep.equal(expected);
    });
});