d3 Testing with Jasmine and Karma

appSpec.js

'use strict';

// Adding custom matchers
describe("1+1", function() {
    beforeEach(function() {
        this.addMatchers({
            toBeDivisibleByTwo: function() {
                return (this.actual % 2) === 0;
            }
        });
    });

    it("should add correctly", function() {
        expect(1+1).toEqual(2);
    });

    it("should be divisible by two", function() {
        expect(1+1).toBeDivisibleByTwo();
    });
});

// Mock asynchronous function testing
describe("Asynchronously", function() {
    it("should retrieve a JSON config file", function() {
        var name, description;
        runs(function() {
            setTimeout(function() {
                name = "Zac",
                description = "config file"
            }, 100);
        })

        waitsFor(function() {
            return name == "Zac" && description == "config file";
        }, "JSON file to be read", 500);
    });
});

// Evaluating the DOM
describe("Machine gun babies script", function() {
    var expCircles;
    var actCircles;
    var d3Animation;

    function flushAllD3Transitions() {
        var now = Date.now;
        Date.now = function() { return Infinity; };
        d3.timer.flush();
        Date.now = now;
    }

    beforeEach(function() {
        d3Animation = new SBAnimations();
        expCircles = dataArray.length;
        actCircles = $('svg circle').length;
    });

    it("should append the right number of circles to the DOM", function() {
        expect(expCircles).toEqual(actCircles);
    });
    
    it("should append an SVG chart with width: 500px", function() {
        var width = +$('svg').attr('width');
        expect(width).toEqual(500);
    });

    it("should append an SVG chart with height: 500px", function() {
        var height = +$('svg').attr('height');
        expect(height).toEqual(500);
    });

    it("should interpolate the circle radii accurately", function() {
        // jQuery selector not working here, probably because it's calculating radii before start of
        // animation.
        flushAllD3Transitions();
        var expectedRadii = _.map(dataArray, function(d) { 
            return Math.sqrt(d); 
        });

        var actualRadii = _.map($('svg circle'), function(d) { 
            return +$(d).attr('r'); 
        });

        expect(expectedRadii).toEqual(actualRadii);
    });

    it("should return circles with cy = 100", function() {
        var cyAcc = true;
        cyAcc = _.map($('svg circle'), function(d) {
            // console.log($(d).attr('cy'));
            return cyAcc && $(d).attr('cy') == 60;
        });

        expect((_.compact(cyAcc)).length).toEqual(expCircles);
    });

    // Spying on an object to make sure its function has been called.
    it("should call the choppedAnimation function", function() {
        spyOn(d3Animation, "choppedAnimation");
        d3Animation.choppedAnimation();
        expect(d3Animation.choppedAnimation).toHaveBeenCalled();
    });
});

d3-chart.js

'use strict';

var dataArray = [50,20,30,40];
var timerStart, animDuration;

var svg = d3.select('body')
    .append('svg')
    .attr('width', 500)
    .attr('height', 500);

var circle = svg.selectAll('circle')
    .data(dataArray);

var SBAnimations = function() {};
SBAnimations.prototype.choppedAnimation = function() {
    return circle.enter()
        .append("circle")
        .attr("cy", 60)
        .attr("cx", function(d,i) { return i*100+100; })
        .attr("r", 0)
        .transition()
        .delay(function(d,i) {
            return i*300;
        })
        .duration(400)
        .attr("r", function(d) { return Math.sqrt(d); })
}
// var choppedAnimation = function() {
//     circle.enter()
//         .append("circle")
//         .attr("cy", 60)
//         .attr("cx", function(d,i) { return i*100+100; })
//         .attr("r", 0)
//         .transition()
//         .delay(function(d,i) {
//             return i*300;
//         })
//         .duration(400)
//         .attr("r", function(d) { return Math.sqrt(d); })
// }

// setTimeout(choppedAnimation, 1000);
// console.time('dfas');
var d3Animation = new SBAnimations().choppedAnimation();
// choppedAnimation();
// console.timeEnd('dfas');

karma.conf.js

// Karma configuration
// Generated on Tue Jul 01 2014 11:05:30 GMT-0400 (EDT)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'lib/jquery.js',
      'lib/d3.js',
      {pattern: 'tests/*.js', included: true},
      {pattern: '*.js', included: true}
    ],


    // list of files to exclude
    exclude: [
      
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Which plugins to enable
    // plugins: [
    //   'karma-phantomjs-launcher',
    //   'karma-jasmine'
    // ],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};