You can download JSCoverage as a precompiled Linux or Windows build.
So I downloaded the pre-built Windows build.
And upon opening the zip we get a jscoverage.exe and a whole bunch of documentation.
JSCoverage takes two arguments, a source directory and a destination directory. Anything in the source directory gets instrumented. Since I don't want to instrument the QUnit and JQuery libraries I ...
- move those into a folder structure of their own,
- and put my code in its own folder structure,
- then I run
jscoverage eprimecode c_eprimecode
Err...OK, now I have a new folder called c_eprimecode... I better read the instructions...
Oh, OK, so in c_eprimecode I now have a file called jscoverage.html, and I can put the path of test_eprime.htm and when I click GO it will load that page, thereby running all the tests against the instrumented version of eprime.js
And... it worked!
100% coverage. You can see I've added a few more tests and a few more lines of code since you last saw eprime.js and I felt pleased that my TDD efforts had led to 100% coverage.
I can click on the eprime.js link and see the code coverage metrics.
All covered lines have a green count next to the line number, and the number in the green box shows how many times that line ran during the testing. If we did not cover a line then we see a read box with the ominous 0 in it. So scanning through the source for the big bad red becomes very easy.
And that only took about 5 minutes. What can I do now? Ah, Inverted mode.
If I add a line into my test_eprime.htm like the following
<button onclick='window.open("path/to/jscoverage.html");'>Coverage report</button>
Then I can run my test_eprime.htm like normal, but click to the coverage report.
So I do that...
But now I get mixed up. I start clicking on the coverage button when in the non-instrumented version and get a 404, so I want to fix that.
onclick='window.open("jscoverage.html")'>Coverage report</button> <script>
And now, just to finish off, a little cmd script to automate it all for me...
jscoverage eprimecode c_eprimecode c_eprimecode\test_eprime.htm
So now I have QUnit Unit tests and JScoverage all running together.
I use code coverage as an 'after check'. So I do my TDD and get it all as good as I can, then I just double check, but examining the code coverage:
- did I miss anything?
- do I care about the code that got missed?
SideNote: not really related to the above, but I didn't want to lose it. I saw this JSMock (mocking library) that I need to try out at some point.