Code coverage results for your JavaScript

I wanted to find out if there were any tools that can display code coverage results for JavaScript code (without the need for Java on the server or having to use Node), I experimented with a few different frameworks, test runners and what not and have spent a couple of hours looking in to this, in the end I opted for the following:-

jasmine_logo At work we currently use Jasmine which is a behaviour-driven development framework for testing JavaScript code along with PhantomJS which we use to run the tests using a specrunner (there are several ways to do it but this works for now)

I have installed the Visual Studio Extension called Chutzpah which is a JavaScript Test Runner which gives you a few nice things such as integration with TeamCity and the ability to right-click and then select Run Tests similarly to unit testing your C# code with your favourite unit testing framework.

chutzpah

Ok so back to code coverage for our JavaScript code – Matthew the guy who created Chutzpah is working on integrating code coverage into the next release so in the mean time here is how you get it to work – enter one further library called Blanket.js – Blanket.js is used to give us the code coverage results and currently supports Qunit, Mocha and Jasmine. An adapter API exists for supporting other test runners.

At this point you might be thinking its a fair amount of work to get this going but I will simplify the steps required to get your JavaScript code outputting code coverage results.

  • Download Blanket.js and look for the file called blanket-jasmine.js, add this to your Scripts folder inside your web application. This file is blanket version that works with Jasmine.
  • Add the Nuget package jasmine.js jasminenuget
  • Add some JavaScript code as below for example this is code.js
  • var stringLib = {
        vowels: function (a) {
            count = 0;
            for (var i = 0; i < a.length; i++) {
                if ("aeiou".indexOf(a[i]) > -1) {
                    count++;
                }
            }
            return count;
        }
    }
    var mathLib = {
        add5: function (a) {
            return a + 5;
        },
        mult5: function (a) {
            return a * 5;
        }
    }
    
  • Add a JavaScript file with your Jasmine tests for the code above like so :-
    describe("general", function () {
        it("A basic test", function () {
            expect(true).toBeTruthy();
            var value = "hello";
            expect("hello").toEqual(value);
        });
    });
    
    describe("stringLib", function () {
        it("will get vowel count", function () {
            var count = stringLib.vowels("hello");
            expect(count).toEqual(2);
        });
    });
    
    describe("mathLib", function () {
        it("will add 5 to number", function () {
            var res = mathLib.add5(10);
            expect(res).toEqual(15);
        });
    
        it("will multiply 5 to number", function () {
            var res = mathLib.mult5(10);
            expect(res).toEqual(50);
        });
    });
    
  • Ok so we have some JavaScript code and Jasmine tests for the code, lets add some required links to our Jasmine specrunner page so we can see the code coverage
    results output to the screen, edit the spec runner like so:-

    specrunner2

    The above screen shot shows that we have added a reference to both our JavaScript code file and the file containing the Jasmine tests.

  • Now if we browse to the specrunner page for Jasmine we will see the results of the test – green for passed and red for failed (no code coverage results yet).

    jasmineresults1

  • Now lets show the JavaScript code coverage results – which is as simple as adding in the line to reference Blanket for Jasmine:-

    specrunner3

  • Refresh the specrunner page and you will now see your JavaScript code coverage results like so:-

    specrunner4

    The screen shot above shows us 100% code coverage, so no lines of JavaScript are coloured red (not covered)

  • If I comment out one of the tests we can see the difference below:-
    specrunner5
  • And there we have it code coverage results of your JavaScript, brief post but enough to get you started I hope, next time I will add this to TeamCity and see what that gives us.

Book Review: C# Smorgasbord by Filip Ekberg

smorgasbord

Book Review: C# Smorgasbord by Filip Ekberg

About the Author:
Filip is a Software Engineer working with various techniques such as C#, WPF, WCF, ASP.NET MVC, ASP.NET and much more. Currently working at Star Republic in Sweden as a Software Engineer working with both newer and older technologies in a Windows environment, mainly focusing on ASP.NET MVC development.

During his years of Programming, Filip has managed to accomplish some of the following:
• Software Engineering Degree @ Blekinge Institute of Technology
• Managing the Software Development Company SmartIT eSolutions Sweden which focused mainly on developing software and web solutions.
• Working as an Amanuensis ( Teacher ) @ Blekinge Institute of Technology teaching Java, C++, Sql and Network-programming.

You can read more on his blog here.

I saw a tweet from @daniellangnet who said this book was fantastic and if your looking for something to read over the holidays then give this a go, I actually ordered the book without even reading anything about it, unusual but glad i did!

Chapter 1: Introduction to Parallel Extensions :- Learn the basics of paralleization, use basic Linq, and how to optimize code by introducing parallelization.
Chapter 2: Productivity and Quality with Unit Testing :- Understand why tests are import, create a test project and improve code quality.
Chapter 3: Is upgrading your code a productive step? :- How to find bugs faster, How to use Resharper to get a more manageable project and to get things done faster.
Chapter 4: Creating a challenge out of the trivial tasks :- Challenge yourself to create understandable and higher quality software.
Chapter 5: Asynchronous programming with async and await :- Identify where yo might need asynchronous processing, refactor a synchronous app into becoming more responsive.
Chapter 6: Dynamic program :- Create and extend a dynamic object by using the ExpandObject, also understand why introducing dynamic objects might cause problems long-term.
Chapter 7: Increase readability with anonymous types and methods :identify where you might have single purpose methods that you can replace with anonymous methods for increased readability and lucidity.
Chapter 8: Exploring Reflection :- User reflection to get information about types at runtime and understand more about properties and methods.
Chapter 9: Creating things at runtime :- Create your own method at runtime using Reflection, be able to read IL and understand portions of it.
Chapter 10: Introducing Roslyn :- Create a basic code analysis that suggest issues in your code, run code snippets on entire code files.
Chapter 11: Adapting to Inversion of Control :- Understand the basics of Inversion of Control, introduce a Dependency Injector into your application.
Chapter 12: Are you Mocking me? :- Create a mock of any interface and write tests that introduce

This book as you can see has something for everyone, i have thoroughly enjoyed reading it from cover to cover and will be reading a good few of the chapters again, it’s a very handy reference book and covers a number of topics that as a developer can help you explore, improve and be inspired – just as it says on the front cover.

I picked this book up on Amazon for £19 and its well worth it – recommended reading for 2013.