Wednesday 23 October 2013

Quick guide to debugging javascript with jasmine and Resharper 8

Hi everyone,

just to make our development lives a bit easier in javascript, i wanted to debug a jasmine test the other day and did a bit of stack overflowing and managed to get it working lovely, so here's the skinny :

Resharper 8 is really cool and comes with a whole host of functions, if you haven't already, check out the extension manager is so choc full of goodies e.g. angular plugins, nunit stuff, it made me cry.....

Anways, on with the show.  If you haven't already you will need to enable the jasmine support in the resharper menu :


Once done, we can get to writing our jasmine test, here's an example:

/// <reference path="../../BCAResearch/Scripts/jquery-1.7.1.js" />
/// <reference path="../../BCAResearch/Scripts/app/chart/ChartDataFunctions.js" />

describe("mytestsuite", function() {

    describe("When doingsomething", function() {

        it("It should do this", function() {

                jasmine.getEnv().currentRunner_.finishCallback = function () { };
            
            var dummySeriesCollection = new Array();
            var dummyseries = { series: 'theseries' };
            dummySeriesCollection.push(dummyseries);
            dummySeriesCollection.push(dummyseries);
            dummySeriesCollection.push(dummyseries);

            var panel1 = { SeriesCollection: dummySeriesCollection };
            chartData.Panels.push(panel1);

            var dummySeriesCollection2 = new Array();
            dummySeriesCollection2.push(dummyseries);
            dummySeriesCollection2.push(dummyseries);

            var panel2 = { SeriesCollection: dummySeriesCollection2 };
            chartData.Panels.push(panel2);

            expect(ChartDataFunctions.MaxNumberOfSeries(chartData)).toEqual(3);
        });
    });
});

notice the call to the jasmine.getEnv, this tells the call back never to happen leaving the connection open to resharper.

what we can do then is open up our favourite browser debugging tools, put a break point on our code (which is called tests.js) then hit F5 and presto ! debugging your test.

makes me smile....