Skip to content

Commit a4d2e93

Browse files
author
jfusco
committed
Add tests for rendering Github component
Add unit testing support links in README file. Add rendering tests for github information in component. Add test task in package.json file. Finish ajax testing for fetching user info. Fix testing suite __DEV__ reference by adding webpack plugin to karma config.
1 parent 3f318ce commit a4d2e93

10 files changed

Lines changed: 180 additions & 116 deletions

File tree

‎README.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,16 @@ A list of features in this kit.
5252
* Font Support
5353
* Supported but no tooling, only copies from one folder to another.
5454
* Unit Test Support
55-
* TODO: [Ava](https://www.npmjs.com/package/ava), Maybe?
55+
* Karma test suite ([karma](https://www.npmjs.com/package/karma))
56+
* [karma-phantomjs-launcher](https://www.npmjs.com/package/karma-phantomjs-launcher)
57+
* Jasmin framework ([jasmin](https://www.npmjs.com/package/jasmine))
58+
* [jasmine-ajax](https://github.com/jasmine/jasmine-ajax)
59+
* [jasmine-jquery](https://www.npmjs.com/package/jasmine-jquery)
60+
* Test coverage
61+
* [karma-spec-reporter](https://www.npmjs.com/package/karma-spec-reporter)
62+
* [karma-coverage](https://www.npmjs.com/package/karma-coverage)
63+
* [istanbul](https://www.npmjs.com/package/istanbul)
64+
* [isparta-loader](https://www.npmjs.com/package/isparta-loader)
5665
* Utility Support
5766
* Conditional Pipe Control ([gulp-if](https://www.npmjs.com/package/gulp-if))
5867
* Pipe Cleaner ([gulp-plumber](https://www.npmjs.com/package/gulp-plumber))

‎__tests__/Github-test.js‎

Lines changed: 61 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import 'babel-polyfill'
22
import $ from 'jquery'
33
import 'jasmine-jquery'
44
import 'jasmine-ajax'
5-
import GithubResponse from './__helpers__/GithubResponse'
5+
import { ok200, notFound404 } from './__helpers__/GithubResponses'
66
import { GitHub } from '../src/js/modules/Github'
77

88
jasmine.getFixtures().fixturesPath = 'base/src/modules'
@@ -11,22 +11,6 @@ describe('Github.js - instantiation', () => {
1111
let github = null
1212

1313
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-
3014
github = new GitHub('jfusco')
3115
})
3216

@@ -74,7 +58,7 @@ describe('Github.js - ajax', () => {
7458
github.getUserData()
7559

7660
request = jasmine.Ajax.requests.mostRecent()
77-
request.respondWith(GithubResponse)
61+
request.respondWith(ok200)
7862

7963
done()
8064
});
@@ -95,6 +79,65 @@ describe('Github.js - ajax', () => {
9579
const data = JSON.parse(request.responseText)
9680

9781
expect(typeof data).toBe('object')
82+
expect(request.status).toBe(200)
9883
expect(data.name).toBe('Dennis Martinez')
84+
expect(data.company).toBe('Verndale')
85+
})
86+
})
87+
88+
describe('Github.js - render', () => {
89+
let github = null,
90+
gitHubAvatar,
91+
gitHubInfo
92+
93+
const data = JSON.parse(ok200.responseText)
94+
95+
beforeEach(() => {
96+
loadFixtures('github.html')
97+
98+
github = new GitHub('DennisMartinez')
99+
github.render(data)
100+
101+
gitHubAvatar = $('.github-avatar')
102+
gitHubInfo = $('.github-info')
103+
})
104+
105+
afterEach(() => {
106+
github = null
107+
gitHubAvatar = null
108+
gitHubInfo = null
109+
})
110+
111+
describe('avatar', () => {
112+
it('should exist', () => {
113+
expect(gitHubAvatar).toBeInDOM()
114+
})
115+
116+
it('should render avatar attributes', () => {
117+
const $avatar = gitHubAvatar.find('img')
118+
119+
expect($avatar.attr('src')).toBe(data.avatar_url)
120+
expect($avatar.attr('alt')).toBe(data.name)
121+
})
122+
})
123+
124+
describe('info', () => {
125+
it('should exist', () => {
126+
expect(gitHubInfo).toBeInDOM()
127+
})
128+
129+
it('should render user info', () => {
130+
const $gitHubLink = gitHubInfo.find('a')
131+
const $company = gitHubInfo.find('li:nth-child(2)')
132+
const $email = gitHubInfo.find('li:nth-child(3)')
133+
const $bio = gitHubInfo.find('p')
134+
135+
expect($gitHubLink.attr('href')).toBe(data.html_url)
136+
expect($gitHubLink.text()).toBe(data.html_url)
137+
138+
expect($company.text()).toBe(`Company: ${data.company}`)
139+
expect($email.text()).toBe(`Email: ${data.email}`)
140+
expect($bio.text()).toBe(data.bio)
141+
})
99142
})
100143
})

__tests__/__helpers__/GithubResponse.js renamed to __tests__/__helpers__/GithubResponses.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
export default {
1+
// 200
2+
export const ok200 = {
23
status: 200,
34
responseText: JSON.stringify({
45
avatar_url: "https://avatars1.githubusercontent.com/u/1375616?v=3",
@@ -33,3 +34,12 @@ export default {
3334
url: "https://api.github.com/users/DennisMartinez"
3435
})
3536
}
37+
38+
// 404
39+
export const notFound404 = {
40+
status: 404,
41+
responseText: JSON.stringify({
42+
documentation_url: "https://developer.github.com/v3",
43+
message: "Not Found"
44+
})
45+
}

‎coverage/reports/lcov-report/index.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,27 @@ <h1>
2020
</h1>
2121
<div class='clearfix'>
2222
<div class='fl pad1y space-right2'>
23-
<span class="strong">88.57% </span>
23+
<span class="strong">97.14% </span>
2424
<span class="quiet">Statements</span>
25-
<span class='fraction'>62/70</span>
25+
<span class='fraction'>68/70</span>
2626
</div>
2727
<div class='fl pad1y space-right2'>
28-
<span class="strong">85.71% </span>
28+
<span class="strong">92.86% </span>
2929
<span class="quiet">Branches</span>
30-
<span class='fraction'>24/28</span>
30+
<span class='fraction'>26/28</span>
3131
</div>
3232
<div class='fl pad1y space-right2'>
3333
<span class="strong">100% </span>
3434
<span class="quiet">Functions</span>
3535
<span class='fraction'>18/18</span>
3636
</div>
3737
<div class='fl pad1y space-right2'>
38-
<span class="strong">53.85% </span>
38+
<span class="strong">100% </span>
3939
<span class="quiet">Lines</span>
40-
<span class='fraction'>7/13</span>
40+
<span class='fraction'>13/13</span>
4141
</div>
4242
<div class='fl pad1y'>
43-
<span class="strong">9 statements, 3 functions, 9 branches</span>
43+
<span class="strong">9 statements, 2 functions, 9 branches</span>
4444
<span class="quiet">Ignored</span> &nbsp;&nbsp;&nbsp;&nbsp;
4545
</div>
4646
</div>
@@ -64,15 +64,15 @@ <h1>
6464
</thead>
6565
<tbody><tr>
6666
<td class="file high" data-value="modules/"><a href="modules/index.html">modules/</a></td>
67-
<td data-value="88.57" class="pic high"><div class="chart"><div class="cover-fill" style="width: 88%;"></div><div class="cover-empty" style="width:12%;"></div></div></td>
68-
<td data-value="88.57" class="pct high">88.57%</td>
69-
<td data-value="70" class="abs high">62/70</td>
70-
<td data-value="85.71" class="pct high">85.71%</td>
71-
<td data-value="28" class="abs high">24/28</td>
67+
<td data-value="97.14" class="pic high"><div class="chart"><div class="cover-fill" style="width: 97%;"></div><div class="cover-empty" style="width:3%;"></div></div></td>
68+
<td data-value="97.14" class="pct high">97.14%</td>
69+
<td data-value="70" class="abs high">68/70</td>
70+
<td data-value="92.86" class="pct high">92.86%</td>
71+
<td data-value="28" class="abs high">26/28</td>
7272
<td data-value="100" class="pct high">100%</td>
7373
<td data-value="18" class="abs high">18/18</td>
74-
<td data-value="53.85" class="pct medium">53.85%</td>
75-
<td data-value="13" class="abs medium">7/13</td>
74+
<td data-value="100" class="pct high">100%</td>
75+
<td data-value="13" class="abs high">13/13</td>
7676
</tr>
7777

7878
</tbody>
@@ -81,7 +81,7 @@ <h1>
8181
</div><!-- /wrapper -->
8282
<div class='footer quiet pad2 space-top1 center small'>
8383
Code coverage
84-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 02 2017 10:51:55 GMT-0400 (EDT)
84+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 02 2017 19:20:54 GMT-0400 (EDT)
8585
</div>
8686
</div>
8787
<script src="prettify.js"></script>

‎coverage/reports/lcov-report/modules/Github.js.html‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,27 @@ <h1>
2020
</h1>
2121
<div class='clearfix'>
2222
<div class='fl pad1y space-right2'>
23-
<span class="strong">88.57% </span>
23+
<span class="strong">97.14% </span>
2424
<span class="quiet">Statements</span>
25-
<span class='fraction'>62/70</span>
25+
<span class='fraction'>68/70</span>
2626
</div>
2727
<div class='fl pad1y space-right2'>
28-
<span class="strong">85.71% </span>
28+
<span class="strong">92.86% </span>
2929
<span class="quiet">Branches</span>
30-
<span class='fraction'>24/28</span>
30+
<span class='fraction'>26/28</span>
3131
</div>
3232
<div class='fl pad1y space-right2'>
3333
<span class="strong">100% </span>
3434
<span class="quiet">Functions</span>
3535
<span class='fraction'>18/18</span>
3636
</div>
3737
<div class='fl pad1y space-right2'>
38-
<span class="strong">53.85% </span>
38+
<span class="strong">100% </span>
3939
<span class="quiet">Lines</span>
40-
<span class='fraction'>7/13</span>
40+
<span class='fraction'>13/13</span>
4141
</div>
4242
<div class='fl pad1y'>
43-
<span class="strong">9 statements, 3 functions, 9 branches</span>
43+
<span class="strong">9 statements, 2 functions, 9 branches</span>
4444
<span class="quiet">Ignored</span> &nbsp;&nbsp;&nbsp;&nbsp;
4545
</div>
4646
</div>
@@ -110,22 +110,22 @@ <h1>
110110
<span class="cline-any cline-yes">1×</span>
111111
<span class="cline-any cline-neutral">&nbsp;</span>
112112
<span class="cline-any cline-neutral">&nbsp;</span>
113-
<span class="cline-any cline-yes">7×</span>
114-
<span class="cline-any cline-yes">7×</span>
113+
<span class="cline-any cline-yes">11×</span>
114+
<span class="cline-any cline-yes">11×</span>
115115
<span class="cline-any cline-yes">2×</span>
116116
<span class="cline-any cline-neutral">&nbsp;</span>
117117
<span class="cline-any cline-neutral">&nbsp;</span>
118-
<span class="cline-any cline-yes">5×</span>
119-
<span class="cline-any cline-yes">5×</span>
118+
<span class="cline-any cline-yes">9×</span>
119+
<span class="cline-any cline-yes">9×</span>
120120
<span class="cline-any cline-neutral">&nbsp;</span>
121121
<span class="cline-any cline-neutral">&nbsp;</span>
122122
<span class="cline-any cline-neutral">&nbsp;</span>
123123
<span class="cline-any cline-neutral">&nbsp;</span>
124124
<span class="cline-any cline-neutral">&nbsp;</span>
125125
<span class="cline-any cline-neutral">&nbsp;</span>
126126
<span class="cline-any cline-neutral">&nbsp;</span>
127-
<span class="cline-any cline-no">&nbsp;</span>
128-
<span class="cline-any cline-no">&nbsp;</span>
127+
<span class="cline-any cline-yes">4×</span>
128+
<span class="cline-any cline-yes">4×</span>
129129
<span class="cline-any cline-neutral">&nbsp;</span>
130130
<span class="cline-any cline-neutral">&nbsp;</span>
131131
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -143,15 +143,15 @@ <h1>
143143
<span class="cline-any cline-neutral">&nbsp;</span>
144144
<span class="cline-any cline-neutral">&nbsp;</span>
145145
<span class="cline-any cline-neutral">&nbsp;</span>
146-
<span class="cline-any cline-no">&nbsp;</span>
146+
<span class="cline-any cline-yes">4×</span>
147147
<span class="cline-any cline-neutral">&nbsp;</span>
148148
<span class="cline-any cline-neutral">&nbsp;</span>
149149
<span class="cline-any cline-neutral">&nbsp;</span>
150-
<span class="cline-any cline-no">&nbsp;</span>
150+
<span class="cline-any cline-yes">4×</span>
151151
<span class="cline-any cline-neutral">&nbsp;</span>
152-
<span class="cline-any cline-no">&nbsp;</span>
152+
<span class="cline-any cline-yes">4×</span>
153153
<span class="cline-any cline-neutral">&nbsp;</span>
154-
<span class="cline-any cline-no">&nbsp;</span>
154+
<span class="cline-any cline-yes">4×</span>
155155
<span class="cline-any cline-neutral">&nbsp;</span>
156156
<span class="cline-any cline-neutral">&nbsp;</span>
157157
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -178,8 +178,8 @@ <h1>
178178
}
179179
&nbsp;
180180
// Just an example, you may want to use a templating engine.
181-
render({ avatar_url: avatarUrl, html_url: url, company, name, bio, email }) <span class="cstat-no" title="statement not covered" >{</span>
182-
<span class="cstat-no" title="statement not covered" > c</span>onst template = `
181+
render({ avatar_url: avatarUrl, html_url: url, company, name, bio, email }) {
182+
const template = `
183183
&lt;div class="github-avatar"&gt;
184184
&lt;img src="${avatarUrl}" alt="${name}"&gt;
185185
&lt;/div&gt;
@@ -197,15 +197,15 @@ <h1>
197197
&nbsp;
198198
// An example of how we can add some logs or blocks of code in development only
199199
// On a production build, webpack will remove this entire block of code, including the if check
200-
<span class="cstat-no" title="statement not covered" > if (__DEV__) <span class="cstat-no" title="statement not covered" >c</span></span>onsole.log('Template created')
200+
<span class="missing-if-branch" title="if path not taken" >I</span>if (__DEV__) <span class="cstat-no" title="statement not covered" >c</span>onsole.log('Template created')
201201
&nbsp;
202202
// Breaks the Single Responsibility principle, but again, only an example.
203203
// https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)
204-
<span class="cstat-no" title="statement not covered" > t</span>his.el.html(template)
204+
this.el.html(template)
205205
&nbsp;
206-
<span class="cstat-no" title="statement not covered" > if (__DEV__) <span class="cstat-no" title="statement not covered" >c</span></span>onsole.log('Template rendered')
206+
<span class="missing-if-branch" title="if path not taken" >I</span>if (__DEV__) <span class="cstat-no" title="statement not covered" >c</span>onsole.log('Template rendered')
207207
&nbsp;
208-
<span class="cstat-no" title="statement not covered" > r</span>eturn template
208+
return template
209209
}
210210
}
211211
&nbsp;
@@ -215,7 +215,7 @@ <h1>
215215
</div><!-- /wrapper -->
216216
<div class='footer quiet pad2 space-top1 center small'>
217217
Code coverage
218-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 02 2017 10:51:55 GMT-0400 (EDT)
218+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Apr 02 2017 19:20:54 GMT-0400 (EDT)
219219
</div>
220220
</div>
221221
<script src="../prettify.js"></script>

0 commit comments

Comments
 (0)