nexshop-web-skeleton/spec/component/root-component-spec.js

Nexshop Web Skeleton Project

import React from 'react';
import {expect} from 'chai';
import * as Redux from "redux";
import sinon from "sinon";
import thunk from 'redux-thunk'
import configureStore from 'redux-mock-store';
import {shallow} from "enzyme";
import {DiscardConfirm} from 'nexshop-web-elements';
import {contentsActions, discardConfirmActions} from 'nexshop-web-store';
import RootComponent from '../../src/component/root-component';

const {closeDiscardConfirm} = discardConfirmActions;
const {fetchRootFolderAsync} = contentsActions;

describe('Root Component Spec', () => {
    const spyCloseDiscardConfirm = sinon.spy();
    const spyFetchRootFolderAsync = sinon.spy();
    const spyCallback = sinon.spy();
    const spyDiscardAction = sinon.spy();

    const mockActions = {
        closeDiscardConfirm: spyCloseDiscardConfirm,
        fetchRootFolderAsync: spyFetchRootFolderAsync,
    };

    let wrapper;
    let mockStore;
    let mockHistory = {};

    const createRootComponent = (store) => {
        return shallow(<RootComponent store={store} history={mockHistory}/>);
    };

    beforeEach(() => {
        sinon.stub(Redux, 'bindActionCreators').withArgs({
            fetchRootFolderAsync,
            closeDiscardConfirm,
        }, sinon.match.func).returns(mockActions);

        mockStore = configureStore([thunk])({
            nexFetch: {isLoading: false},
            discardConfirm: {message: 'some message', callback: null, block: false, discardAction: spyDiscardAction},
        });
        wrapper = createRootComponent(mockStore).dive();
    });

    afterEach(() => {
        Redux.bindActionCreators.restore();
        spyCloseDiscardConfirm.reset();
        spyFetchRootFolderAsync.reset();
        spyCallback.reset();
        spyDiscardAction.reset();
    });

    describe('rendering', () => {
        describe('DiscardConfirm', () => {
            it('visibility is false when callback is null', () => {
                expect(wrapper.find(DiscardConfirm).prop('visibility')).to.be.false;
            });

            it('visibility is true when callback is not null', () => {
                wrapper.setProps({
                    callback: spyCallback,
                });

                expect(wrapper.find(DiscardConfirm).prop('visibility')).to.be.true;
            });
        });

        describe('spinner', () => {
            it('does not show CircularProgress component when isLoading is false', () => {
                expect(wrapper.find('.spinner-wrapper')).to.length(0);
            });

            it('show CircularProgress component when isLoading is true', () => {
                wrapper.setProps({
                    isLoading: true,
                });

                expect(wrapper.find('.spinner-wrapper')).to.length(1);
            });
        });
    });

    describe('lifecycle', () => {
        describe('componentWillMount', () => {
            it('calls fetchRootFolderAsync action creator', () => {
                expect(spyFetchRootFolderAsync.called).to.be.true;
            });
        });
    });

    describe('events', () => {
        describe('DiscardConfirm', () => {
            beforeEach(() => {
                wrapper.setProps({callback: spyCallback});
            });

            it('calls props.callback with false and closeDiscardConfirm when onContinue is called', () => {
                wrapper.instance().onContinue();
                expect(spyCallback.calledWith(false)).to.be.true;
                expect(spyCloseDiscardConfirm.called).to.be.true;
            });

            it('calls props.callback with true and closeDiscardConfirm action when onDiscard is called', () => {
                wrapper.instance().onDiscard();
                expect(spyCallback.calledWith(true)).to.be.true;
                expect(spyCloseDiscardConfirm.called).to.be.true;
            });
        });
    });
});