refactor(editor): Migrate FixedCollectionParameter to composition API (…

…#11555)

Co-authored-by: Elias Meire <elias@meire.dev>

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

@@ -22,6 +22,7 @@ import DraggableTarget from './DraggableTarget.vue';
 import { dropInExpressionEditor } from '@/plugins/codemirror/dragAndDrop';
 
 import { APP_MODALS_ELEMENT_ID } from '@/constants';
+import { N8nInput, N8nText } from 'n8n-design-system';
 
 type Props = {
 	parameter: INodeProperties;

packages/editor-ui/src/components/FixedCollectionParameter.test.ts

@@ -0,0 +1,110 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import { cleanupAppModals, createAppModals, SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import FixedCollectionParameter, { type Props } from '@/components/FixedCollectionParameter.vue';
+import { STORES } from '@/constants';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { setActivePinia } from 'pinia';
+describe('FixedCollectionParameter.vue', () => {
+	const pinia = createTestingPinia({
+		initialState: {
+			[STORES.SETTINGS]: {
+				settings: SETTINGS_STORE_DEFAULT_STATE.settings,
+			},
+		},
+	});
+	setActivePinia(pinia);
+
+	const props: Props = {
+		parameter: {
+			displayName: 'Routing Rules',
+			name: 'rules',
+			placeholder: 'Add Routing Rule',
+			type: 'fixedCollection',
+			typeOptions: {
+				multipleValues: true,
+				sortable: true,
+			},
+			default: '',
+			options: [
+				{
+					name: 'values',
+					displayName: 'Values',
+					values: [
+						{
+							displayName: 'Output Name',
+							name: 'outputKey',
+							type: 'string',
+							default: 'Default Output Name',
+						},
+					],
+				},
+			],
+		},
+		path: 'parameters.rules',
+		nodeValues: {
+			parameters: {
+				rules: { values: [{ outputKey: 'Test Output Name' }] },
+			},
+		},
+		values: {
+			values: [{ outputKey: 'Test Output Name' }],
+		},
+		isReadOnly: false,
+	};
+	const renderComponent = createComponentRenderer(FixedCollectionParameter, { props });
+
+	beforeEach(() => {
+		createAppModals();
+	});
+
+	afterEach(() => {
+		cleanupAppModals();
+	});
+
+	it('renders the component', () => {
+		const { getByTestId } = renderComponent();
+		expect(getByTestId('fixed-collection-rules')).toBeInTheDocument();
+		expect(getByTestId('fixed-collection-add')).toBeInTheDocument();
+		expect(getByTestId('fixed-collection-delete')).toBeInTheDocument();
+		expect(getByTestId('parameter-item')).toBeInTheDocument();
+	});
+
+	it('computes placeholder text correctly', () => {
+		const { getByTestId } = renderComponent();
+		expect(getByTestId('fixed-collection-add')).toHaveTextContent('Add Routing Rule');
+	});
+
+	it('emits valueChanged event on option creation', async () => {
+		const { getByTestId, emitted } = renderComponent();
+		await userEvent.click(getByTestId('fixed-collection-add'));
+		expect(emitted('valueChanged')).toEqual([
+			[
+				{
+					name: 'parameters.rules.values',
+					value: [{ outputKey: 'Test Output Name' }, { outputKey: 'Default Output Name' }],
+				},
+			],
+		]);
+	});
+
+	it('emits valueChanged event on option deletion', async () => {
+		const { getByTestId, emitted } = renderComponent({
+			props: {
+				...props,
+				values: {
+					values: [{ outputKey: 'Test' }],
+				},
+			},
+		});
+		await userEvent.click(getByTestId('fixed-collection-delete'));
+		expect(emitted('valueChanged')).toEqual([
+			[
+				{
+					name: 'parameters.rules.values',
+					value: undefined,
+				},
+			],
+		]);
+	});
+});