test: Add tests for parameter lag (#6942)

Github issue / Community forum post (link here to close automatically):

cypress/e2e/5-ndv.cy.ts

@@ -288,4 +288,29 @@ describe('NDV', () => {
 			ndv.getters.parameterInput('value').clear();
 		});
 	});
+
+	it('should flag issues as soon as params are set', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Webhook');
+		workflowPage.getters.canvasNodes().first().dblclick();
+
+		workflowPage.getters.nodeIssuesByName('Webhook').should('not.exist');
+		ndv.getters.nodeExecuteButton().should('not.be.disabled');
+		ndv.getters.triggerPanelExecuteButton().should('exist');
+
+		ndv.getters.parameterInput('path').clear();
+
+		ndv.getters.nodeExecuteButton().should('be.disabled');
+		ndv.getters.triggerPanelExecuteButton().should('not.exist');
+		ndv.actions.close();
+		workflowPage.getters.nodeIssuesByName('Webhook').should('exist');
+
+		workflowPage.getters.canvasNodes().first().dblclick();
+		ndv.getters.parameterInput('path').type('t')
+
+		ndv.getters.nodeExecuteButton().should('not.be.disabled');
+		ndv.getters.triggerPanelExecuteButton().should('exist');
+
+		ndv.actions.close();
+		workflowPage.getters.nodeIssuesByName('Webhook').should('not.exist');
+	});
 });

cypress/pages/ndv.ts

@@ -8,6 +8,7 @@ export class NDV extends BasePage {
 		copyInput: () => cy.getByTestId('copy-input'),
 		credentialInput: (eq = 0) => cy.getByTestId('node-credentials-select').eq(eq),
 		nodeExecuteButton: () => cy.getByTestId('node-execute-button'),
+		triggerPanelExecuteButton: () => cy.getByTestId('trigger-execute-button'),
 		inputSelect: () => cy.getByTestId('ndv-input-select'),
 		inputOption: () => cy.getByTestId('ndv-input-option'),
 		inputPanel: () => cy.getByTestId('ndv-input-panel'),

cypress/pages/workflow.ts

@@ -26,6 +26,10 @@ export class WorkflowPage extends BasePage {
 		canvasNodes: () => cy.getByTestId('canvas-node'),
 		canvasNodeByName: (nodeName: string) =>
 			this.getters.canvasNodes().filter(`:contains(${nodeName})`),
+		nodeIssuesByName: (nodeName: string) =>
+			this.getters.canvasNodes().filter(`:contains(${nodeName})`)
+			.should('have.length.greaterThan', 0)
+			.findChildByTestId('node-issues'),
 		getEndpointSelector: (type: 'input' | 'output' | 'plus', nodeName: string, index = 0) => {
 			return `[data-endpoint-name='${nodeName}'][data-endpoint-type='${type}'][data-input-index='${index}']`;
 		},

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

@@ -34,7 +34,7 @@
 					v-if="!data.disabled"
 					:class="{ 'node-info-icon': true, 'shift-icon': shiftOutputCount }"
 				>
-					<div v-if="hasIssues" class="node-issues">
+					<div v-if="hasIssues" class="node-issues" data-test-id="node-issues">
 						<n8n-tooltip placement="bottom">
 							<template #content>
 								<titled-list :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />

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

@@ -29,6 +29,7 @@
 						@copy="onTestLinkCopied"
 					></CopyInput>
 					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
 						:nodeName="nodeName"
 						@execute="onNodeExecute"
 						size="medium"
@@ -49,6 +50,7 @@
 						</n8n-text>
 					</div>
 					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
 						:nodeName="nodeName"
 						@execute="onNodeExecute"
 						size="medium"
@@ -72,6 +74,7 @@
 					</div>
 
 					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
 						:nodeName="nodeName"
 						@execute="onNodeExecute"
 						size="medium"