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 @@ @@ -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'); + }); +});