refactor(tests): use connection line tester cmp

Author: bcakmakoglu

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

@@ -1,24 +1,42 @@
-import { h } from 'vue'
-import type { FunctionalComponent } from 'vue'
-import type { ConnectionLineProps, GraphNode, HandleElement } from '@vue-flow/core'
+import { defineComponent, h, watch } from 'vue'
+import type { ConnectionLineProps } from '@vue-flow/core'
 import { BaseEdge, getBezierPath } from '@vue-flow/core'
 
-let propTargetNode: GraphNode | null | undefined = null
-let propTargetHandle: HandleElement | null | undefined = null
+const connectionLineId = 'test-custom-connection-line'
 
-const CustomConnectionLine: FunctionalComponent<ConnectionLineProps> = (props: ConnectionLineProps) => {
-  const path = getBezierPath(props)
+describe('Custom Connection Line', () => {
+  it('renders a custom connection line component', () => {
+    const CustomConnectionLine = defineComponent({
+      props: ['sourceNode', 'sourceHandle', 'targetNode', 'targetHandle', 'sourceX', 'sourceY', 'targetX', 'targetY'],
+      emits: ['change'],
+      setup(props, { emit }) {
+        watch(
+          () => props,
+          () => {
+            emit('change', {
+              sourceNodeId: props.sourceNode?.id,
+              sourceHandleId: props.sourceHandle.id,
+              targetNodeId: props.targetNode?.id,
+              targetHandleId: props.targetHandle?.id,
+            })
+          },
+          { immediate: true, deep: true },
+        )
+
+        return () => {
+          const path = getBezierPath(props)
 
-  propTargetNode = props.targetNode
-  propTargetHandle = props.targetHandle
+          return h(BaseEdge, { path: path[0], class: connectionLineId })
+        }
+      },
+    })
 
-  return h(BaseEdge, { path: path[0], class: 'test-custom-connection-line' })
-}
+    const onChangeSpy = cy.spy().as('onChangeSpy')
 
-describe('Check if custom connection lines are rendered', () => {
-  beforeEach(() => {
     cy.vueFlow(
       {
+        autoConnect: true,
+        fitViewOnInit: false,
         modelValue: [
           {
             id: '1',
@@ -34,11 +52,9 @@ describe('Check if custom connection lines are rendered', () => {
         ],
       },
       {},
-      { 'connection-line': CustomConnectionLine },
+      { 'connection-line': (props: ConnectionLineProps) => h(CustomConnectionLine, { ...props, onChange: onChangeSpy }) },
     )
-  })
 
-  it('renders custom connection line', () => {
     cy.window().then((win) => {
       const sourceHandle = cy.get(`[data-nodeid="1"].source`)
       const targetHandle = cy.get(`[data-nodeid="2"].target`)
@@ -54,27 +70,30 @@ describe('Check if custom connection lines are rendered', () => {
             view: win,
           })
           .trigger('mousemove', {
-            clientX: x + 5,
-            clientY: y + 5,
+            clientX: x,
+            clientY: y,
             force: true,
           })
 
-        cy.get('.test-custom-connection-line')
-          .should('have.length', 1)
-          .then(() => {
-            expect(propTargetNode).to.not.be.null
-            expect(propTargetNode?.id).to.equal('2')
+        cy.get(`.${connectionLineId}`).should('have.length', 1)
 
-            expect(propTargetHandle).to.not.be.null
-            expect(propTargetHandle?.id).to.equal('2__handle-top')
+        cy.get('@onChangeSpy').should('have.been.calledWith', {
+          sourceNodeId: '1',
+          sourceHandleId: '1__handle-bottom',
+          targetNodeId: '2',
+          targetHandleId: '2__handle-top',
+        })
 
-            sourceHandle.trigger('mouseup', {
-              clientX: x + 5,
-              clientY: y + 5,
-              force: true,
-              view: win,
-            })
-          })
+        sourceHandle.trigger('mouseup', {
+          clientX: x,
+          clientY: y,
+          force: true,
+          view: win,
+        })
+
+        cy.get(`.${connectionLineId}`).should('have.length', 0)
+
+        cy.get('.vue-flow__edge').should('have.length', 1)
       })
     })
   })