Chapter 13. Test Drive your Visualization

In this chapter we will cover:

• Getting Jasmine and setting up the test environment

• Test driving your visualization – chart creation

• Test driving your visualization – SVG rendering

• Test driving your visualization – pixel-perfect bar rendering

Introduction

Whenever we program as a professional programmer it is always important to test the program we write in order to make sure it functions as designed and produces the expected outcome. D3 data visualization mainly consists of JavaScript programs hence just like any other program we write, data visualization needs to be tested to make sure it represents the underlying data accurately. Obviously, we can perform our validation through visual examination and manual testing, which is always a critical part of the process of building data visualization since visual observation gives us a chance to verify not only the correctness, but also the aesthetics, usability, and many other useful aspects. However, manual visual inspection can be quite subjective, therefore, in this chapter we will focus our effort on automated unit testing. Visualization well covered by unit tests can free the creator from the manual labor of verifying correctness by hand additionally, allowing him/her to focus...

Getting Jasmine and setting up the test environment

Before we start writing our unit test cases we need to set up an environment where our test cases can be executed to verify our implementation. In this recipe, we will show how this environment and necessary libraries can be set up for a visualization project.

Getting ready

Jasmine (http://pivotal.github.io/jasmine/) is a behavior-driven development (BDD) framework for testing JavaScript code.

Note

BDD is a software development technique that combines Test Driven Development (TDD) with domain driven design.

We chose Jasmine as our testing framework because of its popularity in JavaScript community as well as its nice BDD syntax. You can download the Jasmine library from:

https://github.com/pivotal/jasmine/downloads

Once downloaded you need to unzip it into the lib folder. Besides the lib folder we also need to create the src and spec folders for storing source files as well as test cases (in BDD terminology test cases are called specification...

Test driving your visualization – chart creation

With test environment ready, we can move on and develop a simple bar chart very similar to what we have done in the Creating a bar chart recipe in Chapter 8, Chart Them Up, though this time in a test-driven fashion. You can see how the bar chart looks if you open the tdd-bar-chart.html page:

Test Driven Bar Chart

By now we all know very well how to implement a bar chart using D3; however, building a bar chart is not the focus of this recipe. Instead, we want to show how we can build test cases every step of the way and verify automatically that our bar chart implementation is doing what it is supposed to do. The source code of this recipe was built using test driven development method; however, we will not show you every step in the TDD process due to limited scope in this book. Instead, we have grouped multiple steps into three larger sections with different focuses in this chapter and this recipe is the first step we take.

How to do it...

First...

Test driving your visualization – SVG rendering

Now we have the basic skeleton of our bar chart object created, and we feel that we are ready to try to render something, so in this second iteration we will try to generate the svg:svg element.

How to do it...

Rendering the svg:svg element should not only simply add the svg:svg element to the HTML body, but also translate the width and height setting on our chart object to proper SVG attributes. Here is how we express our expectation in our test cases:

describe('.render', function () {
        describe('svg', function () {
            it('should generate svg', function () {
                chart.render();
                expect(svg()).not.toBeEmpty();
            });

            it('should set default svg height and width', 
              function () {
                chart.render();
                expect(svg().attr('width')).toBe('500');
                expect(svg().attr('height')).toBe('350');
            });

            it('should allow...

Test driving your visualization – pixel-perfect bar rendering

In this iteration we will finally generate the bars using the data we have. Through our test cases we will make sure all bars are not only rendered but rendered with pixel-perfect precision.

How to do it...

Let's see how we test it:

describe('chart body', function () {
        it('should create body g', function () {
            chart.render();
            expect(chartBody()).not.toBeEmpty();
        });

        it('should translate to (left, top)', function () {
            chart.render();
             expect(chartBody().attr('transform')).toBe('translate(30,10)')
        });
    });

    describe('bars', function () {
        beforeEach(function () {
            chart.data(data).width(100).height(100)
                .x(d3.scale.linear().domain([0, 3]))
                .y(d3.scale.linear().domain([0, 6]))
                .render();
        });

        it('should create 3 svg:rect elements', function () {
            expect(bars...