d3 transition in unit-testing

Question

I have an chart built by d3 and which appears with transitions and I need to test chart when all transitions have ended. I use jasmine for unit-testing. How to do it? I find method d3.timer.flush(), but it skips only first frame, but I want to skip all animations and see an final result right now and make some assertions on it.

Answer 1

You can execute transitions synchronously directly to their final state with one call to D3's timer flush if you mock out its timestamp determination during the flush like so:

An alternative to mocking out transitions is executing them synchronously directly to their final state.

With D3.js v4, do:

function flushAllD3Transitions() {
    var now = performance.now;
    performance.now = function() { return Infinity; };
    d3.timerFlush();
    performance.now = now;
 }

With D3.js v3 and previous, do:

function flushAllD3Transitions() {
    var now = Date.now;
    Date.now = function() { return Infinity; };
    d3.timer.flush();
    Date.now = now;
 }

Mocking the transition altogether (to avoid the calculation overhead) yielded mixed results for me, for example if your final state is created with an attrTween, it needs to be executed.

See also our discussion in d3 issue 1789 and SO 14443724.