Я пытаюсь проверить перетаскивание с помощью Cypress и Angular Material Drag and Drop. Таким образом, цель состоит в том, чтобы переместить "Приступить к работе" из Todo в Done. Я создал следующий тест, который позволит вам легко воспроизвести:
Вы можете играть с Stackblitz здесь.
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');
});
});
Результат выполнения вышеуказанного теста выглядит следующим образом:
Вот репо для разработки решения.
Спасибо за помощь.
События сгенерированы с помощью отладчика Chrome:
Вещь
- pointerover
- pointerenter
- Mouseover
- MouseDown
- pointermove
- MouseMove
- pointerout
- pointerleave
- MouseOut
- MouseLeave
Зона сброса
- pointerover
- pointerenter
- Mouseover
- pointermove
- MouseMove
- pointerleave
- MouseOut
- MouseLeave
Решение
После потрясающего ответа @Richard Matsen я добавил его ответ в виде пользовательской команды. Решение выглядит так
поддержка/сопротивление-support.ts
export function drag(dragSelector: string, dropSelector: string) {
// Based on this answer: /info/17099915/how-to-implement-drag-and-drop-in-cypress-test/26673934#26673934
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);
}
поддержка /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);
в спецификации файла
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');
});
Небольшой отрывок, потому что я так счастлив, что он наконец работает 😲
CI
Теперь это также работает в CI 🔥 (и электрон локально). Протестировано с CircleCI 2.0.