tests: properly check element transforms

e2e/cypress/component/1-store/viewpane/setMaxZoom.cy.ts

@@ -20,7 +20,7 @@ describe('Store Action: `setMaxZoom`', () => {
     expect(store.maxZoom.value).to.eq(2)
   })
 
-  it('sets max-zoom in viewpane', () => {
+  it('sets max-zoom in viewpane', async () => {
     cy.viewPort().trigger('wheel', {
       deltaY: -10000,
       wheelDelta: 0,
@@ -29,9 +29,12 @@ describe('Store Action: `setMaxZoom`', () => {
       bubbles: true,
     })
 
-    cy.transformationPane().then(($el) => {
+    await cy.tryAssertion(() => {
-      const transform = $el.css('transform')
+      cy.transformationPane().should(
-      expect(transform).to.contain('matrix(2,')
+        '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/1-store/viewpane/setMinZoom.cy.ts

@@ -29,9 +29,10 @@ describe('Store Action: `setMinZoom`', () => {
       bubbles: true,
     })
 
-    cy.transformationPane().then(($el) => {
+    cy.transformationPane().should(
-      const transform = $el.css('transform')
+      'have.css',
-      expect(transform).to.contain('matrix(0.5')
+      '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/drag.cy.ts

@@ -1,8 +1,11 @@
+import { useVueFlow } from '@vue-flow/core'
 import { getElements } from '../../utils'
 
 const { nodes } = getElements(1, 1)
 
 describe('Check if nodes are draggable', () => {
+  const store = useVueFlow({ id: 'test' })
+
   beforeEach(() => {
     cy.vueFlow({
       modelValue: [nodes[0]],
@@ -10,7 +13,7 @@ describe('Check if nodes are draggable', () => {
   })
 
   it('drags nodes', () => {
-    cy.window().then((win) => {
+    cy.window().then(async (win) => {
       cy.get(`[data-id="${nodes[0].id}"]`)
         .trigger('mousedown', {
           which: 1,
@@ -27,7 +30,15 @@ describe('Check if nodes are draggable', () => {
           view: win,
         })
 
-      cy.get(`[data-id="${nodes[0].id}"]`).should('not.have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)')
+      await cy.tryAssertion(() => {
+        cy.get(`[data-id="${nodes[0].id}"]`)
+          .should('be.visible')
+          .should(
+            'have.css',
+            'transform',
+            `matrix(1, 0, 0, 1, ${store.nodes.value[0].computedPosition.x}, ${store.nodes.value[0].computedPosition.x})`,
+          )
+      })
     })
   })
 })