mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 20:54:07 -08:00
test(editor): Add e2e tests for undo/redo (#4904)
* ✨ 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
This commit is contained in:
Milorad FIlipović
GitHub
parent
5ca2148c7e
commit
69e9bf082b
|
|
@ -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'
|
||||
|
|
|
|||
283
cypress/e2e/10-undo-redo.cy.ts
Normal file
283
cypress/e2e/10-undo-redo.cy.ts
Normal file
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ declare global {
|
|||
grantBrowserPermissions(...permissions: string[]): void;
|
||||
readClipboard(): Chainable<string>;
|
||||
paste(pastePayload: string): void,
|
||||
drag(selector: string, xDiff: number, yDiff: number): void,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@
|
|||
v-touch:tap="disableNode"
|
||||
class="option"
|
||||
:title="$locale.baseText('node.activateDeactivateNode')"
|
||||
data-test-id="disable-node-button"
|
||||
>
|
||||
<font-awesome-icon :icon="nodeDisabledIcon" />
|
||||
</div>
|
||||
|
|
@ -102,6 +103,7 @@
|
|||
class="option"
|
||||
:title="$locale.baseText('node.duplicateNode')"
|
||||
v-if="isDuplicatable"
|
||||
data-test-id="duplicate-node-button"
|
||||
>
|
||||
<font-awesome-icon icon="clone" />
|
||||
</div>
|
||||
|
|
@ -109,6 +111,7 @@
|
|||
v-touch:tap="setNodeActive"
|
||||
class="option touch"
|
||||
:title="$locale.baseText('node.editNode')"
|
||||
data-test-id="activate-node-button"
|
||||
>
|
||||
<font-awesome-icon class="execute-icon" icon="cog" />
|
||||
</div>
|
||||
|
|
@ -117,6 +120,7 @@
|
|||
class="option"
|
||||
:title="$locale.baseText('node.executeNode')"
|
||||
v-if="!workflowRunning"
|
||||
data-test-id="execute-node-button"
|
||||
>
|
||||
<font-awesome-icon class="execute-icon" icon="play-circle" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span :class="$style.container" @click="onEdit">
|
||||
<span :class="$style.container" data-test-id="node-title-container" @click="onEdit">
|
||||
<span :class="$style.iconWrapper"><NodeIcon :nodeType="nodeType" :size="18" /></span>
|
||||
<n8n-popover placement="right" width="200" :value="editName" :disabled="readOnly">
|
||||
<div
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<n8n-text :bold="true" color="text-base" tag="div">{{
|
||||
$locale.baseText('ndv.title.renameNode')
|
||||
}}</n8n-text>
|
||||
<n8n-input ref="input" size="small" v-model="newName" />
|
||||
<n8n-input ref="input" size="small" v-model="newName" data-test-id="node-rename-input" />
|
||||
<div :class="$style.editButtons">
|
||||
<n8n-button
|
||||
type="secondary"
|
||||
|
|
|
|||
Loading…
Reference in a new issue