0👍
Built-in dragAndDrop
function won’t work because of very custom implementation of drag n drop in vuedraggable.
The only option would be to either fully or partially replace it with js.
Here you go
it('should demonstrate the dragAndDrop command', () => {
browser.url('https://sortablejs.github.io/Vue.Draggable/#/two-lists')
const listFrom = $('#two-lists .col-3:nth-child(1) .list-group')
const listTo = $('#two-lists .col-3:nth-child(2) .list-group')
const draggable = listFrom.$('.list-group-item')
const target = listTo.$('.list-group-item')
target.waitForClickable()
// before 4 in left and 3 in right list
expect(listFrom).toHaveChildren(4)
expect(listTo).toHaveChildren(3)
// start dragging
browser.performActions([
{
type: 'pointer',
id: 'finger1',
parameters: { pointerType: 'mouse' },
actions: [
{ type: 'pointerMove', origin: draggable, x: 0, y: 0 },
{ type: 'pointerDown', button: 0 },
{ type: 'pointerMove', origin: 'pointer', x: 5, y: 5, duration: 5 },
],
},
])
// emulate drop with js
browser.execute(
function (elemDrag, elemDrop) {
const pos = elemDrop.getBoundingClientRect()
const center2X = Math.floor((pos.left + pos.right) / 2)
const center2Y = Math.floor((pos.top + pos.bottom) / 2)
function fireMouseEvent(type, relatedTarget, clientX, clientY) {
const evt = new MouseEvent(type, { clientX, clientY, relatedTarget, bubbles: true })
relatedTarget.dispatchEvent(evt)
}
fireMouseEvent('dragover', elemDrop, center2X, center2Y)
fireMouseEvent('dragend', elemDrag, center2X, center2Y)
fireMouseEvent('mouseup', elemDrag, center2X, center2Y)
},
draggable,
target
)
// after 3 in left and 4 in right list
expect(listFrom).toHaveChildren(3)
expect(listTo).toHaveChildren(4)
browser.pause(2000) // demo
})
See also https://ghostinspector.com/blog/simulate-drag-and-drop-javascript-casperjs/
- [Vuejs]-Vue.js: unwanted effect every time the view is rendered
- [Vuejs]-Vue 2 TSX -> React TSX .. how to make them play nice
Source:stackexchange.com