fix(editor): Testing flaky resource mapper feature in e2e tests (#7165)

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

@@ -18,7 +18,7 @@
 			:expressionEvaluated="expressionValueComputed"
 			:additionalExpressionData="resolvedAdditionalExpressionData"
 			:label="label"
-			:data-test-id="`parameter-input-${parameter.name}`"
+			:data-test-id="`parameter-input-${parsedParameterName}`"
 			:event-bus="eventBus"
 			@focus="onFocus"
 			@blur="onBlur"
@@ -61,7 +61,7 @@ import type {
 import { isResourceLocatorValue } from 'n8n-workflow';
 import type { INodeUi, IUpdateInformation, TargetItem } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { isValueExpression } from '@/utils';
+import { isValueExpression, parseResourceMapperFieldName } from '@/utils';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useEnvironmentsStore, useExternalSecretsStore } from '@/stores';
 
@@ -226,6 +226,9 @@ export default defineComponent({
 				...this.additionalExpressionData,
 			};
 		},
+		parsedParameterName() {
+			return parseResourceMapperFieldName(this.parameter?.name ?? '');
+		},
 	},
 	methods: {
 		onFocus() {

packages/editor-ui/src/components/ResourceMapper/MappingFields.vue

@@ -242,6 +242,10 @@ function getParamType(field: ResourceMapperField): NodePropertyTypes {
 	return 'string';
 }
 
+function getParsedFieldName(fullName: string): string {
+	return parseResourceMapperFieldName(fullName) ?? fullName;
+}
+
 function onValueChanged(value: IUpdateInformation): void {
 	emit('fieldValueChanged', value);
 }
@@ -344,7 +348,7 @@ defineExpose({
 							},
 						})
 					"
-					data-test-id="remove-field-button"
+					:data-test-id="`remove-field-button-${getParsedFieldName(field.name)}`"
 					@click="removeField(field.name)"
 				/>
 			</div>

packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts

@@ -223,7 +223,11 @@ describe('ResourceMapper.vue', () => {
 		expect(
 			getByTestId('mapping-fields-container').querySelectorAll('.parameter-input').length,
 		).toBe(4);
-		expect(queryAllByTestId('remove-field-button').length).toBe(1);
+		expect(
+			getByTestId('mapping-fields-container').querySelectorAll(
+				'[data-test-id^="remove-field-button"]',
+			).length,
+		).toBe(1);
 	});
 
 	it('should render correct options based on saved schema', async () => {
@@ -291,55 +295,4 @@ describe('ResourceMapper.vue', () => {
 		await waitAllPromises();
 		expect(fetchFieldsSpy).not.toHaveBeenCalled();
 	});
-
-	it.skip('should delete fields from UI and parameter value when they are deleted', async () => {
-		const { getByTestId, emitted } = renderComponent({
-			props: {
-				node: {
-					parameters: {
-						columns: {
-							schema: null,
-						},
-					},
-				},
-			},
-		});
-		await waitAllPromises();
-		// Add some values so we can test if they are gone after deletion
-		const idInput = getByTestId('parameter-input-value["id"]').querySelector('input');
-		const firstNameInput = getByTestId('parameter-input-value["First name"]').querySelector(
-			'input',
-		);
-		const lastNameInput = getByTestId('parameter-input-value["Last name"]').querySelector('input');
-		const usernameInput = getByTestId('parameter-input-value["Username"]').querySelector('input');
-		const addressInput = getByTestId('parameter-input-value["Address"]').querySelector('input');
-		if (idInput && firstNameInput && lastNameInput && usernameInput && addressInput) {
-			await userEvent.type(idInput, '123');
-			await userEvent.type(firstNameInput, 'John');
-			await userEvent.type(lastNameInput, 'Doe');
-			await userEvent.type(usernameInput, 'johndoe');
-			await userEvent.type(addressInput, '123 Main St');
-			// All field values should be in parameter value
-			const valueBeforeRemove = getLatestValueChangeEvent(emitted());
-			expect(valueBeforeRemove[0].value.value).toHaveProperty('id');
-			expect(valueBeforeRemove[0].value.value).toHaveProperty('First name');
-			expect(valueBeforeRemove[0].value.value).toHaveProperty('Last name');
-			expect(valueBeforeRemove[0].value.value).toHaveProperty('Username');
-			expect(valueBeforeRemove[0].value.value).toHaveProperty('Address');
-			// Click on 'Remove all fields' option
-			await userEvent.click(getByTestId('columns-parameter-input-options-container'));
-			await userEvent.click(getByTestId('action-removeAllFields'));
-			// Should delete all non-mandatory fields:
-			// 1. From UI
-			expect(
-				getByTestId('resource-mapper-container').querySelectorAll('.parameter-item').length,
-			).toBe(3);
-			// 2. And their values from parameter value
-			const valueAfterRemove = getLatestValueChangeEvent(emitted());
-			expect(valueAfterRemove[0].value.value).not.toHaveProperty('Username');
-			expect(valueAfterRemove[0].value.value).not.toHaveProperty('Address');
-		} else {
-			throw new Error('Could not find input fields');
-		}
-	});
 });

packages/nodes-base/nodes/E2eTest/E2eTest.node.ts

@@ -202,6 +202,14 @@ export class E2eTest implements INodeType {
 	};
 
 	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
+		const operation = this.getNodeParameter('operation', 0);
+		// For resource mapper testing, return actual node values
+		if (operation === 'resourceMapper') {
+			const rmValue = this.getNodeParameter('resourceMapper.value', 0);
+			if (rmValue) {
+				return [[{ json: rmValue as INodeExecutionData }]];
+			}
+		}
 		return [returnData];
 	}
 }

packages/nodes-base/nodes/E2eTest/mock.ts

@@ -51,6 +51,15 @@ export const resourceMapperFields: ResourceMapperFields = {
 			display: true,
 			type: 'string',
 		},
+		{
+			id: 'age',
+			displayName: 'Age',
+			defaultMatch: false,
+			canBeUsedToMatch: false,
+			required: false,
+			display: true,
+			type: 'number',
+		},
 	],
 };