tests: add tryAssertion command to replace cy.wait

e2e/cypress/component/2-vue-flow/updateEdge.cy.ts

@@ -39,7 +39,7 @@ describe('Check if edges are updatable', () => {
       const edgeAnchor = cy.get('.vue-flow__edgeupdater[data-type="target"]')
       const targetTargetHandle = cy.get(`[data-nodeid="3"].target`)
 
-      targetTargetHandle.then((handle) => {
+      targetTargetHandle.then(async (handle) => {
         const target = handle[0]
         const { x, y } = target.getBoundingClientRect()
 
@@ -61,7 +61,7 @@ describe('Check if edges are updatable', () => {
             view: win,
           })
 
-        cy.wait(100).then(() => {
+        await cy.tryAssertion(() => {
           const storedEdges = store.edges.value
           expect(storedEdges).to.have.length(1)
           expect(storedEdges[0].target).to.equal('3')

e2e/cypress/component/2-vue-flow/viewpane.cy.ts

@@ -0,0 +1,39 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../utils'
+
+const { nodes } = getElements()
+
+describe('Viewpane drag / zoom', () => {
+  const store = useVueFlow({ id: 'test' })
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+    })
+  })
+
+  it('drags pane', () => {
+    cy.window().then(async (win) => {
+      const initialViewport = store.viewport.value
+      cy.get('.vue-flow__pane')
+        .should('be.visible')
+        .trigger('mousedown', 'center', { force: true, view: win })
+        .trigger('mousemove', {
+          force: true,
+          clientX: -(store.dimensions.value.width / 10),
+          clientY: store.dimensions.value.height / 2,
+          view: win,
+        })
+        .trigger('mouseup', { force: true, view: win })
+
+      await cy.tryAssertion(() => {
+        cy.get('.vue-flow__transformationpane')
+          .should('be.visible')
+          .should(
+            'have.css',
+            'transform',
+            `matrix(${store.viewport.value.zoom}, 0, 0, ${store.viewport.value.zoom}, ${store.viewport.value.x}, ${store.viewport.value.y})`,
+          )
+      })
+    })
+  })
+})

e2e/cypress/component/2-vue-flow/viewpane.ts

@@ -1,20 +0,0 @@
-import { getElements } from '../../utils'
-
-const { nodes } = getElements()
-
-describe('Viewpane drag / zoom', () => {
-  beforeEach(() => {
-    cy.vueFlow({
-      nodes,
-    })
-  })
-
-  it('drag pane', () => {
-    cy.window().then((win) => {
-      cy.get('.vue-flow__pane')
-        .trigger('mousedown', 'center', { force: true, view: win })
-        .trigger('mousemove', { force: true, clientX: 500, clientY: 250, view: win })
-        .trigger('mouseup', { force: true, view: win })
-    })
-  })
-})