d3js unit testing removal of elements

前端未结

关注

 1  559

I am using jasmine to unit test some interactions in a d3.js chart. I have been using d3.timerFlush() to complete the executions of anima

相关标签:

1条回答

时光取名叫无心

2021-01-23 13:38

Alright, figured it out, d3 version 3 used to use date.now to measure time. Version 4 moved to performance.now.

So, the correct code should be:

it('it will remove all of the pie related elements from the DOM', () => {
    chartSvc.exit();
    performance.now = function() { return Infinity; };
    d3.timerFlush();
    let elements = svg.querySelectorAll(/* selects my elements */);
    expect(elements.length).toEqual(0);
});

Here's some test code:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      path {
        fill: none;
        stroke: steelblue;
      }
    </style>
  </head>

  <body>
    <svg width="300" height="300">
      <g transform="translate(20,20)">
        <path class="arc" d="M0,0L100,0"></path>
        <path class="arc" d="M0,50L100,50"></path>
        <path class="arc" d="M0,100L100,100"></path>
        <path class="arc" d="M0,150L100,150"></path>
      </g>
    </svg>
    <script>
      
      var svg = d3.select('svg');
      
      let arcs = svg.selectAll("path.arc");
      
      arcs.transition()
        .duration(10000)
        .remove();
          
      performance.now = function() { return Infinity; };
      d3.timerFlush();

    </script>
  </body>

</html>

0 讨论(0)