Cypress cannot handle d3 drag events

[csweaver]

Current behavior:

When I write a test in cypress that performs a drag event on a canvas that has drag event listeners attached from d3, test fail. In the cypress UI, the canvas looks blank (it looks as expected if I am not testing events on the canvas ), the click events seem to register but the actions do not occur.

Desired behavior:

When I write a test with drag events on a D3 canvas, I expect the app will act the same as if I had manually performed a drag event.

Steps to reproduce: (app code and test code)

I created a test case: https://github.com/csweaver/cypress-test-tiny (master branch)

npm install
npm run start
npm run cypress:open

Versions

Cypress: 3.1.5
OS: OSX 10.13.6
Chrome: 71

Seems related to this stack overflow question: https://stackoverflow.com/questions/54027884/testing-d3-js-drag-events-with-cypress-js

Not part of the bug report, but I really loved writing tests in cypress and was super disappointed when I realized I'd have to abandon it because it couldn't support d3 events (key to our app). Great work on the developer interface!

[jennifer-shehane]

Hey @csweaver, where you've passed the view option to the event, this is expecting an argument of the actual window under test. You can access the window under test using cy.window(), so this works for me:

describe('d3 drag events are not captured', () => {
  it('bug report', () => {
    cy.visit("/");
    cy.window().then((win) => {
      cy.get("#d3-canvas")
        .trigger("mousedown", 42, 42, {
          which: 1,
          view: win
        })
        .trigger("dragstart")
        .trigger("drag")
        .trigger("mouseup", 200, 200, {
          which: 1,
          view: win
        })
      cy.get("#tracker")
        .contains("1")
    })
  })
})

[csweaver]

Thanks for the help!

[fritz-c]

@jennifer-shehane Thank you for the tip on how to specify view. It helps clear up the d3 errors.

Sorry to post on an old issue, but as this is the first one to come up in Google search (for "d3 cypress"), I would like to point out that the provided solution does not actually change the position of the dragged element in my case. It required adding clientX/clientY to actually complete the movement. My example:

cy.window().then(win => {
  cy.get(rightHandleSelector)
    .trigger('mousedown', {
      view: win,
    })
    .trigger('mousemove', {
      clientX: 300,
      clientY: 500,
      force: true,
    })
    .trigger('mouseup', {
      force: true,
      view: win,
    });
});

The force attributes were also required because, either through my use of d3's brush or the version of d3-drag I am using, pointer-events: none gets applied to the dragged object after the initial mousedown.