test: Setup e2e tests for workflow actions (#4724)

* ✅ Adding first batch of workflow actions tests
* ✅ Adding loading handling logic and new workflow actions tests
* ✅ Added workflow activation and rename tests
* 👌 Addressing review feedback
* 🔥 Removing leftover commented code

cypress/e2e/5-workflow-actions.cy.ts

@@ -0,0 +1,70 @@
+import { randFirstName, randLastName } from "@ngneat/falso";
+import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } 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 username = DEFAULT_USER_EMAIL;
+const password = DEFAULT_USER_PASSWORD;
+const firstName = randFirstName();
+const lastName = randLastName();
+const WorkflowPage = new WorkflowPageClass();
+
+describe('Workflow Actions', () => {
+	beforeEach(() => {
+		cy.signup(username, firstName, lastName, password);
+		cy.on('uncaught:exception', (err, runnable) => {
+			expect(err.message).to.include('Not logged in');
+
+			return false;
+		})
+
+		cy.signin(username, password);
+
+		WorkflowPage.actions.visit();
+	});
+
+	it('should be able to save on button slick', () => {
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+		// In Element UI, disabled button turn into spans 🤷‍♂️
+		WorkflowPage.getters.saveButton().should('match', 'span');
+	});
+
+	it('should save workflow on keyboard shortcut', () => {
+		WorkflowPage.actions.saveWorkflowUsingKeyboardShortcut();
+		WorkflowPage.getters.saveButton().should('match', 'span');
+	});
+
+	it('should not be able to activate unsaved workflow', () => {
+		WorkflowPage.getters.activatorSwitch().find('input').first().should('be.disabled');
+	});
+
+	it('should not be able to activate workflow without trigger node', () => {
+		// Manual trigger is not enough to activate the workflow
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+		WorkflowPage.getters.activatorSwitch().find('input').first().should('be.disabled');
+	});
+
+	it('should be able to activate workflow', () => {
+		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+		WorkflowPage.actions.activateWorkflow();
+		WorkflowPage.getters.activatorSwitch().should('have.class', 'is-checked');
+	});
+
+	it('should save new workflow after renaming', () => {
+		WorkflowPage.actions.renameWorkflow(NEW_WORKFLOW_NAME);
+		WorkflowPage.getters.saveButton().should('match', 'span');
+	});
+
+	it('should rename workflow', () => {
+		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+		WorkflowPage.actions.renameWorkflow(NEW_WORKFLOW_NAME);
+		WorkflowPage.getters.saveButton().should('match', 'span');
+		WorkflowPage.getters.workflowNameInput().invoke('attr', 'title').should('eq', NEW_WORKFLOW_NAME);
+	});
+});

cypress/pages/workflow.ts

@@ -3,13 +3,10 @@ import { BasePage } from './base';
 export class WorkflowPage extends BasePage {
 	url = '/workflow/new';
 	getters = {
-		workflowNameInput: () =>
-			cy
-				.getByTestId('workflow-name-input', { timeout: 5000 })
-				.then(($el) => cy.wrap($el.find('input'))),
+		workflowNameInput: () => cy.getByTestId('workflow-name-input'),
 		workflowImportInput: () => cy.getByTestId('workflow-import-input'),
 		workflowTags: () => cy.getByTestId('workflow-tags'),
-		saveButton: () => cy.getByTestId('save-button'),
+		saveButton: () => cy.getByTestId('workflow-save-button'),
 
 		nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'),
 		nodeCreatorPlusButton: () => cy.getByTestId('node-creator-plus-button'),
@@ -24,6 +21,9 @@ export class WorkflowPage extends BasePage {
 		ndvParameterInput: (parameterName: string) =>
 			cy.getByTestId(`parameter-input-${parameterName}`),
 		ndvOutputPanel: () => cy.getByTestId('output-panel'),
+		activatorSwitch: () => cy.getByTestId('workflow-activate-switch'),
+		workflowMenu: () => cy.getByTestId('workflow-menu'),
+		firstStepButton: () => cy.getByTestId('canvas-add-button'),
 	};
 
 	actions = {
@@ -46,5 +46,30 @@ export class WorkflowPage extends BasePage {
 		executeNodeFromNdv: () => {
 			cy.contains('Execute node').click();
 		},
+		visit: () => {
+			cy.visit(this.url);
+			cy.getByTestId('node-view-loader', { timeout: 5000 }).should('not.exist');
+			cy.get('.el-loading-mask', { timeout: 5000 }).should('not.exist');
+		},
+		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.workflowNameInput().click();
+			cy.get('body').type('{selectall}');
+			cy.get('body').type(newName);
+			cy.get('body').type('{enter}');
+		},
 	};
 }