From 7519b31b8fd5621e6ad8dd5ea3c4ac0affa826e9 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 8 Mar 2023 00:04:38 +0100 Subject: [PATCH] tests: add custom connection line component test Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/composables/useHandle.ts | 2 +- .../component/2-vue-flow/connect.cy.ts | 28 +------- .../2-vue-flow/customConnectionLine.cy.ts | 68 +++++++++++++++++++ tests/cypress/support/component.ts | 36 +++++++++- 4 files changed, 105 insertions(+), 29 deletions(-) create mode 100644 tests/cypress/component/2-vue-flow/customConnectionLine.cy.ts diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts index 75636831..c6d1b1e1 100644 --- a/packages/core/src/composables/useHandle.ts +++ b/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 diff --git a/tests/cypress/component/2-vue-flow/connect.cy.ts b/tests/cypress/component/2-vue-flow/connect.cy.ts index 17d70776..b7d042db 100644 --- a/tests/cypress/component/2-vue-flow/connect.cy.ts +++ b/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', () => { diff --git a/tests/cypress/component/2-vue-flow/customConnectionLine.cy.ts b/tests/cypress/component/2-vue-flow/customConnectionLine.cy.ts new file mode 100644 index 00000000..73356b5c --- /dev/null +++ b/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 = (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, + }) + }) + }) + }) +}) diff --git a/tests/cypress/support/component.ts b/tests/cypress/support/component.ts index dd78d613..2aefe74e 100644 --- a/tests/cypress/support/component.ts +++ b/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) => { +const mountVueFlow = (props?: FlowProps, attrs?: Record, slots?: Record) => { cy.mount(VueFlow as any, { props: { id: 'test', @@ -42,6 +42,7 @@ const mountVueFlow = (props?: FlowProps, attrs?: Record) => { }, ...attrs, } as Record, + 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)