unable to use Leaflet mapbox polygons, squares etc. focus stays on center of map.

[Bender55]

Current behavior:

I am unable to use the drawing features of leaflet mapbox other than to have focus on the center of the map. I can click the draw area icon and activate it but am unable to get the actions to work within leaflet. I've read on the chat boards that others have had this issue but no one has offered a solution

Desired behavior:

I want mimic the user by clicking the draw area icon and then be able draw shapes on the map and generally interact with the map.

Steps to reproduce:

you can reproduce this on a leaflet mapbox (if you need access to one let me know) and mimic the user drawing a square on the map.

 cy.get(flightArea.draw).click();
 cy.get(flightArea.drawSquare).click();
 cy.get(flightArea.map)
            .trigger('mousedown', {  which: 1, pageX: 800, pageY: 400})
            .trigger('mousemove', { which: 1, pageX: 100, pageY: 800})
            .trigger('mouseup')

The events fire off correctly and give a success message but nothing is actually done other than put a focal point on the center of the map.

Versions

Cypress 3.0.1
-electron 59 . repro
-chrome 67 (unable to get leaflet mapbox to work at all)

[brian-mann]

Because you're triggering the events directly yourself and never once fire the click event.

Is there a reason you're not using cy.click() for this? It would provide you all of the events and default actions.

When you use cy.trigger(...) you are building up the event logic yourself - it is then your responsibility to fire the events that the application expects and reacts to. Whatever it is bound to is what you need to fire.

[Bender55]

I first tried the cy.click() but was unable to get the draggable box to work

cy.get(flightArea.map)
           .click({x: 800, y: 300, force: true})
           .click({x: 600, y: 600, force: true})

and many other versions of the .click to get it to work.

I went with the .trigger way because of the documentation at https://docs.cypress.io/api/commands/trigger.html#Trigger-a-mouseover-on-the-button
and at least with the .trigger I was able to move forward but unable to actually draw the box.

If this isnt a bug how should I be accessing the drag and drop feature of cypress to create a box?

[jennifer-shehane]

@Bender55 Have you looked over some of the drag and drop examples here? https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__drag-drop/cypress/integration/drag_n_drop_spec.js

I admit, it can be quite tricky to find the events that your particular plugin is expecting sometimes.

here's another thread for a jquery drag and drop implementation: #1542 (comment)

and some advice on listening to what events are being fired here: #669 (comment)

[Bender55]

looking now thanks!

[Bender55]

Jennifer on the documention there is an extra which: 1 that makes it not work.

currently the docs show

       .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
       .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
        .trigger('mouseup')

at least for the leaflet mapbox I am using it finally works when I remove the "which: 1" from mouse down

       .trigger('mousedown',{  x: 800, y: 800, force: true })
      .trigger('mousemove', { which: 1, x: 900, y: 900, force: true })
      .trigger('mouseup', {force: true })

please feel free to close this issue.