40

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!

RichH
  • 6,108
  • 1
  • 37
  • 61
  • 2
    What did you guys finally do? We have similar problems where we generate charts with HighCharts in SVG and want to make sure the charts are correct. We are really struggling. – John Mcdock May 09 '15 at 11:04
  • @JohnMcdock - I went with the approach I save below with Selenium / ImageMagick and it's been working well. http://stackoverflow.com/a/15823644/16779 – RichH Jul 01 '15 at 01:36

4 Answers4

22

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).

Biovisualize
  • 2,455
  • 21
  • 20
  • I feel the d3 test suite is similar to how I test my models currently. I push as much of the logic for the visualization into the model and the view really only handles rendering specifics. I also use Selenium for navigation. I'm looking into PhantomCSS right now as it could be a great solution checking complex visualizations. Thanks! – RichH Apr 04 '13 at 23:35
0

It sounds like Selenium should do what you're looking for. It drives the web browser and therefore allows you to check what actually happens in the browser instead of assuming that the SVG will be rendered correctly. It allows you to specify unit tests as a series of clicks/key strokes and it integrates quite nicely with Jenkins.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • 2
    but it sounds like he wants to test the visual output in an automated way, not just the behavior (clicks & keystrokes) – explunit Apr 04 '13 at 12:36
  • You can do that as well by checking the structure of the document. I agree that it still might be better to have a serialized version of the SVG because of its complexity, but that can be done within the framework as well. – Lars Kotthoff Apr 04 '13 at 13:21
  • I've used Selenium 2 pretty heavily and think it is great. In this situation I need to check the positions, colors and transparency of thousands of SVG elements so per element checks would be heavy unless it was some serialized form. If I go down the screen capture route then Selenium would probably be a good choice for grabbing the images. – RichH Apr 04 '13 at 19:50
0

The solution I'm currently contemplating is ...

  1. Create a simple file (csv) with a list of urls to capture, along with a crop region (see 3)
  2. Load each of the urls and capture screenshots with Selenium
  3. Crop the visualization out of the screenshot with ImageMagick (so we're just testing the visualization and not the full ui)
  4. Compare the images to baselines using ImageMagick
  5. Generate a HTML report with the old, new and diff images (for any images that are different)
  6. Generate JUnit xml output for the CI server
Community
  • 1
  • 1
RichH
  • 6,108
  • 1
  • 37
  • 61
0

Capturing browser and verifying the graph is a good test. But I feel this to be a responsibility of D3 itself than our code.

I was also having similar question. (My Question). Please checkout the answer I posted there.

Community
  • 1
  • 1
user1401472
  • 2,203
  • 3
  • 23
  • 37