Automating tree and graph visualisation unit tests in Python and Django.
We will use the browser automation tool Selenium to manage the rendering browser from within our unit tests. For Django, we can use the Live Server Test Case. In order to avoid launching a user interface which we do not need for the purposes of these tests, we will use the PhantomJS driver for Selenium, which is a headless sandboxed WebKit browser with a DOM.
Defining the Base Test Case
Assuming you have a setting for the PhantomJS executable in
settings.PHANTOMJS_EXECUTABLE, which should default to
Defining A Concrete Test Case
library included somehow) which provides the function
run(dot) expecting a DOT string and
returning the width and height of the SVG canvas after the tree has been layed out and rendered.
Our HTML container simply features the following SVG element.
We can generate an effective screen capture of the browser's rendering in order to visually inspect the output of the unit test.
Attempting to use any SVG rendering logic which relies on getBBox will fail in standalone node.js as it does not feature a DOM, and using a pluggable DOM such as jsdom will not fix the issue as it does not support the getBBox method.
Using standalone PhantomJS through sub-process communication from Python instead of a structured approach as with Selenium dramatically increases the complexity of testing and of deploying the test suite.
Given the programmatic testability of the entire pipeline starting from a Django view, through serialization of the data structures in DOT notation or otherwise, to layout and rendering into SVG on the frontend, we should always automate their testing and not rely on manual visual inspections of browser UI's.