All files / nexshop-web-contents/spec/component/scene/scene-resource scene-resource-view-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
1x
1x
1x
1x
1x
 
1x
 
 
1x
 
 
 
1x
1x
1x
1x
1x
 
1x
1x
 
1x
14x
 
 
 
 
 
 
14x
 
 
1x
 
1x
1x
1x
1x
 
 
1x
1x
1x
1x
 
 
1x
1x
1x
1x
 
 
1x
1x
1x
1x
 
 
 
 
1x
1x
1x
 
 
1x
1x
 
 
1x
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 {shallow} from "enzyme";
import sinon from "sinon";
import SceneResource from "../../../../src/component/scene/scene-resource/scene-resource-view";
 
describe('Scene Resource Spec', () => {
    let wrapper;
 
    let tabs = ['Layout', 'Templates', 'Contents', 'Widget'];
 
    let instance;
 
    const SELECTED_TAB_ID = 'layout';
    const CONTENTS = [{id: 'contentsItem1'}, {id: 'contentsItem2'}];
    const FOLDERS = [{id: 'f1', name: 'folder'}];
    const SELECTED_LAYOUT_ID = '1';
    const orientation = 'horizontal';
 
    const spyChangeLayout = sinon.spy();
    const spySelectTab = sinon.spy();
 
    beforeEach(() => {
        wrapper = shallow(<SceneResource changeLayout={spyChangeLayout}
                                         orientation={orientation}
                                         selectTab={spySelectTab}
                                         selectedTabId={SELECTED_TAB_ID}
                                         contents={CONTENTS}
                                         folders={FOLDERS}
                                         selectedLayoutId={SELECTED_LAYOUT_ID}/>);
        instance = wrapper.instance();
    });
 
    describe('render', () => {
 
        it('show layout button when selecetedTabId is layout', () => {
            wrapper.setProps({selectedTabId: 'layout'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Layout');
        });
 
        it('show template button when selecetedTabId is template', () => {
            wrapper.setProps({selectedTabId: 'template'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Templates');
        });
 
        it('show contents button when selecetedTabId is contents', () => {
            wrapper.setProps({selectedTabId: 'contents'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Contents');
        });
 
        it('show widget button when selecetedTabId is widget', () => {
            wrapper.setProps({selectedTabId: 'widget'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('');
        });
 
    });
 
    describe('Mapping props and actions', () => {
        it('has props.changeLayout', () => {
            expect(instance.props.changeLayout).to.equal(spyChangeLayout);
        });
 
        it('has props.selectTab', () => {
            expect(instance.props.selectTab).to.equal(spySelectTab);
        });
 
        it('has props.selectedTabId', () => {
            expect(instance.props.selectedTabId).to.equal(SELECTED_TAB_ID);
        });
 
        it('has props.contents', () => {
            expect(instance.props.contents).to.deep.equal(CONTENTS);
        });
 
        it('has props.selectedLayoutId', () => {
            expect(instance.props.selectedLayoutId).to.equal(SELECTED_LAYOUT_ID);
        });
    });
 
    it('has scene-resource-wrapper', () => {
        expect(wrapper.find('.scene-resource-wrapper').length).to.be.equal(1);
    });
 
    it('has 4 layout tab button', () => {
        expect(wrapper.find('.scene-tab__button--selected').length).to.be.equal(1);
        expect(wrapper.find('.scene-tab__button').length).to.be.equal(tabs.length - 1);
    });
 
    it('tab button should selected when within selectedTabId', () => {
        expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Layout');
    });
 
    it('call selectTab when click tab button(layout)', () => {
        wrapper.find('.scene-tab__button--selected').simulate('click');
 
        expect(spySelectTab.calledWith('layout')).to.be.true;
    });
 
    it('call selectTab when click tab button(contents)', () => {
        wrapper.find('.scene-tab__button').at(1).simulate('click');
 
        expect(spySelectTab.calledWith('contents')).to.be.true;
    });
});