From df3251726ef48c0bcbabce7ea88b7a00b8a93c9b Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Mon, 31 Jul 2023 12:32:08 +0200 Subject: [PATCH] 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 052d82b2208c1b2e6f62c6004822c6278c15278b) * test: fix drag positioning --- cypress/e2e/12-canvas-actions.cy.ts | 36 +++++++++++++++++++ cypress/pages/workflow.ts | 3 ++ cypress/support/commands.ts | 32 +++++++++++------ cypress/support/index.ts | 2 +- .../Node/NodeCreator/ItemTypes/NodeItem.vue | 4 +++ 5 files changed, 66 insertions(+), 11 deletions(-) diff --git a/cypress/e2e/12-canvas-actions.cy.ts b/cypress/e2e/12-canvas-actions.cy.ts index a4eaebc7be5a4..c536d0c69d69f 100644 --- a/cypress/e2e/12-canvas-actions.cy.ts +++ b/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 diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index 7333db5c864c2..c6b624d0da4bf 100644 --- a/cypress/pages/workflow.ts +++ b/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) => diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 1a1925b6a4697..9bf24ace8a1fb 100644 --- a/cypress/support/commands.ts +++ b/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.trigger('mousedown', { force: true }); - element.trigger('mousemove', { - which: 1, - pageX: options?.abs ? xDiff : originalLocation.right + xDiff, - pageY: options?.abs ? yDiff : originalLocation.top + yDiff, - force: true, + element.then(([$el]) => { + const originalLocation = $el.getBoundingClientRect(); + const newPosition = { + x: options?.abs ? xDiff : originalLocation.right + xDiff, + y: options?.abs ? yDiff : originalLocation.top + yDiff, + } + + if(options?.realMouse) { + element.realMouseDown(); + element.realMouseMove(newPosition.x, newPosition.y); + element.realMouseUp(); + } else { + 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) => { diff --git a/cypress/support/index.ts b/cypress/support/index.ts index 196a14d9ec083..f1602b3e06989 100644 --- a/cypress/support/index.ts +++ b/cypress/support/index.ts @@ -31,7 +31,7 @@ declare global { grantBrowserPermissions(...permissions: string[]): void; readClipboard(): Chainable; paste(pastePayload: string): void; - drag(selector: string, target: [number, number], options?: {abs?: true, index?: number}): void; + drag(selector: string | Cypress.Chainable>, target: [number, number], options?: {abs?: boolean, index?: number, realMouse?: boolean}): void; draganddrop(draggableSelector: string, droppableSelector: string): void; } } diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue index 9e871ad35d0bd..849c647380ef9 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue +++ b/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" >