CODEWITHSUNDEEP
javascriptbrowsersvgd3.jsautomated-tests
RichH
RichH

Reputation: 6138

Testing d3 (and other SVG based) Web Applications

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

Thanks!

Upvotes: 40

Views: 7382

Answers (4)

user1401472
user1401472

Reputation: 2301

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.

Upvotes: 0

Biovisualize
Biovisualize

Reputation: 2475

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

Upvotes: 22

RichH
RichH

Reputation: 6138

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

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 0

Related Questions