From 430cc65a4ec0121e9c0f33f1c1618c0f98c2bbd4 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Thu, 1 Dec 2022 09:26:38 +0100 Subject: [PATCH] test: E2E NDV (#4712) * test: start testing node details view * test: deleting workflow after test * test: rename deleteWorkflow command * test: webhook node * test: roll back deleting workflow in workflow test * test: check output display modes after webhook node invoked * test: simplifying test * test: simplifying test * test: adding more tests related to NDV * test: adding more tests related to NDV * test: update after merge * Merge remote-tracking branch 'origin/master' into n8n-5494-e2e-ndv # Conflicts: # cypress/pages/workflow.ts * test: improving test blocks * test: NDV change node input * test: NDV change node input * test: NDV fix missing command * test(editor): Add NDV page object --- cypress/e2e/5-ndv.cy.ts | 66 +++++++++++++++ cypress/fixtures/NDV-test-select-input.json | 83 +++++++++++++++++++ cypress/pages/index.ts | 1 + cypress/pages/ndv.ts | 16 ++++ cypress/pages/workflow.ts | 15 ++-- cypress/pages/workflows.ts | 7 ++ .../src/components/CanvasControls.vue | 7 +- .../editor-ui/src/components/CopyInput.vue | 2 +- .../editor-ui/src/components/InputPanel.vue | 5 +- packages/editor-ui/src/components/Node.vue | 2 +- .../src/components/NodeDetailsView.vue | 1 + .../src/components/NodeExecuteButton.vue | 1 + .../editor-ui/src/components/OutputPanel.vue | 5 +- packages/editor-ui/src/components/RunData.vue | 2 + 14 files changed, 195 insertions(+), 18 deletions(-) create mode 100644 cypress/e2e/5-ndv.cy.ts create mode 100644 cypress/fixtures/NDV-test-select-input.json create mode 100644 cypress/pages/ndv.ts diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts new file mode 100644 index 0000000000..69f25fd361 --- /dev/null +++ b/cypress/e2e/5-ndv.cy.ts @@ -0,0 +1,66 @@ +import { WorkflowsPage, WorkflowPage, NDV } from '../pages'; +import { v4 as uuid } from 'uuid'; + +const workflowsPage = new WorkflowsPage(); +const workflowPage = new WorkflowPage(); +const ndv = new NDV(); + +describe('NDV', () => { + beforeEach(() => { + cy.resetAll(); + cy.skipSetup(); + workflowsPage.actions.createWorkflowFromCard(); + workflowPage.actions.renameWorkflow(uuid()); + workflowPage.actions.saveWorkflowOnButtonClick(); + }); + + it('should show up when double clicked on a node and close when Back to canvas clicked', () => { + workflowPage.actions.addInitialNodeToCanvas('Manual Trigger'); + workflowPage.getters.canvasNodes().first().dblclick(); + ndv.getters.container().should('be.visible'); + ndv.getters.backToCanvas().click() + ndv.getters.container().should('not.be.visible'); + }); + + it('should test webhook node', () => { + workflowPage.actions.addInitialNodeToCanvas('Webhook'); + workflowPage.getters.canvasNodes().first().dblclick(); + + ndv.getters.nodeExecuteButton().first().click(); + ndv.getters.copyInput().click(); + + cy.wrap(Cypress.automation('remote:debugger:protocol', { + command: 'Browser.grantPermissions', + params: { + permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'], + origin: window.location.origin, + }, + })); + + cy.window().its('navigator.permissions') + .invoke('query', {name: 'clipboard-read'}) + .its('state').should('equal', 'granted'); + + cy.window().its('navigator.clipboard').invoke('readText').then(url => { + cy.request({ + method: 'GET', + url, + }).then((resp) => { + expect(resp.status).to.eq(200) + }) + }); + + ndv.getters.runDataDisplayMode().should('have.length.at.least', 1).and('be.visible'); + }); + + it('should change input', () => { + cy.createFixtureWorkflow('NDV-test-select-input.json', `NDV test select input ${uuid()}`); + workflowPage.actions.zoomToFit(); + workflowPage.getters.canvasNodes().last().dblclick(); + ndv.getters.inputSelect().click(); + ndv.getters.inputOption().last().click(); + ndv.getters.inputPanel().within(() => { + ndv.getters.dataContainer().should('contain', 'start'); + }); + }); +}); diff --git a/cypress/fixtures/NDV-test-select-input.json b/cypress/fixtures/NDV-test-select-input.json new file mode 100644 index 0000000000..4a907837cf --- /dev/null +++ b/cypress/fixtures/NDV-test-select-input.json @@ -0,0 +1,83 @@ +{ + "name": "ff739753-9d6e-46a7-94d3-25bd03dd4973", + "nodes": [ + { + "parameters": {}, + "id": "c30d1114-d7f7-44dc-b55a-15312ef2d76d", + "name": "On clicking 'execute'", + "type": "n8n-nodes-base.manualTrigger", + "typeVersion": 1, + "position": [ + 600, + 580 + ] + }, + { + "parameters": { + "options": {} + }, + "id": "5bf514bd-65ae-4a1c-8b69-a01bfeaad411", + "name": "Set", + "type": "n8n-nodes-base.set", + "typeVersion": 1, + "position": [ + 820, + 580 + ] + }, + { + "parameters": { + "options": {} + }, + "id": "02bf49e9-44b2-4f4e-8cb2-8c02399208af", + "name": "Set1", + "type": "n8n-nodes-base.set", + "typeVersion": 1, + "position": [ + 1040, + 580 + ] + } + ], + "pinData": { + "On clicking 'execute'": [ + { + "json": { + "start": true + } + } + ] + }, + "connections": { + "On clicking 'execute'": { + "main": [ + [ + { + "node": "Set", + "type": "main", + "index": 0 + } + ] + ] + }, + "Set": { + "main": [ + [ + { + "node": "Set1", + "type": "main", + "index": 0 + } + ] + ] + } + }, + "active": false, + "settings": {}, + "hash": "abd7b28aa2605c96ba24474d72cbe610", + "id": 3, + "meta": { + "instanceId": "08a83d394781701f5c18052cde68e8d92c88b26f5cc8809eb10ad545f14015cb" + }, + "tags": [] +} \ No newline at end of file diff --git a/cypress/pages/index.ts b/cypress/pages/index.ts index 0cea524db6..4fbcb6b9e5 100644 --- a/cypress/pages/index.ts +++ b/cypress/pages/index.ts @@ -6,3 +6,4 @@ export * from './workflows'; export * from './workflow'; export * from './modals'; export * from './settings-users'; +export * from './ndv'; diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts new file mode 100644 index 0000000000..7068551a05 --- /dev/null +++ b/cypress/pages/ndv.ts @@ -0,0 +1,16 @@ +import { BasePage } from "./base"; + +export class NDV extends BasePage { + getters = { + container: () => cy.getByTestId('ndv'), + backToCanvas: () => cy.getByTestId('back-to-canvas'), + copyInput: () => cy.getByTestId('copy-input'), + nodeExecuteButton: () => cy.getByTestId('node-execute-button'), + inputSelect: () => cy.getByTestId('ndv-input-select'), + inputOption: () => cy.getByTestId('ndv-input-option'), + inputPanel: () => cy.getByTestId('ndv-input-panel'), + dataContainer: () => cy.getByTestId('ndv-data-container'), + runDataDisplayMode: () => cy.getByTestId('ndv-run-data-display-mode'), + digital: () => cy.getByTestId('ndv-run-data-display-mode'), + } +} diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index bdaceb91f1..5c2a24f19c 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -11,17 +11,11 @@ export class WorkflowPage extends BasePage { workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'), newTagLink: () => cy.getByTestId('new-tag-link'), saveButton: () => cy.getByTestId('workflow-save-button'), - nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'), nodeCreatorPlusButton: () => cy.getByTestId('node-creator-plus-button'), canvasPlusButton: () => cy.getByTestId('canvas-plus-button'), - canvasNodeBox: (nodeDisplayName: string) => { - return cy - .getByTestId('canvas-node-box-title') - .contains(nodeDisplayName) - .parents('[data-test-id="canvas-node-box"]'); - }, - + canvasNodes: () => cy.getByTestId('canvas-node'), + canvasNodeByName: (nodeName: string) => this.getters.canvasNodes().filter(`:contains("${nodeName}")`), ndvParameterInput: (parameterName: string) => cy.getByTestId(`parameter-input-${parameterName}`), ndvOutputPanel: () => cy.getByTestId('output-panel'), @@ -51,7 +45,7 @@ export class WorkflowPage extends BasePage { this.getters.nodeCreatorSearchBar().type('{enter}{esc}'); }, openNodeNdv: (nodeTypeName: string) => { - this.getters.canvasNodeBox(nodeTypeName).dblclick(); + this.getters.canvasNodeByName(nodeTypeName).dblclick(); }, typeIntoParameterInput: (parameterName: string, content: string) => { this.getters.ndvParameterInput(parameterName).type(content); @@ -94,5 +88,8 @@ export class WorkflowPage extends BasePage { }); cy.get('body').type('{enter}'); }, + zoomToFit: () => { + cy.getByTestId('zoom-to-fit').click(); + }, }; } diff --git a/cypress/pages/workflows.ts b/cypress/pages/workflows.ts index 023e2d1821..5f73370cef 100644 --- a/cypress/pages/workflows.ts +++ b/cypress/pages/workflows.ts @@ -29,5 +29,12 @@ export class WorkflowsPage extends BasePage { createWorkflowFromCard: () => { this.getters.newWorkflowButtonCard().click(); }, + deleteWorkFlow: (name: string) => { + cy.visit(this.url); + this.getters.workflowCardActions(name).click(); + this.getters.workflowDeleteButton().click(); + + cy.get('button').contains('delete').click(); + } } } diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue index d2afb4eed2..0a052c173a 100644 --- a/packages/editor-ui/src/components/CanvasControls.vue +++ b/packages/editor-ui/src/components/CanvasControls.vue @@ -1,8 +1,9 @@