nexshop-web-contents/spec/component/dialog/move-to/move-to-spec.js

Nexshop Web Contents Project

import React from 'react';
import sinon from 'sinon';
import configureStore from 'redux-mock-store';
import {expect} from 'chai';
import {shallow} from "enzyme";
import MoveTo from "../../../../src/component/dialog/move-to/move-to";

describe('Move To Spec', () => {
    let wrapper;
    let spyOnClose;
    let spyCloseDialog;
    let spyFetchFoldersUnderFoldersAsync;
    let spyMoveContents;
    let spyMoveFolder;
    let dialogInstance;
    let dialogWrapper;
    let mockStore;

    beforeEach(() => {
        spyOnClose = sinon.spy();
        spyCloseDialog = sinon.spy();
        spyFetchFoldersUnderFoldersAsync = sinon.spy();
        spyMoveContents = sinon.spy();
        spyMoveFolder = sinon.spy();

        mockStore = configureStore()({
            dialog: 'move-to',
            contents: {
                breadcrumb: [],
                foldersUnderBreadcrumb: [],
                contents: [],
                folders: [],
                selectedContentsItemIds: [],
            }
        });

        dialogWrapper = shallow(<MoveTo store={mockStore}/>).dive();
        wrapper = shallow(<MoveTo.WrappedDialogComponent onClose={spyOnClose}
                                                         actions={{
                                                             closeDialog: spyCloseDialog,
                                                             fetchFoldersUnderFoldersAsync: spyFetchFoldersUnderFoldersAsync,
                                                             moveContents: spyMoveContents,
                                                             moveFolder: spyMoveFolder,
                                                         }}
                                                         breadcrumb={[{id: 0, name: 'current folder'}]}
                                                         foldersUnderBreadcrumb={[{id: 1}]}
                                                         contents={[{id: '1'}, {id: '2'}, {id: '3'}, {id: '4'}]}
                                                         folders={[]}
                                                         selectedContentsItemIds={['2']}
        />);

        dialogInstance = dialogWrapper.instance();
    });

    describe('Mapping Props', () => {

        it('has visibility true when redux state dialog is "move-to"', () => {
            expect(dialogInstance.props.visibility).to.true;
        });

        it('shows counts of will move items as a title', () => {
            expect(wrapper.find('.move-to-header').text()).to.equal("Move the selected contents(1) to");
        });

        it('click on CANCEL triggers onCancel prop', () => {
            wrapper.find('.move-to-footer__cancel').simulate('click');

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

    describe('componentWillMount', () => {
        it('call fetchFoldersUnderFoldersAsync', () => {
            expect(spyFetchFoldersUnderFoldersAsync.called).to.true;
        });
    });

    describe('componentWillReceiveProps', () => {
        let props;
        describe('prop value is filled', () => {
            props = {
                foldersUnderBreadcrumb: [{id: 1, name: 'some folder'}, {
                    id: 'childrenId',
                    collapsed: true,
                    hasChildFolder: 'Y',
                    parentId: 1
                }],
                breadcrumb: [{id: 0, name: 'current folder'}],
            };

            describe('call setState', () => {
                it('when foldersUnderBreadcrumb is changed', () => {
                    sinon.spy(wrapper.instance(), 'setState');
                    wrapper.instance().componentWillReceiveProps(props);
                    expect(wrapper.instance().setState.called).to.true;
                });

                it('when breadcrumb is changed', () => {
                    props = {
                        foldersUnderBreadcrumb: [],
                        breadcrumb: [{id: 0, name: 'current folder'}]
                    };
                    sinon.spy(wrapper.instance(), 'setState');
                    wrapper.instance().componentWillReceiveProps(props);
                    expect(wrapper.instance().setState.called).to.true;
                });
            });

        });

        describe('prop value is null', () => {
            props = {
                foldersUnderBreadcrumb: [],
                breadcrumb: [],
            };
            it('call listToTree, but folders in state is null', () => {
                wrapper.instance().componentWillReceiveProps(props);
                expect(wrapper.instance().state.folders).to.null;
            });
        });

    });

    describe('onClickMove', () => {

        describe('move contents', () => {
            it('call moveContents', () => {
                wrapper.setState({selectedFolderId: 'some folder id'});
                wrapper.find('.move-to-footer__move').simulate('click');

                expect(spyMoveContents.calledWith({id: '2'}, 'some folder id')).to.true;
            });

            it('call closeDialog', () => {
                wrapper.find('.move-to-footer__move').simulate('click');

                expect(spyCloseDialog.calledWith('move-to')).to.true;
            });

            it('when select same folder then not moveContents', () => {
                wrapper.setState({selectedFolderId: 0});
                wrapper.find('.move-to-footer__move').simulate('click');

                expect(spyMoveContents.called).to.false;
            });
        });

        describe('move folders', () => {
            beforeEach(() => {
                wrapper = shallow(<MoveTo.WrappedDialogComponent onClose={spyOnClose}
                                                                 actions={{
                                                                     closeDialog: spyCloseDialog,
                                                                     fetchFoldersUnderFoldersAsync: spyFetchFoldersUnderFoldersAsync,
                                                                     moveContents: spyMoveContents,
                                                                     moveFolder: spyMoveFolder,
                                                                 }}
                                                                 breadcrumb={[{id: 1}]}
                                                                 foldersUnderBreadcrumb={[{id: 1}]}
                                                                 contents={[]}
                                                                 folders={[{id: 'folder 1'}, {id: 'folder 2'}, {id: 'folder 3'}, {id: 'folder 4'}]}
                                                                 selectedContentsItemIds={['folder 2']}
                />);
            });
            it('call moveFolder', () => {
                wrapper.setState({selectedFolderId: 'some folder id'});
                wrapper.find('.move-to-footer__move').simulate('click');

                expect(spyMoveFolder.calledWith({id: 'folder 2'}, 'some folder id')).to.true;
            });

            it('call closeDialog', () => {
                wrapper.find('.move-to-footer__move').simulate('click');

                expect(spyCloseDialog.calledWith('move-to')).to.true;
            });

            it('when select same folder then not moveContents', () => {
                wrapper.setState({selectedFolderId: 1});
                wrapper.find('.move-to-footer__move').simulate('click');

                expect(spyMoveFolder.called).to.false;
            });
        });
    });

    describe('onClickCancel', () => {
        it('call closeDialog', () => {
            wrapper.instance().onClickCancel();
            expect(spyCloseDialog.called).to.true;
        });
    });

    describe('onFolderItemClicked', () => {

        let prevFolders;

        beforeEach(() => {
            prevFolders = {
                id: 'parentId', collapsed: false, hasChildFolder: 'Y',
                children: [
                    {
                        id: 'childrenId',
                        collapsed: true,
                        hasChildFolder: 'Y',
                        children: [{id: 'sonId', collapsed: false, children: []}]
                    }
                ],
            };
            wrapper.setState({
                folders: prevFolders
            });
        });

        it('call onFolderItemArrowClicked with isClosable changed', () => {
            const spyOnFolderItemArrowClicked = sinon.spy(wrapper.instance(), 'onFolderItemArrowClicked');

            expect(wrapper.instance().state.folders.children[0].collapsed).to.be.true;

            wrapper.instance().onFolderItemClicked('childrenId');

            expect(wrapper.instance().state.selectedFolderId).to.equal('childrenId');
            expect(spyOnFolderItemArrowClicked.calledWith('childrenId', false)).to.true;
            expect(wrapper.instance().state.folders.children[0].collapsed).to.be.false;

            wrapper.instance().onFolderItemArrowClicked('childrenId', true);

            expect(wrapper.instance().state.folders.children[0].collapsed).to.be.true;
            expect(wrapper.instance().state.folders).to.deep.equal(prevFolders);
        });
    });

    describe('click event', () => {
        let spyOnFolderItemClicked;
        let spyOnFolderItemArrowClicked;

        let prevFolders;
        beforeEach(() => {
            spyOnFolderItemClicked = sinon.spy(wrapper.instance(), 'onFolderItemClicked');
            spyOnFolderItemArrowClicked = sinon.spy(wrapper.instance(), 'onFolderItemArrowClicked');
            prevFolders = {
                id: 'parentId', collapsed: false, hasChildFolder: 'Y',
                children: [{
                    id: 'childrenId',
                    collapsed: true,
                    hasChildFolder: 'Y',
                    children: [{id: 'sonId', collapsed: false, children: []}]
                }],
            };
            wrapper.setState({
                folders: prevFolders
            });
        });

        it('calls onFolderItemClicked action when click folder item', () => {
            wrapper.find('.move-to-folder-item-row').at(0).simulate('click');
            expect(spyOnFolderItemClicked.called).to.true;
        });

        it('calls onFolderItemArrowClicked action when click folder item arrow', () => {
            wrapper.find('.move-to-folder-item-arrow--opened').at(0).simulate('click');
            expect(spyOnFolderItemArrowClicked.called).to.true;
        });

    });

});