Skip to content

Commit 341ff7b

Browse files
OakRavenOakRaven
committed
Revisions to Jasmine testing recipe.
1 parent b62a29d commit 341ff7b

File tree

3 files changed

+131
-15
lines changed

3 files changed

+131
-15
lines changed

‎chapters/testing/testing_with_jasmine.md‎

Lines changed: 129 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,129 @@
11
---
22
layout: recipe
3-
title: With Jasmine
3+
title: Testing with Jasmine
44
chapter: Testing
55
---
66
## Problem
77

8-
You have some CoffeeScript and you want to verify that it is working correctly. You decide to the use
9-
Jasmine test framework for your tests.
8+
You are writing a new calculator library using CoffeeScript code 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 spec that describe the expected functionality of the code to be tested.
13+
14+
For example, we expect our calculator will be able to add and subtract both positive and negative numbers correctly. Our spec is listed below.
1015

1116
{% highlight coffeescript %}
1217

1318
# calculatorSpec.coffee
1419

1520
describe 'Calculator', ->
1621

17-
calculator = null
18-
19-
beforeEach ->
20-
calculator = new Calculator()
21-
2222
it 'can add two positive numbers', ->
23+
calculator = new Calculator()
2324
result = calculator.add 2, 3
2425
expect(result).toBe 5
2526

2627
it 'can handle negative number addition', ->
28+
calculator = new Calculator()
2729
result = calculator.add -10, 5
2830
expect(result).toBe -5
2931

3032
it 'can subtract two positive numbers', ->
33+
calculator = new Calculator()
3134
result = calculator.subtract 10, 6
3235
expect(result).toBe 4
3336

3437
it 'can handle negative number subtraction', ->
38+
calculator = new Calculator()
3539
result = calculator.subtract 4, -6
3640
expect(result).toBe 10
3741

3842
{% endhighlight %}
3943

40-
## Discussion
4144

42-
This test describes our Calculator and tests that it can add and subtract positive and negative numbers.
45+
### Configuring Jasmine
46+
47+
Before you can run your tests, you must download and configure Jasmine. This involves:
48+
1. Download the latest <a href="http://pivotal.github.com/jasmine/download.html" target="_blank">Jasmine</a> zip file
49+
2. Create a spec and a spec/jasmine folder in your project
50+
3. Extract the Jasmine files into the spec/jasmine folder
51+
4. Create 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 example, you can see we include our yet-to-be-developed calculator.js file (line 14) and the our compiled calculatorSpec.js file (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 this example we see 4 failing specs with a total of 8 failures (below).
43122

44-
To test our specification (spec), we need to set up our test framework. Refer to the <a href="http://pivotal.github.com/jasmine/" target="_blank">Jasmine</a> website to download the framework. It's super easy. In the following example, we have our SpecRunner.html set up referencing the Jasmine JavaScript llibrary and css files. Our tests are also referenced. You can see the result of running out tests below.
45123
<img src="images/jasmine_failing_all.jpg" alt="All failing tests" />
46124

47-
The tests are all failing, complaining that Calculator does not exist. Of course it doesn't, we haven't created it yet. Let's do that now.
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 in a new file named js/calculator.coffee.
126+
48127

49128
{% highlight coffeescript %}
50129

@@ -60,6 +139,8 @@ When we re-run we see the following.
60139

61140
We now have 4 failures instead of our previous 8. That's a 50% improvment with 1 line of code. Not bad.
62141

142+
## <span style="color: green;">Getting the Tests to Pass</span>
143+
63144
Let's implement our methods and see if we can get these tests to pass.
64145

65146
{% highlight coffeescript %}
@@ -77,4 +158,39 @@ window.Calculator = class Calculator
77158

78159
When we refresh we see they all pass.
79160

80-
<img src="images/jasmine_passing.jpg" alt="All passing" />
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. 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.
167+
168+
{% highlight coffeescript %}
169+
170+
describe 'Calculator', ->
171+
calculator = null
172+
173+
beforeEach ->
174+
calculator = new Calculator()
175+
176+
it 'can add two positive numbers', ->
177+
result = calculator.add 2, 3
178+
expect(result).toBe 5
179+
180+
it 'can handle negative number addition', ->
181+
result = calculator.add -10, 5
182+
expect(result).toBe -5
183+
184+
it 'can subtract two positive numbers', ->
185+
result = calculator.subtract 10, 6
186+
expect(result).toBe 4
187+
188+
it 'can handle negative number subtraction', ->
189+
result = calculator.subtract 4, -6
190+
expect(result).toBe 10
191+
192+
{% endhighlight %}
193+
194+
When we recompile our spec and refresh the browser we see the tests still all pass.
195+
196+
<img src="images/jasmine_passing.jpg" alt="All passing" />

‎chapters/testing/testing_with_mocha.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: recipe
3-
title: With Mocha
3+
title: Testing with Mocha
44
chapter: Testing
55
---
66
## Problem

‎chapters/testing/testing_with_qunit.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: recipe
3-
title: With QUint
3+
title: Testing with QUint
44
chapter: Testing
55
---
66
## Problem

0 commit comments

Comments
 (0)