diff --git a/tests/cypress.config.ts b/tests/cypress.config.ts index 400a9187..bc16262a 100644 --- a/tests/cypress.config.ts +++ b/tests/cypress.config.ts @@ -5,6 +5,7 @@ export default defineConfig({ screenshotOnRunFailure: false, retries: 2, defaultCommandTimeout: 1000, + component: { devServer: { framework: 'vue', diff --git a/tests/cypress/component/1-store/viewport-helper/fitView.cy.ts b/tests/cypress/component/1-store/viewport-helper/fitView.cy.ts new file mode 100644 index 00000000..118d2978 --- /dev/null +++ b/tests/cypress/component/1-store/viewport-helper/fitView.cy.ts @@ -0,0 +1,47 @@ +import { useVueFlow } from '@vue-flow/core' +import { getElements } from '../../../utils' + +const { nodes, edges } = getElements(2, 2) + +describe('Viewport Helper: `fitView`', () => { + const store = useVueFlow({ id: 'test' }) + + it('fits view', () => { + cy.vueFlow({ + nodes, + edges, + fitViewOnInit: false, + }) + + cy.tryAssertion(() => { + cy.transformationPane().should('have.css', 'transform', `matrix(1, 0, 0, 1, 0, 0)`) + }).then(() => { + cy.wrap(store.fitView()).then(() => { + cy.tryAssertion(() => { + cy.transformationPane().should( + 'have.css', + 'transform', + `matrix(${store.viewport.value.zoom}, 0, 0, ${store.viewport.value.zoom}, ${store.viewport.value.x}, ${store.viewport.value.y})`, + ) + }) + }) + }) + }) + + it('does not fit view when no node exist', () => { + cy.vueFlow({ + nodes: [], + edges: [], + }) + + cy.tryAssertion(() => { + cy.transformationPane().should('have.css', 'transform', `matrix(1, 0, 0, 1, 0, 0)`) + }).then(() => { + cy.wrap(store.fitView()).then(() => { + cy.tryAssertion(() => { + cy.transformationPane().should('have.css', 'transform', `matrix(1, 0, 0, 1, 0, 0)`) + }) + }) + }) + }) +})