fix(editor): Emit change events from filter component on update (#9479)

n8n-io · May 22, 2024 · 62df433 · 62df433
1 parent 0cb977b
commit 62df433
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -21,6 +21,7 @@ import {
 	operatorTypeToNodeProperty,
 	resolveCondition,
 } from './utils';
+import { useDebounce } from '@/composables/useDebounce';
 
 interface Props {
 	path: string;
@@ -47,6 +48,7 @@ const emit = defineEmits<{
 }>();
 
 const i18n = useI18n();
+const { debounce } = useDebounce();
 
 const condition = ref<FilterConditionValue>(props.condition);
 
@@ -101,12 +103,16 @@ const rightParameter = computed<INodeProperties>(() => {
 	};
 });
 
+const debouncedEmitUpdate = debounce(() => emit('update', condition.value), { debounceTime: 500 });
+
 const onLeftValueChange = (update: IUpdateInformation<NodeParameterValue>): void => {
 	condition.value.leftValue = update.value;
+	debouncedEmitUpdate();
 };
 
 const onRightValueChange = (update: IUpdateInformation<NodeParameterValue>): void => {
 	condition.value.rightValue = update.value;
+	debouncedEmitUpdate();
 };
 
 const onOperatorChange = (value: string): void => {
@@ -117,15 +123,15 @@ const onOperatorChange = (value: string): void => {
 		newOperator,
 	});
 
-	emit('update', condition.value);
+	debouncedEmitUpdate();
 };
 
 const onRemove = (): void => {
 	emit('remove');
 };
 
 const onBlur = (): void => {
-	emit('update', condition.value);
+	debouncedEmitUpdate();
 };
 </script>
 

diff --git a/packages/editor-ui/src/components/FilterConditions/__tests__/FilterConditions.test.ts b/packages/editor-ui/src/components/FilterConditions/__tests__/FilterConditions.test.ts
@@ -5,8 +5,9 @@ import { STORES } from '@/constants';
 import { useNDVStore } from '@/stores/ndv.store';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
-import { within } from '@testing-library/vue';
+import { within, waitFor } from '@testing-library/vue';
 import { getFilterOperator } from '../utils';
+import { get } from 'lodash-es';
 
 const DEFAULT_SETUP = {
 	pinia: createTestingPinia({
@@ -274,6 +275,68 @@ describe('FilterConditions.vue', () => {
 		expect(conditions[0].querySelector('[data-test-id="filter-remove-condition"]')).toBeNull();
 	});
 
+	it('can edit conditions', async () => {
+		const { getByTestId, emitted } = renderComponent({
+			...DEFAULT_SETUP,
+			props: {
+				...DEFAULT_SETUP.props,
+				value: {
+					options: {
+						caseSensitive: true,
+						leftValue: '',
+					},
+					conditions: [
+						{
+							leftValue: '={{ $json.name }}',
+							rightValue: 'John',
+							operator: getFilterOperator('string:equals'),
+						},
+					],
+				},
+			},
+		});
+
+		const condition = getByTestId('filter-condition');
+		await waitFor(() =>
+			expect(within(condition).getByTestId('filter-condition-left')).toHaveTextContent(
+				'{{ $json.name }}',
+			),
+		);
+
+		expect(emitted('valueChanged')).toBeUndefined();
+
+		const expressionEditor = within(condition)
+			.getByTestId('filter-condition-left')
+			.querySelector('.cm-line');
+
+		if (expressionEditor) {
+			await userEvent.type(expressionEditor, 'test');
+		}
+
+		await waitFor(() => {
+			expect(get(emitted('valueChanged')[0], '0.value.conditions.0.leftValue')).toEqual(
+				expect.stringContaining('test'),
+			);
+		});
+
+		const parameterInput = within(condition)
+			.getByTestId('filter-condition-right')
+			.querySelector('input');
+
+		if (parameterInput) {
+			await userEvent.type(parameterInput, 'test');
+		}
+
+		await waitFor(() => {
+			expect(get(emitted('valueChanged')[0], '0.value.conditions.0.leftValue')).toEqual(
+				expect.stringContaining('test'),
+			);
+			expect(get(emitted('valueChanged')[0], '0.value.conditions.0.rightValue')).toEqual(
+				expect.stringContaining('test'),
+			);
+		});
+	});
+
 	it('renders correctly in read only mode', async () => {
 		const { findAllByTestId, queryByTestId } = renderComponent({
 			props: {