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,47 +22,115 @@ describe('Check if nodes are connectable', () => {
     })
   })
 
-  it('creates connection by dragging', () => {
+  describe('by dragging', () => {
-    cy.window().then((win) => {
+    let startCount = 0
-      const sourceHandle = cy.get(`[data-nodeid="1"].source`)
+    let connectCount = 0
-      const targetHandle = cy.get(`[data-nodeid="2"].target`)
+    let endCount = 0
 
-      targetHandle.then((handle) => {
+    store.onConnectStart(() => {
-        const target = handle[0]
+      startCount++
-        const { x, y } = target.getBoundingClientRect()
+    })
 
-        sourceHandle
+    store.onConnect(() => {
-          .trigger('mousedown', {
+      connectCount++
-            button: 0,
+    })
-            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.get('.vue-flow__edge').should('have.length', 1)
+    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`)
+
+        targetHandle.then((handle) => {
+          const target = handle[0]
+          const { x, y } = target.getBoundingClientRect()
+
+          sourceHandle
+            .trigger('mousedown', {
+              button: 0,
+              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,
+            })
+        })
+      })
+    })
+
+    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
 
-    const sourceHandle = cy.get(`[data-nodeid="1"].source`)
+    beforeEach(() => {
-    const targetHandle = cy.get(`[data-nodeid="2"].target`)
+      const sourceHandle = cy.get(`[data-nodeid="1"].source`)
+      const targetHandle = cy.get(`[data-nodeid="2"].target`)
 
-    sourceHandle.click()
+      sourceHandle.click()
-    targetHandle.click()
+      targetHandle.click()
 
-    cy.get('.vue-flow__edge').should('have.length', 1)
+      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)
+    })
   })
 })