Unit Test d3v4 Chaiとの反応でのズーム動作

Question

ユニットテストのためにd3v4、reactとchai（chai-enzyme、chai-jquery）を使用します。

私はグラフにズーム動作を付けました。

const zoom = d3 
    .zoom() 
    .scaleExtent([1, Infinity]) 
    .on('zoom',() => { 
    this.zoomed() 
    }) 

ズーム動作はsvg要素に関連付けられています。私はチャイ-jqueryのを使用する場合（ 'ズーム'）コールバックに

const svg = d3 
    .select(this.node) 
    .select('svg') 
    .attr('preserveAspectRatio', 'xMinYMin meet') 
    .attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`) 
    .classed('svg-content-responsive', true) 
    .select('g') 
    .attr('transform', `translate(${margin.left},${margin.top})`) 
    .attr('height', height + margin.top + margin.bottom) 
    .attr('width', width + margin.left + margin.right) 
    .call(zoom) 

は "ズーム" イベントを発射するために

zoomed() { 
const {gXAxis, plotPlanText, plotZones, width, xAxis, xScale} = this.graphObjects 
const transform = d3.event.transform 

// get xMin and xMax in the viewable world 
const [xMin, xMax] = xScale.domain().map(d => xScale(d)) 

// Get reverse transform for xMin and xMax. 
if (transform.invertX(xMin) < 0) { 
    transform.x = -xMin * transform.k 
} 
if (transform.invertX(xMax) > width) { 
    transform.x = xMax - width * transform.k 
} 

// transform the bars for zones 

if (!isNaN(transform.x) && !isNaN(transform.y) && !isNaN(transform.k)) { 
    // rescale the x linear scale so that we can draw the x axis 
    const xNewScale = transform.rescaleX(xScale) 
    xAxis.scale(xNewScale) 

    // rescale xaxis 
    gXAxis.call(xAxis) 

    plotZones 
    .selectAll('rect') 
    .attr('x', (d, i) => transform.applyX(xScale(d.maxFrequency))) 
    .attr('width', (d) => -(transform.applyX(xScale(d.maxFrequency)) - transform.applyX(xScale(d.minFrequency)))) 

    // transform the flow text 
    plotPlanText 
    .selectAll('.plan-text-src') 
    .attr('x', d => (transform.applyX(xScale(d.maxFrequency)) + transform.applyX(xScale(d.minFrequency)))/2) 
    plotPlanText 
    .selectAll('.plan-text-dest') 
    .attr('x', d => (transform.applyX(xScale(d.maxFrequency)) + transform.applyX(xScale(d.minFrequency)))/2) 
}} 

私のユニットテストのように定義されて

describe('d3 Event handling', function() { 
    beforeEach(function() { 
    $.fn.triggerSVGEvent = function (eventName, delta) { 
     let event = new Event(eventName, {'bubbles': true, 'cancelable': false}) 
     if (delta) { 
     event.deltaX = delta.x 
     event.deltaY = delta.y 
     } 
     this[0].dispatchEvent(event) 
     return $(this) 
    } 
    }) 

    describe('When the chart is zoomed', function() { 
    let initialX 
    beforeEach(function() { 
     $('.flow-zone-container > svg > g').triggerSVGEvent('wheel') 
    }) 
    it('should update elements when zoomed', function() { 
     ... 
    }) 
    }) 
}) 

です"wheel"イベントをトリガするにはズームイベントが発生しますが、zoomed（）メソッドのd3.event.tranformはx、y、およびkに対してNaNを返します。私はzoomed（）メソッドでロジックをテストするためにd3.event.transformの値を持つようにzoomed（）コールバックをテストしたいと思います。

「wheel」イベントまたはd3.eventがいくつかの値で起動されるような他のイベントを使用してzoomEventを発生させるにはどうすればよいですか？

Answer 1

これを解決しました。 jqueryを使用してイベントを発生させる代わりに、私は現在zoomBehaviour.scaleBy(selection, scale)を使用してコールバックを起動しています。