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

fix(editor): Set correct type for right input in filter component (#8771)

Browse source
This commit is contained in:
Elias Meire 2024-03-05 12:19:30 +01:00 committed by GitHub
parent 0d10befd60
commit 5d5466343e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 68 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -79,16 +79,17 @@ const leftParameter = computed<INodeProperties>(() => ({
...operatorTypeToNodeProperty(operator.value.type),
}));
const rightParameter = computed<INodeProperties>(() => ({
name: '',
displayName: '',
default: '',
placeholder:
operator.value.type === 'dateTime'
? now.value
: i18n.baseText('filter.condition.placeholderRight'),
...operatorTypeToNodeProperty(operator.value.type),
}));
const rightParameter = computed<INodeProperties>(() => {
const type = operator.value.rightType ?? operator.value.type;
return {
name: '',
displayName: '',
default: '',
placeholder:
type === 'dateTime' ? now.value : i18n.baseText('filter.condition.placeholderRight'),
...operatorTypeToNodeProperty(type),
};
});
const onLeftValueChange = (update: IUpdateInformation): void => {
condition.value.leftValue = update.value;

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

@ -6,6 +6,7 @@ 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 { getFilterOperator } from '../utils';
const DEFAULT_SETUP = {
pinia: createTestingPinia({
@ -62,29 +63,22 @@ describe('FilterConditions.vue', () => {
{
leftValue: '={{ $json.tags }}',
rightValue: 'exotic',
operator: {
type: 'array',
operation: 'contains',
rightType: 'any',
},
operator: getFilterOperator('array:contains'),
},
{
leftValue: '={{ $json.meta }}',
rightValue: '',
operator: {
type: 'object',
operation: 'notEmpty',
singleValue: true,
},
operator: getFilterOperator('object:notEmpty'),
},
{
leftValue: '={{ $json.test }}',
rightValue: 'other',
operator: {
type: 'string',
operation: 'equals',
singleValue: true,
},
leftValue: '={{ $json.name }}',
rightValue: 'John',
operator: getFilterOperator('string:equals'),
},
{
leftValue: '={{ $json.tags }}',
rightValue: 5,
operator: getFilterOperator('array:lengthGte'),
},
],
combinator: 'or',
@ -95,31 +89,53 @@ describe('FilterConditions.vue', () => {
const conditions = await findAllByTestId('filter-condition');
const combinators = await findAllByTestId('filter-combinator-select');
expect(combinators).toHaveLength(2);
expect(combinators[0].querySelector('input')?.value).toEqual('OR');
expect(combinators).toHaveLength(3);
expect(combinators[0].querySelector('input')).toHaveValue('OR');
expect(combinators[1]).toHaveTextContent('OR');
expect(conditions).toHaveLength(3);
expect(conditions[0].querySelector('[data-test-id="filter-condition-left"]')).toHaveTextContent(
expect(conditions).toHaveLength(4);
// array:contains
expect(within(conditions[0]).getByTestId('filter-condition-left')).toHaveTextContent(
'{{ $json.tags }}',
);
expect(
conditions[0].querySelector('[data-test-id="filter-operator-select"]')?.querySelector('input')
?.value,
).toEqual('contains');
within(conditions[0]).getByTestId('filter-operator-select').querySelector('input'),
).toHaveValue('contains');
expect(
conditions[0].querySelector('[data-test-id="filter-condition-right"]')?.querySelector('input')
?.value,
).toEqual('exotic');
within(conditions[0]).getByTestId('filter-condition-right').querySelector('input'),
).toHaveValue('exotic');
expect(conditions[1].querySelector('[data-test-id="filter-condition-left"]')).toHaveTextContent(
// object:notEmpty
expect(within(conditions[1]).getByTestId('filter-condition-left')).toHaveTextContent(
'{{ $json.meta }}',
);
expect(
conditions[1].querySelector('[data-test-id="filter-operator-select"]')?.querySelector('input')
?.value,
).toEqual('is not empty');
expect(conditions[1].querySelector('[data-test-id="filter-condition-right"]')).toBeNull();
within(conditions[1]).getByTestId('filter-operator-select').querySelector('input'),
).toHaveValue('is not empty');
expect(within(conditions[1]).queryByTestId('filter-condition-right')).not.toBeInTheDocument();
// string:equals
expect(within(conditions[2]).getByTestId('filter-condition-left')).toHaveTextContent(
'{{ $json.name }}',
);
expect(
within(conditions[2]).getByTestId('filter-operator-select').querySelector('input'),
).toHaveValue('is equal to');
expect(
within(conditions[2]).getByTestId('filter-condition-right').querySelector('input'),
).toHaveValue('John');
// array:lengthGte
expect(within(conditions[3]).getByTestId('filter-condition-left')).toHaveTextContent(
'{{ $json.tags }}',
);
expect(
within(conditions[3]).getByTestId('filter-operator-select').querySelector('input'),
).toHaveValue('length greater than or equal to');
expect(
within(conditions[3]).getByTestId('filter-condition-right').querySelector('input'),
).toHaveValue(5);
});
it('renders parameter issues', async () => {
@ -137,18 +153,12 @@ describe('FilterConditions.vue', () => {
{
leftValue: '={{ $json.num }}',
rightValue: '5',
operator: {
type: 'number',
operation: 'equals',
},
operator: getFilterOperator('number:equals'),
},
{
leftValue: '={{ $json.num }}',
rightValue: 'not a number',
operator: {
type: 'number',
operation: 'equals',
},
operator: getFilterOperator('number:equals'),
},
],
},
@ -199,12 +209,12 @@ describe('FilterConditions.vue', () => {
conditions: [
{
leftValue: 'foo',
operator: { type: 'string', operation: 'equals' },
operator: getFilterOperator('string:equals'),
rightValue: 'bar',
},
{
leftValue: 'foo',
operator: { type: 'string', operation: 'equals' },
operator: getFilterOperator('string:equals'),
rightValue: 'bar',
},
],
@ -272,12 +282,12 @@ describe('FilterConditions.vue', () => {
conditions: [
{
leftValue: 'foo',
operator: { type: 'string', operation: 'equals' },
operator: getFilterOperator('string:equals'),
rightValue: 'bar',
},
{
leftValue: 'foo',
operator: { type: 'string', operation: 'equals' },
operator: getFilterOperator('string:equals'),
rightValue: 'bar',
},
],
@ -316,10 +326,7 @@ describe('FilterConditions.vue', () => {
id: '1',
leftValue: 'foo',
rightValue: 'bar',
operator: {
type: 'string',
operation: 'equals',
},
operator: getFilterOperator('string:equals'),
},
],
combinator: 'and',
@ -335,19 +342,13 @@ describe('FilterConditions.vue', () => {
id: '2',
leftValue: 'quz',
rightValue: 'qux',
operator: {
type: 'string',
operation: 'notEquals',
},
operator: getFilterOperator('string:notEquals'),
},
{
id: '3',
leftValue: 5,
rightValue: 6,
operator: {
type: 'number',
operation: 'gt',
},
operator: getFilterOperator('number:gt'),
},
],
combinator: 'and',