I'm trying to introduce some tests to a component using dnd-kit. So far, I can successfully trigger a dragStart and dragEnd behavior within the component, but when trying to reorder the list, it always remains in the same order.
Currently, this is how I trigger the drag behavior, cobbled together from other sources I've seen (I had to add a mouseSensor to get this to work):
// mouse over dragged element and mousedown
act(() => {
fireMouseEvent("mousemove", elemDrag, center1X, center1Y);
sleep(1);
fireMouseEvent("mouseenter", elemDrag, center1X, center1Y);
sleep(1);
fireMouseEvent("mouseover", elemDrag, center1X, center1Y);
sleep(1);
fireMouseEvent("mousedown", elemDrag, center1X, center1Y);
sleep(1);
});
// start dragging process over to drop target
act(() => {
const dragStarted = fireMouseEvent(
"dragstart",
elemDrag,
center1X,
center1Y
);
if (!dragStarted) {
return;
}
});
act(() => {
fireMouseEvent("drag", elemDrag, center1X, center1Y);
sleep(1);
fireMouseEvent("mousemove", elemDrag, center1X, center1Y);
sleep(1);
fireMouseEvent("drag", elemDrag, center2X, center2Y);
sleep(1);
fireMouseEvent("mousemove", elemDrop, center2X, center2Y);
// trigger dragging process on top of drop target
fireMouseEvent("mouseenter", elemDrop, center2X, center2Y);
sleep(1);
fireMouseEvent("dragenter", elemDrop, center2X, center2Y);
sleep(1);
fireMouseEvent("mouseover", elemDrop, center2X, center2Y);
sleep(1);
fireMouseEvent("dragover", elemDrop, center2X, center2Y);
sleep(1);
// release dragged element on top of drop target
fireMouseEvent("drop", elemDrop, center2X, center2Y);
sleep(1);
fireMouseEvent("dragend", elemDrag, center2X, center2Y);
sleep(1);
// fireMouseEvent("mouseup", elemDrag, center2X, center2Y);
// sleep(1);
});
Strangely, with this last line commented out (the completion of the drag), dnd-kit describes this behavior in accessibility: 'Draggable item item-0 was moved over droppable area item-1.' Using a feature like jest-preview confirms this, and also previews the reordered list. However, when this line is commented back in, the accessibility says: 'Draggable item item-0 was dropped over droppable area item-0'.
More details on how I grab these elements and mock their rectangles are below. Any help is greatly appreciated!!!
const draggables = container.querySelectorAll(
'[aria-roledescription="sortable"]'
);
Object.setPrototypeOf(window, Window.prototype);
draggables.forEach((draggable, index) => {
mockGetBoundingClientRect(draggable, index);
});
const elemDrag = draggables[0];
const elemDrop = draggables[1];
let pos = elemDrag.getBoundingClientRect();
const center1X = Math.floor((pos.left + pos.right) / 2);
const center1Y = Math.floor((pos.top + pos.bottom) / 2);
pos = elemDrop.getBoundingClientRect();
const center2X = Math.floor((pos.left + pos.right) / 2);
const center2Y = Math.floor((pos.top + pos.bottom) / 2) + 50;
jest.spyOn(element, "getBoundingClientRect").mockImplementation(() => ({
bottom: 88 + index * (177 - 88),
height: 48,
left: 68,
right: 282.078125,
top: 40 + index * 89,
width: 214.078125,
x: 68,
y: 40 + index * 89,
}));```