mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Elias Meire 2024-05-22 09:40:09 +02:00 committed by GitHub
parent 0cb977bf2f
commit 62df4331d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 72 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/editor-ui/src/components/FilterConditions/Condition.vue
View file

@ -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,7 +123,7 @@ const onOperatorChange = (value: string): void => {
newOperator,
});
emit('update', condition.value);
debouncedEmitUpdate();
};
const onRemove = (): void => {
@ -125,7 +131,7 @@ const onRemove = (): void => {
};
const onBlur = (): void => {
emit('update', condition.value);
debouncedEmitUpdate();
};
</script>

65
packages/editor-ui/src/components/FilterConditions/__tests__/FilterConditions.test.ts
View file

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