diff --git a/e2e/cypress/component/1-store/actions/edges/connection.cy.ts b/e2e/cypress/component/1-store/actions/edges/connection.cy.ts new file mode 100644 index 00000000..b52823af --- /dev/null +++ b/e2e/cypress/component/1-store/actions/edges/connection.cy.ts @@ -0,0 +1,51 @@ +import type { StartHandle } from '@braks/vue-flow' +import { useVueFlow } from '@braks/vue-flow' +import { getElements } from '../../../../utils' + +const { nodes, edges } = getElements(2, 2) + +describe('Store Action: `startConnection`, `updateConnection`, `endConnection`', () => { + const store = useVueFlow({ id: 'test' }) + const startHandle: StartHandle = { nodeId: nodes[0].id, type: 'source', handleId: null } + + beforeEach(() => { + cy.vueFlow({ + nodes, + edges, + }) + }) + + it('starts connection', () => { + store.startConnection(startHandle, { x: 0, y: 0 }) + + const storedStartHandle = store.connectionStartHandle.value + expect(storedStartHandle?.handleId).to.equal(startHandle.handleId) + expect(storedStartHandle?.nodeId).to.equal(startHandle.nodeId) + expect(storedStartHandle?.type).to.equal(startHandle.type) + expect(store.connectionPosition.value).to.deep.equal({ x: 0, y: 0 }) + }) + + it('updates connection', () => { + store.startConnection(startHandle, { x: 0, y: 0 }) + store.updateConnection({ x: 100, y: 100 }) + + expect(store.connectionPosition.value).to.deep.equal({ x: 100, y: 100 }) + }) + + it('shows connection line on viewpane', () => { + store.startConnection(startHandle, { x: 0, y: 0 }) + store.updateConnection({ x: 100, y: 100 }) + + cy.viewPort().find('.vue-flow__connection').should('exist') + }) + + it('ends/cancels connection', () => { + store.startConnection(startHandle, { x: 0, y: 0 }) + store.updateConnection({ x: 100, y: 100 }) + store.endConnection() + + expect(store.connectionStartHandle.value).to.equal(null) + expect(store.connectionPosition.value).to.deep.equal({ x: NaN, y: NaN }) + cy.viewPort().find('.vue-flow__connection').should('not.exist') + }) +})