Skip to content

Commit 3fdb301

Browse files
author
jfusco
committed
Add initial jasmine tests
Add jasmine and karma-jasmine to the project. Add coverage reporter and configuration to karma.config Add tests for default instantiation of GitHub component Add initial test for ajax requests to test spies Add helper object to mock out json response from API Add needed devDependencies to project to complete unit testing
1 parent 81cab61 commit 3fdb301

16 files changed

Lines changed: 1030 additions & 4 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
npm-debug.log
55
*.sublime-project
66
*.sublime-workspace
7+
*.DS_Store

‎__tests__/Github-test.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import 'babel-polyfill'
2+
import $ from 'jquery'
3+
import 'jasmine-jquery'
4+
import 'jasmine-ajax'
5+
import GithubResponse from './__helpers__/GithubResponse'
6+
import { GitHub } from '../src/js/modules/Github'
7+
8+
jasmine.getFixtures().fixturesPath = 'base/src/modules'
9+
10+
describe('Github.js', () => {
11+
let github = null
12+
13+
beforeEach(() => {
14+
// In case we want to sandbox any module, we can use this
15+
/*
16+
github = sandbox({
17+
class: 'github'
18+
})
19+
*/
20+
21+
// OR
22+
23+
// We don't need the github variable if we setFixtures :)
24+
/*
25+
setFixtures(sandbox({
26+
class: 'github'
27+
}))
28+
*/
29+
30+
github = new GitHub('jfusco')
31+
})
32+
33+
afterEach(() => {
34+
github = null
35+
})
36+
37+
it('exists in DOM', () => {
38+
loadFixtures('github.html')
39+
40+
expect($('.github')).toBeInDOM()
41+
})
42+
43+
it('should error if no username is passed in', () => {
44+
// Test undefined
45+
expect((() => {
46+
new GitHub()
47+
})
48+
).toThrowError(Error)
49+
50+
// Test empty string
51+
expect((() => {
52+
new GitHub('')
53+
})
54+
).toThrowError(Error)
55+
})
56+
57+
it('should set this.el to jQuery object', () => {
58+
expect(github.el instanceof $).toBe(true)
59+
})
60+
61+
it('should set a username', () => {
62+
expect(github.username).toBe('jfusco')
63+
})
64+
})
65+
66+
describe('Github - render', () => {
67+
beforeEach(() => {
68+
loadFixtures('github.html')
69+
70+
jasmine.Ajax.install();
71+
})
72+
73+
afterEach(() => {
74+
jasmine.Ajax.uninstall();
75+
})
76+
77+
it('should make a call to get user info', () => {
78+
const github = new GitHub('DennisMartinez')
79+
80+
const spy = spyOn($, 'getJSON')
81+
82+
jasmine.Ajax.stubRequest(`https://api.github.com/users/${github.username}`)
83+
.andReturn(GithubResponse)
84+
85+
github.getUserData()
86+
87+
expect(spy).toHaveBeenCalled()
88+
})
89+
})

‎__tests__/__helpers__/GithubResponse.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export default {
2+
users: {
3+
status: 200,
4+
contentType: 'application/json',
5+
responseText: {
6+
avatar_url: "https://avatars1.githubusercontent.com/u/1375616?v=3",
7+
bio: "mek a d weeb fun",
8+
blog: null,
9+
company: "Verndale",
10+
created_at: "2012-01-24T16:19:15Z",
11+
email: "denniswaltermartinez@gmail.com",
12+
events_url: "https://api.github.com/users/DennisMartinez/events{/privacy}",
13+
followers: 13,
14+
followers_url: "https://api.github.com/users/DennisMartinez/followers",
15+
following: 15,
16+
following_url: "https://api.github.com/users/DennisMartinez/following{/other_user}",
17+
gists_url: "https://api.github.com/users/DennisMartinez/gists{/gist_id}",
18+
gravatar_id: "",
19+
hireable: true,
20+
html_url: "https://github.com/DennisMartinez",
21+
id: 1375616,
22+
location: "CO",
23+
login: "DennisMartinez",
24+
name: "Dennis Martinez",
25+
organizations_url: "https://api.github.com/users/DennisMartinez/orgs",
26+
public_gists: 20,
27+
public_repos: 10,
28+
received_events_url: "https://api.github.com/users/DennisMartinez/received_events",
29+
repos_url: "https://api.github.com/users/DennisMartinez/repos",
30+
site_admin: false,
31+
starred_url: "https://api.github.com/users/DennisMartinez/starred{/owner}{/repo}",
32+
subscriptions_url: "https://api.github.com/users/DennisMartinez/subscriptions",
33+
type: "User",
34+
updated_at: "2017-03-25T16:42:02Z",
35+
url: "https://api.github.com/users/DennisMartinez"
36+
}
37+
}
38+
}

