Testing d3 (and other SVG based) Web Applications

Question

I have a web application that uses the d3 library for some complex SVG based visualizations.

I have automated tests for my server side code and JavaScript models (I use an MVC like architecture in my JavaScript). These are run on a Jenkins CI server on every commit. Now I need to work out how to test my views.

How do others tackle this problem and what tools do you use?

Some thoughts I've had ...

• Serialize the SVG generated to a file and compare to a baseline
• Automatically capture a browser image and do an image diff
• Something else?

Thanks!

Answer 1

The example you give are for testing the graphical output. For this you can use a screenshot diff tool like PhantomCSS, Sikuli or roll-up your own with Resemble.js.

But if your question is more genrally about testing D3.js/SVG-based apps, as the title implies, you should look at the D3 test suite. Most tests don't even need an html fixture because they are basically testing the API. If the most important thing for you is the consistency of the visual result, go with a screenshot diff tool. For navigation and UX flow, you are better with browser automation like Selenium. But for unit testing, where you want to ensure having a consistent API and modular code, most test frameworks with spies, fixture and mocking capabilities will do (i.e, Jasmine, Vows, Mocha).