Jasmine Unit Testing Javascript

Unit testing becomes even more important when you program in a scripting language like Javascript, since you do not have the compiler rescueing you at least from syntactic mistakes.

After playing a little bit with Ruby I could not resist from falling in love with RSpec and its incredible expressivity! So the day I came across Jasmine I had no doubt about what to use to test my JS!

As it says in the introduction the design of Jasmine has been inspired by RSpec but also by other valid alternatives like JSpec.

Jasmine comes in different flavors: stand-alone, Ruby Gem, Node.js module and even Maven plugin! We are going to use the stand-alone version for now. You can download it from http://pivotal.github.com/jasmine/download.html

Downloaded one of the zip, and unpacked in some folder you will find a file called SpecRunner.html. This is the file containing everything you need to setup Jasmine and get started with testing.
Let's have a closer look:

1. <link rel="stylesheet" type="text/css" href="lib/jasmine-1.0.0.rc1/jasmine.css">  
2. <script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine.js"></script>  
3. <script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine-html.js"></script>  

This basically imports Jasmine itself with relative css to make the result's report looking prettier :)

Then we find the files containing the code we want to test:

1. <script type="text/javascript" src="src/Player.js"></script>  
2. <script type="text/javascript" src="src/Song.js"></script>  

And finally the tests are imported

1. <script type="text/javascript" src="spec/SpecHelper.js"></script>  
2. <script type="text/javascript" src="spec/PlayerSpec.js"></script>  

Following the head section, in the body you will just find few lines, responsible to actually run the rest

1. <script type="text/javascript">  
2.   jasmine.getEnv().addReporter(new jasmine.TrivialReporter());  
3.   jasmine.getEnv().execute();  
4. </script>  

To create a suite of tests you basically need 2 functions:
- describe(): groups tests together providing also setup and teardown hooks
- it(): contains the test itself

Both of them take as first parameter a string, used as a description of what is going to be tested (for describe() ) and what is the expected outcome (for it() ). This is something very familiar to the RSpec's users and it makes it much easier to analyze the results of the tests once they have run.

Other important features are expectations, equivalent to asserts in JUnit.

So let's write a simple unit test for a function validating an email address. According to Test Driven Development let's write the tests first.
Edit a file under the spec folder called demo_spec.js, with:

1. describe("Email validation", function() {  
2.   
3.   it("should validate someone@somewhere.com",function(){  
4. console.log("aaa");  
5.     var result = is_valid("someone@somewhere.com");  
6.     expect(result).toBe(true);  
7.   });  
8.   
9.   it("should not validate someone@somewhere",function(){  
10.     var result = is_valid("someone@somewhere");  
11.     expect(result).not.toBe(true);  
12.   });  
13.   
14. });  

As you can see I used one of the built in expectations called toBe() with the relative not.toBe(), which is the logical not.

Let's now write the is_valid function in demo.js, which will be placed under src:

1. is_valid = function(email){  
2.   var reg_expr = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;  
3.   return reg_expr.test(email);  
4. };  

To run the test we also need to modify the SpecRunner.html, so that the head section will look like this:

1. <title>Jasmine Test Runner</title>  
2.   <link rel="stylesheet" type="text/css" href="lib/jasmine-1.0.0.rc1/jasmine.css">  
3.   <script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine.js"></script>  
4.   <script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine-html.js"></script>  
5.   <script type="text/javascript" src="src/demo.js"></script>  
6.   <script type="text/javascript" src="spec/demo_spec.js"></script>  

And finally load SpecRunner in the browser and enjoy the results:




Just for curiosity let's change the second test to:

1. it("should not validate someone@somewhere",function(){  
2.     var result = is_valid("someone@somewhere");  
3.     expect(result).toBe(true);  
4.   });  

It should now fail:

And in fact it does!