test(editor): Enable adding nodes in between any two nodes on canvas in e2e tests (no-changelog) (#5393)

*  Adding source and target test data to connection HTML elements
*  Using new action to add node on the connection
* 🔥 Removing leftover log
* 🔥 Removing leftover test action
* 👌 Refactoring to address PR feedback
This commit is contained in:
Milorad FIlipović
2023-02-07 16:34:08 +01:00
committed by GitHub
parent 7e2f2f7453
commit d05203db30
5 changed files with 46 additions and 14 deletions

View File

@@ -3,7 +3,7 @@ import { isNumber } from '@/utils';
import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE, QUICKSTART_NOTE_NAME } from '@/constants';
import { EndpointStyle, IBounds, INodeUi, XYPosition } from '@/Interface';
import { ArrayAnchorSpec, ConnectorSpec, OverlaySpec, PaintStyle } from '@jsplumb/common';
import { Endpoint, Connection } from '@jsplumb/core';
import { Endpoint, Connection, ConnectionEstablishedParams } from '@jsplumb/core';
import { N8nConnector } from '@/plugins/connectors/N8nCustomConnector';
import { closestNumberDivisibleBy } from '@/utils';
import {
@@ -741,6 +741,21 @@ export const moveBackInputLabelPosition = (targetEndpoint: Endpoint) => {
}
};
export const addConnectionTestData = (
source: HTMLElement,
target: HTMLElement,
el: HTMLElement | undefined,
) => {
// TODO: Only do this if running in test mode
const sourceNodeName = source.getAttribute('data-name')?.toString();
const targetNodeName = target.getAttribute('data-name')?.toString();
if (el && sourceNodeName && targetNodeName) {
el.setAttribute('data-source-node', sourceNodeName);
el.setAttribute('data-target-node', targetNodeName);
}
};
export const addConnectionActionsOverlay = (
connection: Connection,
onDelete: Function,
@@ -756,15 +771,13 @@ export const addConnectionActionsOverlay = (
const deleteButton = document.createElement('button');
div.classList.add(OVERLAY_CONNECTION_ACTIONS_ID);
addConnectionTestData(component.source, component.target, div);
addButton.classList.add('add');
deleteButton.classList.add('delete');
addButton.innerHTML = getIcon('plus');
deleteButton.innerHTML = getIcon('trash');
addButton.addEventListener('click', () => onAdd());
deleteButton.addEventListener('click', () => onDelete());
// We have to manually trigger connection mouse events because the overlay
// is not part of the connection element
div.addEventListener('mouseout', () =>
@@ -773,7 +786,6 @@ export const addConnectionActionsOverlay = (
div.addEventListener('mouseover', () =>
connection.instance.fire(EVENT_CONNECTION_MOUSEOVER, component),
);
div.appendChild(addButton);
div.appendChild(deleteButton);
return div;