要素のテストd3jsユニットの削除

d3.jsチャートでユニットテストにjasmineを使用しています。私はd3.timerFlush()を使ってアニメーションの実行を完了しています。これは新しい要素を入力したり属性を更新したりするときに効果的です。新しい値を正確にテストすることができます。しかし、私は要素を取り除くのに苦労しています。要素のテストd3jsユニットの削除

は、私はこのような方法があります：

exit() { 
    let arcs = svg.selectAll("path.arc"); 

    arcs.transition().duration(1000) 
     .attrTween("d", function(d, i) { return vm._arcTween(this, d) }) 
     .remove(); 
}

をそして、私のテストでは、このようなものになります。失敗した

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); 
});

を。テストをデバッグすると、要素が削除されていないことがわかります。しかし、私は期待を変更する場合：

expect(pieChartSvc._arcTween).toHaveBeenCalled();

が通過するので、メソッドが正しく実行され、タイマーがフラッシュされたが、要素が削除されないことがわかっています。

私は間違っていますか？

この問題：Disabling all D3 animations (for testing) 私の質問には答えません。しかし、彼らはまだDOM

出典

2017-03-01 yammerade

によれば、この（のhttp：// stackoverflowの.com/questions/20068497/d3-in-unit-testing）、[This（https://stackoverflow.com/questions/14443724/dis） abling-all-d3-animations-for-testing）、[this]（https://github.com/d3/d3/issues/1789）、[this]（https://bl.ocks.org/mbostock/） 9644751）、フラッシングの前に 'Date.now'を設定する必要があります。 – Mark

私はこれを正確にこの答えにしてみました：http://stackoverflow.com/questions/20068497/d3-transition-in-unit-testingそれでも動作しません。アニメーションが実行されていて、要素が新しい場所にありますが、DOMから削除されていません – yammerade

誤解されていましたが、移行を完了するのに問題があると思いました。私の近くに戻った。 – Mark

申し分に表示され、遷移が実行されており、要素は、それらがDOMから除去される前に、彼らがいる状態に変更された、それを考え出し、d3バージョン3を使用するために使用しますdate.nowを使用して時間を測定します。バージョン4はperformance.nowに移動しました。

ので、正しいコードは次のようになります。

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); 
});

ここ

は、いくつかのテストコードです：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

出典

2017-03-01 19:32:56 Mark

これは私のために働いた。ありがとうございました！ – yammerade

要素のテストd3jsユニットの削除

答えて

関連する問題