Testing drag and drop in framer motion using cypress.

[jamesvec]

I am using a reorder group in my project and I am trying to use drag and drop in cypress to reorder the elements in my tests. Has anyone had any luck getting this to work? I have tried a few different libs plus the built in cypress drag events with no luck. Any help would be greatly appreciated.

[jamesvec]

Leaving this here for anyone who needs to do this.

cy.get('[data-cy=drag-target]')
  .eq(0)
  .then(($el) => {
    const el = $el[0];
    const rect = el.getBoundingClientRect();
    cy.wrap($el).trigger('pointerdown', {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
      button: 0,
    });
  });

cy.get('[data-cy=drag-target]')
  .eq(1)
  .then(($el) => {
    const el = $el[0];
    const rect = el.getBoundingClientRect();
    cy.wrap($el).trigger('pointermove', {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
      button: 0,
    });
    cy.wrap($el).trigger('pointerup', {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
      button: 0,
    });
  });