All files / nexshop-web-contents/spec/component/contents folder-veiw-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
1x
1x
1x
1x
1x
 
1x
1x
1x
1x
1x
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
10x
 
 
 
1x
10x
10x
10x
10x
 
 
1x
1x
 
 
1x
1x
 
 
1x
1x
 
 
 
 
 
1x
 
7x
 
 
 
 
7x
7x
 
 
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 {mount, shallow} from "enzyme";
import sinon from "sinon";
import FolderView from "../../../src/component/contents/folder-view";
 
describe('FolderView Spec', () => {
    const spySetSelectionRange = sinon.spy();
    const spyUpdateFolderAsync = sinon.spy();
    const spyOnContextMenu = sinon.spy();
    const spyUpdateFolderData = sinon.spy();
 
    let wrapper;
    const FOLDER = Object.freeze({
        "createdTimestamp": "2017-10-24T07:01:36.026Z",
        "lastModifiedTimestamp": "2017-10-24T07:01:36.027Z",
        "id": "3423424",
        "parentId": "334535",
        "name": "Summer Festival",
        "ancestors": [
            "334535"
        ]
    });
 
    beforeEach(() => {
        wrapper = shallow(<FolderView folder={FOLDER} updateFolderAsync={sinon.spy()}
                                      onContextMenu={spyOnContextMenu} updateFolderData={spyUpdateFolderData}/>);
    });
 
    afterEach(() => {
        spySetSelectionRange.reset();
        spyUpdateFolderAsync.reset();
        spyOnContextMenu.reset();
        spyUpdateFolderData.reset();
    });
 
    it('shows folder name with given props', () => {
        expect(wrapper.find('.folder-item-name').text()).to.equal('Summer Festival');
    });
 
    it('shows update column lastModifiedTimestamp', () => {
        expect(wrapper.find('td').at(5).text()).to.equal('10-24-2017');
    });
 
    describe('input key & blur event', () => {
        const newFolder = Object.freeze({
            "id": "someFolderId",
            "name": "some folder name",
            "status": "new"
        });
 
        beforeEach(() => {
            //TODO: Please remove warning.
            wrapper = mount(
                <FolderView folder={newFolder} updateFolderAsync={spyUpdateFolderAsync}
                            onContextMenu={spyOnContextMenu} updateFolderData={spyUpdateFolderData}/>
            );
 
            wrapper.instance().titleInput.setSelectionRange = spySetSelectionRange;
            wrapper.instance().titleInput.value = 'new folder name';
        });
 
        it('focus out when esc key down', () => {
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;
 
            wrapper.find('.folder-item-name--new').simulate('keyup', {key: 'Escape'});
 
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.false;
        });
 
        it('focus out when esc key down', () => {
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;
 
            wrapper.find('.folder-item-name--new').simulate('keyup', {key: 'Enter'});
 
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.false;
        });
 
        it('titleInput is focused and setSelectionRange is called when componentDidMount call', () => {
            const focusTitleInputAndSelect = sinon.spy(wrapper.instance(), 'focusTitleInputAndSelect');
            wrapper.instance().componentDidMount();
 
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;
            expect(focusTitleInputAndSelect.called).to.true;
        });
 
        it('when focusTitleInputAndSelect then call setSelectionRange and set input value is "new folder name"', () => {
            wrapper.instance().focusTitleInputAndSelect();
 
            expect(wrapper.instance().titleInput.value).to.equal('some folder name');
 
            expect(spySetSelectionRange.calledWith(0, 'some folder name'.length)).to.true;
        });
 
        describe('folderNameInputBlurred method test', () => {
            it('call updateFolderAsync with folder name when focus is out', () => {
                wrapper.find('.folder-item-name--new').simulate('blur');
 
                expect(spyUpdateFolderAsync.calledWith(newFolder, 'new folder name')).to.be.true;
            });
 
            it('when input value and folder name is same', () => {
                wrapper.instance().titleInput.value = 'some folder name';
                wrapper.find('.folder-item-name--new').simulate('blur');
 
                expect(spyUpdateFolderData.called).to.true;
            });
 
            it('call getFolder with error state', () => {
                expect(wrapper.instance().getFolder({status: 'error'}).status).to.equal('new');
                expect(wrapper.instance().getFolder({status: 'new'})).to.not.have.property('status');
            });
        });
    });
 
    describe('context menu event', () => {
        it('mouse right click', () => {
            wrapper.find('.folder-item').simulate('contextmenu');
            expect(spyOnContextMenu.called).to.true;
        });
    })
});