Can do it!!
browser.executeScript
The workaround was detected by my co-worker inside the same dragula.js test
https://github.com/bevacqua/dragula/blob/master/test/drag.js
Exactly
events.raise(o.containerClick ? div : item, 'mousedown', eventOptions);
Raise function was declarated on
https://github.com/bevacqua/dragula/blob/master/test/lib/events.js
We are going to send a script to execute which will dispatch custom events with the correct reference elements.
You could use something like this (typescript version):
import { browser } from 'protractor';
/*
* @param target css selector of element to drag & drop
* @param destination css selector of destination element
*/
async function simulateDragAndDrop(target: string,destination: string): Promise<void> {
await browser.executeScript(() => {
let getEventOptions = (el, relatedElement) => {
//coordinates from destination element
const coords = el.getBoundingClientRect();
const x = coords.x || coords.left;
const y = coords.y || coords.top;
return {
x: x,
y: y,
clientX: x,
clientY: y,
screenX: x,
screenY: y,
//target reference
relatedTarget: relatedElement
};
};
let raise = (el, type, options?) => {
const o = options || { which: 1 };
const e = document.createEvent('Event');
e.initEvent(type, true, true);
Object.keys(o).forEach(apply);
el.dispatchEvent(e);
function apply(key) {
e[key] = o[key];
}
};
let targetEl = document.querySelector(target);
let destinationEl = document.querySelector(destination);
let options = getEventOptions(destinationEl, targetEl);
//start drag
raise(targetEl, 'mousedown');
raise(targetEl, 'mousemove');
//set event on location
raise(destinationEl, 'mousemove', options);
//drop
raise(destinationEl, 'mouseup', options);
}, target, destination);
}
Or in javascript version to test directly on browser:
https://valor-software.com/ng2-dragula/
var target = 'body > example-app > div > example-a div.container:first-child > div:first-child'; //css selector of element to drag & drop
var destination = 'body > example-app > div > example-a div.container:last-child'; //css selector of destination element
var getEventOptions = function (el, relatedElement) {
//coordinates from element
var coords = el.getBoundingClientRect();
var x = coords.x || coords.left;
var y = coords.y || coords.top;
return {
x: x,
y: y,
clientX: x,
clientY: y,
screenX: x,
screenY: y,
relatedTarget: relatedElement
};
};
var raise = function (el, type, options) {
var o = options || { which: 1 };
var e = document.createEvent('Event');
e.initEvent(type, true, true);
Object.keys(o).forEach(apply);
el.dispatchEvent(e);
function apply(key) {
e[key] = o[key];
}
};
var targetEl = document.querySelector(target);
var destinationEl = document.querySelector(destination);
var options = getEventOptions(destinationEl, targetEl);
//start drag
raise(targetEl, 'mousedown');
raise(targetEl, 'mousemove');
//set event on location
raise(destinationEl, 'mousemove', options);
//drop
raise(destinationEl, 'mouseup', options);
This solution work for me, maybe should be adapted to ng2-dragula tests.
