Testing D3.js

By:

Everyone who works with javascript and data visualization has to at some point come across D3. D3.js is a data driven javascript library for Dom manipulating, which comes with a large set of advanced features, enabling the quick calculation and rendering of very large data sets.

Or to quote the documentation: "D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction."

The demos on the website present quick transformations and calculation involving very large sets of data. While working with D3 is very well documented, there does not seem to be too much information about testing the generated elements.

We will actually only need a very basic configuration to get and up ready with testing D3.js data visualizations.

This post will assume previous knowledge of how to work with D3.js and basic api experience, as we will be focusing on the testing side of things.

We will be writing a basic bar chart and along the way add tests or rather try to see what we can really test with Jasmine and what we might no be able to verify.

Testing the SVG
We will start things off by creating a simple svg.
var svg = d3.select('body').append('svg')
.attr('height', '500')
.attr('width', '500')
.append('g')
.attr("transform", "translate("0, 0")");

This code will not produce any visible results but if you inspect the dom you will see that the svg element has been created:
<svg height="500" width="500">
<g transform="translate(0, 0)"></g>
</svg>

We should rewrite the previous code to make it testable:
function barChart() {
var that = {};

that.render = function() {
var svg = d3.select('body').append('svg')
.attr('height', '500')
.attr('width', '500')
.append('g')
.attr("transform", "translate(0, 0)");

};

return that;
}

We will simply wrap the previous SVG creation code into a render method. This will enable us to call the render method before every test and also enables us to remove the SVG after the test has run.

Writing the first tests is easy. We can't test too much at this point, but we can definitely verify if the SVG has been created and if it contains the correct height and width dimensions.

describe('Test D3.js with jasmine ', function() {
var c;

beforeEach(function() {
c = barChart();
c.render();
});

afterEach(function() {
d3.selectAll('svg').remove();
});

describe('the svg' ,function() {
it('should be created', function() {
expect(getSvg()).not.toBeNull();
});


it('should have the correct height', function() {
expect(getSvg().attr('width')).toBe('500');
});

it('should have the correct width', function() {
expect(getSvg().attr('width')).toBe('500');
});
});

function getSvg() {
return d3.select('svg');
}

});
We are able to test a very basic render method already.

Full article...

Other Resource

... to read more articles, visit http://sqa.fyicenter.com/art/