es6-react-admin-lte
Version:
An AdminLTE Template made to use for React and ES2015-and-so-on
417 lines (416 loc) • 16 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for components/header-bar/header-user-menu/header-user-menu.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/header-bar/header-user-menu</a> header-user-menu.jsx
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">28% </span>
<span class="quiet">Statements</span>
<span class='fraction'>7/25</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">29.82% </span>
<span class="quiet">Branches</span>
<span class='fraction'>17/57</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">50% </span>
<span class="quiet">Functions</span>
<span class='fraction'>2/4</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">33.33% </span>
<span class="quiet">Lines</span>
<span class='fraction'>7/21</span>
</div>
</div>
</div>
<div class='status-line low'></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</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-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>
<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-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-neutral"> </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-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-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>
<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-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-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">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-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></td><td class="text"><pre class="prettyprint lang-js">import React from 'react';
import PropTypes from 'prop-types';
class HeaderUserMenu extends React.Component{
constructor(props) {
super(props);
this.state = { open: false };
this.toggleDropdown = this.toggleDropdown.bind(this);
this.clickLinks = this.clickLinks.bind(this);
}
<span class="fstat-no" title="function not covered" > to</span>ggleDropdown(e) {
<span class="cstat-no" title="statement not covered" > if ((e.type === 'blur' && this.state.open) || e.type !== 'blur') {</span>
<span class="cstat-no" title="statement not covered" > this.setState({ open: !this.state.open });</span>
}
}
<span class="fstat-no" title="function not covered" > cl</span>ickLinks(e) {
<span class="cstat-no" title="statement not covered" > e.preventDefault();</span>
<span class="cstat-no" title="statement not covered" > e.stopPropagation();</span>
<span class="cstat-no" title="statement not covered" > switch (e.currentTarget.id.replace('user-menu-', '')) {</span>
case ('followers'):
<span class="cstat-no" title="statement not covered" > if (this.props.followersOnClick) { <span class="cstat-no" title="statement not covered" >this.props.followersOnClick(); </span>}</span>
<span class="cstat-no" title="statement not covered" > break;</span>
case ('sales'):
<span class="cstat-no" title="statement not covered" > if (this.props.salesOnClick) { <span class="cstat-no" title="statement not covered" >this.props.salesOnClick(); </span>}</span>
<span class="cstat-no" title="statement not covered" > break;</span>
case ('friends'):
<span class="cstat-no" title="statement not covered" > if (this.props.friendsOnClick) { <span class="cstat-no" title="statement not covered" >this.props.friendsOnClick(); </span>}</span>
<span class="cstat-no" title="statement not covered" > break;</span>
case ('profile'):
<span class="cstat-no" title="statement not covered" > if (this.props.profileOnClick) { <span class="cstat-no" title="statement not covered" >this.props.profileOnClick(); </span>}</span>
<span class="cstat-no" title="statement not covered" > break;</span>
default: <span class="cstat-no" title="statement not covered" >break;</span>
}
}
render() {
return (
<li className={`dropdown user user-menu${this.state.open ? <span class="branch-0 cbranch-no" title="branch not covered" >' open' </span>: ''}`} tabIndex="0" onBlur={this.toggleDropdown}>
<a className="dropdown-toggle" data-toggle="dropdown-menu" onClick={this.toggleDropdown}>
{this.props.img ? <img src={this.props.img} className="user-image" alt="User Avatar" /> : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
<span className="hidden-xs">{this.props.username}</span>
</a>
<ul className="dropdown-menu">
<li className="user-header">
{this.props.img ? <img src={this.props.img} className="img-circle" alt="User Avatar" /> : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
<p>
{this.props.name}
{this.props.jobTitle ? ` - ${this.props.jobTitle}` : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
<small>Member since {this.props.joined}</small>
</p>
</li>
{this.props.friendsLink || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.salesLink </span>|| <span class="branch-2 cbranch-no" title="branch not covered" >this.props.followersLink </span>|| <span class="branch-3 cbranch-no" title="branch not covered" >this.props.friendsOnClick </span>|| <span class="branch-4 cbranch-no" title="branch not covered" >this.props.salesOnClick </span>|| <span class="branch-5 cbranch-no" title="branch not covered" >this.props.followersOnClick </span>|| <span class="branch-6 cbranch-no" title="branch not covered" >this.props.children </span>? (
<li className="user-body">
{this.props.children}
{this.props.followersLink || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.followersOnClick </span>? (
<div className="col-xs-4 text-center">
<a id="user-menu-followers" href={this.props.followersLink} onClick={this.clickLinks}>Followers</a>
</div>
) : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
{this.props.salesLink || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.salesOnClick </span>? (
<div className="col-xs-4 text-center">
<a id="user-menu-sales" href={this.props.salesLink} onClick={this.clickLinks}>Sales</a>
</div>
) : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
{this.props.friendsLink || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.friendsOnClick </span>? (
<div className="col-xs-4 text-center">
<a id="user-menu-friends" href={this.props.friendsLink} onClick={this.clickLinks}>Friends</a>
</div>
) : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
</li>
) : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
<li className="user-footer">
{this.props.profileLink || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.profileOnClick </span>? (
<div className="pull-left">
<a id="user-menu-profile" href={this.props.profileLink} onClick={this.clickLinks} className="btn btn-default btn-flat">Profile</a>
</div>
) : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
{this.props.signOut ? (
<div className={this.props.profileLink || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.profileOnClick </span>? 'pull-right' : <span class="branch-1 cbranch-no" title="branch not covered" >'text-center'}</span>>
<a className="btn btn-default btn-flat" onClick={this.props.signOut}>
Sign Out
</a>
</div>
) : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
</li>
</ul>
</li>
);
}
}
HeaderUserMenu.propTypes = {
username: PropTypes.string,
name: PropTypes.string,
jobTitle: PropTypes.string,
img: PropTypes.string,
profileLink: PropTypes.string,
profileOnClick: PropTypes.func,
followersLink: PropTypes.string,
followersOnClick: PropTypes.func,
salesLink: PropTypes.string,
salesOnClick: PropTypes.func,
friendsLink: PropTypes.string,
friendsOnClick: PropTypes.func,
joined: PropTypes.string,
signOut: PropTypes.func
};
HeaderUserMenu.defaultProps = {
username: '',
name: '',
joined: ''
};
export default HeaderUserMenu;
</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>