diff --git a/tests/cypress/component/2-vue-flow/customEdge.cy.ts b/tests/cypress/component/2-vue-flow/customEdge.cy.ts new file mode 100644 index 00000000..1078db4b --- /dev/null +++ b/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) + }) +}) diff --git a/tests/cypress/component/2-vue-flow/customNode.cy.ts b/tests/cypress/component/2-vue-flow/customNode.cy.ts index 99a38960..203ed63a 100644 --- a/tests/cypress/component/2-vue-flow/customNode.cy.ts +++ b/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)') }) })