angularcypressangular-material2

How to implement drag and drop in Cypress test when using Angular Material Drag and Drop?

I am struggling to test drag and drop with Cypress and Angular Material Drag and Drop. So the goal is to move "Get to work" from Todo to Done. I have created the following test, that should make it easy for you to reproduce:

You can play with the Stackblitz here.

describe('Trying to implement drag-n-drop', () => {

    before(() => {
        Cypress.config('baseUrl', null);

        cy.viewport(1000, 600);
        cy.visit('https://angular-oxkc7l-zirwfs.stackblitz.io')
        .url().should('contain', 'angular')
        .get('h2').should('contain', 'To do');
    });

    it('Should work, based on this https://stackoverflow.com/a/54119137/3694288', () => {

        const dataTransfer = new DataTransfer;

        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .trigger('dragstart', { dataTransfer });

        cy.get('#cdk-drop-list-1')
            .trigger('drop', { dataTransfer });

        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .trigger('dragend');

        cy.get('#cdk-drop-list-1').should('contain', 'Get to work');
    });


    it('Should work, with this library https://github.com/4teamwork/cypress-drag-drop', () => {
        cy.get('#cdk-drop-list-0 > :nth-child(1)')
            .drag('#cdk-drop-list-1');

        cy.get('#cdk-drop-list-1').should('contain', 'Get to work');
    });

});

The result from running the above test, looks like this:

enter image description here

Here is a repo to develop a solution.

Thanks for the help.

Events fired, found using the chrome debugger:

Item

Drop zone

Solution

After @Richard Matsen's awesome answer I ended up with adding his answer as a custom command. The solution looks like this

support/drag-support.ts

    export function drag(dragSelector: string, dropSelector: string) {
        // Based on this answer: https://stackoverflow.com/a/55436989/3694288
        cy.get(dragSelector).should('exist')
          .get(dropSelector).should('exist');
    
          const draggable = Cypress.$(dragSelector)[0]; // Pick up this
          const droppable = Cypress.$(dropSelector)[0]; // Drop over this
    
          const coords = droppable.getBoundingClientRect();
          draggable.dispatchEvent(<any>new MouseEvent('mousedown'));
          draggable.dispatchEvent(<any>new MouseEvent('mousemove', {clientX: 10, clientY: 0}));
          draggable.dispatchEvent(<any>new MouseEvent('mousemove', {
              // I had to add (as any here --> maybe this can help solve the issue??)
              clientX: coords.left + 10,
              clientY: coords.top + 10  // A few extra pixels to get the ordering right
          }));
          draggable.dispatchEvent(new MouseEvent('mouseup'));
          return cy.get(dropSelector);
    }

support/commands.ts

    // Add typings for the custom command
    declare global {
        namespace Cypress {
            interface Chainable {
                drag: (dragSelector: string, dropSelector: string) => Chainable;
            }
        }
    }
    // Finally add the custom command
    Cypress.Commands.add('drag', drag);

in the spec file

    it('🔥 Thx to Stackoverflow, drag and drop support now works 🔥', () => {
       cy.drag('#cdk-drop-list-0 > :nth-child(1)', '#cdk-drop-list-1')
       .should('contain', 'Get to work');
    });

A small giph, because I'm just so happy it finally works 😲

enter image description here

CI

Now it also works in CI 🔥 (and electron locally). Tested with CircleCI 2.0.

Solution

  • Dispatching MouseEvents seems to be the only way to test Angular Material drag and drop.

    You should also be aware of the following issue, which tests in Protractor but also applies to this Cypress test

    CDK DragDrop Regression between 7.0.0-beta.2 and 7.0.0-rc.2: Protractor tests stopped working #13642,

    It seems that (for want of a better explanation) an additional nudge is needed on the mousemove.

    The steps given as a workaround (Protractor syntax),

    private async dragAndDrop ( $element, $destination ) {
  await browser.actions().mouseMove( $element ).perform();
  await browser.actions().mouseDown( $element ).perform();
  await browser.actions().mouseMove( {x: 10, y: 0 } ).perform();
  await browser.actions().mouseMove( $destination ).perform();
  return browser.actions().mouseUp().perform();
}

    can be translated into a Cypress test, the simplest form I found is

    it('works (simply)', () => {
  const draggable = Cypress.$('#cdk-drop-list-0 > :nth-child(1)')[0]  // Pick up this
  const droppable = Cypress.$('#cdk-drop-list-1 > :nth-child(4)')[0]  // Drop over this

  const coords = droppable.getBoundingClientRect()
  draggable.dispatchEvent(new MouseEvent('mousedown'));
  draggable.dispatchEvent(new MouseEvent('mousemove', {clientX: 10, clientY: 0}));
  draggable.dispatchEvent(new MouseEvent('mousemove', {
    clientX: coords.x+10,   
    clientY: coords.y+10  // A few extra pixels to get the ordering right
  }));
  draggable.dispatchEvent(new MouseEvent('mouseup'));

  cy.get('#cdk-drop-list-1').should('contain', 'Get to work');
  cy.get('#cdk-drop-list-1 > .cdk-drag').eq(3).should('contain', 'Get to work');

});

    Notes

    Async list fetching

    If the list is fetched by an async Angular service (httpClient) during component construction, using this in the test 

    const draggable = Cypress.$('#cdk-drop-list-0 > :nth-child(1)')[0]

    will not work, because the nth-child will not be present immediately, only after the fetch completes.

    Instead, you can use cy.get() to provide retries up to a timeout (default 5 seconds).

    cy.get('#cdk-drop-list-0 > :nth-child(1)').then(el => {
  const draggable = el[0]  // Pick up this
  cy.get('#cdk-drop-list-1 > :nth-child(4)').then(el => {
    const droppable = el[0]  // Drop over this

    const coords = droppable.getBoundingClientRect()
    draggable.dispatchEvent(new MouseEvent('mousemove'));
    draggable.dispatchEvent(new MouseEvent('mousedown'));
    draggable.dispatchEvent(new MouseEvent('mousemove', {clientX: 10, clientY: 0}));
    draggable.dispatchEvent(new MouseEvent('mousemove', {clientX: coords.x+10, clientY: coords.y+10}));
    draggable.dispatchEvent(new MouseEvent('mouseup'));

  })

  cy.get('#cdk-drop-list-1').should('contain', 'Get to work');
  cy.get('#cdk-drop-list-1 > .cdk-drag').eq(3).should('contain', 'Get to work');
})

    or my preference is to use a 'canary' test to ensure loading is complete, something like

    before(() => {
  cy.get('#cdk-drop-list-0 > :nth-child(1)') // Canary - wait 5s for data
})

it('should...', () => {
  const draggable = Cypress.$('#cdk-drop-list-0 > :nth-child(1)')[0]  // Pick up this
  const droppable = Cypress.$('#cdk-drop-list-1 > :nth-child(4)')[0]  // Drop over this
  ...
})

    Typescript support

    Warning - this is a quick hack to get over Typescript compiler problems, and could be improved.

    const coords: ClientRect = droppable.getBoundingClientRect()
draggable.dispatchEvent(new (<any>MouseEvent)('mousemove'));
draggable.dispatchEvent(new (<any>MouseEvent)('mousedown'));
draggable.dispatchEvent(new (<any>MouseEvent)('mousemove', {clientX: 10.0, clientY: 0.0}));
draggable.dispatchEvent(new (<any>MouseEvent)('mousemove', {clientX: coords.left + 10.0, clientY: coords.top + 10.0}));
draggable.dispatchEvent(new (<any>MouseEvent)('mouseup'));