Skip to content

Commit 606b4f9

Browse files
OakRavenOakRaven
committed
Merge branch 'testing-chapter'
2 parents 8617cfd + 78aa401 commit 606b4f9

File tree

7 files changed

+220
-0
lines changed

7 files changed

+220
-0
lines changed

‎chapters/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
- Networking
1616
- Design Patterns
1717
- Databases
18+
- Testing
1819
---
1920

2021
<ol id="chapters">

‎chapters/testing/images/jasmine_failing_all.jpg

238 KB
Loading

‎chapters/testing/images/jasmine_failing_better.jpg

169 KB
Loading

‎chapters/testing/images/jasmine_passing.jpg

25.8 KB
Loading

‎chapters/testing/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
layout: chapter
3+
title: Testing
4+
chapter: Testing
5+
---
6+
7+
{% capture url %}/chapters/{{ page.chapter | replace: ' ', '_' | downcase }}{% endcapture %}
8+
{% capture indexurl %}{{ url }}/index.html{% endcapture %}
9+
10+
<ul>
11+
{% for page in site.pages %}
12+
{% if page.url contains url %}
13+
{% unless page.url == indexurl %}
14+
<li><a href="{{ page.url | replace: '.html', '' }}">{{ page.title }}</a></li>
15+
{% endunless %}
16+
{% endif %}
17+
{% endfor %}
18+
</ul>

