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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
 
1x
1x
1x
1x
 
1x
12x
 
 
1x
12x
 
 
12x
 
 
 
 
1x
12x
12x
 
 
1x
1x
8x
8x
 
 
1x
1x
1x
 
 
1x
1x
 
 
1x
1x
 
 
 
1x
1x
1x
 
 
1x
1x
 
 
1x
1x
 
 
1x
1x
 
 
 
1x
1x
 
1x
1x
 
 
 
1x
1x
2x
 
 
 
2x
2x
 
 
1x
1x
1x
 
1x
1x
1x
 
 
 
1x
1x
1x
 
 
 
 
1x
1x
1x
 
 
 
1x
 
1x
 
 
1x
1x
 
 
 
1x
 
1x
 
 
 
 
import React from 'react';
import {expect} from 'chai';
import sinon from "sinon";
import {shallow} from "enzyme";
import configureStore from 'redux-mock-store';
import {Router} from "react-router";
import thunk from 'redux-thunk'
import {DiscardConfirm} from 'nexshop-web-alert';
import {contentsActions} from 'nexshop-web-store';
import RootComponent from '../../src/component/root-component';
import NotificationPopup from '../../src/component/popup/notification-popup';
 
describe('Root Component Spec', () => {
    let wrapper;
    let mockStore;
    let mockHistory = {};
 
    const createRootComponent = (store) => {
        return shallow(<RootComponent store={store} history={mockHistory}/>);
    };
 
    beforeEach(() => {
        sinon.stub(contentsActions, 'fetchAllUnderRootFolderAsync').returns({
            type: 'SOME_ACTION'
        });
        sinon.stub(contentsActions, 'fetchRootFolderAsync').returns({
            type: 'ANOTHER_ACTION'
        });
    });
 
    afterEach(() => {
        contentsActions.fetchAllUnderRootFolderAsync.restore();
        contentsActions.fetchRootFolderAsync.restore();
    });
 
    describe('without notification popup', () => {
        beforeEach(() => {
            mockStore = configureStore([thunk])({popup: {}, nexFetch: {isLoading: false}});
            wrapper = createRootComponent(mockStore).dive();
        });
 
        describe('rendering', () => {
            it('Router has history created in constructor', () => {
                expect(wrapper.find(Router).prop('history')).to.equal(mockHistory);
            });
 
            it('DiscardConfirm has history created in constructor', () => {
                expect(wrapper.find(DiscardConfirm).prop('history')).to.equal(mockHistory);
            });
 
            it('does not render NotificationPopup component', () => {
                expect(wrapper.find(NotificationPopup).length).to.equal(0);
            });
        });
 
        describe('componentWillMount', () => {
            it('calls fetchAllUnderRootFolderAsync action creator', () => {
                expect(contentsActions.fetchAllUnderRootFolderAsync.called).to.be.true;
            });
 
            it('calls store.dispatch with fetchAllUnderRootFolderAsync', () => {
                expect(mockStore.getActions()[0]).to.deep.equal({type: 'SOME_ACTION'});
            });
 
            it('calls fetchRootFolderAsync action creator', () => {
                expect(contentsActions.fetchRootFolderAsync.called).to.be.true;
            });
 
            it('calls store.dispatch with fetchRootFolderAsync', () => {
                expect(mockStore.getActions()[1]).to.deep.equal({type: 'ANOTHER_ACTION'});
            });
        });
 
        it('calls store.dispatch with closePopup Actions', () => {
            mockStore.clearActions();
 
            wrapper.instance().closeNotificationPopup();
            expect(mockStore.getActions()[0]).to.deep.equal({type: 'SCHEDULE_CLOSE_POPUP', name: 'notification'});
        });
    });
 
    describe('with notification popup', () => {
        beforeEach(() => {
            mockStore = configureStore([thunk])({
                popup: {notification: {visibility: true, message: 'some text'}},
                nexFetch: {isLoading: false}
            });
            wrapper = createRootComponent(mockStore).dive();
            mockStore.dispatch({type: 'DUMMY'});
        });
 
        describe('rendering', () => {
            it('shows NotificationPopup component', () => {
                const notificationPopup = wrapper.find(NotificationPopup);
 
                expect(notificationPopup.length).to.equal(1);
                expect(notificationPopup.props().text).to.equal('some text');
                expect(notificationPopup.props().onClose).to.equal(wrapper.instance().closeNotificationPopup);
            });
        });
 
        describe('componentWillMount', () => {
            it('sets notificationPopupVisibility to true', () => {
                expect(wrapper.state('notificationPopupVisibility')).to.be.true;
            });
        });
    });
 
    describe('show spinner spec', () => {
        it('if isLoading is false, disappear CircularProgress component.', () => {
            mockStore = configureStore([thunk])({
                popup: {notification: {visibility: true, message: 'some text'}},
                nexFetch: {isLoading: false}
            });
            wrapper = createRootComponent(mockStore).dive();
 
            expect(wrapper.find('.spinner-wrapper')).to.length(0);
        });
 
        it('if isLoading is true, show CircularProgress component.', () => {
            mockStore = configureStore([thunk])({
                popup: {notification: {visibility: false, message: undefined}},
                nexFetch: {isLoading: true}
            });
            wrapper = createRootComponent(mockStore).dive();
 
            expect(wrapper.find('.spinner-wrapper')).to.length(1);
        });
 
    });
});