Cypress flow

[zdendai]

Hi I would like to test moving with flow with some Cypress test.
cy.get(".vue-flow__pane.vue-flow__container").trigger("mousedown", "center").trigger('mousemove', { clientX: 1500, clientY: 500 }).trigger('mouseup')

I am trying something like this on different divs, but so far, no one works.

Have you some advice, or tips?

Many thanks for any response.

[bcakmakoglu]

The way I do it is like this:

cy.mount(VueFlow, {
    props: {
      id: 'test',
      fitViewOnInit: true,
      ...props,
    },
    attrs: {
      key: 'flowy',
      style: {
        height: '100vh',
        width: '100vw',
      },
      ...attrs,
    },
})

describe('Viewpane test', () => {
	// mounts vue flow component fresh on each test
	beforeEach(() => {
		// cy.vueFlow is a custom command
    	cy.vueFlow({
     		nodes,
    	})
  })

  it('drag pane', () => {
	// wait for window obj
    cy.window().then((win) => {
      cy.get('.vue-flow__pane')
		// use force and pass win as view to event
        .trigger('mousedown', 'center', { force: true, view: win })
        .trigger('mousemove', { force: true, clientX: 500, clientY: 250, view: win })
        .trigger('mouseup', { force: true, view: win })
    })
  })
})

Main thing is passing view: win otherwise, in my case, I keep getting an error that document is undefined.

[zdendai]

That seems it works. Many thanks to you!