tests: add isValidConnection prop test

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

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

@@ -84,11 +84,7 @@ describe('Check if nodes can be connected', () => {
     store.connectOnClick.value = true
 
     beforeEach(() => {
-      const sourceHandle = cy.get(`[data-nodeid="1"].source`)
-      const targetHandle = cy.get(`[data-nodeid="2"].target`)
-
-      sourceHandle.click()
-      targetHandle.click()
+      cy.connect('1', '2')
 
       cy.get('.vue-flow__edge').should('have.length', 1)
     })

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

@@ -0,0 +1,84 @@
+import { useVueFlow } from '@vue-flow/core'
+import type { ValidConnectionFunc } from '@vue-flow/core'
+
+const isValidConnection: ValidConnectionFunc = (connection) => {
+  return connection.target === 'B' || connection.source === 'B'
+}
+
+describe('isValidConnection Prop', () => {
+  const store = useVueFlow({ id: 'test' })
+  store.onEdgeUpdate((params) => store.updateEdge(params.edge, params.connection))
+
+  beforeEach(() => {
+    cy.vueFlow({
+      modelValue: [
+        {
+          id: 'A',
+          label: 'Node A',
+          position: { x: 0, y: 0 },
+        },
+        {
+          id: 'B',
+          label: 'Node B',
+          position: { x: 300, y: 300 },
+        },
+        {
+          id: 'C',
+          label: 'Node C',
+          position: { x: 300, y: 0 },
+        },
+      ],
+      connectOnClick: true,
+      autoConnect: true,
+      edgesUpdatable: true,
+      isValidConnection,
+    })
+  })
+
+  it('only connectable to node with id `B`', () => {
+    cy.connect('A', 'B')
+
+    cy.get('.vue-flow__edge').should('have.length', 1)
+
+    cy.connect('A', 'C')
+
+    cy.get('.vue-flow__edge').should('have.length', 1)
+  })
+
+  it('cannot update to other handles', () => {
+    cy.connect('A', 'B')
+
+    cy.get('.vue-flow__edge').should('have.length', 1)
+
+    cy.window().then((win) => {
+      const edgeAnchor = cy.get(`.vue-flow__edgeupdater[data-type="target"]`)
+      const targetHandle = cy.get(`[data-nodeid="C"].target`)
+
+      targetHandle.then(async (handle) => {
+        const target = handle[0]
+        const { x, y } = target.getBoundingClientRect()
+
+        edgeAnchor
+          .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.get('.vue-flow__edge[data-id="vueflow__edge-AA__handle-bottom-BB__handle-top"]').should('exist')
+        cy.get('.vue-flow__edge[data-id="vueflow__edge-AA__handle-bottom-CC__handle-top"]').should('not.exist')
+      })
+    })
+  })
+})

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

@@ -37,9 +37,9 @@ describe('Check if edges are updatable', () => {
   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`)
+      const targetHandle = cy.get(`[data-nodeid="3"].target`)
 
-      targetTargetHandle.then(async (handle) => {
+      targetHandle.then(async (handle) => {
         const target = handle[0]
         const { x, y } = target.getBoundingClientRect()
 

tests/cypress/support/component.ts

@@ -1,28 +1,8 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import necessary styles
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 
-// Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/vue'
 import { VueFlow } from '@vue-flow/core'
 import type { FlowProps } from '@vue-flow/core'
@@ -98,10 +78,14 @@ const dragConnection = (from: string, to: string) => {
   })
 }
 
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
+const connect = (from: string, to: string) => {
+  const sourceHandle = cy.get(`[data-nodeid="${from}"].source`)
+  const targetHandle = cy.get(`[data-nodeid="${to}"].target`)
+
+  sourceHandle.click({ force: true })
+  targetHandle.click({ force: true })
+}
+
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -110,6 +94,7 @@ declare global {
       viewPort: typeof useViewPort
       transformationPane: typeof useTransformationPane
       tryAssertion: typeof retry
+      connect: typeof connect
       dragConnection: typeof dragConnection
     }
   }
@@ -125,7 +110,6 @@ Cypress.Commands.add('transformationPane', useTransformationPane)
 
 Cypress.Commands.add('tryAssertion', retry)
 
-Cypress.Commands.add('dragConnection', dragConnection)
+Cypress.Commands.add('connect', connect)
 
-// Example use:
-// cy.mount(MyComponent)
+Cypress.Commands.add('dragConnection', dragConnection)