diff --git a/e2e/cypress/component/2-flow/updateEdge.cy.ts b/e2e/cypress/component/2-flow/updateEdge.cy.ts new file mode 100644 index 00000000..a41e17d1 --- /dev/null +++ b/e2e/cypress/component/2-flow/updateEdge.cy.ts @@ -0,0 +1,73 @@ +import { useVueFlow } from '@braks/vue-flow' + +describe('Check if edges are updatable', () => { + const store = useVueFlow({ id: 'test' }) + store.onEdgeUpdate((params) => store.updateEdge(params.edge, params.connection)) + + beforeEach(() => { + cy.vueFlow({ + fitViewOnInit: false, + edgesUpdatable: true, + modelValue: [ + { + id: '1', + label: 'Node 1', + position: { x: 0, y: 0 }, + }, + { + id: '2', + label: 'Node 2', + position: { x: 300, y: 300 }, + }, + { + id: '3', + label: 'Node 3', + position: { x: 300, y: 0 }, + }, + { + id: 'e1-2', + source: '1', + target: '2', + }, + ], + autoConnect: true, + }) + }) + + it('updates edge', () => { + cy.window().then((win) => { + const edgeAnchor = cy.get('.vue-flow__edgeupdater[data-type="target"]') + const targetTargetHandle = cy.get(`[data-nodeid="3"].target`) + + targetTargetHandle.then((handle) => { + const target = handle[0] + const { x, y } = target.getBoundingClientRect() + + edgeAnchor + .trigger('mousedown', { + which: 1, + force: true, + view: win, + }) + .trigger('mousemove', { + clientX: x + 5, + clientY: y + 5, + force: true, + }) + .trigger('mouseup', { + clientX: x + 5, + clientY: y + 5, + force: true, + view: win, + }) + + cy.wait(100).then(() => { + const storedEdges = store.edges.value + expect(storedEdges).to.have.length(1) + expect(storedEdges[0].target).to.equal('3') + expect(storedEdges[0].source).to.equal('1') + }) + }) + }) + }) +})