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

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -6,6 +6,7 @@
 					:name="workflowName"
 					:limit="value"
 					:custom="true"
+					testId="workflow-name-input"
 				>
 					<template #default="{ shortenedName }">
 						<InlineTextEdit
@@ -17,7 +18,6 @@
 							@submit="onNameSubmit"
 							placeholder="Enter workflow name"
 							class="name"
-							data-test-id="workflow-name-input"
 						/>
 					</template>
 				</ShortenName>
@@ -80,11 +80,12 @@
 					type="secondary"
 					:saved="!this.isDirty && !this.isNewWorkflow"
 					:disabled="isWorkflowSaving"
+					data-test-id="workflow-save-button"
 					@click="onSaveButtonClick"
 				/>
 				<div :class="$style.workflowMenuContainer">
 					<input :class="$style.hiddenInput" type="file" ref="importFile" data-test-id="workflow-import-input" @change="handleFileImport()">
-					<n8n-action-dropdown :items="workflowMenuItems" @select="onWorkflowMenuSelect" />
+					<n8n-action-dropdown :items="workflowMenuItems" data-test-id="workflow-menu" @select="onWorkflowMenuSelect" />
 				</div>
 			</template>
 		</PushConnectionTracker>

packages/editor-ui/src/components/ShortenName.vue

@@ -1,5 +1,5 @@
 <template>
-	<span :title="name">
+	<span :title="name" :data-test-id="testId">
 		<slot :shortenedName="shortenedName"></slot>
 	</span>
 </template>
@@ -13,7 +13,7 @@ const WORKFLOW_NAME_END_COUNT_TO_KEEP = 4;
 
 export default Vue.extend({
 	name: "ShortenName",
-	props: ["name", "limit"],
+	props: ["name", "limit", "testId"],
 	computed: {
 		shortenedName(): string {
 			return shorten(this.name, this.limit || DEFAULT_WORKFLOW_NAME_LIMIT, WORKFLOW_NAME_END_COUNT_TO_KEEP);

packages/editor-ui/src/components/WorkflowActivator.vue

@@ -16,11 +16,13 @@
 				v-loading="updatingWorkflowActivation"
 				:value="workflowActive"
 				@change="activeChanged"
-			  :title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
+			  	:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
 				:disabled="disabled || updatingWorkflowActivation"
 				:active-color="getActiveColor"
 				inactive-color="#8899AA"
-				element-loading-spinner="el-icon-loading">
+				element-loading-spinner="el-icon-loading"
+				data-test-id="workflow-activate-switch"
+			>
 			</el-switch>
 		</n8n-tooltip>