From 69e9bf082be724845bf18f9ed43c63434ff78145 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Wed, 14 Dec 2022 10:33:44 +0100 Subject: [PATCH] test(editor): Add e2e tests for undo/redo (#4904) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ Added history store and mixin * ✨ Implemented node position change undo/redo * ✨ Implemented move nodes bulk command * ⚡ Not clearing the redo stack after pushing the bulk command * 🔨 Implemented commands using classes * 🔥 Removed unnecessary interfaces and actions * 🔥 Removing unused constants * 🔨 Refactoring classes file * ⚡ Adding eventBus to command obects * ✨ Added undo/redo support for adding and removing nodes * ✨ Implemented initial add/remove connections undo support * ⚡ Covering some corner cases with reconnecting nodes * ⚡ Adding undo support for reconnecting nodes * ⚡ Fixing going back and forward between undo and redo * ✨ Implemented async command revert * ⚡ Preventing push to undo if bulk redo/undo is in progress * ⚡ Handling re-connecting nodes and stopped pushing empty bulk actions to undo stack * ✨ Handling adding a node between two connected nodes * ⚡ Handling the case of removing multiple connections on the same index. Adding debounce to undo/redo keyboard calls * ⚡ Removing unnecessary timeouts, adding missing awaits, refactoring * ⚡ Resetting history when opening new workflow, fixing incorrect bulk recording when inserting node * ✔️ Fixing lint error * ⚡ Minor refactoring + some temporary debugging logs * ⚡ Preserving node properties when undoing it's removal, removing some unused repaint code * ✨ Added undo/redo support for import workflow and node enable/disable * 🔥 Removing some unused constant * ✨ Added undo/redo support for renaming nodes * ⚡ Fixing rename history recording * ✨ Added undo/redo support for duplicating nodes * 📈 Implemented telemetry events * 🔨 A bit of refactoring * ⚡ Fixing edgecases in removing connection and moving nodes * ⚡ Handling case of adding duplicate nodes when going back and forward in history * ⚡ Recording connections added directly to store * ⚡ Moving main history reset after wf is opened * 🔨 Simplifying rename recording * 📈 Adding NDV telemetry event, updating existing event name case * 📈 Updating telemetry events * ✅ Added initial undo/redo tests * ⚡ Fixing duplicate connections on undo/redo * ⚡ Stopping undo events from firing constantly on keydown * ✅ Added connection test for undo/redo * 📈 Updated telemetry event for hitting undo in NDV * ⚡ Adding undo support for disabling nodes using keyboard shortcuts * ✅ Added more tests for adding and deleting nodes undo/redo * ⚡ Preventing adding duplicate connection commands to history * 📈 Adding connection assertions to delete node tests * ⚡ Clearing redo stack when new change is added * ⚡ Preventing adding connection actions to undo stack while redoing them * 👌 Addressing PR comments part 1 * 👌 Moving undo logic for disabling nodes to `NodeView` * 👌 Implemented command comparing logic * ⚡ Fix for not clearing redo stack on every user action * ⚡ Fixing recording when moving nodes * ⚡ Fixing undo for moving connections * ⚡ Fixing tracking new nodes after latest merge * ⚡ Fixing broken bulk delete * ✅ Added tests for moving nodes * ✅ Added tests for deleting connections * ✅ Added tests for disabling nodes * ✅ Added node rename tests * ✅ Added tests for duplicating and pasting nodes * ✅ Added multi-step undo/redo tests * ✅ Fixing assertion condition * ✅ Fixing timeout issue between keyboard strokes * ⬆️ Updating pnpm lock file * ✅ Waiting for page load to finish before each test * ✅ Adding proper handling of meta key press * 🚨 Temporarily disabling slack notifications * ✅ Adding check before clicking connection actions * ⚡ Removing comments from other undo tests * 🎨 Fixing a typo --- cypress/constants.ts | 5 + cypress/e2e/10-undo-redo.cy.ts | 283 ++++++++++++++++++ cypress/e2e/7-workflow-actions.cy.ts | 6 +- cypress/pages/workflow.ts | 25 ++ cypress/support/commands.ts | 17 ++ cypress/support/index.ts | 1 + packages/editor-ui/src/components/Node.vue | 4 + .../editor-ui/src/components/NodeTitle.vue | 4 +- 8 files changed, 339 insertions(+), 6 deletions(-) create mode 100644 cypress/e2e/10-undo-redo.cy.ts diff --git a/cypress/constants.ts b/cypress/constants.ts index 3f423f6e1b..ad9dbc72b8 100644 --- a/cypress/constants.ts +++ b/cypress/constants.ts @@ -2,3 +2,8 @@ export const N8N_AUTH_COOKIE = 'n8n-auth'; export const DEFAULT_USER_EMAIL = 'nathan@n8n.io'; export const DEFAULT_USER_PASSWORD = 'CypressTest123'; + +export const MANUAL_TRIGGER_NODE_NAME = 'Manual Trigger'; +export const SCHEDULE_TRIGGER_NODE_NAME = 'Schedule Trigger'; +export const CODE_NODE_NAME = 'Code' +export const SET_NODE_NAME = 'Set' diff --git a/cypress/e2e/10-undo-redo.cy.ts b/cypress/e2e/10-undo-redo.cy.ts new file mode 100644 index 0000000000..716f2948ff --- /dev/null +++ b/cypress/e2e/10-undo-redo.cy.ts @@ -0,0 +1,283 @@ +import { CODE_NODE_NAME, SET_NODE_NAME } from './../constants'; +import { SCHEDULE_TRIGGER_NODE_NAME } from '../constants'; +import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; + +// Suite-specific constants +const CODE_NODE_NEW_NAME = 'Something else'; + +const WorkflowPage = new WorkflowPageClass(); + +describe('Undo/Redo', () => { + beforeEach(() => { + cy.resetAll(); + cy.skipSetup(); + WorkflowPage.actions.visit(); + cy.waitForLoad(); + }); + + it('should undo/redo adding nodes', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 0); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 1); + }); + + it('should undo/redo adding connected nodes', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 1); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + }); + + it('should undo/redo adding node in the middle', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME); + WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true }); + cy.get('.connection-actions .add').should('be.visible'); + cy.get('.connection-actions .add').click(); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.actions.zoomToFit(); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 3); + WorkflowPage.getters.nodeConnections().should('have.length', 2); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 4); + WorkflowPage.getters.nodeConnections().should('have.length', 3); + }); + + it('should undo/redo deleting node using delete button', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME). + find('[data-test-id=delete-node-button]').click({ force: true }); + WorkflowPage.getters.canvasNodes().should('have.have.length', 1); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 1); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + }); + + it('should undo/redo deleting node using keyboard shortcut', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).click(); + cy.get('body').type('{backspace}'); + WorkflowPage.getters.canvasNodes().should('have.have.length', 1); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 1); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + }); + + it('should undo/redo deleting node between two connected nodes', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME); + WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).click(); + WorkflowPage.actions.zoomToFit(); + cy.get('body').type('{backspace}'); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 3); + WorkflowPage.getters.nodeConnections().should('have.length', 2); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + }); + + it('should undo/redo deleting whole workflow', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + cy.get('body').type('{esc}'); + cy.get('body').type('{esc}'); + WorkflowPage.actions.selectAll(); + cy.get('body').type('{backspace}'); + WorkflowPage.getters.canvasNodes().should('have.have.length', 0); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 0); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + }); + + it('should undo/redo moving nodes', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', 50, 150); + WorkflowPage.getters.canvasNodes().last().should('have.attr', 'style', 'left: 740px; top: 360px;'); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().last().should('have.attr', 'style', 'left: 640px; top: 260px;'); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().last().should('have.attr', 'style', 'left: 740px; top: 360px;'); + }); + + it('should undo/redo deleting a connection by pressing delete button', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true }); + cy.get('.connection-actions .delete').click(); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + }); + + it('should undo/redo deleting a connection by moving it away', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + cy.drag('.rect-input-endpoint.jtk-endpoint-connected', 0, -100); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.nodeConnections().should('have.length', 1); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.nodeConnections().should('have.length', 0) + }); + + it('should undo/redo disabling a node using disable button', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.canvasNodes().last().find('[data-test-id="disable-node-button"]').click({ force: true }); + WorkflowPage.getters.disabledNodes().should('have.length', 1); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.disabledNodes().should('have.length', 0); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.disabledNodes().should('have.length', 1); + }); + + it('should undo/redo disabling a node using keyboard shortcut', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.canvasNodes().last().click(); + WorkflowPage.actions.hitDisableNodeShortcut(); + WorkflowPage.getters.disabledNodes().should('have.length', 1); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.disabledNodes().should('have.length', 0); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.disabledNodes().should('have.length', 1); + }); + + it('should undo/redo disabling multiple nodes', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + cy.get('body').type('{esc}'); + cy.get('body').type('{esc}'); + WorkflowPage.actions.selectAll(); + WorkflowPage.actions.hitDisableNodeShortcut(); + WorkflowPage.getters.disabledNodes().should('have.length', 2); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.disabledNodes().should('have.length', 0); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.disabledNodes().should('have.length', 2); + }); + + it('should undo/redo renaming node using NDV', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.canvasNodes().last().click(); + cy.get('body').type('{enter}'); + WorkflowPage.getters.nodeNameContainerNDV().click(); + WorkflowPage.getters.nodeRenameInput().should('be.visible'); + WorkflowPage.getters.nodeRenameInput().type('{selectall}'); + WorkflowPage.getters.nodeRenameInput().type(CODE_NODE_NEW_NAME); + cy.get('body').type('{enter}'); + cy.get('body').type('{esc}'); + WorkflowPage.actions.hitUndo(); + cy.get('body').type('{esc}'); + WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).should('exist'); + WorkflowPage.actions.hitRedo(); + cy.get('body').type('{esc}'); + WorkflowPage.getters.canvasNodeByName(CODE_NODE_NEW_NAME).should('exist'); + }); + + it('should undo/redo renaming node using keyboard shortcut', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.canvasNodes().last().click(); + cy.get('body').trigger("keydown", { key: "F2" }); + cy.get('.rename-prompt').should('be.visible'); + cy.get('body').type(CODE_NODE_NEW_NAME); + cy.get('body').type('{enter}'); + WorkflowPage.actions.hitUndo(); + cy.get('body').type('{esc}'); + WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).should('exist'); + WorkflowPage.actions.hitRedo(); + cy.get('body').type('{esc}'); + WorkflowPage.getters.canvasNodeByName(CODE_NODE_NEW_NAME).should('exist'); + }); + + it('should undo/redo duplicating a node', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.getters.canvasNodes().last().find('[data-test-id="duplicate-node-button"]').click({ force: true }); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.length', 2); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.length', 3); + }); + + it('should undo/redo pasting nodes', () => { + cy.fixture('Test_workflow-actions_paste-data.json').then(data => { + cy.get('body').paste(JSON.stringify(data)); + WorkflowPage.actions.zoomToFit(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 0); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + }); + }); + + it('should undo/redo multiple steps', () => { + WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); + WorkflowPage.actions.zoomToFit(); + + // Disable last node + WorkflowPage.getters.canvasNodes().last().click(); + WorkflowPage.actions.hitDisableNodeShortcut(); + // Move first one + WorkflowPage.getters.canvasNodes().first().click(); + cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', 50, 150); + // Delete the set node + WorkflowPage.getters.canvasNodeByName(SET_NODE_NAME).click().click(); + cy.get('body').type('{backspace}'); + + // First undo: Should return deleted node + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.length', 4); + WorkflowPage.getters.nodeConnections().should('have.length', 3); + // Second undo: Should move first node to it's original position + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().first().should('have.attr', 'style', 'left: 420px; top: 260px;'); + // Third undo: Should enable last node + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.disabledNodes().should('have.length', 0); + + // First redo: Should disable last node + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.disabledNodes().should('have.length', 1); + // Second redo: Should move the first node + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().first().should('have.attr', 'style', 'left: 540px; top: 400px;'); + // Third redo: Should delete the Set node + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.length', 3); + WorkflowPage.getters.nodeConnections().should('have.length', 2); + }); +}); diff --git a/cypress/e2e/7-workflow-actions.cy.ts b/cypress/e2e/7-workflow-actions.cy.ts index 4757140e2f..798829fb2a 100644 --- a/cypress/e2e/7-workflow-actions.cy.ts +++ b/cypress/e2e/7-workflow-actions.cy.ts @@ -1,9 +1,7 @@ +import { CODE_NODE_NAME, MANUAL_TRIGGER_NODE_NAME, SCHEDULE_TRIGGER_NODE_NAME } from '../constants'; import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; const NEW_WORKFLOW_NAME = 'Something else'; -const MANUAL_TRIGGER_NODE_NAME = 'Manual Trigger'; -const SCHEDULE_TRIGGER_NODE_NAME = 'Schedule Trigger'; -const CODE_NODE = 'Code' const TEST_WF_TAGS = ['Tag 1', 'Tag 2', 'Tag 3']; const WorkflowPage = new WorkflowPageClass(); @@ -95,7 +93,7 @@ describe('Workflow Actions', () => { const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}'; WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); - WorkflowPage.actions.addNodeToCanvas(CODE_NODE); + WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); WorkflowPage.getters.canvasNodes().should('have.have.length', 2); cy.get("#node-creator").should('not.exist'); diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index 432cbcefc8..ef5cb62190 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -34,6 +34,12 @@ export class WorkflowPage extends BasePage { nodeViewRoot: () => cy.getByTestId('node-view-root'), copyPasteInput: () => cy.getByTestId('hidden-copy-paste'), + nodeConnections: () => cy.get('.jtk-connector'), + zoomToFitButton: () => cy.getByTestId('zoom-to-fit'), + nodeEndpoints: () => cy.get('.jtk-endpoint-connected'), + disabledNodes: () => cy.get('.node-box.disabled'), + nodeNameContainerNDV: () => cy.getByTestId('node-title-container'), + nodeRenameInput: () => cy.getByTestId('node-rename-input'), }; actions = { visit: () => { @@ -104,5 +110,24 @@ export class WorkflowPage extends BasePage { zoomToFit: () => { cy.getByTestId('zoom-to-fit').click(); }, + hitUndo: () => { + const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}'; + cy.get('body').type(metaKey, { delay: 500, release: false }).type('z'); + }, + hitRedo: () => { + const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}'; + cy.get('body'). + type(metaKey, { delay: 500, release: false }). + type('{shift}', { release: false }). + type('z'); + }, + selectAll: () => { + const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}'; + cy.get('body').type(metaKey, { delay: 500, release: false }).type('a'); + }, + hitDisableNodeShortcut: () => { + const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}'; + cy.get('body').type(metaKey, { delay: 500, release: false }).type('d'); + }, }; } diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index ee86bb2a7e..7022f98c73 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -146,6 +146,7 @@ Cypress.Commands.add('grantBrowserPermissions', (...permissions: string[]) => { } }); Cypress.Commands.add('readClipboard', () => cy.window().its('navigator.clipboard').invoke('readText')); + Cypress.Commands.add('paste', { prevSubject: true }, (selector, pastePayload) => { // https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event cy.wrap(selector).then($destination => { @@ -157,3 +158,19 @@ Cypress.Commands.add('paste', { prevSubject: true }, (selector, pastePayload) => $destination[0].dispatchEvent(pasteEvent); }); }); + +Cypress.Commands.add('drag', (selector, xDiff, yDiff) => { + const element = cy.get(selector); + element.should('exist'); + + const originalLocation = Cypress.$(selector)[0].getBoundingClientRect(); + + element.trigger('mousedown'); + element.trigger('mousemove', { + which: 1, + pageX: originalLocation.right + xDiff, + pageY: originalLocation.top + yDiff, + force: true, + }); + element.trigger('mouseup'); +}); diff --git a/cypress/support/index.ts b/cypress/support/index.ts index 32b0bc6ecf..299ba800b7 100644 --- a/cypress/support/index.ts +++ b/cypress/support/index.ts @@ -28,6 +28,7 @@ declare global { grantBrowserPermissions(...permissions: string[]): void; readClipboard(): Chainable; paste(pastePayload: string): void, + drag(selector: string, xDiff: number, yDiff: number): void, } } } diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index fe25ec4d23..fb3ad085b6 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -94,6 +94,7 @@ v-touch:tap="disableNode" class="option" :title="$locale.baseText('node.activateDeactivateNode')" + data-test-id="disable-node-button" > @@ -102,6 +103,7 @@ class="option" :title="$locale.baseText('node.duplicateNode')" v-if="isDuplicatable" + data-test-id="duplicate-node-button" > @@ -109,6 +111,7 @@ v-touch:tap="setNodeActive" class="option touch" :title="$locale.baseText('node.editNode')" + data-test-id="activate-node-button" > @@ -117,6 +120,7 @@ class="option" :title="$locale.baseText('node.executeNode')" v-if="!workflowRunning" + data-test-id="execute-node-button" > diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue index 495b4a43a6..9932c0c65e 100644 --- a/packages/editor-ui/src/components/NodeTitle.vue +++ b/packages/editor-ui/src/components/NodeTitle.vue @@ -1,5 +1,5 @@