diff --git a/e2e/cypress/component/1-store/actions/viewpane/setMaxZoom.cy.ts b/e2e/cypress/component/1-store/actions/viewpane/setMaxZoom.cy.ts new file mode 100644 index 00000000..a9da2de1 --- /dev/null +++ b/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)') + }) +}) diff --git a/e2e/cypress/component/1-store/actions/viewpane/setMinZoom.cy.ts b/e2e/cypress/component/1-store/actions/viewpane/setMinZoom.cy.ts new file mode 100644 index 00000000..d2803a84 --- /dev/null +++ b/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)') + }) +}) diff --git a/e2e/cypress/support/component.ts b/e2e/cypress/support/component.ts index 910eefaa..d7f2edd8 100644 --- a/e2e/cypress/support/component.ts +++ b/e2e/cypress/support/component.ts @@ -45,6 +45,10 @@ const mountVueFlow = (props?: FlowProps, attrs?: Record) => { }) } +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)