How to simulate mouse events (e.g. click)

plotly.js
1

Similar to this topic, I am trying to simulate click events in an acceptance test (to ensure that my component is correctly forwarding them from plotly.js).

However, the normal QUnit click helper does not seem to trigger this, although clicking on the point in the same test scenario with a mouse/pointer does. It looks like plotly.js uses a “coverSlip” that grabs all the mouse event and then emits plotly.js events like plotly_click according to how it interprets them, and I’m guessing this is at the heart of the problem I’m having.

See jsBin “qulalos” for example.

I tried running what seemed most obvious at first:
elementWeWantToClick.dispatchEvent(new MouseEvent('click'));
but that didn’t work. Eventually I was able to cobble together mousedown & mouseup events to make it work like this:

function triggerClick(gd, elementToClick) {
    const { x, y, width, height } = elementToClick.getBoundingClientRect();
    const dragEl = gd.querySelector('.cursor-crosshair');
    const eventProps = {
        clientX: x + width/2,
        clientY: y + height/2
    };
    //console.log('sending mousedown to drag element');
    dragEl.dispatchEvent(new MouseEvent('mousedown', eventProps));
    //console.log('sending mouseup to document');
    document.dispatchEvent(new MouseEvent('mouseup', eventProps));        
}

// Works
const gd = document.querySelector('.js-plotly-plot');
const elementWeWantToClick = gd.querySelector('g.plot g.scatterlayer g.trace g.points path.point');
triggerClick(gd, elementWeWantToClick);

Are there are simpler / better ways to do this? It would be wonderful if someone would publish a plotly-test-helpers package.

2

The mouseup + mousedown approach is what you used internally, so not we don’t know of a better approach.

3

This seems to blow up with scaling though. Is that a known issue?

Update: See work-around here (note: doesn’t actually correct mouse events – just allows simulation with corrected values)