tests: update handle ids in tests

Author: bcakmakoglu

tests/cypress/component/1-store/edges/connection.cy.ts

@@ -51,7 +51,7 @@ describe('Store Action: `startConnection`, `updateConnection`, `endConnection`',
     store.endConnection()
 
     expect(store.connectionStartHandle.value).to.equal(null)
-    expect(store.connectionPosition.value).to.deep.equal({ x: NaN, y: NaN })
+    expect(store.connectionPosition.value).to.deep.equal({ x: Number.NaN, y: Number.NaN })
 
     cy.viewPort().find('.vue-flow__connection').should('not.exist')
   })

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

@@ -6,15 +6,15 @@ describe('Check if nodes can be connected', () => {
   beforeEach(() => {
     cy.vueFlow({
       fitViewOnInit: false,
-      modelValue: [
+      nodes: [
         {
           id: '1',
-          label: 'Node 1',
+          data: { label: 'Node 1' },
           position: { x: 0, y: 0 },
         },
         {
           id: '2',
-          label: 'Node 2',
+          data: { label: 'Node 2' },
           position: { x: 300, y: 300 },
         },
       ],
@@ -57,11 +57,8 @@ describe('Check if nodes can be connected', () => {
           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)
+          expect(edge.sourceHandle).to.eq(null)
+          expect(edge.targetHandle).to.eq(null)
         })
     })
 
@@ -98,11 +95,8 @@ describe('Check if nodes can be connected', () => {
       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)
+      expect(edge.sourceHandle).to.eq(null)
+      expect(edge.targetHandle).to.eq(null)
     })
   })
 })

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

@@ -6,18 +6,18 @@ const connectionLineId = 'test-custom-connection-line'
 
 describe('Custom Connection Line', () => {
   it('renders a custom connection line component', () => {
-    const CustomConnectionLine = defineComponent({
-      props: ['sourceNode', 'sourceHandle', 'targetNode', 'targetHandle', 'sourceX', 'sourceY', 'targetX', 'targetY'],
+    const CustomConnectionLine = defineComponent<ConnectionLineProps>({
+      props: ['sourceNode', 'sourceHandle', 'targetNode', 'targetHandle', 'sourceX', 'sourceY', 'targetX', 'targetY'] as any,
       emits: ['change'],
       setup(props, { emit }) {
         watch(
           () => props,
-          () => {
+          (currProps) => {
             emit('change', {
-              sourceNodeId: props.sourceNode?.id,
-              sourceHandleId: props.sourceHandle.id,
-              targetNodeId: props.targetNode?.id,
-              targetHandleId: props.targetHandle?.id,
+              sourceNodeId: currProps.sourceNode?.id,
+              sourceHandleId: currProps.sourceHandle?.id ?? null,
+              targetNodeId: currProps.targetNode?.id,
+              targetHandleId: currProps.targetHandle?.id ?? null,
             })
           },
           { immediate: true, deep: true },
@@ -37,16 +37,16 @@ describe('Custom Connection Line', () => {
       {
         autoConnect: true,
         fitViewOnInit: false,
-        modelValue: [
+        nodes: [
           {
             id: '1',
-            label: 'Node 1',
+            data: { label: 'Node 1' },
             position: { x: 0, y: 0 },
           },
           {
             id: '2',
             type: 'output',
-            label: 'Node 2',
+            data: { label: 'Node 2' },
             position: { x: 300, y: 300 },
           },
         ],
@@ -79,9 +79,9 @@ describe('Custom Connection Line', () => {
 
         cy.get('@onChangeSpy').should('have.been.calledWith', {
           sourceNodeId: '1',
-          sourceHandleId: '1__handle-bottom',
+          sourceHandleId: null,
           targetNodeId: '2',
-          targetHandleId: '2__handle-top',
+          targetHandleId: null,
         })
 
         sourceHandle.trigger('mouseup', {

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

@@ -11,20 +11,20 @@ describe('isValidConnection Prop', () => {
 
   beforeEach(() => {
     cy.vueFlow({
-      modelValue: [
+      nodes: [
         {
           id: 'A',
-          label: 'Node A',
+          data: { label: 'Node A' },
           position: { x: 0, y: 0 },
         },
         {
           id: 'B',
-          label: 'Node B',
+          data: { label: 'Node B' },
           position: { x: 300, y: 300 },
         },
         {
           id: 'C',
-          label: 'Node C',
+          data: { label: 'Node C' },
           position: { x: 300, y: 0 },
         },
       ],
@@ -76,8 +76,8 @@ describe('isValidConnection Prop', () => {
             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')
+        cy.get('.vue-flow__edge[data-id="vueflow__edge-A-B"]').should('exist')
+        cy.get('.vue-flow__edge[data-id="vueflow__edge-A-C"]').should('not.exist')
       })
     })
   })