From 6a6fbb6e6c6cdb30f7e27bb77d437c6fcfd77697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Thu, 27 Jul 2023 12:43:18 +0200
Subject: [PATCH] fix(editor): Fix `ResourceMapper` unit tests (#6758)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✔️ Fix matching columns test

* ✔️ Fix multiple matching columns test

* ✔️ Removing `skip` from the last test
---
 .../ResourceMapper/MatchingColumnsSelect.vue  | 14 ++++++-
 .../__tests__/ResourceMapper.test.ts          | 41 ++++++++-----------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue b/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
index b09e2b4128..198524e088 100644
--- a/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
+++ b/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue
@@ -113,7 +113,12 @@ function onSelectionChange(value: string | string[]) {
 }
 
 function emitValueChanged() {
-	emit('matchingColumnsChanged', Array.isArray(state.selected) ? state.selected : [state.selected]);
+	if (state.selected) {
+		emit(
+			'matchingColumnsChanged',
+			Array.isArray(state.selected) ? state.selected : [state.selected],
+		);
+	}
 }
 
 defineExpose({
@@ -140,7 +145,12 @@ defineExpose({
 				:teleported="teleported"
 				@update:modelValue="onSelectionChange"
 			>
-				<n8n-option v-for="field in availableMatchingFields" :key="field.id" :value="field.id">
+				<n8n-option
+					v-for="field in availableMatchingFields"
+					:key="field.id"
+					:value="field.id"
+					:data-test-id="`matching-column-option-${field.id}`"
+				>
 					{{ field.displayName }}
 				</n8n-option>
 			</n8n-select>
diff --git a/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts b/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts
index 8c523ae056..f1e487e3ef 100644
--- a/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts
+++ b/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts
@@ -1,4 +1,3 @@
-import { within } from '@testing-library/vue';
 import {
 	DEFAULT_SETUP,
 	MAPPING_COLUMNS_RESPONSE,
@@ -108,7 +107,7 @@ describe('ResourceMapper.vue', () => {
 		expect(queryByTestId('mapping-mode-select')).not.toBeInTheDocument();
 	});
 
-	it.skip('renders field on top of the list when they are selected for matching', async () => {
+	it('renders field on top of the list when they are selected for matching', async () => {
 		const { container, getByTestId } = renderComponent(
 			{
 				props: {
@@ -129,16 +128,16 @@ describe('ResourceMapper.vue', () => {
 		expect(getByTestId('resource-mapper-container')).toBeInTheDocument();
 		// Id should be the first field in the list
 		expect(container.querySelector('.parameter-item')).toContainHTML('id (using to match)');
-		// // Select Last Name as matching column
-		await userEvent.click(getByTestId('matching-column-select'));
-		const matchingColumnDropdown = getByTestId('matching-column-select');
-		await userEvent.click(within(matchingColumnDropdown).getByText('Last Name'));
-		// // Now, last name should be the first field in the list
-		expect(container.querySelector('.parameter-item')).toContainHTML('Last Name (using to match)');
+		// Select Last Name as matching column
+		await userEvent.click(getByTestId('matching-column-option-Last name'));
+		// Now, last name should be the first field in the list
+		expect(container.querySelector('.parameter-item  div.title')).toHaveTextContent(
+			'Last name (using to match)',
+		);
 	});
 
-	it.skip('renders selected matching columns properly when multiple key matching is enabled', async () => {
-		const { getByTestId, getByText, queryByText } = renderComponent(
+	it('renders selected matching columns properly when multiple key matching is enabled', async () => {
+		const { getByTestId, getAllByText, queryByText } = renderComponent(
 			{
 				props: {
 					parameter: {
@@ -156,25 +155,19 @@ describe('ResourceMapper.vue', () => {
 		);
 		await waitAllPromises();
 		expect(getByTestId('resource-mapper-container')).toBeInTheDocument();
-		const matchingColumnDropdown = getByTestId('matching-column-select');
-		await userEvent.click(matchingColumnDropdown);
-		await userEvent.click(within(matchingColumnDropdown).getByText('Username'));
-
-		// Both matching columns should be rendered in the dropdown
-		expect(getByTestId('matching-column-select')).toContainHTML(
-			'<span class="el-select__tags-text">id</span>',
-		);
-		expect(getByTestId('matching-column-select')).toContainHTML(
-			'<span class="el-select__tags-text">Username</span>',
-		);
+		await userEvent.click(getByTestId('matching-column-option-Username'));
 
+		// Both matching columns (id and Username) should be rendered in the dropdown
+		expect(
+			getByTestId('matching-column-select').querySelector('.el-select  > div'),
+		).toHaveTextContent('idUsername');
 		// All selected columns should have correct labels
-		expect(getByText('id (using to match)')).toBeInTheDocument();
-		expect(getByText('Username (using to match)')).toBeInTheDocument();
+		expect(getAllByText('id (using to match)')[0]).toBeInTheDocument();
+		expect(getAllByText('Username (using to match)')[0]).toBeInTheDocument();
 		expect(queryByText('First Name (using to match)')).not.toBeInTheDocument();
 	});
 
-	it.skip('uses field words defined in node definition', async () => {
+	it('uses field words defined in node definition', async () => {
 		const { getByText } = renderComponent(
 			{
 				props: {