From 929e2b5d049eff11f99e5f7a77c354c624d4756d Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 7 Mar 2023 23:07:26 +0100 Subject: [PATCH] tests: add isValidConnection prop test Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .../component/2-vue-flow/connect.cy.ts | 6 +- .../2-vue-flow/isValidConnection.cy.ts | 84 +++++++++++++++++++ .../component/2-vue-flow/updateEdge.cy.ts | 4 +- tests/cypress/support/component.ts | 38 +++------ 4 files changed, 98 insertions(+), 34 deletions(-) create mode 100644 tests/cypress/component/2-vue-flow/isValidConnection.cy.ts diff --git a/tests/cypress/component/2-vue-flow/connect.cy.ts b/tests/cypress/component/2-vue-flow/connect.cy.ts index b7d042db..14408055 100644 --- a/tests/cypress/component/2-vue-flow/connect.cy.ts +++ b/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) }) diff --git a/tests/cypress/component/2-vue-flow/isValidConnection.cy.ts b/tests/cypress/component/2-vue-flow/isValidConnection.cy.ts new file mode 100644 index 00000000..607fab6d --- /dev/null +++ b/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') + }) + }) + }) +}) diff --git a/tests/cypress/component/2-vue-flow/updateEdge.cy.ts b/tests/cypress/component/2-vue-flow/updateEdge.cy.ts index 16ca5f76..7361de08 100644 --- a/tests/cypress/component/2-vue-flow/updateEdge.cy.ts +++ b/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() diff --git a/tests/cypress/support/component.ts b/tests/cypress/support/component.ts index 2aefe74e..eeeb6076 100644 --- a/tests/cypress/support/component.ts +++ b/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 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)