‎coverage/reports/lcov-report/base.css‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
body, html {
2+
margin:0; padding: 0;
3+
height: 100%;
4+
}
5+
body {
6+
font-family: Helvetica Neue, Helvetica, Arial;
7+
font-size: 14px;
8+
color:#333;
9+
}
10+
.small { font-size: 12px; }
11+
*, *:after, *:before {
12+
-webkit-box-sizing:border-box;
13+
-moz-box-sizing:border-box;
14+
box-sizing:border-box;
15+
}
16+
h1 { font-size: 20px; margin: 0;}
17+
h2 { font-size: 14px; }
18+
pre {
19+
font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
20+
margin: 0;
21+
padding: 0;
22+
-moz-tab-size: 2;
23+
-o-tab-size: 2;
24+
tab-size: 2;
25+
}
26+
a { color:#0074D9; text-decoration:none; }
27+
a:hover { text-decoration:underline; }
28+
.strong { font-weight: bold; }
29+
.space-top1 { padding: 10px 0 0 0; }
30+
.pad2y { padding: 20px 0; }
31+
.pad1y { padding: 10px 0; }
32+
.pad2x { padding: 0 20px; }
33+
.pad2 { padding: 20px; }
34+
.pad1 { padding: 10px; }
35+
.space-left2 { padding-left:55px; }
36+
.space-right2 { padding-right:20px; }
37+
.center { text-align:center; }
38+
.clearfix { display:block; }
39+
.clearfix:after {
40+
content:'';
41+
display:block;
42+
height:0;
43+
clear:both;
44+
visibility:hidden;
45+
}
46+
.fl { float: left; }
47+
@media only screen and (max-width:640px) {
48+
.col3 { width:100%; max-width:100%; }
49+
.hide-mobile { display:none!important; }
50+
}
51+
52+
.quiet {
53+
color: #7f7f7f;
54+
color: rgba(0,0,0,0.5);
55+
}
56+
.quiet a { opacity: 0.7; }
57+
58+
.fraction {
59+
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
60+
font-size: 10px;
61+
color: #555;
62+
background: #E8E8E8;
63+
padding: 4px 5px;
64+
border-radius: 3px;
65+
vertical-align: middle;
66+
}
67+
68+
div.path a:link, div.path a:visited { color: #333; }
69+
table.coverage {
70+
border-collapse: collapse;
71+
margin: 10px 0 0 0;
72+
padding: 0;
73+
}
74+
75+
table.coverage td {
76+
margin: 0;
77+
padding: 0;
78+
vertical-align: top;
79+
}
80+
table.coverage td.line-count {
81+
text-align: right;
82+
padding: 0 5px 0 20px;
83+
}
84+
table.coverage td.line-coverage {
85+
text-align: right;
86+
padding-right: 10px;
87+
min-width:20px;
88+
}
89+
90+
table.coverage td span.cline-any {
91+
display: inline-block;
92+
padding: 0 5px;
93+
width: 100%;
94+
}
95+
.missing-if-branch {
96+
display: inline-block;
97+
margin-right: 5px;
98+
border-radius: 3px;
99+
position: relative;
100+
padding: 0 4px;
101+
background: #333;
102+
color: yellow;
103+
}
104+
105+
.skip-if-branch {
106+
display: none;
107+
margin-right: 10px;
108+
position: relative;
109+
padding: 0 4px;
110+
background: #ccc;
111+
color: white;
112+
}
113+
.missing-if-branch .typ, .skip-if-branch .typ {
114+
color: inherit !important;
115+
}
116+
.coverage-summary {
117+
border-collapse: collapse;
118+
width: 100%;
119+
}
120+
.coverage-summary tr { border-bottom: 1px solid #bbb; }
121+
.keyline-all { border: 1px solid #ddd; }
122+
.coverage-summary td, .coverage-summary th { padding: 10px; }
123+
.coverage-summary tbody { border: 1px solid #bbb; }
124+
.coverage-summary td { border-right: 1px solid #bbb; }
125+
.coverage-summary td:last-child { border-right: none; }
126+
.coverage-summary th {
127+
text-align: left;
128+
font-weight: normal;
129+
white-space: nowrap;
130+
}
131+
.coverage-summary th.file { border-right: none !important; }
132+
.coverage-summary th.pct { }
133+
.coverage-summary th.pic,
134+
.coverage-summary th.abs,
135+
.coverage-summary td.pct,
136+
.coverage-summary td.abs { text-align: right; }
137+
.coverage-summary td.file { white-space: nowrap; }
138+
.coverage-summary td.pic { min-width: 120px !important; }
139+
.coverage-summary tfoot td { }
140+
141+
.coverage-summary .sorter {
142+
height: 10px;
143+
width: 7px;
144+
display: inline-block;
145+
margin-left: 0.5em;
146+
background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
147+
}
148+
.coverage-summary .sorted .sorter {
149+
background-position: 0 -20px;
150+
}
151+
.coverage-summary .sorted-desc .sorter {
152+
background-position: 0 -10px;
153+
}
154+
.status-line { height: 10px; }
155+
/* dark red */
156+
.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
157+
.low .chart { border:1px solid #C21F39 }
158+
/* medium red */
159+
.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
160+
/* light red */
161+
.low, .cline-no { background:#FCE1E5 }
162+
/* light green */
163+
.high, .cline-yes { background:rgb(230,245,208) }
164+
/* medium green */
165+
.cstat-yes { background:rgb(161,215,106) }
166+
/* dark green */
167+
.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
168+
.high .chart { border:1px solid rgb(77,146,33) }
169+
/* dark yellow (gold) */
170+
.medium .chart { border:1px solid #f9cd0b; }
171+
.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
172+
/* light yellow */
173+
.medium { background: #fff4c2; }
174+
/* light gray */
175+
span.cline-neutral { background: #eaeaea; }
176+
177+
.cbranch-no { background: yellow !important; color: #111; }
178+
179+
.cstat-skip { background: #ddd; color: #111; }
180+
.fstat-skip { background: #ddd; color: #111 !important; }
181+
.cbranch-skip { background: #ddd !important; color: #111; }
182+
183+
184+
.cover-fill, .cover-empty {
185+
display:inline-block;
186+
height: 12px;
187+
}
188+
.chart {
189+
line-height: 0;
190+
}
191+
.cover-empty {
192+
background: white;
193+
}
194+
.cover-full {
195+
border-right: none !important;
196+
}
197+
pre.prettyprint {
198+
border: none !important;
199+
padding: 0 !important;
200+
margin: 0 !important;
201+
}
202+
.com { color: #999 !important; }
203+
.ignore-none { color: #999; font-weight: normal; }
204+
205+
.wrapper {
206+
min-height: 100%;
207+
height: auto !important;
208+
height: 100%;
209+
margin: 0 auto -48px;
210+
}
211+
.footer, .push {
212+
height: 48px;
213+
}

0 commit comments

Comments
 (0)