feat(tests): add set min/max zoom action tests

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

@@ -0,0 +1,34 @@
+import { useVueFlow } from '@braks/vue-flow'
+import { getElements } from '../../../../utils'
+
+const { nodes } = getElements()
+
+describe('Store Action: `setMinZoom`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+    })
+  })
+
+  beforeEach(() => {
+    store.setMaxZoom(2)
+  })
+
+  it('sets max-zoom in store', () => {
+    expect(store.maxZoom.value).to.eq(2)
+  })
+
+  it('sets max-zoom in viewpane', () => {
+    cy.viewPort().trigger('wheel', {
+      deltaY: -1000,
+      wheelDelta: 0,
+      wheelDeltaX: 0,
+      wheelDeltaY: 0,
+      bubbles: true,
+    })
+
+    cy.transformationPane().should('have.css', 'transform', 'matrix(2, 0, 0, 2, -800, -236)')
+  })
+})

e2e/cypress/component/1-store/actions/viewpane/setMinZoom.cy.ts

@@ -0,0 +1,34 @@
+import { useVueFlow } from '@braks/vue-flow'
+import { getElements } from '../../../../utils'
+
+const { nodes } = getElements()
+
+describe('Store Action: `setMinZoom`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+    })
+  })
+
+  beforeEach(() => {
+    store.setMinZoom(0.5)
+  })
+
+  it('sets min-zoom in store', () => {
+    expect(store.minZoom.value).to.eq(0.5)
+  })
+
+  it('sets min-zoom in viewpane', () => {
+    cy.viewPort().trigger('wheel', {
+      deltaY: 100,
+      wheelDelta: 1000,
+      wheelDeltaX: 1000,
+      wheelDeltaY: 1000,
+      bubbles: true,
+    })
+
+    cy.transformationPane().should('have.css', 'transform', 'matrix(0.5, 0, 0, 0.5, -12.5, 128.5)')
+  })
+})

e2e/cypress/support/component.ts

@@ -45,6 +45,10 @@ const mountVueFlow = (props?: FlowProps, attrs?: Record<string, any>) => {
   })
 }
 
+const useViewPort = () => cy.get('.vue-flow__viewport')
+
+const useTransformationPane = () => cy.get('.vue-flow__transformationpane')
+
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
 // Alternatively, can be defined in cypress/support/component.d.ts
@@ -54,6 +58,8 @@ declare global {
     interface Chainable {
       mount: typeof mount
       vueFlow: typeof mountVueFlow
+      viewPort: typeof useViewPort
+      transformationPane: typeof useTransformationPane
     }
   }
 }
@@ -62,5 +68,9 @@ Cypress.Commands.add('mount', mount)
 
 Cypress.Commands.add('vueFlow', mountVueFlow)
 
+Cypress.Commands.add('viewPort', useViewPort)
+
+Cypress.Commands.add('transformationPane', useTransformationPane)
+
 // Example use:
 // cy.mount(MyComponent)