Dragging point does not work and throws no error - testing

Question

I´m new to testing and cypress. I´m doing automated testing of a tool which crops an image and I have an issue that cant solve.
Here is screenshot of the tool
So my code to drag one point of this tool is this, but don't work.
cy.get('.point-w').trigger('mousedown',)
.trigger('mousemove', { clientX: 5, clientY:0})
.trigger('mouseup', {force : true})
Don't throw any error but the point doesn't move. And if I check the snapshot of the trigger('mousedown') seems like it clicks there.
Look the point.
Thanks all! :D

Answer 1

Drag and drop has various implementations for different frameworks.
In our case move events were working only with triggering events on element itself, and continue move from body to destination coordinates:
const SLOPPY_CLICK_THRESHOLD = 10;
cy.get('.point-w').then(subject => {
const coordsDrag = subject[0].getBoundingClientRect();
cy.wrap(subject)
.trigger('mousedown', {
clientX: coordsDrag.x,
clientY: coordsDrag.y,
force: true
})
.trigger('mousemove', {
clientX: coordsDrag.x + SLOPPY_CLICK_THRESHOLD,
clientY: coordsDrag.y,
force: true
});
cy.get('body')
.trigger('mousemove', {
clientX: 5,
clientY: 0,
force: true
})
.trigger('mouseup');
});