108 lines
4.1 KiB
JavaScript
108 lines
4.1 KiB
JavaScript
/**
|
|
* This program is free software; you can redistribute it and/or
|
|
* modify it under the terms of the GNU General Public License
|
|
* as published by the Free Software Foundation; under version 2
|
|
* of the License (non-upgradable).
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program; if not, write to the Free Software
|
|
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
*
|
|
* Copyright (c) 2021 (original work) Open Assessment Technologies SA ;
|
|
*/
|
|
|
|
/**
|
|
* Drag one element and drop it onto another, with mouse
|
|
* Implementation is specific to 'jquery ui drag drop' library.
|
|
* @param {String} dragSelector - element to drag selector
|
|
* @param {String} dropSelector - element to drop to selector
|
|
* @param {Array} targetsSelector - array of selectors for tagrets inside drop elements
|
|
*/
|
|
Cypress.Commands.add('dragAndDrop', (dragSelector, dropSelector, targetsSelector) => {
|
|
cy.get(dragSelector)
|
|
.should('exist')
|
|
.get(dropSelector)
|
|
.should('exist');
|
|
|
|
function getElementCenterCoords($el) {
|
|
const rect = $el[0].getBoundingClientRect();
|
|
const x = Math.round(rect.left + rect.width / 2);
|
|
const y = Math.round(rect.top + rect.height / 2);
|
|
return { x, y };
|
|
}
|
|
function getElementTopCenterCoords($el) {
|
|
const rect = $el[0].getBoundingClientRect();
|
|
const x = Math.round(rect.left + rect.width / 2);
|
|
const y = rect.top + Math.min(rect.height / 2, 20);
|
|
return { x, y };
|
|
}
|
|
cy.get(dragSelector).then($draggable => {
|
|
// Pick up this
|
|
cy.get(dropSelector).then($droppable => {
|
|
const { x: startX, y: startY } = getElementCenterCoords($draggable);
|
|
const { x: x1, y: y1 } = getElementTopCenterCoords($droppable);
|
|
|
|
cy.wrap($draggable)
|
|
.trigger('mouseover', { force: true })
|
|
.trigger('mousedown', {
|
|
which: 1,
|
|
pageX: startX,
|
|
pageY: startY
|
|
})
|
|
.trigger('mousemove', {
|
|
which: 1,
|
|
pageX: x1,
|
|
pageY: y1,
|
|
force: true
|
|
});
|
|
|
|
cy.wrap($droppable)
|
|
.trigger('mouseover', { force: true })
|
|
.trigger('mousemove', {
|
|
which: 1,
|
|
pageX: x1,
|
|
pageY: y1,
|
|
force: true
|
|
});
|
|
|
|
if (targetsSelector) {
|
|
targetsSelector.forEach(targetSelector => {
|
|
cy.get(targetSelector).then($target => {
|
|
const { x: x2,y: y2 } = getElementCenterCoords($target.first());
|
|
let target = $target.first()[0];
|
|
cy.wrap($draggable).trigger('mousemove', {
|
|
which: 1,
|
|
pageX: x2,
|
|
pageY: y2,
|
|
force: true,
|
|
target
|
|
});
|
|
cy.wrap($droppable).trigger('mousemove', {
|
|
which: 1,
|
|
pageX: x2,
|
|
pageY: y2,
|
|
force: true,
|
|
target
|
|
});
|
|
cy.wrap($target.first()).trigger('mousemove', {
|
|
which: 1,
|
|
pageX: x2,
|
|
pageY: y2,
|
|
force: true,
|
|
target
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
cy.wrap($draggable).trigger('mouseup', { force: true });
|
|
cy.document().trigger('mouseup', { force: true });
|
|
}); // Drop over this
|
|
});
|
|
});
|