I created this fork of this:
https://codesandbox.io/s/reactgrid-highlights-forked-shvr4z
I'm trying to write a test that selects a cell and edits it (jest). I didn't see that they export their test utils.
So I tried to select the cell, with no success. I downloaded their library, tried to debug their code and think they trigger pointerdown event when selecting a cell.
I tried to simulate it with:
const event = new PointerEvent('pointerdown')
myElement = document.querySelector('[data-cell-rowidx="1"][data-cell-colidx="0"]');
myElement.dispatchEvent(event);
Or other variations.
In addition, I tried with @testing-library/user-event:
userEvent.click(...)
pointer([
{keys: '[MouseLeft>]', target: myElement},
{keys: '[/MouseLeft]'},
])
Any help appreciated.
Succeeded!
const simulateMouseEvent = function(element, eventName, coordX, coordY) {
element.dispatchEvent(new MouseEvent(eventName, {
view: window,
bubbles: true,
cancelable: true,
clientX: coordX,
clientY: coordY,
button: 0
}));
};
const theButton = document.querySelector('[data-cell-rowidx="1"][data-cell-colidx="0"]')
const box = theButton.getBoundingClientRect(),
coordX = box.left + (box.right - box.left) / 2,
coordY = box.top + (box.bottom - box.top) / 2;
simulateMouseEvent (theButton, "pointerdown", coordX, coordY);
simulateMouseEvent (theButton, "pointerup", coordX, coordY);
simulateMouseEvent (theButton, "click", coordX, coordY);