Unit Test d3v4 zoom behavior in React with Chai - reactjs

Question

Using d3v4, react and chai (chai-enzyme, chai-jquery) for unit testing.
So I have a zoom behavior attached to my graph.
const zoom = d3
.zoom()
.scaleExtent([1, Infinity])
.on('zoom', () => {
this.zoomed()
})
And the zoom behavior is attached to the svg element.
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)
The on('zoom') callback is defined as
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)
}}
My unit test for firing up the "zoom" event is
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 () {
...
})
})
})
When I use chai-jquery to trigger the "wheel" event, the zoom event is fired but the d3.event.tranform in the zoomed() method gives NaN for x, y and k. I want to test the zoomed() callback such that I have the d3.event.transform values to test the logic in the zoomed() method.
How can I fire the zoomEvent using "wheel" event or any other event such that d3.event is fired with some values?

Answer 1

Solved this. Instead of using the jquery to fire the event, I am now using zoomBehaviour.scaleBy(selection, scale) to fire the callback.