nexshop-web-contents
Version:
Nexshop Web Contents Project
429 lines (428 loc) • 13.5 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for nexshop-web-contents/spec/component/contents/folder-veiw-spec.js</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../../../prettify.css" />
<link rel="stylesheet" href="../../../../base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(../../../../sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="../../../../index.html">All files</a> / <a href="index.html">nexshop-web-contents/spec/component/contents</a> folder-veiw-spec.js
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>60/60</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Branches</span>
<span class='fraction'>0/0</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Functions</span>
<span class='fraction'>17/17</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>60/60</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">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</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">10x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">10x</span>
<span class="cline-any cline-yes">10x</span>
<span class="cline-any cline-yes">10x</span>
<span class="cline-any cline-yes">10x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">7x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">7x</span>
<span class="cline-any cline-yes">7x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">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;
});
})
});</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Nov 24 2017 10:55:55 GMT+0900 (KST)
</div>
</div>
<script src="../../../../prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="../../../../sorter.js"></script>
</body>
</html>