All files / nexshop-web-contents/spec/component/resolution-drop-down resolution-drop-down-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
1x
1x
1x
1x
1x
1x
1x
1x
 
1x
 
 
1x
13x
 
 
1x
 
 
1x
4x
 
 
1x
1x
 
 
1x
1x
 
1x
 
1x
 
 
1x
1x
 
 
1x
1x
 
1x
 
1x
 
 
 
1x
1x
1x
1x
 
 
1x
1x
 
 
 
1x
 
 
1x
4x
 
4x
 
 
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
 
 
 
import React from 'react';
import {expect} from 'chai';
import sinon from 'sinon';
import ResolutionDropDown from "../../../src/component/resolution-drop-down/resolution-drop-down";
import {shallow} from "enzyme";
import ResolutionView from "../../../src/component/resolution-drop-down/resolution-view";
import ResolutionMenu from "../../../src/component/resolution-drop-down/resolution-menu";
import {resolutionItems} from "nexshop-web-store";
 
describe('ResolutionDropDown Spec', () => {
    let wrapper;
 
    beforeEach(() => {
        wrapper = shallow(<ResolutionDropDown />)
    });
 
    describe('ResolutionView', () => {
        let resolutionView;
 
        beforeEach(() => {
            resolutionView = wrapper.find(ResolutionView);
        });
 
        it('has ResolutionView', () => {
            expect(resolutionView.exists()).to.be.true;
        });
 
        it('passes menuOpened state', () => {
            wrapper.setState({menuOpened: true});
 
            resolutionView = wrapper.find(ResolutionView);
 
            expect(resolutionView.prop('menuOpened')).to.be.true;
        });
 
        it('passes openMenu as onClick handler', () => {
            expect(resolutionView.prop('onClick')).to.equal(wrapper.instance().openMenu);
        });
 
        it('passes resolution', () => {
            wrapper.setState({resolution: {value: 'some', text: 'text'}});
 
            resolutionView = wrapper.find(ResolutionView);
 
            expect(resolutionView.prop('resolution')).to.deep.equal({value: 'some', text: 'text'});
        });
    });
 
    describe('ResolutionMenu', () => {
        describe('menu is closed', () => {
            beforeEach(() => {
                wrapper.setState({menuOpened: false});
            });
 
            it('does not draw Resolution Menu', () => {
                expect(wrapper.find(ResolutionMenu).exists()).to.be.false;
            });
        });
 
        describe('menu is opened', () => {
            let resolutionMenu;
 
            beforeEach(() => {
                wrapper.setState({menuOpened: true});
 
                resolutionMenu = wrapper.find(ResolutionMenu);
            });
 
            it('passes constant resolution items', () => {
                expect(resolutionMenu.prop('items')).to.equal(resolutionItems.RESOLUTION_ITEMS);
            });
 
            it('passes selectResolutionAndCloseMenu as onItemSelected', () => {
                expect(resolutionMenu.prop('onItemSelected')).to.equal(wrapper.instance().selectResolutionAndCloseMenu);
            });
 
            it('passes resolution state as selectedItem', () => {
                expect(resolutionMenu.prop('selectedItem')).to.be.null;
 
                wrapper.setState({resolution: {value: 'value', text: 'text'}});
 
                expect(wrapper.find(ResolutionMenu).prop('selectedItem')).to.deep.equal({value: 'value', text: 'text'});
            });
 
            it('passes closeMenu as onBlur', () => {
                expect(resolutionMenu.prop('onBlur')).to.equal(wrapper.instance().closeMenu);
            });
        });
    });
 
    it('openMenu changes menuOpened state as true', () => {
        wrapper.instance().openMenu();
 
        expect(wrapper.state('menuOpened')).to.be.true;
    });
 
    it('closeMenu changes menuOpened state as false', () => {
        wrapper.instance().closeMenu();
 
        expect(wrapper.state('menuOpened')).to.be.false;
    });
 
    describe('selectResolutionAndCloseMenu', () => {
        let spyOnChange;
 
        beforeEach(() => {
            spyOnChange = sinon.spy();
 
            wrapper.setProps({onChange: spyOnChange});
 
            wrapper.instance().selectResolutionAndCloseMenu({value: 'value', text: 'text'});
        });
 
        it('changes resolution state and menuOpened as false', () => {
            expect(wrapper.state('menuOpened')).to.be.false;
            expect(wrapper.state('resolution')).to.deep.equal({value: 'value', text: 'text'});
        });
 
        it('triggers onChange', () => {
            expect(spyOnChange.calledWith({value: 'value', text: 'text'})).to.be.true;
        });
    });
});