Skip to content

Commit

Permalink
fix(editor): Emit change events from filter component on update (#9479)
Browse files Browse the repository at this point in the history
  • Loading branch information
elsmr committed May 22, 2024
1 parent 0cb977b commit 62df433
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 3 deletions.
10 changes: 8 additions & 2 deletions packages/editor-ui/src/components/FilterConditions/Condition.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
operatorTypeToNodeProperty,
resolveCondition,
} from './utils';
import { useDebounce } from '@/composables/useDebounce';
interface Props {
path: string;
Expand All @@ -47,6 +48,7 @@ const emit = defineEmits<{
}>();
const i18n = useI18n();
const { debounce } = useDebounce();
const condition = ref<FilterConditionValue>(props.condition);
Expand Down Expand Up @@ -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 => {
Expand All @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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: {
Expand Down

0 comments on commit 62df433

Please sign in to comment.