Testing

In this chapter, we will cover several topics that will assist you in the long-term maintenance of your D3 code base. The goal is to create a foundation to build reusable assets that can be easily unit tested while leveraging popular tools and techniques already established in the JavaScript community.

Unit testing is important in any software development project, especially in a D3 code base. Typically, these projects involve a lot of code that applies analytics or manipulates data structures. For these types of problems, unit testing can help in the following ways:

• Reduce bugs: An automated test suite will allow the developer to break down and test individual components. These tests will be run constantly throughout the development cycle, validating that future features do not break the older working code.
• Document accurately: Often, tests are written in a human-readable...

Code organization and reusable assets

The foundation of our way of writing reusable and testable D3 code is from Mike Bostock's blog article, Towards Reusable Charts, at http://bost.ocks.org/mike/chart/. At its core, it sets out to implement charts as closures with getter and setter methods. This makes the code more readable and simple for testing. It is actually a great idea to read this article before continuing, as we can take some of our career experiences and extend these concepts a little further. The project structure is organized to achieve several goals.

Project structure

The Bootstrap project contains the following files and directories:

The project works out of the box with example code already in place. To see this in action, we will launch the example. From the example Bootstrap code provided, first, install all the dependencies (note that you only have to execute this command once):

npm install

Then, to see the visualization, execute the following:

node node_modules/http-server/bin/http-server  

Next, open the browser to http://localhost:8080. You should see three bars changing based on random data in a series of tests. Note that if you have the previous examples already open, you will have to kill that process in order to run this one, as both of them use the same port.

To see the unit tests working, just execute the following:

node_modules/karma/bin/karma start  

You should see a summary of five unit tests running in...

Writing testable code

There are dozens of factors to consider when creating visualizations. Every design will have its own set of unique requirements and configuration capabilities to consider. If you build on the reusable pattern outlined by Mike Bostock, you will have a great framework to start with.

When working with data visualizations, we will have some form of data manipulation or logic that must be applied to incoming data. There are two notable best practices we can leverage to test and validate these operations. They are explained in the following sections.

Keeping methods/functions small

Small functions mean low cyclomatic complexity. This means there are fewer logic branches in each function and, therefore, fewer...

Unit testing

Now that we have a code base written in a testable way, let's automate those tests so that we do not have to perform them manually and can continue to code and refactor with ease.

If you look at the spec/viz_spec.js file, you will note some common patterns when unit testing. The following code is written with a JavaScript unit-testing framework called Jasmine and leverages Karma to execute the tests. You can learn more about the Jasmine syntax, assertions, and other features at http://jasmine.github.io/1.3/introduction.html.

The Bootstrap project has everything you need to start testing quickly.

The first step is to start our Karma test runner with this line of code:

node_modules/karma/bin/karma start 

This runner will watch every edit of the viz.js file or the viz_spec.js file. If any changes are detected, it will automatically rerun every test suite and provide...

Creating resilient visualization code

We want to make sure that our visualization can react to changing data, with minimal effort from the program that calls our code. One way to test different permutations of data and ensure that the visualization reacts accordingly is to randomly create example data, call the visualization code a number of times, and witness the result. These operations are handled in the factories directory. Let's take a look at the viz_factory.js file as an example:

(function() { 
    var viz = d3.charts.viz(); 

Create a variable to store our function with getters and setters as closures. In this example, we will use an anonymous function as a wrapper to execute the code. This prevents conflicts with other JavaScript code and ensures that our visualization will work properly in a protected context:

    var rand = function() { 
      return Math.floor...

Summary

In this chapter, we described the techniques to help test your D3 code base and to keep it healthy over the lifespan of your project. We also went step by step through a Bootstrap project to help you get started with these examples, and we took a look at a methodology for structuring your work.

Our recommendations are based on many years of experience and many projects delivered using D3. We strongly recommend that you follow good software patterns and focus on tests; this will allow you to perfect your craft. Quality is in your hands now.