d3js单元测试删除元素 [英] d3js unit testing removal of elements
问题描述
我使用 jasmine 在 d3.js 图表中单元测试一些交互。我一直使用 d3.timerFlush（）来完成动画的执行。这对于在输入新元素或更新属性时非常有用，并且我能够准确地测试新值。
我有一个这样的方法：
exit（）{
let arcs = svg.selectAll（path.arc）;
arcs.transition（）。duration（1000）
.attrTween（d，function（d，i）{return vm._arcTween（this，d）}）
.remove（）;
}
我的测试看起来像这样：
it（'它将从DOM中删除所有的饼相关元素'，（）=> {
chartSvc.exit b $ b d3.timerFlush（）;
let element = svg.querySelectorAll（/ *选择我的元素* /）;
expect（elements.length）.toEqual（0）;
} ）;
。如果我调试测试，我可以看到元素没有被删除。但是如果我改变期望：
expect（pieChartSvc._arcTween）.toHaveBeenCalled（）;
，所以我知道该方法正确执行并且定时器刷新，
此问题：禁用所有D3动画（用于测试）
不回答我的问题。正在执行转换，并且元素已经更改为他们从DOM中移除之前的状态，但它们仍然显示在DOM上
date.now code>来测量时间。版本4已移至 performance.now 。
因此，正确的代码应该是：
它会从DOM中删除所有的饼相关元素'，（）=> {
chartSvc.exit（）;
performance.now = function（）{return Infinity;};
d3.timerFlush（）;
let element = svg.querySelectorAll（/ *选择我的元素* /）;
expect（elements.length）.toEqual（0）;
}
以下是一些测试代码：
<！DOCTYPE html>< html& < head> < script data-require =d3@4.0.0data-semver =4.0.0src =https://d3js.org/d3.v4.min.js>< / script> < style> path {fill：none;中风：钢蓝}< / style> < / head> < body> < svg width =300height =300> < g transform =translate（20,20）> < path class =arcd =M0,0L100,0>< / path> < path class =arcd =M0,50L100,50>< / path> < path class =arcd =M0100L100,100>< / path> < path class =arcd =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>
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.
I have a method like this:
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.
What am I doing wrong?
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
解决方案 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屋！
