Test de l'unité Comportement du zoom d3v4 dans Réagir avec Chai

Question

Utiliser d3v4, réagir et chai (chai-enzyme, chai-jquery) pour les tests unitaires. J'ai donc un comportement de zoom attaché à mon graphique.

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

Et le comportement du zoom est attaché à l'élément svg.

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) 

Le sur ('zoom') de rappel est défini comme

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

Mon test unitaire pour le tir jusqu'à l'événement "zoom" est

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() { 
     ... 
    }) 
    }) 
}) 

Quand j'utilise chaï-jquery pour déclencher l'événement "wheel", l'événement zoom est déclenché mais le d3.event.tranform dans la méthode zoomed() donne NaN pour x, y et k. Je veux tester le callback zoomed() de telle sorte que j'ai les valeurs d3.event.transform pour tester la logique dans la méthode zoomed().

Comment puis-je déclencher le zoomEvent en utilisant l'événement "wheel" ou tout autre événement tel que d3.event est déclenché avec certaines valeurs?

Answer 1

Résolu ceci. Au lieu d'utiliser jquery pour déclencher l'événement, j'utilise maintenant zoomBehaviour.scaleBy(selection, scale) pour déclencher le rappel.