tests: add custom connection line component test

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

packages/core/src/composables/useHandle.ts

@@ -162,7 +162,7 @@ export default function useHandle({
 
         if (!prevClosestHandle && !isValid && !handleDomNode) return resetRecentHandle(prevActiveHandle)
 
-        if (connection.source !== connection.target && handleDomNode) {
+        if (connection && connection.source !== connection.target && handleDomNode) {
           resetRecentHandle(prevActiveHandle)
 
           prevActiveHandle = handleDomNode

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

@@ -44,33 +44,7 @@ describe('Check if nodes can be connected', () => {
       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,
-            })
-        })
-      })
+      cy.dragConnection('1', '2')
     })
 
     it('creates connection by dragging', () => {

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

@@ -0,0 +1,68 @@
+import { h } from 'vue'
+import type { FunctionalComponent } from 'vue'
+import type { ConnectionLineProps } from '@vue-flow/core'
+import { BaseEdge, getBezierPath } from '@vue-flow/core'
+
+const CustomConnectionLine: FunctionalComponent<ConnectionLineProps> = (props: ConnectionLineProps) => {
+  const path = getBezierPath(props)
+
+  return h(BaseEdge, { path: path[0], class: 'test-custom-connection-line' })
+}
+
+describe('Check if custom connection lines are rendered', () => {
+  beforeEach(() => {
+    cy.vueFlow(
+      {
+        fitViewOnInit: false,
+        modelValue: [
+          {
+            id: '1',
+            label: 'Node 1',
+            position: { x: 0, y: 0 },
+          },
+          {
+            id: '2',
+            type: 'output',
+            label: 'Node 2',
+            position: { x: 300, y: 300 },
+          },
+        ],
+      },
+      {},
+      { 'connection-line': CustomConnectionLine },
+    )
+  })
+
+  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`)
+
+      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,
+          })
+
+        cy.get('.test-custom-connection-line').should('have.length', 1)
+
+        sourceHandle.trigger('mouseup', {
+          clientX: x + 5,
+          clientY: y + 5,
+          force: true,
+          view: win,
+        })
+      })
+    })
+  })
+})

tests/cypress/support/component.ts

@@ -27,7 +27,7 @@ import { mount } from 'cypress/vue'
 import { VueFlow } from '@vue-flow/core'
 import type { FlowProps } from '@vue-flow/core'
 
-const mountVueFlow = (props?: FlowProps, attrs?: Record<string, any>) => {
+const mountVueFlow = (props?: FlowProps, attrs?: Record<string, any>, slots?: Record<string, any>) => {
   cy.mount(VueFlow as any, {
     props: {
       id: 'test',
@@ -42,6 +42,7 @@ const mountVueFlow = (props?: FlowProps, attrs?: Record<string, any>) => {
       },
       ...attrs,
     } as Record<string, any>,
+    slots,
   })
 }
 
@@ -67,6 +68,36 @@ const retry = (assertion: Function, { interval = 20, timeout = 1000 } = {}) => {
   })
 }
 
+const dragConnection = (from: string, to: string) => {
+  cy.window().then((win) => {
+    const sourceHandle = cy.get(`[data-nodeid="${from}"].source`)
+    const targetHandle = cy.get(`[data-nodeid="${to}"].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,
+        })
+    })
+  })
+}
+
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
 // Alternatively, can be defined in cypress/support/component.d.ts
@@ -79,6 +110,7 @@ declare global {
       viewPort: typeof useViewPort
       transformationPane: typeof useTransformationPane
       tryAssertion: typeof retry
+      dragConnection: typeof dragConnection
     }
   }
 }
@@ -93,5 +125,7 @@ Cypress.Commands.add('transformationPane', useTransformationPane)
 
 Cypress.Commands.add('tryAssertion', retry)
 
+Cypress.Commands.add('dragConnection', dragConnection)
+
 // Example use:
 // cy.mount(MyComponent)