From 1af7b0b3394ceca36722c0e66b32f9c3d8282b70 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Tue, 9 May 2023 15:25:40 +0200 Subject: [PATCH 1/6] fix: Prevent whitespace overflow --- packages/editor-ui/src/components/ParameterInputHint.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue index d683e23537f60..1f5d3e4417b4d 100644 --- a/packages/editor-ui/src/components/ParameterInputHint.vue +++ b/packages/editor-ui/src/components/ParameterInputHint.vue @@ -53,7 +53,9 @@ export default defineComponent({ From 9a39f01182189f0573f11b13d73be4b5e07e62b5 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 10 May 2023 09:58:58 +0200 Subject: [PATCH 5/6] test: update tests, fix test --- cypress/e2e/14-mapping.cy.ts | 104 +++++++++++++++++------------------ cypress/e2e/5-ndv.cy.ts | 38 +++++++++++++ cypress/pages/ndv.ts | 15 ++++- 3 files changed, 104 insertions(+), 53 deletions(-) diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts index afab75190e641..3693eb14c194d 100644 --- a/cypress/e2e/14-mapping.cy.ts +++ b/cypress/e2e/14-mapping.cy.ts @@ -156,7 +156,7 @@ describe('Data mapping', () => { ndv.getters .inlineExpressionEditorInput() .should('have.text', '{{ $json.input[0].count }} {{ $json.input }}'); - ndv.getters.parameterExpressionPreview('value').should('include.text', '0 [object Object]'); + ndv.actions.validateExpressionPreview('value', '0 [object Object]'); }); it('maps expressions from schema view', () => { @@ -172,7 +172,7 @@ describe('Data mapping', () => { ndv.actions.mapToParameter('value'); ndv.getters.inlineExpressionEditorInput().should('have.text', '{{ $json.input[0].count }}'); - ndv.getters.parameterExpressionPreview('value').should('include.text', '0'); + ndv.actions.validateExpressionPreview('value', '0'); ndv.getters.inputDataContainer().find('span').contains('input').realMouseDown(); @@ -180,7 +180,7 @@ describe('Data mapping', () => { ndv.getters .inlineExpressionEditorInput() .should('have.text', '{{ $json.input[0].count }} {{ $json.input }}'); - ndv.getters.parameterExpressionPreview('value').should('include.text', '0 [object Object]'); + ndv.actions.validateExpressionPreview('value', '0 [object Object]'); }); it('maps expressions from previous nodes', () => { @@ -205,63 +205,63 @@ describe('Data mapping', () => { 'have.text', `{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }} {{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input }}`, ); - ndv.getters.parameterExpressionPreview('value').should('have.text', ' '); + ndv.actions.validateExpressionPreview('value', ' '); ndv.actions.selectInputNode('Set'); ndv.actions.executePrevious(); ndv.getters.executingLoader().should('not.exist'); ndv.getters.inputDataContainer().should('exist'); - ndv.getters.parameterExpressionPreview('value').should('include.text', '0 [object Object]'); + ndv.actions.validateExpressionPreview('value', '0 [object Object]'); ndv.getters.inputTbodyCell(2, 0).realHover(); - ndv.getters.parameterExpressionPreview('value').should('include.text', '1 [object Object]'); + ndv.actions.validateExpressionPreview('value', '1 [object Object]'); }); - it('maps keys to path', () => { - workflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME); - workflowPage.getters.canvasNodeByName(MANUAL_TRIGGER_NODE_DISPLAY_NAME).click(); - workflowPage.actions.openNode(MANUAL_TRIGGER_NODE_DISPLAY_NAME); - ndv.actions.setPinnedData([ - { - input: [ - { - 'hello.world': { - 'my count': 0, - }, - }, - ], - }, - { - input: [ - { - 'hello.world': { - 'my count': 1, - }, - }, - ], - }, - ]); - - ndv.actions.close(); - - workflowPage.actions.addNodeToCanvas('Item Lists'); - workflowPage.actions.openNode('Item Lists'); - - ndv.getters.parameterInput('operation').click().find('li').contains('Sort').click(); - - ndv.getters.nodeParameters().find('button').contains('Add Field To Sort By').click(); - - ndv.getters.inputDataContainer().find('span').contains('my count').realMouseDown(); - - ndv.actions.mapToParameter('fieldName'); - - ndv.getters.inlineExpressionEditorInput().should('have.length', 0); - ndv.getters - .parameterInput('fieldName') - .find('input') - .should('have.value', "input[0]['hello.world']['my count']"); - }); + // it('maps keys to path', () => { + // workflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME); + // workflowPage.getters.canvasNodeByName(MANUAL_TRIGGER_NODE_DISPLAY_NAME).click(); + // workflowPage.actions.openNode(MANUAL_TRIGGER_NODE_DISPLAY_NAME); + // ndv.actions.setPinnedData([ + // { + // input: [ + // { + // 'hello.world': { + // 'my count': 0, + // }, + // }, + // ], + // }, + // { + // input: [ + // { + // 'hello.world': { + // 'my count': 1, + // }, + // }, + // ], + // }, + // ]); + + // ndv.actions.close(); + + // workflowPage.actions.addNodeToCanvas('Item Lists'); + // workflowPage.actions.openNode('Item Lists'); + + // ndv.getters.parameterInput('operation').click().find('li').contains('Sort').click(); + + // ndv.getters.nodeParameters().find('button').contains('Add Field To Sort By').click(); + + // ndv.getters.inputDataContainer().find('span').contains('my count').realMouseDown(); + + // ndv.actions.mapToParameter('fieldName'); + + // ndv.getters.inlineExpressionEditorInput().should('have.length', 0); + // ndv.getters + // .parameterInput('fieldName') + // .find('input') + // .should('have.value', "input[0]['hello.world']['my count']"); + // }); it('maps expressions to updated fields correctly', () => { cy.fixture('Test_workflow_3.json').then((data) => { @@ -282,7 +282,7 @@ describe('Data mapping', () => { ndv.actions.mapToParameter('value'); ndv.getters.inlineExpressionEditorInput().should('have.text', '{{ $json.input[0].count }}'); - ndv.getters.parameterExpressionPreview('value').should('include.text', '0'); + ndv.actions.validateExpressionPreview('value', '0'); ndv.getters.inputDataContainer().find('span').contains('input').realMouseDown(); @@ -290,7 +290,7 @@ describe('Data mapping', () => { ndv.getters .inlineExpressionEditorInput() .should('have.text', '{{ $json.input[0].count }} {{ $json.input }}'); - ndv.getters.parameterExpressionPreview('value').should('include.text', '0 [object Object]'); + ndv.actions.validateExpressionPreview('value', '0 [object Object]'); }); it('shows you can drop to inputs, including booleans', () => { diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts index 749fb4434e506..8c8809ad26c3e 100644 --- a/cypress/e2e/5-ndv.cy.ts +++ b/cypress/e2e/5-ndv.cy.ts @@ -227,4 +227,42 @@ describe('NDV', () => { .find('input') .should('include.value', '2 of 2 (6 items)'); }); + + it('should display parameter hints correctly', () => { + workflowPage.actions.visit(); + + cy.createFixtureWorkflow('Test_workflow_3.json', `My test workflow`); + workflowPage.actions.openNode('Set1'); + + ndv.actions.typeIntoParameterInput('value', '='); // switch to expressions + + [ + { + input: 'hello', + }, + { + input: '', + output: '[empty]', + }, + { + input: ' test', + }, + { + input: ' ' + }, + { + input: '
' + }, + ].forEach(({ input, output }) => { + + + if (input) { + ndv.actions.typeIntoParameterInput('value', input); + } + ndv.getters.parameterInput('name').click(); // remove focus from input, hide expression preview + + ndv.actions.validateExpressionPreview('value', output || input); + ndv.getters.parameterInput('value').clear(); + }); + }); }); diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts index f23f9a0548a61..f23eb97f4f29f 100644 --- a/cypress/pages/ndv.ts +++ b/cypress/pages/ndv.ts @@ -157,6 +157,19 @@ export class NDV extends BasePage { this.getters.resourceLocatorModeSelector(paramName).click(); this.getters.resourceLocatorModeSelector(paramName).find('li').last().click(); this.getters.resourceLocatorInput(paramName).type(value); - } + }, + validateExpressionPreview: (paramName: string, value: string) => { + this.getters.parameterExpressionPreview(paramName).find('span').should('include.html', asEncodedHTML(value)); + }, }; } + +function asEncodedHTML(str: string): string { + return String(str) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/ /g, ' '); +} + From f5b85f75e7a3c14171ea174124a51892dc754b2e Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 10 May 2023 10:17:34 +0200 Subject: [PATCH 6/6] test: uncomment test --- cypress/e2e/14-mapping.cy.ts | 88 ++++++++++++++++++------------------ 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts index 3693eb14c194d..2a42998ec75a6 100644 --- a/cypress/e2e/14-mapping.cy.ts +++ b/cypress/e2e/14-mapping.cy.ts @@ -218,50 +218,50 @@ describe('Data mapping', () => { ndv.actions.validateExpressionPreview('value', '1 [object Object]'); }); - // it('maps keys to path', () => { - // workflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME); - // workflowPage.getters.canvasNodeByName(MANUAL_TRIGGER_NODE_DISPLAY_NAME).click(); - // workflowPage.actions.openNode(MANUAL_TRIGGER_NODE_DISPLAY_NAME); - // ndv.actions.setPinnedData([ - // { - // input: [ - // { - // 'hello.world': { - // 'my count': 0, - // }, - // }, - // ], - // }, - // { - // input: [ - // { - // 'hello.world': { - // 'my count': 1, - // }, - // }, - // ], - // }, - // ]); - - // ndv.actions.close(); - - // workflowPage.actions.addNodeToCanvas('Item Lists'); - // workflowPage.actions.openNode('Item Lists'); - - // ndv.getters.parameterInput('operation').click().find('li').contains('Sort').click(); - - // ndv.getters.nodeParameters().find('button').contains('Add Field To Sort By').click(); - - // ndv.getters.inputDataContainer().find('span').contains('my count').realMouseDown(); - - // ndv.actions.mapToParameter('fieldName'); - - // ndv.getters.inlineExpressionEditorInput().should('have.length', 0); - // ndv.getters - // .parameterInput('fieldName') - // .find('input') - // .should('have.value', "input[0]['hello.world']['my count']"); - // }); + it('maps keys to path', () => { + workflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME); + workflowPage.getters.canvasNodeByName(MANUAL_TRIGGER_NODE_DISPLAY_NAME).click(); + workflowPage.actions.openNode(MANUAL_TRIGGER_NODE_DISPLAY_NAME); + ndv.actions.setPinnedData([ + { + input: [ + { + 'hello.world': { + 'my count': 0, + }, + }, + ], + }, + { + input: [ + { + 'hello.world': { + 'my count': 1, + }, + }, + ], + }, + ]); + + ndv.actions.close(); + + workflowPage.actions.addNodeToCanvas('Item Lists'); + workflowPage.actions.openNode('Item Lists'); + + ndv.getters.parameterInput('operation').click().find('li').contains('Sort').click(); + + ndv.getters.nodeParameters().find('button').contains('Add Field To Sort By').click(); + + ndv.getters.inputDataContainer().find('span').contains('my count').realMouseDown(); + + ndv.actions.mapToParameter('fieldName'); + + ndv.getters.inlineExpressionEditorInput().should('have.length', 0); + ndv.getters + .parameterInput('fieldName') + .find('input') + .should('have.value', "input[0]['hello.world']['my count']"); + }); it('maps expressions to updated fields correctly', () => { cy.fixture('Test_workflow_3.json').then((data) => {