We've already covered how to write unit tests (using test-driven development) in Jasmine. We used it to create the purely HTML5/JavaScript (without jQuery) Hangman game. For my next trick I'll show you how to use blanket.js to get code (line) coverage.
Note: unfortunately I can't find any simple code coverage tools that work in-browser to provide branch coverage so this is the best I have right now.
The first thing we need to do is
download blanket.js. Click the big "Download 1.2.2" (that's what it says as of this writing anyway) button on the middle of the page to view the minifed raw JS. Copy/paste that into a file in your Hangman directory. Oh, for reference my Hangman directory looks like this:
‐Hangman
‐‐lib
‐‐‐blanket
‐‐‐‐blanket.min.js
‐‐‐‐jasmine-blanket.js
‐‐‐jasmine
‐‐‐‐boot.js
‐‐‐‐console.js
‐‐‐‐jasmine.js
‐‐‐‐jasmine-html.js
‐‐spec
‐‐‐hangman.spec.js
‐‐src
‐‐‐hangman.js
‐‐styles
‐‐‐hangman.css
‐‐Hangman.html
‐‐jasmine.css
‐‐jasmine_favicon.png
‐‐SpecRunner.html
You can see I put blanket.min.js in a new folder called blanket in the lib folder. This is just my preference, but it's important that no matter where you put the blanket file you know where it is so you can properly reference it later.
Important Note: blanket uses UTF-8 encoding so if you go the copy/paste route and use something like Notepad, it'll get screwed up and throw a weird error in your console. I used Notepad++ and changed the encoding to UTF-8 and it was all fine after that.
OK, the next thing we need to do is download the
blanket jasmine adapter. You can see I saved mine in /lib/blanket/jasmine-blanket.js. Again, this is just my preference, but make sure you know where you put it. But wait, we're not finished yet. We actually have to modify the jasmine adapter to work with Jasmine 2+. I found this code in a Stack Overflow answer
here. Just swap out lines 43-89 with the code below and save the adapter file.
BlanketReporter.prototype = {
specStarted: function(spec) {
blanket.onTestStart();
},
specDone: function(result) {
var passed = result.status === "passed" ? 1 : 0;
blanket.onTestDone(1,passed);
},
jasmineDone: function() {
blanket.onTestsDone();
},
log: function(str) {
var console = jasmine.getGlobal().console;
if (console && console.log) {
console.log(str);
}
}
};
// export public
jasmine.BlanketReporter = BlanketReporter;
//override existing jasmine execute
var originalJasmineExecute = jasmine.getEnv().execute;
jasmine.getEnv().execute = function(){ console.log("waiting for blanket..."); };
blanket.beforeStartTestRunner({
checkRequirejs:true,
callback:function(){
jasmine.getEnv().addReporter(new jasmine.BlanketReporter());
jasmine.getEnv().execute = originalJasmineExecute;
jasmine.getEnv().execute();
}
});
At this point our files are ready, but what do we do with them? The next part really is the easiest part. In your SpecRunner.html file add a reference to blanket and blanket adapter. My reference (because of the location of my files) looks like this:
<script src="lib/blanket/blanket.min.js" data-cover-adapter="lib/blanket/jasmine-blanket.js" data-cover-only="[src/hangman.js]"></script>
The data-cover-only attribute of the script file tells blanket which files to cover. If you have multiples you can do a comma-separated list. Blanket also supports regular expressions so you could look for all files in the src directory that end with .js if you wanted. Since I only have one file, this works for me.
The last step is to set this up to run as a website instead of from your local files. I'm a Windows user so for me it was a simple matter of adding a website. Simple for me, but if you haven't done it before it could be a bit complicated so I'll walk you through it.
First you have to have IIS Manger installed on your machine. If you don't, that's an entirely separate process that will require a different post and admin rights on your machine. Sorry.
I like to keep my websites in the same place. Since Windows uses C:\Inetpub\wwwroot as the default location, that's where I put my Hangman folder (so it's C:\Inetpub\wwwroot\Hangman).
If you do have IIS Manager installed, open it up (I usually use Windows > inetmgr to launch). In the left windowpane you should see your machine name; click to expand it. Expand the Sites folder. Right-click on the Sites folder and choose Add Web Site. In the "Site name" textbox give your site a name (for simplicity I just called mine Hangman). In the "Physical path" textbox type or choose the physical path of your folder (C:\Inetpub\wwwroot\Hangman). You can change the port to something else if you want (I used 7654 because I was sure it was free). Click OK. Congratulations you created a new website!
The only thing remaining would be if you want your Hangman.html to be your default document. If you do, click on your new website in the left windowpane and double-click Default Document in the main windowpane. Add a new default document (Add link in the right windowpane) and type in Hangman.html. Now if you navigate to http://localhost:7654 you should see your hangman game. To check out your tests and their coverage, just go to http://localhost:7654/SpecRunner.html.
That's all for now. The next task is going to be to make this a two-player game using websockets. That will be interesting.
