tests: update connect tests to check if events were emitted

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

tests/cypress/component/2-vue-flow/connect.cy.ts

@@ -1,6 +1,6 @@
 import { useVueFlow } from '@vue-flow/core'
 
-describe('Check if nodes are connectable', () => {
+describe('Check if nodes can be connected', () => {
   const store = useVueFlow({ id: 'test' })
 
   beforeEach(() => {
@@ -22,7 +22,28 @@ describe('Check if nodes are connectable', () => {
     })
   })
 
-  it('creates connection by dragging', () => {
+  describe('by dragging', () => {
+    let startCount = 0
+    let connectCount = 0
+    let endCount = 0
+
+    store.onConnectStart(() => {
+      startCount++
+    })
+
+    store.onConnect(() => {
+      connectCount++
+    })
+
+    store.onConnectEnd(() => {
+      endCount++
+    })
+
+    beforeEach(() => {
+      startCount = 0
+      connectCount = 0
+      endCount = 0
+
       cy.window().then((win) => {
         const sourceHandle = cy.get(`[data-nodeid="1"].source`)
         const targetHandle = cy.get(`[data-nodeid="2"].target`)
@@ -48,15 +69,45 @@ describe('Check if nodes are connectable', () => {
               force: true,
               view: win,
             })
+        })
+      })
+    })
 
+    it('creates connection by dragging', () => {
       cy.get('.vue-flow__edge').should('have.length', 1)
+
+      expect(store.edges.value).to.have.length(1)
+
+      const edge = store.edges.value[0]
+      expect(edge.source).to.eq('1')
+      expect(edge.target).to.eq('2')
+
+      const sourceHandleId = `1__handle-bottom`
+      const targetHandleId = `2__handle-top`
+
+      expect(edge.sourceHandle).to.eq(sourceHandleId)
+      expect(edge.targetHandle).to.eq(targetHandleId)
+    })
+
+    describe('Emits events?', () => {
+      it('emits onConnectStart (once)', () => {
+        expect(startCount).to.eq(1)
+      })
+
+      it('emits onConnect (once)', () => {
+        expect(connectCount).to.eq(1)
+      })
+
+      it('emits onConnectEnd (once)', () => {
+        expect(endCount).to.eq(1)
       })
     })
   })
 
-  it('creates connection by clicking', () => {
+  describe('by clicking', () => {
     store.connectOnClick.value = true
 
+    beforeEach(() => {
       const sourceHandle = cy.get(`[data-nodeid="1"].source`)
       const targetHandle = cy.get(`[data-nodeid="2"].target`)
 
@@ -65,4 +116,21 @@ describe('Check if nodes are connectable', () => {
 
       cy.get('.vue-flow__edge').should('have.length', 1)
     })
+
+    it('creates connection by clicking', () => {
+      cy.get('.vue-flow__edge').should('have.length', 1)
+
+      expect(store.edges.value).to.have.length(1)
+
+      const edge = store.edges.value[0]
+      expect(edge.source).to.eq('1')
+      expect(edge.target).to.eq('2')
+
+      const sourceHandleId = `1__handle-bottom`
+      const targetHandleId = `2__handle-top`
+
+      expect(edge.sourceHandle).to.eq(sourceHandleId)
+      expect(edge.targetHandle).to.eq(targetHandleId)
+    })
+  })
 })