From 939e471ed1c54ee9a4578d530d7e7d097499af2b Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 11 Dec 2023 09:50:21 +0100
Subject: [PATCH] fix(editor): Fix collection select label (no-changelog)
 (#7978)

## Summary

before & after


![image](https://github.com/n8n-io/n8n/assets/8850410/9eef4b99-4cab-41de-ad82-7dadb653f307)

<img width="575" alt="image"
src="https://github.com/n8n-io/n8n/assets/8850410/e7d5ecd5-427e-4664-897f-5a42e68e3661">

#### How to test the change:
1. Add Pipedrive > Create Deal
2. Click on "Add Field" under "Additional Fields"
3. Options should be properly displayed (Title case)


## Issues fixed
https://linear.app/n8n/issue/NODE-977

## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again. A feature is not complete without tests.
  >
> *(internal)* You can use Slack commands to trigger [e2e
tests](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#a39f9e5ba64a48b58a71d81c837e8227)
or [deploy test
instance](https://www.notion.so/n8n/How-to-use-Test-Instances-d65f49dfc51f441ea44367fb6f67eb0a?pvs=4#f6a177d32bde4b57ae2da0b8e454bfce)
or [deploy early access version on
Cloud](https://www.notion.so/n8n/Cloudbot-3dbe779836004972b7057bc989526998?pvs=4#fef2d36ab02247e1a0f65a74f6fb534e).
---
 .../src/components/CollectionParameter.vue    | 18 +++++--
 .../__tests__/CollectionParameter.test.ts     | 49 +++++++++++++++++++
 2 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 packages/editor-ui/src/components/__tests__/CollectionParameter.test.ts

diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 1296b3c014272..4b414f38d3485 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -36,12 +36,9 @@
 						<n8n-option
 							v-for="item in parameterOptions"
 							:key="item.name"
-							:label="
-								isNodePropertyCollection(item)
-									? i18n.nodeText().collectionOptionDisplayName(parameter, item, path)
-									: item.name
-							"
+							:label="getParameterOptionLabel(item)"
 							:value="item.name"
+							data-test-id="collection-parameter-option"
 						>
 						</n8n-option>
 					</n8n-select>
@@ -93,12 +90,23 @@ const getPlaceholderText = computed(() => {
 		i18n.baseText('collectionParameter.choose')
 	);
 });
+
 function isNodePropertyCollection(
 	object: INodePropertyOptions | INodeProperties | INodePropertyCollection,
 ): object is INodePropertyCollection {
 	return 'values' in object;
 }
 
+function getParameterOptionLabel(
+	item: INodePropertyOptions | INodeProperties | INodePropertyCollection,
+): string {
+	if (isNodePropertyCollection(item)) {
+		return i18n.nodeText().collectionOptionDisplayName(props.parameter, item, props.path);
+	}
+
+	return 'displayName' in item ? item.displayName : item.name;
+}
+
 function displayNodeParameter(parameter: INodeProperties) {
 	if (parameter.displayOptions === undefined) {
 		// If it is not defined no need to do a proper check
diff --git a/packages/editor-ui/src/components/__tests__/CollectionParameter.test.ts b/packages/editor-ui/src/components/__tests__/CollectionParameter.test.ts
new file mode 100644
index 0000000000000..8f1c0b0af2d14
--- /dev/null
+++ b/packages/editor-ui/src/components/__tests__/CollectionParameter.test.ts
@@ -0,0 +1,49 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import { createTestingPinia } from '@pinia/testing';
+import CollectionParameter from '../CollectionParameter.vue';
+
+const renderComponent = createComponentRenderer(CollectionParameter, {
+	pinia: createTestingPinia(),
+});
+
+describe('CollectionParameter', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render collection options correctly', async () => {
+		const { getAllByTestId } = renderComponent({
+			props: {
+				path: 'parameters.additionalFields',
+				parameter: {
+					displayName: 'Additional Fields',
+					name: 'additionalFields',
+					type: 'collection',
+					options: [
+						{
+							displayName: 'Currency',
+							name: 'currency',
+							type: 'string',
+							default: 'USD',
+						},
+						{
+							displayName: 'Value',
+							name: 'value',
+							type: 'number',
+						},
+					],
+				},
+				nodeValues: {
+					parameters: {
+						additionalFields: {},
+					},
+				},
+			},
+		});
+
+		const options = getAllByTestId('collection-parameter-option');
+		expect(options.length).toBe(2);
+		expect(options.at(0)).toHaveTextContent('Currency');
+		expect(options.at(1)).toHaveTextContent('Value');
+	});
+});