es6-react-admin-lte
Version:
An AdminLTE Template made to use for React and ES2015-and-so-on
450 lines (449 loc) • 14.2 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for components/nav-sidebar/nav-sidebar-menu-item.jsx</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">components/nav-sidebar</a> nav-sidebar-menu-item.jsx
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">64.1% </span>
<span class="quiet">Statements</span>
<span class='fraction'>25/39</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.57% </span>
<span class="quiet">Branches</span>
<span class='fraction'>16/23</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">50% </span>
<span class="quiet">Functions</span>
<span class='fraction'>4/8</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">64.1% </span>
<span class="quiet">Lines</span>
<span class='fraction'>25/39</span>
</div>
</div>
</div>
<div class='status-line medium'></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
123
124
125
126
127
128
129</td><td class="line-coverage quiet"><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">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</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">3x</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-neutral"> </span>
<span class="cline-any cline-yes">2x</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-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">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">3x</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-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">2x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">3x</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-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </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-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-no"> </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">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</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-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-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></td><td class="text"><pre class="prettyprint lang-js">import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import PropTypes from 'prop-types';
class NavSidebarMenuItem extends React.Component {
constructor(props) {
super(props);
this.state = { classes: '' };
this.checkHeaderType = this.checkHeaderType.bind(this);
this.generateContent = this.generateContent.bind(this);
this.dropHandler = this.dropHandler.bind(this);
}
checkHeaderType(multiViewer = '') {
if (this.props.isHeader) {
return (
<div>
<span>{this.props.heading}</span>
{multiViewer || this.props.labels.length <= 0 ? '' : (
<span class="branch-1 cbranch-no" title="branch not covered" > <span className="pull-right-container"></span>
{this.props.labels}
</span>
)}
{multiViewer}
</div>
);
}
return (
<a href={this.props.link} >
<i className={`fa ${this.props.icon} text-center`} />
&nbsp;
<span>{this.props.heading}</span>
{multiViewer || this.props.labels.length <= 0 ? '' : (
<span className="pull-right-container">
{this.props.labels}
</span>
)}
{multiViewer}
</a>
);
}
generateContent() {
const classType = [];
let header = '';
let content = '';
if (this.props.isHeader) {
classType.push('header');
}
if (this.props.children) {
classType.push('treeview');
const multiViewer = (
<span className="pull-right-container">
<i className="fa fa-angle-left pull-right"></i>
</span>
);
header = this.checkHeaderType(multiViewer);
content = (
<ul className="treeview-menu">
{this.props.children}
</ul>
);
} else {
header = this.checkHeaderType();
}
return {
header: header,
content: content,
classType: classType
};
}
<span class="fstat-no" title="function not covered" > dr</span>opHandler(e) {
const thisList = <span class="cstat-no" title="statement not covered" >ReactDOM.findDOMNode(this);</span>
const tabButton = <span class="cstat-no" title="statement not covered" >thisList.children[0].children[thisList.children[0].children.length - 1].children[0];</span>
<span class="cstat-no" title="statement not covered" > if ((e.target === thisList.children[0]) || (e.target === thisList.children[0].children[thisList.children[0].children.length - 1].children[0])) {</span>
// If what the user clicks is the same as the drop-down list item's header area, or it's first child's last child's child (the drop-down icon)
<span class="cstat-no" title="statement not covered" > if (thisList.className.indexOf('active') === -1) {</span>
<span class="cstat-no" title="statement not covered" > tabButton.classList.remove('fa-angle-left');</span>
<span class="cstat-no" title="statement not covered" > tabButton.classList.add('fa-angle-down');</span>
<span class="cstat-no" title="statement not covered" > $(thisList.children[1]).slideDown(500, 'swing', <span class="fstat-no" title="function not covered" >()</span> => {</span>
<span class="cstat-no" title="statement not covered" > thisList.classList.add('active');</span>
<span class="cstat-no" title="statement not covered" > thisList.children[1].classList.add('menu-open');</span>
}
);
} else {
<span class="cstat-no" title="statement not covered" > tabButton.classList.remove('fa-angle-down');</span>
<span class="cstat-no" title="statement not covered" > tabButton.classList.add('fa-angle-left');</span>
<span class="cstat-no" title="statement not covered" > $(thisList.children[1]).slideUp(500, 'swing', <span class="fstat-no" title="function not covered" >()</span> => {</span>
<span class="cstat-no" title="statement not covered" > thisList.classList.remove('active');</span>
<span class="cstat-no" title="statement not covered" > thisList.children[1].classList.remove('menu-open');</span>
}
);
}
}
}
render() {
const content = this.generateContent();
const clickHandler = this.props.children ? this.dropHandler : this.props.onClick;
return (
<li className={content.classType.join(' ')} onClick={clickHandler}>
{content.header}
{content.content}
</li>
);
}
}
NavSidebarMenuItem.propTypes = {
heading: PropTypes.string,
link: PropTypes.string,
icon: PropTypes.string,
isHeader: PropTypes.bool,
onClick: PropTypes.func,
labels: PropTypes.array
};
NavSidebarMenuItem.defaultProps = {
heading: '',
isHeader: false,
icon: '',
onClick: <span class="fstat-no" title="function not covered" >()</span> => {},
labels: []
};
export default NavSidebarMenuItem;
</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 Apr 27 2018 14:57:56 GMT-0400 (EDT)
</div>
</div>
<script src="../../prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="../../sorter.js"></script>
</body>
</html>