mirror of
https://github.com/n8n-io/n8n.git
synced 2024-09-20 06:47:32 -07:00
69e9bf082b
* ✨ 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
134 lines
5.7 KiB
TypeScript
134 lines
5.7 KiB
TypeScript
import { BasePage } from './base';
|
|
|
|
export class WorkflowPage extends BasePage {
|
|
url = '/workflow/new';
|
|
getters = {
|
|
workflowNameInputContainer: () => cy.getByTestId('workflow-name-input', { timeout: 5000 }),
|
|
workflowNameInput: () => this.getters.workflowNameInputContainer().then(($el) => cy.wrap($el.find('input'))),
|
|
workflowImportInput: () => cy.getByTestId('workflow-import-input'),
|
|
workflowTags: () => cy.getByTestId('workflow-tags'),
|
|
workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'),
|
|
workflowTagsInput: () => this.getters.workflowTagsContainer().then(($el) => cy.wrap($el.find('input').first())),
|
|
workflowTagElements: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span'),
|
|
firstWorkflowTagElement: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span:nth-child(1)'),
|
|
workflowTagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'),
|
|
newTagLink: () => cy.getByTestId('new-tag-link'),
|
|
saveButton: () => cy.getByTestId('workflow-save-button'),
|
|
nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'),
|
|
nodeCreatorPlusButton: () => cy.getByTestId('node-creator-plus-button'),
|
|
canvasPlusButton: () => cy.getByTestId('canvas-plus-button'),
|
|
canvasNodes: () => cy.getByTestId('canvas-node'),
|
|
canvasNodeByName: (nodeName: string) => this.getters.canvasNodes().filter(`:contains("${nodeName}")`),
|
|
ndvParameterInput: (parameterName: string) =>
|
|
cy.getByTestId(`parameter-input-${parameterName}`),
|
|
ndvOutputPanel: () => cy.getByTestId('output-panel'),
|
|
ndvRunDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
|
|
successToast: () => cy.get('.el-notification__title'),
|
|
activatorSwitch: () => cy.getByTestId('workflow-activate-switch'),
|
|
workflowMenu: () => cy.getByTestId('workflow-menu'),
|
|
firstStepButton: () => cy.getByTestId('canvas-add-button'),
|
|
isWorkflowSaved: () => this.getters.saveButton().should('match', 'span'), // In Element UI, disabled button turn into spans 🤷♂️
|
|
isWorkflowActivated: () => this.getters.activatorSwitch().should('have.class', 'is-checked'),
|
|
expressionModalInput: () => cy.getByTestId('expression-modal-input'),
|
|
expressionModalOutput: () => cy.getByTestId('expression-modal-output'),
|
|
|
|
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: () => {
|
|
cy.visit(this.url);
|
|
cy.waitForLoad();
|
|
},
|
|
addInitialNodeToCanvas: (nodeDisplayName: string) => {
|
|
this.getters.canvasPlusButton().click();
|
|
this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
|
|
this.getters.nodeCreatorSearchBar().type('{enter}');
|
|
cy.get('body').type('{esc}');
|
|
},
|
|
addNodeToCanvas: (nodeDisplayName: string) => {
|
|
this.getters.nodeCreatorPlusButton().click();
|
|
this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
|
|
this.getters.nodeCreatorSearchBar().type('{enter}');
|
|
cy.get('body').type('{esc}');
|
|
},
|
|
openNodeNdv: (nodeTypeName: string) => {
|
|
this.getters.canvasNodeByName(nodeTypeName).dblclick();
|
|
},
|
|
openExpressionEditor: () => {
|
|
cy.get('input[value="expression"]').parent('label').click();
|
|
},
|
|
typeIntoParameterInput: (parameterName: string, content: string) => {
|
|
this.getters.ndvParameterInput(parameterName).type(content);
|
|
},
|
|
selectOptionInParameterDropdown: (parameterName: string, content: string) => {
|
|
this.getters
|
|
.ndvParameterInput(parameterName)
|
|
.find('.option-headline')
|
|
.contains(content)
|
|
.click();
|
|
},
|
|
executeNodeFromNdv: () => {
|
|
cy.contains('Execute node').click();
|
|
},
|
|
openWorkflowMenu: () => {
|
|
this.getters.workflowMenu().click();
|
|
},
|
|
saveWorkflowOnButtonClick: () => {
|
|
this.getters.saveButton().click();
|
|
},
|
|
saveWorkflowUsingKeyboardShortcut: () => {
|
|
cy.get('body').type('{meta}', { release: false }).type('s');
|
|
},
|
|
activateWorkflow: () => {
|
|
this.getters.activatorSwitch().find('input').first().should('be.enabled');
|
|
this.getters.activatorSwitch().click();
|
|
cy.get('body').type('{esc}');
|
|
},
|
|
renameWorkflow: (newName: string) => {
|
|
this.getters.workflowNameInputContainer().click();
|
|
cy.get('body').type('{selectall}');
|
|
cy.get('body').type(newName);
|
|
cy.get('body').type('{enter}');
|
|
},
|
|
addTags: (tags: string[]) => {
|
|
tags.forEach(tag => {
|
|
this.getters.workflowTagsInput().type(tag);
|
|
this.getters.workflowTagsInput().type('{enter}');
|
|
});
|
|
cy.get('body').type('{enter}');
|
|
// For a brief moment the Element UI tag component shows the tags as(+X) string
|
|
// so we need to wait for it to disappear
|
|
this.getters.workflowTagsContainer().should('not.contain', `+${tags.length}`);
|
|
},
|
|
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');
|
|
},
|
|
};
|
|
}
|