nexshop-web-contents/spec/component/contents-router-spec.js

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import {shallow} from 'enzyme';
import {Redirect, Route} from 'react-router-dom';
import {createMemoryHistory} from 'history';
import sinon from 'sinon';
import * as Redux from 'redux';
import configureStore from 'redux-mock-store';
import ContentsRouter from '../../src/component/contents-router';
import ContentsMain from '../../src/component/contents-main';
import Playlist from '../../src/component/playlist/playlist';
import PlaylistPreview from '../../src/component/preview/playlist/playlist-preview';
import ContentsPreview from "../../src/component/preview/contents/contents-preview";
import ScenePreview from "../../src/component/preview/scene/scene-preview";
import {closeFloatingView} from "../../src/action/floating-view";
import Scene from "../../src/component/scene/scene";

describe('Contents Router Spec', () => {
    let wrapper;
    let mockActions;
    let history;
    let match;
    let mockStore;

    beforeEach(() => {
        history = createMemoryHistory('/');
        mockActions = {closeFloatingView: sinon.spy()};
        match = {url: '/contents'};
        mockStore = configureStore()({
            contents: {rootFolderId: 'someId'}
        });

        wrapper = shallow(<ContentsRouter.WrappedComponent history={history} actions={mockActions} match={match}
                                                           store={mockStore}/>);
    });

    it('has path as "/contents/main" and ContentsMain component', () => {
        expect(wrapper.find(Route).at(0).prop('path')).to.equal('/contents/main');
        expect(wrapper.find(Route).at(0).prop('component')).to.equal(ContentsMain);
    });

    it('has path as "/folder/:folderId" and ContentsMain component', () => {
        expect(wrapper.find(Route).at(1).prop('path')).to.equal('/contents/folder/:folderId');
        expect(wrapper.find(Route).at(1).prop('component')).to.equal(ContentsMain);
    });

    it('has path as "/contents/search" and ContentsMain component', () => {
        expect(wrapper.find(Route).at(2).prop('path')).to.equal('/contents/search');
        expect(wrapper.find(Route).at(2).prop('component')).to.equal(ContentsMain);
    });

    it('has path as "/contents/create-playlist" and Playlist component', () => {
        expect(wrapper.find(Route).at(3).prop('path')).to.equal('/contents/create-playlist');
        expect(wrapper.find(Route).at(3).prop('component')).to.equal(Playlist);
    });

    it('has path as "/contents/playlist-detail" and Playlist component', () => {
        expect(wrapper.find(Route).at(4).prop('path')).to.equal('/contents/playlist-detail');
        expect(wrapper.find(Route).at(4).prop('component')).to.equal(Playlist);
    });

    it('has path as "/contents/playlist-preview" and PlaylistPreview component', () => {
        expect(wrapper.find(Route).at(5).prop('path')).to.equal('/contents/playlist-preview');
        expect(wrapper.find(Route).at(5).prop('component')).to.equal(PlaylistPreview);
    });

    it('has path as "/contents/contents-preview" and ContentsPreview component', () => {
        expect(wrapper.find(Route).at(6).prop('path')).to.equal('/contents/contents-preview');
        expect(wrapper.find(Route).at(6).prop('component')).to.equal(ContentsPreview);
    });

    it('has path as "/contents/scene" and Scene component', () => {
        expect(wrapper.find(Route).at(7).prop('path')).to.equal('/contents/scene');
        expect(wrapper.find(Route).at(7).prop('component')).to.equal(Scene);
    });

    it('has path as "/contents/scene-preview" and Scene component', () => {
        expect(wrapper.find(Route).at(8).prop('path')).to.equal('/contents/scene-preview');
        expect(wrapper.find(Route).at(8).prop('component')).to.equal(ScenePreview);
    });

    it('redirect to contents main when url with folder/\"root folder id\"', () => {
        wrapper.setProps({
            match: {
                url: '/contents/folder/someId'
            }
        });
        expect(wrapper.find(Redirect).at(0).props().to).to.equal('/contents/main');
    });

    it('redirect to contents main when url with trailing slash', () => {
        wrapper.setProps({
            match: {
                url: '/contents/'
            }
        });
        expect(wrapper.find(Redirect).at(1).props().to).to.equal('/contents/main');
    });

    describe('change location', () => {
        it('close floating popup', () => {
            wrapper.instance().componentDidMount();

            history.push('/changedUrl');
            expect(mockActions.closeFloatingView.called).to.be.true;
        });
    });

    describe('Mapping props', () => {
        let spyCloseFloatingView;
        let spyFetchContentsAsync;
        let contentRouter;
        let spyConnect;
        let spyWithRouter;
        let mapDispatchToProps;
        let mapStateToProps;

        beforeEach(() => {
            let proxyquire = require('proxyquire');
            spyConnect = sinon.stub();
            spyWithRouter = sinon.spy();
            spyConnect.returns(() => {
            });
            spyFetchContentsAsync = sinon.stub();
            spyCloseFloatingView = sinon.stub();
            mockActions = {closeFloatingView: spyCloseFloatingView, fetchContentsAsync: spyFetchContentsAsync};

            sinon.stub(Redux, 'bindActionCreators').returns(mockActions);

            contentRouter = proxyquire('../../src/component/contents-router', {
                'react-redux': {
                    'connect': spyConnect
                },
                'react-router-dom': {
                    'withRouter': spyWithRouter
                }
            });

            mapStateToProps = spyConnect.lastCall.args[0];
            mapDispatchToProps = spyConnect.lastCall.args[1];
        });

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

        it('binds actionCreator with closeFloatingView', () => {
            let spyDispatch = sinon.spy();
            mapDispatchToProps(spyDispatch);

            expect(Redux.bindActionCreators.calledWith({closeFloatingView}, spyDispatch)).to.be.true;
        });

        it('returns props including bound actions', () => {
            let spyDispatch = sinon.spy();
            let actualProps = mapDispatchToProps(spyDispatch);

            expect(actualProps).to.deep.equal({
                actions: mockActions
            });
        });

        it('has rootFolderId from contents reducer', () => {
            let mockState = {contents: {rootFolderId: 'someId'}};
            let actualState = mapStateToProps(mockState);

            expect(actualState).to.deep.equal({
                rootFolderId: 'someId'
            });
        });
    });
});