mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

test: Set up e2e tests for HTTP Request node (#4718)

Browse source 
* 🧪 Add test identifiers

* ⚡ Add getters

* 🧪 Add initial test

* ⚡ Refactor to use actions

* ⚡ Refactor per Oleg's advice

* 🐛 Fix overlapping input label IDs
This commit is contained in:
Iván Ovejero 2022-11-25 13:09:44 +01:00 committed by GitHub
parent 1821bb0699
commit 62d30f2b43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 80 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
cypress/e2e/4-http-request-node.cy.ts Normal file
View file

@ -0,0 +1,23 @@
import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
const WorkflowsPage = new WorkflowsPageClass();
const WorkflowPage = new WorkflowPageClass();
describe('HTTP Request node', () => {
beforeEach(() => {
cy.skipSetup();
});
it('should make a request with a URL and receive a response', () => {
WorkflowsPage.actions.createWorkflowFromCard();
WorkflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
WorkflowPage.actions.addNodeToCanvas('HTTP Request');
WorkflowPage.actions.openNodeNdv('HTTP Request');
WorkflowPage.actions.typeIntoParameterInput('url', 'https://google.com');
WorkflowPage.actions.executeNodeFromNdv();
WorkflowPage.getters.ndvOutputPanel().contains('<!doctype html>');
});
});

43
cypress/pages/workflow.ts
View file

@ -1,11 +1,50 @@
import { BasePage } from "./base"; import { BasePage } from './base';
export class WorkflowPage extends BasePage { export class WorkflowPage extends BasePage {
url = '/workflow/new'; url = '/workflow/new';
getters = { getters = {
workflowNameInput: () => cy.getByTestId('workflow-name-input', { timeout: 5000 }).then($el => cy.wrap($el.find('input'))), workflowNameInput: () =>
cy
.getByTestId('workflow-name-input', { timeout: 5000 })
.then(($el) => cy.wrap($el.find('input'))),
workflowImportInput: () => cy.getByTestId('workflow-import-input'), workflowImportInput: () => cy.getByTestId('workflow-import-input'),
workflowTags: () => cy.getByTestId('workflow-tags'), workflowTags: () => cy.getByTestId('workflow-tags'),
saveButton: () => cy.getByTestId('save-button'), saveButton: () => cy.getByTestId('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"]');
},
ndvParameterInput: (parameterName: string) =>
cy.getByTestId(`parameter-input-${parameterName}`),
ndvOutputPanel: () => cy.getByTestId('output-panel'),
};
actions = {
addInitialNodeToCanvas: (nodeDisplayName: string) => {
this.getters.canvasPlusButton().click();
this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
},
addNodeToCanvas: (nodeDisplayName: string) => {
this.getters.nodeCreatorPlusButton().click();
this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
},
openNodeNdv: (nodeTypeName: string) => {
this.getters.canvasNodeBox(nodeTypeName).dblclick();
},
typeIntoParameterInput: (parameterName: string, content: string) => {
this.getters.ndvParameterInput(parameterName).type(content);
},
executeNodeFromNdv: () => {
cy.contains('Execute node').click();
},
}; };
} }

6
cypress/pages/workflows.ts
View file

@ -24,4 +24,10 @@ export class WorkflowsPage extends BasePage {
// myWorkflows: () => cy.getByTestId('my-workflows'), // myWorkflows: () => cy.getByTestId('my-workflows'),
// allWorkflows: () => cy.getByTestId('all-workflows'), // allWorkflows: () => cy.getByTestId('all-workflows'),
}; };
actions = {
createWorkflowFromCard: () => {
this.getters.newWorkflowButtonCard().click();
},
}
} }

4
packages/editor-ui/src/components/Node.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="node-wrapper" :style="nodePosition" :id="nodeId"> <div class="node-wrapper" :style="nodePosition" :id="nodeId" data-test-id="canvas-node-box">
<div class="select-background" v-show="isSelected"></div> <div class="select-background" v-show="isSelected"></div>
<div :class="{'node-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}" :data-name="data.name" :ref="data.name"> <div :class="{'node-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}" :data-name="data.name" :ref="data.name">
<div :class="nodeClass" :style="nodeStyle" @click.left="onClick" v-touch:start="touchStart" v-touch:end="touchEnd"> <div :class="nodeClass" :style="nodeStyle" @click.left="onClick" v-touch:start="touchStart" v-touch:end="touchEnd">
@ -80,7 +80,7 @@
</div> </div>
<div class="node-description"> <div class="node-description">
<div class="node-name ph-no-capture" :title="nodeTitle"> <div class="node-name ph-no-capture" :title="nodeTitle">
<p> <p data-test-id="canvas-node-box-title">
{{ nodeTitle }} {{ nodeTitle }}
</p> </p>
<p v-if="data.disabled"> <p v-if="data.disabled">

