Testing dnd-kit/sortable using jest, failing to eventually sort

275 Views Asked by At

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,
  }));```



 
0

There are 0 best solutions below