模拟js中的鼠标点击(pointinterdown ?)

Question

我创建了这个分支:

https://codesandbox.io/s/reactgrid-highlights-forked-shvr4z

我正试图编写一个选择单元格并编辑它的测试(开玩笑)。我没有看到他们导出他们的测试工具。

所以我尝试选择单元格，没有成功。我下载了他们的库，试着调试他们的代码，并认为他们在选择单元格时触发了pointerdown事件。

我试着用:

const event = new PointerEvent('pointerdown')
myElement = document.querySelector('[data-cell-rowidx="1"][data-cell-colidx="0"]');
myElement.dispatchEvent(event);

或其他变化

另外，我尝试了@testing-library/user-event:

userEvent.click(...)
pointer([
{keys: '[MouseLeft>]', target: myElement},
{keys: '[/MouseLeft]'},
])

感谢您的帮助。

Answer 1

成功!

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