2
packages/editor-ui/src/components/Node/NodeCreation.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div v-if="!createNodeActive" :class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']" @mouseenter="onCreateMenuHoverIn"> <div v-if="!createNodeActive" :class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']" @mouseenter="onCreateMenuHoverIn">
<div :class="$style.nodeCreatorButton"> <div :class="$style.nodeCreatorButton" data-test-id="node-creator-plus-button">
<n8n-icon-button size="xlarge" icon="plus" type="tertiary" :class="$style.nodeCreatorPlus" @click="openNodeCreator" :title="$locale.baseText('nodeView.addNode')"/> <n8n-icon-button size="xlarge" icon="plus" type="tertiary" :class="$style.nodeCreatorPlus" @click="openNodeCreator" :title="$locale.baseText('nodeView.addNode')"/>
<div :class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']" @click="addStickyNote"> <div :class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']" @click="addStickyNote">
<n8n-icon-button size="medium" type="tertiary" :icon="['far', 'note-sticky']" :title="$locale.baseText('nodeView.addSticky')"/> <n8n-icon-button size="medium" type="tertiary" :icon="['far', 'note-sticky']" :title="$locale.baseText('nodeView.addSticky')"/>

1
packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
View file

@ -10,6 +10,7 @@
:value="value" :value="value"
@input="onInput" @input="onInput"
:class="$style.input" :class="$style.input"
data-test-id="node-creator-search-bar"
/> />
</div> </div>
<div :class="$style.suffix" v-if="value.length > 0" @click="clear"> <div :class="$style.suffix" v-if="value.length > 0" @click="clear">

1
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -70,6 +70,7 @@
</template> </template>
<template #output> <template #output>
<OutputPanel <OutputPanel
data-test-id="output-panel"
:canLinkRuns="canLinkRuns" :canLinkRuns="canLinkRuns"
:runIndex="outputRun" :runIndex="outputRun"
:linkedRuns="linked" :linkedRuns="linked"

1
packages/editor-ui/src/components/ParameterInputExpanded.vue
View file

@ -5,6 +5,7 @@
:required="parameter.required" :required="parameter.required"
:showTooltip="focused" :showTooltip="focused"
:showOptions="menuExpanded" :showOptions="menuExpanded"
:data-test-id="parameter.name"
> >
<template #options> <template #options>
<parameter-options <parameter-options

4
packages/editor-ui/src/components/ParameterInputWrapper.vue
View file

@ -20,7 +20,9 @@
@blur="onBlur" @blur="onBlur"
@drop="onDrop" @drop="onDrop"
@textInput="onTextInput" @textInput="onTextInput"
@valueChanged="onValueChanged" /> @valueChanged="onValueChanged"
:data-test-id="`parameter-input-${parameter.name}`"
/>
<input-hint v-if="expressionOutput" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput" /> <input-hint v-if="expressionOutput" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput" />
<input-hint v-else-if="parameterHint" :class="$style.hint" :renderHTML="true" :hint="parameterHint" /> <input-hint v-else-if="parameterHint" :class="$style.hint" :renderHTML="true" :hint="parameterHint" />
</div> </div>

2
packages/editor-ui/src/views/CanvasAddButton.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div :class="$style.container" :style="containerCssVars" ref="container"> <div :class="$style.container" :style="containerCssVars" ref="container">
<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="isScrimActive" :popper-class="$style.tooltip" :open-delay="700"> <n8n-tooltip placement="top" :value="showTooltip" manual :disabled="isScrimActive" :popper-class="$style.tooltip" :open-delay="700">
<button :class="$style.button" @click="$emit('click')"> <button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
<font-awesome-icon icon="plus" size="lg" /> <font-awesome-icon icon="plus" size="lg" />
</button> </button>
<template #content> <template #content>