feat(editor): Filter component + implement in If node (#7490)

New Filter component + implementation in If node (v2)

<img width="3283" alt="image"
src="https://github.com/n8n-io/n8n/assets/8850410/35c379ef-4b62-4d06-82e7-673d4edcd652">

---------

Co-authored-by: Giulio Andreini <andreini@netseven.it>
Co-authored-by: Michael Kret <michael.k@radency.com>
This commit is contained in:
Elias Meire
2023-12-13 14:45:22 +01:00
committed by GitHub
parent 09a5729305
commit 8a5343401d
56 changed files with 5060 additions and 900 deletions

View File

@@ -0,0 +1,58 @@
import { IF_NODE_NAME } from '../constants';
import { WorkflowPage, NDV } from '../pages';
const workflowPage = new WorkflowPage();
const ndv = new NDV();
const FILTER_PARAM_NAME = 'conditions';
describe('If Node (filter component)', () => {
beforeEach(() => {
workflowPage.actions.visit();
});
it('should be able to create and delete multiple conditions', () => {
workflowPage.actions.addInitialNodeToCanvas(IF_NODE_NAME, { keepNdvOpen: true });
// Default state
ndv.getters.filterComponent(FILTER_PARAM_NAME).should('exist');
ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 1);
ndv.getters
.filterConditionOperator(FILTER_PARAM_NAME)
.find('input')
.should('have.value', 'is equal to');
// Add
ndv.actions.addFilterCondition(FILTER_PARAM_NAME);
ndv.getters.filterConditionLeft(FILTER_PARAM_NAME, 0).find('input').type('first left');
ndv.getters.filterConditionLeft(FILTER_PARAM_NAME, 1).find('input').type('second left');
ndv.actions.addFilterCondition(FILTER_PARAM_NAME);
ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 3);
// Delete
ndv.actions.removeFilterCondition(FILTER_PARAM_NAME, 0);
ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 2);
ndv.getters
.filterConditionLeft(FILTER_PARAM_NAME, 0)
.find('input')
.should('have.value', 'second left');
ndv.actions.removeFilterCondition(FILTER_PARAM_NAME, 1);
ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 1);
});
it('should correctly evaluate conditions', () => {
cy.fixture('Test_workflow_filter.json').then((data) => {
cy.get('body').paste(JSON.stringify(data));
});
workflowPage.actions.zoomToFit();
workflowPage.actions.executeWorkflow();
workflowPage.actions.openNode('Then');
ndv.getters.outputPanel().contains('3 items').should('exist');
ndv.actions.close();
workflowPage.actions.openNode('Else');
ndv.getters.outputPanel().contains('1 item').should('exist');
});
});

View File

@@ -2,6 +2,7 @@ import { NodeCreator } from '../pages/features/node-creator';
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
import { NDV } from '../pages/ndv';
import { getVisibleSelect } from '../utils';
import { IF_NODE_NAME } from '../constants';
const nodeCreatorFeature = new NodeCreator();
const WorkflowPage = new WorkflowPageClass();
@@ -360,7 +361,7 @@ describe('Node Creator', () => {
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'Edit Fields (Set)');
nodeCreatorFeature.getters.searchBar().find('input').clear().type('i');
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'IF');
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', IF_NODE_NAME);
nodeCreatorFeature.getters.nodeItemName().eq(1).should('have.text', 'Switch');
nodeCreatorFeature.getters.searchBar().find('input').clear().type('sw');
@@ -368,11 +369,11 @@ describe('Node Creator', () => {
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'Edit Fields (Set)');
nodeCreatorFeature.getters.searchBar().find('input').clear().type('i');
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'IF');
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', IF_NODE_NAME);
nodeCreatorFeature.getters.nodeItemName().eq(1).should('have.text', 'Switch');
nodeCreatorFeature.getters.searchBar().find('input').clear().type('IF');
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'IF');
nodeCreatorFeature.getters.nodeItemName().first().should('have.text', IF_NODE_NAME);
nodeCreatorFeature.getters.nodeItemName().eq(1).should('have.text', 'Switch');
nodeCreatorFeature.getters.searchBar().find('input').clear().type('sw');