Is it possible to use browser->drag() from dusk with Vuedraggable?

Question

We are using VueDraggable (and Vue) in our front-end and we are testing our front-end with Dusk.

I am currently trying to use $browser->drag('selector', 'selector') from dusk to drag objects from one list to the other, but I don't see anything happening during the test (although it might be the action is not visible) nor is the right result shown, the object does not end up in the indicated list.

I was wondering if anybody made a working example already of using $browser->drag() combined with Vue.draggable? I am asking since I don't know if I am trying the impossible or not.

Answer 1

There is an open issue for this on Dusk's Github. I had to open a new issue that can be found here since the original was closed for comment. The link contains a more thorough explanation, but the short answer and solution are highlighted here:

Problem: Laravel's Dusk does not trigger Vue.draggable events. To simulate a drag-and-drop Dusk does a "mouse down", "move mouse to location", and "mouse up" sequence. In theory this is correct but does not trigger Vue' s events.

Solution: Dusk's method does trigger mouse down and mouse up events, so we can simply use those events to trigger the ones desired.

$("a[draggable='true']").on("mousedown", function(event)  {
    $(this).trigger("dragstart");
});

$("div[droppable='true']").on("mouseup", function(event) {
    $(this).trigger("drop");
});

This JSFiddle is an example of how it would work (though you need to implement it on a Laravel project to truly test, of course!).