nexshop-web-contents/spec/component/contents-main-view-spec.js

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import {shallow} from 'enzyme';
import sinon from 'sinon';
import {AddButton, ContextMenu, ContextMenuItemView, CreateWithResolutionView} from 'nexshop-web-elements';
import ContentsMainView from '../../src/component/contents-main-view';
import ConfirmDeleteContentsItem from '../../src/component/dialog/confirm-delete-contents-item/confirm-delete-contents-item';
import ConfirmOverwriteContentsItem from '../../src/component/dialog/confirm-overwrite-contents-item/confirm-overwrite-contents-item';
import MoveTo from '../../src/component/dialog/move-to/move-to';

describe('ContentsMain View Spec', () => {
    const spyOnAddButtonClicked = sinon.spy();
    const spyOnCreatePlaylistMenuClicked = sinon.spy();
    const spyOnPlaylistCreated = sinon.spy();
    const spyOnCreateSceneMenuClicked = sinon.spy();
    const spyOnUploadFilesSelected = sinon.spy();
    const spyCloseAddMenu = sinon.spy();
    const spyCloseDialog = sinon.spy();
    const spyOnCreateNewFolderClicked = sinon.spy();
    const breadcrumb = [{name: 'name1', id: 'id1'}, {name: 'name1', id: 'id1'}];
    const spyReplaceContentNameValidity = sinon.spy();
    const spyFetchExistContentNameAsync = sinon.spy();
    const spyUploadFileExist = sinon.spy();
    const contentNameExisted = 'NONE';

    let wrapper;

    beforeEach(() => {
        wrapper = shallow(
            <ContentsMainView
                addMenuVisibility={true}
                onAddButtonClicked={spyOnAddButtonClicked}
                onCreatePlaylistMenuClicked={spyOnCreatePlaylistMenuClicked}
                onCreateSceneMenuClicked={spyOnCreateSceneMenuClicked}
                onSelectFiles={spyOnUploadFilesSelected}
                closeAddMenu={spyCloseAddMenu}
                closeDialog={spyCloseDialog}
                onCreateNewFolderClicked={spyOnCreateNewFolderClicked}
                fetchExistContentNameAsync={spyFetchExistContentNameAsync}
                breadcrumb={breadcrumb}
                replaceContentNameValidity={spyReplaceContentNameValidity}
                contentNameExisted={contentNameExisted}
                uploadFileExist={spyUploadFileExist}
            />
        );
    });

    afterEach(() => {
        spyOnAddButtonClicked.reset();
        spyOnCreatePlaylistMenuClicked.reset();
        spyOnPlaylistCreated.reset();
        spyOnCreateSceneMenuClicked.reset();
        spyCloseAddMenu.reset();
        spyCloseDialog.reset();
        spyOnCreateNewFolderClicked.reset();
        spyReplaceContentNameValidity.reset();
    });

    it('calls onAddButtonClicked', () => {
        wrapper.find(AddButton).simulate('click');

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

    describe('rendering', () => {
    });

    describe('ContextMenu', () => {
        it('calls closeAddMenu when AddMenu close button clicked', () => {
            wrapper.find(ContextMenu).props().onClose();

            expect(spyCloseAddMenu.calledWith('add-menu')).to.true;
        });

        it('calls spyOnCreateNewFolderClicked when New folder is clicked', () => {
            wrapper.find(ContextMenuItemView).at(0).simulate('click');

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

        it('calls spyOnCreateSceneMenuClicked when New folder is clicked', () => {
            wrapper.find(ContextMenuItemView).at(2).simulate('click');

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

        it('calls spyOnCreatePlaylistMenuClicked when New folder is clicked', () => {
            wrapper.find(ContextMenuItemView).at(3).simulate('click');

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

        it('calls spyOnSelectFiles when Upload Files is clicked', () => {
            wrapper.find('.upload-file__input').simulate('change', {target: {files: ['on change files']}});

            expect(spyOnUploadFilesSelected.calledWith(['on change files'])).to.be.true;
        });
    });

    describe('CreateWithResolutionView', () => {
        let spyOnPlaylistCreated;
        let spyOnSceneCreated;
        let createPlaylist;
        let createScene;
        let spyCloseDialog;

        beforeEach(() => {
            spyOnPlaylistCreated = sinon.spy();
            spyOnSceneCreated = sinon.spy();
            spyCloseDialog = sinon.spy();

            wrapper.setProps({
                createPlaylistDialogVisibility: true,
                createSceneDialogVisibility: false,
                onPlaylistCreated: spyOnPlaylistCreated,
                onSceneCreated: spyOnSceneCreated,
                closeDialog: spyCloseDialog,
                breadcrumb,
                replaceContentNameValidity: spyReplaceContentNameValidity,
                contentNameExisted: 'EXIST',
                fetchExistContentNameAsync: spyFetchExistContentNameAsync,
                uploadFileExist: spyUploadFileExist,
                willOverwriteContent: [{id: 'someContents'}]
            });

            createScene = wrapper.find(CreateWithResolutionView).at(0);
            createPlaylist = wrapper.find(CreateWithResolutionView).at(1);
        });

        it('has 2 different dialogs', () => {
            expect(wrapper.find(CreateWithResolutionView)).lengthOf(2);
        });

        it('has one for playlist and another for scene', () => {
            expect(createPlaylist.prop('label')).to.equal('Playlist Name');
            expect(createScene.prop('label')).to.equal('Scene Name');
        });

        it('has visibility for each dialogs', () => {
            expect(createPlaylist.prop('visibility')).to.be.true;
            expect(createScene.prop('visibility')).to.be.false;
        });

        it('has errorText for each dialogs', () => {
            expect(createPlaylist.prop('errorText')).to.equal(wrapper.instance().getDialogErrorText());
            expect(createScene.prop('errorText')).to.equal(wrapper.instance().getDialogErrorText());
        });

        describe('getDialogErrorText method', () => {

            it('return message when title is exist and contentNameExisted is "EXIST"', () => {
                wrapper.setState({title: 'some title'});
                expect(wrapper.instance().getDialogErrorText()).to.equal('Above name already exists. Try again with a different name.');
            });

            it('return empty string when title is not exist', () => {
                expect(wrapper.instance().getDialogErrorText()).to.equal('');
            });

            it('return empty string when contentNameExisted is not "EXIST"', () => {
                wrapper.setState({title: 'some title'});
                wrapper.setProps({contentNameExisted: 'NONE'});
                expect(wrapper.instance().getDialogErrorText()).to.equal('');
            });
        });

        it('passes replaceContentNameValidity and set title when onTitleChange called with title', () => {
            expect(wrapper.state('title')).to.equal('');
            wrapper.instance().onTitleChange('some title');
            expect(wrapper.state('title')).to.equal('some title');
            expect(spyReplaceContentNameValidity.calledWith('NONE')).to.true;
        });

        it('has onTitleInputBlur for each dialogs', () => {
            expect(createPlaylist.prop('onTitleInputBlur')).to.equal(wrapper.instance().onTitleInputBlur);
            expect(createScene.prop('onTitleInputBlur')).to.equal(wrapper.instance().onTitleInputBlur);
        });

        describe('onTitleInputBlur method', () => {
            it('passes fetchExistContentNameAsync with breadcrumb id, dialogType of Playlist and title', () => {
                wrapper.setState({title: 'some title'});
                wrapper.instance().onTitleInputBlur();

                expect(spyFetchExistContentNameAsync.calledWith('id1', 'Playlist', 'some title')).to.true;
            });

            it('passes fetchExistContentNameAsync with breadcrumb id, dialogType of Scene and title', () => {
                wrapper.setState({title: 'some title'});
                wrapper.setProps({
                    createPlaylistDialogVisibility: false,
                    createSceneDialogVisibility: true,
                });
                wrapper.instance().onTitleInputBlur();

                expect(spyFetchExistContentNameAsync.calledWith('id1', 'Scene', 'some title')).to.true;
            });

        });

        it('has onCreate handler for each dialogs', () => {
            expect(createPlaylist.prop('onCreated')).to.equal(spyOnPlaylistCreated);
            expect(createScene.prop('onCreated')).to.equal(spyOnSceneCreated);
        });

        it('has onCancel, onClose as closeDialog prop for each dialogs', () => {
            expect(createPlaylist.prop('onCancel')).to.equal(spyCloseDialog);
            expect(createScene.prop('onCancel')).to.equal(spyCloseDialog);
            expect(createPlaylist.prop('onClose')).to.equal(spyCloseDialog);
            expect(createScene.prop('onClose')).to.equal(spyCloseDialog);
        });

        it('has ConfirmDeleteContentsItem', () => {
            expect(wrapper.find(ConfirmDeleteContentsItem).exists()).to.true;
        });

        it('has ConfirmOverwriteContentsItem', () => {
            expect(wrapper.find(ConfirmOverwriteContentsItem).exists()).to.true;
        });

        it('has onClose for ConfirmOverwriteContentsItem', () => {
            expect(wrapper.find(ConfirmOverwriteContentsItem).prop('onClose')).to.equal(wrapper.instance().onCloseOverwriteDialog);
        });
        
        it('set props uploadFileExist and closeDialog onCloseOverwriteDialog', () => {
             wrapper.instance().onCloseOverwriteDialog();

             expect(spyUploadFileExist.calledWith({id: 'someContents'})).to.true;
             expect(spyCloseDialog.called).to.true;
        });
        
        it('has MoveTo', () => {
            expect(wrapper.find(MoveTo).exists()).to.true;
        });
    });
});