‎chapters/testing/testing_with_jasmine.md

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
---
2+
layout: recipe
3+
title: Testing with Jasmine
4+
chapter: Testing
5+
---
6+
## Problem
7+
8+
You are writing a simple calculator using CoffeeScript and you want to verify it functions as expected. You decide to use the <a href="http://pivotal.github.com/jasmine/" target="_blank">Jasmine</a> test framework.
9+
10+
## Discussion
11+
12+
When using the Jasmine test framework, you write tests in a specification (spec) file that describes the expected functionality of the code to be tested.
13+
14+
For example, we expect our calculator will be able to add and subtract and will function correctly with both positive and negative numbers. Our spec is listed below.
15+
16+
{% highlight coffeescript %}
17+
18+
# calculatorSpec.coffee
19+
20+
describe 'Calculator', ->
21+
22+
it 'can add two positive numbers', ->
23+
calculator = new Calculator()
24+
result = calculator.add 2, 3
25+
expect(result).toBe 5
26+
27+
it 'can handle negative number addition', ->
28+
calculator = new Calculator()
29+
result = calculator.add -10, 5
30+
expect(result).toBe -5
31+
32+
it 'can subtract two positive numbers', ->
33+
calculator = new Calculator()
34+
result = calculator.subtract 10, 6
35+
expect(result).toBe 4
36+
37+
it 'can handle negative number subtraction', ->
38+
calculator = new Calculator()
39+
result = calculator.subtract 4, -6
40+
expect(result).toBe 10
41+
42+
{% endhighlight %}
43+
44+
45+
### Configuring Jasmine
46+
47+
Before you can run your tests, you must download and configure Jasmine. This involves:
48+
1. downloading the latest <a href="http://pivotal.github.com/jasmine/download.html" target="_blank">Jasmine</a> zip file;
49+
2. creating a spec and a spec/jasmine folder in your project;
50+
3. extracting the downloaded Jasmine files into the spec/jasmine folder; and
51+
4. creating a test runner.
52+
53+
### Create a Test Runner
54+
55+
Jasmine can run your tests within a web browser by using a spec runner HTML file. The spec runner is a simple HTML page that links the necessary JavaScript and CSS files for both Jasmine and your code. A sample is below.
56+
57+
{% highlight html linenos %}
58+
59+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
60+
"http://www.w3.org/TR/html4/loose.dtd">
61+
<html>
62+
<head>
63+
<title>Jasmine Spec Runner</title>
64+
<link rel="shortcut icon" type="image/png" href="spec/jasmine/jasmine_favicon.png">
65+
<link rel="stylesheet" type="text/css" href="spec/jasmine/jasmine.css">
66+
<script src="http://code.jquery.com/jquery.min.js"></script>
67+
<script src="spec/jasmine/jasmine.js"></script>
68+
<script src="spec/jasmine/jasmine-html.js"></script>
69+
<script src="spec/jasmine/jasmine-jquery-1.3.1.js"></script>
70+
71+
<!-- include source files here... -->
72+
<script src="js/calculator.js"></script>
73+
74+
<!-- include spec files here... -->
75+
<script src="spec/calculatorSpec.js"></script>
76+
77+
</head>
78+
79+
<body>
80+
<script type="text/javascript">
81+
(function() {
82+
var jasmineEnv = jasmine.getEnv();
83+
jasmineEnv.updateInterval = 1000;
84+
85+
var trivialReporter = new jasmine.TrivialReporter();
86+
87+
jasmineEnv.addReporter(trivialReporter);
88+
89+
jasmineEnv.specFilter = function(spec) {
90+
return trivialReporter.specFilter(spec);
91+
};
92+
93+
var currentWindowOnload = window.onload;
94+
95+
window.onload = function() {
96+
if (currentWindowOnload) {
97+
currentWindowOnload();
98+
}
99+
execJasmine();
100+
};
101+
102+
function execJasmine() {
103+
jasmineEnv.execute();
104+
}
105+
106+
})();
107+
</script>
108+
</body>
109+
</html>
110+
111+
{% endhighlight %}
112+
113+
This spec runner can be downloaded from this GitHub <a href="https://gist.github.com/2623232" target="_blank">gist</a>.
114+
115+
To use the SpecRunner.html, simply reference your compiled JavaScript files and compiled tests after jasmine.js and its dependencies.
116+
117+
In the above example, we include our yet-to-be-developed calculator.js file on line 14 and our compiled calculatorSpec.js file on line 17.
118+
119+
## <span style="color: red;">Running the Tests</span>
120+
121+
To run our tests, simply open SpecRunner.html in a web browser. In our example we see 4 failing specs with a total of 8 failures (below).
122+
123+
<img src="images/jasmine_failing_all.jpg" alt="All failing tests" />
124+
125+
It appears our tests are failing because Jasmine can not find the variable Calculator. That's because it has not been created yet. Let's do that now by creating a new file named js/calculator.coffee.
126+
127+
128+
{% highlight coffeescript %}
129+
130+
# calculator.coffee
131+
132+
window.Calculator = class Calculator
133+
134+
{% endhighlight %}
135+
136+
Compile calculator.coffee and refresh the browser to re-run the test suite.
137+
138+
<img src="images/jasmine_failing_better.jpg" alt="Still failing, but better" />
139+
140+
We now have 4 failures instead of our previous 8. That's a 50% improvment with only one line of code.
141+
142+
## <span style="color: green;">Getting the Tests to Pass</span>
143+
144+
Let's implement our methods and see if we can get these tests to pass.
145+
146+
{% highlight coffeescript %}
147+
148+
# calculator.coffee
149+
150+
window.Calculator = class Calculator
151+
add: (a, b) ->
152+
a + b
153+
154+
subtract: (a, b) ->
155+
a - b
156+
157+
{% endhighlight %}
158+
159+
When we refresh we see they all pass.
160+
161+
<img src="images/jasmine_passing.jpg" alt="All passing" />
162+
163+
164+
## <span style="color: green;">Refactoring the Tests</span>
165+
166+
Now that our tests pass, we should look to see if our code or our test(s) can be refactored.
167+
168+
In our spec file, each test creates its own calculator instance. This can make our tests quite repetitive especially for larger test suites. Ideally, we should consider moving that initializaton code into a routine that runs before each test.
169+
170+
Luckily Jasmine has a beforeEach function just for this purpose.
171+
172+
{% highlight coffeescript %}
173+
174+
describe 'Calculator', ->
175+
calculator = null
176+
177+
beforeEach ->
178+
calculator = new Calculator()
179+
180+
it 'can add two positive numbers', ->
181+
result = calculator.add 2, 3
182+
expect(result).toBe 5
183+
184+
it 'can handle negative number addition', ->
185+
result = calculator.add -10, 5
186+
expect(result).toBe -5
187+
188+
it 'can subtract two positive numbers', ->
189+
result = calculator.subtract 10, 6
190+
expect(result).toBe 4
191+
192+
it 'can handle negative number subtraction', ->
193+
result = calculator.subtract 4, -6
194+
expect(result).toBe 10
195+
196+
{% endhighlight %}
197+
198+
When we recompile our spec and refresh the browser we see the tests still all pass.
199+
200+
<img src="images/jasmine_passing.jpg" alt="All passing" />

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
- Networking
1616
- Design Patterns
1717
- Databases
18+
- Testing
1819
---
1920

2021
<h1>Welcome</h1>

0 commit comments

Comments
 (0)