Testing DnD with Cypress

[joetidee]

I am migrating over from react-beautiful-dnd (RBD) to pragmatic-dnd (PD). I had some Cypress tests working with RBD, which were modelled on this example. However, now I am on PD, they no longer work.

I found this plugin, but this also doesn't seem to be dragging the draggable element.

I noticed a Cypress example on the PD website, but this also does not seem to be dragging the element, for example:

const options = {
      force: true,
      eventConstructor: 'DragEvent',
      // If you wanted to fake dragging particular data,
      // you can add it to this `DataTransfer` with `.setData()`
      // See: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
      dataTransfer: new DataTransfer(),
  };
  cy.get(subject).trigger('dragstart', options);
  cy.get(target).trigger('dragenter', options).trigger('drop', options);

Does PD work with Cypress at all? If so, do you have any examples of tests or plugins that should support it?

I'm using Cypress 13.17.0

[ivandevp]

It wasn't working for me neither but I was able to simulate the drag and drop by leveraging the keyboard navigation:

  cy.get(subject).then($subject => {
    const subjectIndex = $subject.index();
    cy.get(target).then($target => {
      const targetIndex = $target.index();
      const difference = targetIndex - subjectIndex;
      const direction = difference > 0 ? '{downarrow}' : '{uparrow}';
      const steps = Math.abs(difference);

      cy.get(subject).first().focus().type(' ', { force: true });

      Array.from({ length: steps }).forEach(() => {
        cy.get(subject).first().type(direction, { force: true });
      });
      
      cy.get(subject).first().type(' ', { force: true });
    });
  });

Hope that works until there's an official way to implement it.