test(editor): Add canvas actions E2E tests (#6723) (#6790)

* test(editor): Add canvas actions E2E tests (#6723)

* test(editor): Add canvas actions E2E tests

* test(editor): Open category items in node creator when category dropped on canvas

* test(editor): Have new position counted only once in drag

* test(editor): rename test

(cherry picked from commit 052d82b220)

* test: fix drag positioning

cypress/e2e/12-canvas-actions.cy.ts

@@ -77,6 +77,42 @@ describe('Canvas Actions', () => {
 		WorkflowPage.getters.nodeConnections().should('have.length', 1);
 	});
 
+	it('should add a connected node dragging from node creator', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		cy.get('.plus-endpoint').should('be.visible').click();
+		WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
+		WorkflowPage.getters.nodeCreatorSearchBar().type(CODE_NODE_NAME);
+		cy.drag(
+			WorkflowPage.getters.nodeCreatorNodeItems().first(),
+			[100, 100],
+			{
+				realMouse: true,
+				abs: true
+			}
+		);
+		cy.get('body').type('{esc}');
+		WorkflowPage.getters.canvasNodes().should('have.length', 2);
+		WorkflowPage.getters.nodeConnections().should('have.length', 1);
+	});
+
+	it('should open a category when trying to drag and drop it on the canvas', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		cy.get('.plus-endpoint').should('be.visible').click();
+		WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
+		WorkflowPage.getters.nodeCreatorSearchBar().type(CODE_NODE_NAME);
+		cy.drag(
+			WorkflowPage.getters.nodeCreatorActionItems().first(),
+			[100, 100],
+			{
+				realMouse: true,
+				abs: true
+			}
+		);
+		WorkflowPage.getters.nodeCreatorCategoryItems().its('length').should('be.gt', 0);
+		WorkflowPage.getters.canvasNodes().should('have.length', 1);
+		WorkflowPage.getters.nodeConnections().should('have.length', 0);
+	});
+
 	it('should add disconnected node if nothing is selected', () => {
 		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
 		// Deselect nodes

cypress/pages/workflow.ts

@@ -100,6 +100,9 @@ export class WorkflowPage extends BasePage {
 		nodeCredentialsCreateOption: () => cy.getByTestId('node-credentials-select-item-new'),
 		nodeCredentialsEditButton: () => cy.getByTestId('credential-edit-button'),
 		nodeCreatorItems: () => cy.getByTestId('item-iterator-item'),
+		nodeCreatorNodeItems: () => cy.getByTestId('node-creator-node-item'),
+		nodeCreatorActionItems: () => cy.getByTestId('node-creator-action-item'),
+		nodeCreatorCategoryItems: () => cy.getByTestId('node-creator-category-item'),
 		ndvParameters: () => cy.getByTestId('parameter-item'),
 		nodeCredentialsLabel: () => cy.getByTestId('credentials-label'),
 		getConnectionBetweenNodes: (sourceNodeName: string, targetNodeName: string) =>

cypress/support/commands.ts

@@ -103,19 +103,31 @@ Cypress.Commands.add('paste', { prevSubject: true }, (selector, pastePayload) =>
 Cypress.Commands.add('drag', (selector, pos, options) => {
 	const index = options?.index || 0;
 	const [xDiff, yDiff] = pos;
-	const element = cy.get(selector).eq(index);
+	const element = typeof selector === 'string' ? cy.get(selector).eq(index) : selector;
 	element.should('exist');
 
-	const originalLocation = Cypress.$(selector)[index].getBoundingClientRect();
+	element.then(([$el]) => {
+		const originalLocation = $el.getBoundingClientRect();
+		const newPosition = {
+			x: options?.abs ? xDiff : originalLocation.right + xDiff,
+			y: options?.abs ? yDiff : originalLocation.top + yDiff,
+		}
 
-	element.trigger('mousedown', { force: true });
+		if(options?.realMouse) {
-	element.trigger('mousemove', {
+			element.realMouseDown();
-		which: 1,
+			element.realMouseMove(newPosition.x, newPosition.y);
-		pageX: options?.abs ? xDiff : originalLocation.right + xDiff,
+			element.realMouseUp();
-		pageY: options?.abs ? yDiff : originalLocation.top + yDiff,
+		} else {
-		force: true,
+			element.trigger('mousedown', {force: true});
+			element.trigger('mousemove', {
+				which: 1,
+				pageX: newPosition.x,
+				pageY: newPosition.y,
+				force: true,
+			});
+			element.trigger('mouseup', {force: true});
+		}
 	});
-	element.trigger('mouseup', { force: true });
 });
 
 Cypress.Commands.add('draganddrop', (draggableSelector, droppableSelector) => {

cypress/support/index.ts

@@ -31,7 +31,7 @@ declare global {
 			grantBrowserPermissions(...permissions: string[]): void;
 			readClipboard(): Chainable<string>;
 			paste(pastePayload: string): void;
-			drag(selector: string, target: [number, number], options?: {abs?: true, index?: number}): void;
+			drag(selector: string | Cypress.Chainable<JQuery<HTMLElement>>, target: [number, number], options?: {abs?: boolean, index?: number, realMouse?: boolean}): void;
 			draganddrop(draggableSelector: string, droppableSelector: string): void;
 		}
 	}

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue

@@ -9,6 +9,7 @@
 		:title="displayName"
 		:show-action-arrow="showActionArrow"
 		:is-trigger="isTrigger"
+		:data-test-id="dataTestId"
 	>
 		<template #icon>
 			<node-icon :nodeType="nodeType" />
@@ -77,6 +78,9 @@ const description = computed<string>(() => {
 	}) as string;
 });
 const showActionArrow = computed(() => hasActions.value);
+const dataTestId = computed(() =>
+	hasActions.value ? 'node-creator-action-item' : 'node-creator-node-item',
+);
 
 const hasActions = computed(() => {
 	return nodeActions.value.length > 1;