tests: add custom edge test

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

Author: bcakmakoglu

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

@@ -0,0 +1,44 @@
+import type { EdgeComponent } from '@vue-flow/core'
+import { BaseEdge, getBezierPath } from '@vue-flow/core'
+import { h, markRaw } from 'vue'
+
+const CustomEdge: EdgeComponent = (props) => {
+  const path = getBezierPath(props)
+  return h(BaseEdge as any, { path: path[0], class: 'test-custom-edge' })
+}
+
+describe('Check if custom nodes 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 },
+        },
+        {
+          id: 'e1-2',
+          source: '1',
+          target: '2',
+          type: 'custom',
+        },
+      ],
+      edgeTypes: {
+        custom: markRaw(CustomEdge),
+      },
+    })
+  })
+
+  it('renders custom edge', () => {
+    cy.get('.vue-flow__edge-custom').should('have.length', 1)
+
+    cy.get('.test-custom-edge').should('have.length', 1)
+  })
+})

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

@@ -7,7 +7,7 @@ const CustomNode: NodeComponent = defineComponent(() => {
     h('div', { class: 'vue-flow__node-default' }, [
       h(Handle as any, { id: 'handle-1', position: 'left', type: 'target', style: { top: '5px' } }),
       h(Handle as any, { id: 'handle-2', position: 'left', type: 'target', style: { bottom: '-10px' } }),
-      'Custom Node',
+      h('div', { class: 'test-custom-node' }, 'Custom Node'),
       h(Handle as any, { id: 'handle-3', position: 'right' }),
     ])
 })
@@ -32,11 +32,14 @@ describe('Check if custom nodes are rendered', () => {
       nodeTypes: {
         custom: markRaw(CustomNode),
       },
-      autoConnect: true,
     })
   })
 
   it('renders custom node', () => {
     cy.get('.vue-flow__node-custom').should('have.length', 1)
+
+    cy.get('.test-custom-node').should('have.length', 1).should('contain', 'Custom Node')
+
+    cy.get('.vue-flow__node-custom').should('have.css', 'transform', 'matrix(1, 0, 0, 1, 300, 300)')
   })
 })