Problem on cypress test with drag and drop on fullcalendar

user_10805872 0
Viewed 499

I want to test to drag and drop on a full calendar event (change the date of a task) with Cypress, the test passes but the event was not dropped :

enter image description here

enter image description here

This is the test implementation :

Then('I move a task to another date', () => {
    cy.get('.fc-event')
        .trigger('mousedown', { which: 1, pageX: 188, pageY: 196 })
        .trigger('mousemove', { which: 1, pageX: 188, pageY: 261 })
        .trigger('mouseup')
})

I test it with this plugin https://www.npmjs.com/package/@4tw/cypress-drag-drop but same results , the event did not move :

Then('I move a task to another date', () => {
     cy.get('.fc-event').drag(':nth-child(3) > .fc-bg > table > tbody > tr > .fc-thu', { force: true })
})

EDIT

I suceeded to do it with this implementation :

Then('I move a task to another date', () => {
    cy.get('.fc-day-grid-event')
        .trigger('mousedown', { which: 1, button: 0 })
        .trigger('mousemove', {
            pageX: 775,
            pageY: 1250,
        })
        .trigger('mouseup', { force: true })
})

The error was to not use button: 0 and also to not give good coordinates values.

cypress fullcalendar testing
1 Answers

I had a similar issue with my app and thanks a lot because your solution make my day. I had just a last error with the mouseup because cypress wasn't able to target my element but I found a workaround. Here is my command:

Cypress.Commands.add('moveTo', {prevSubject: true}, (subject, options) => {
    const offsetTop = subject[0].getBoundingClientRect().y
    const offsetLeft = subject[0].getBoundingClientRect().x
    cy.get(subject)
        .trigger('mousedown', {which: 1, button: 0})
        .trigger('mousemove', {
            pageX: offsetLeft + options.x,
            pageY: offsetTop + options.y
        })
    cy.get('body').trigger('mouseup', {
    pageX: offsetLeft + options.x,
    pageY: offsetTop + options.y
  })
})
user_45156300
Related