d3js 单元测试删除元素 [英] d3js unit testing removal of elements
问题描述
我正在使用 jasmine 对 d3.js 图表中的一些交互进行单元测试.我一直在使用 d3.timerFlush() 来完成动画的执行.这在输入新元素或更新属性时非常有用，并且我能够准确地测试新值.但是，我很难让它删除元素.
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 animations. This works great for when entering new elements or updating attribute, and I am able to accurately test the new values. However, I am having a hard time getting it to remove elements.
我有这样的方法:
exit() {
let arcs = svg.selectAll("path.arc");
arcs.transition().duration(1000)
.attrTween("d", function(d, i) { return vm._arcTween(this, d) })
.remove();
}
我的测试看起来像这样:
And my test looks something like this:
it('it will remove all of the pie related elements from the DOM', () => {
chartSvc.exit();
d3.timerFlush();
let elements = svg.querySelectorAll(/* selects my elements */);
expect(elements.length).toEqual(0);
});
失败了.如果我调试测试，我可以看到元素没有被删除.但是，如果我改变期望:
which fails. If I debug the tests, I can see that the elements are not being removed. However if I change the expect:
expect(pieChartSvc._arcTween).toHaveBeenCalled();
通过了，所以我知道该方法正在正确执行并且计时器已刷新，但元素没有被删除.
that passes, so I know that the method is being executed correctly and the timer flushed, but the elements aren't removed.
我做错了什么?
此问题:禁用所有 D3 动画(用于测试)不回答我的问题.transition 正在执行，并且元素已更改为它们从 DOM 中删除之前的状态，但是它们仍然出现在 DOM 上
This issue: Disabling all D3 animations (for testing) does not answer my question. The transition is being executed and the elements have been changed to the state they are in before they are removed from the DOM, however they still appear on the DOM
推荐答案
好吧，想通了，d3 版本 3 曾经使用 date.now 来测量时间.版本 4 移至 performance.now.
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>这篇关于d3js 单元测试删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
