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).
This commit is contained in:
Elias Meire 2023-12-11 09:50:21 +01:00 committed by GitHub
parent 76ab411bc0
commit 939e471ed1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 5 deletions

View file

@ -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

View file

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