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

* 🧪 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

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>');
});
});

View file

@ -1,11 +1,50 @@
import { BasePage } from "./base";
import { BasePage } from './base';
export class WorkflowPage extends BasePage {
url = '/workflow/new';
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'),
workflowTags: () => cy.getByTestId('workflow-tags'),
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();
},
};
}

View file

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

View file

@ -1,5 +1,5 @@
<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="{'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">
@ -80,7 +80,7 @@
</div>
<div class="node-description">
<div class="node-name ph-no-capture" :title="nodeTitle">
<p>
<p data-test-id="canvas-node-box-title">
{{ nodeTitle }}
</p>
<p v-if="data.disabled">

View file

@ -1,7 +1,7 @@
<template>
<div>
<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')"/>
<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')"/>

View file

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

View file

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

View file

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

View file

@ -20,7 +20,9 @@
@blur="onBlur"
@drop="onDrop"
@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-else-if="parameterHint" :class="$style.hint" :renderHTML="true" :hint="parameterHint" />
</div>

View file

@ -1,7 +1,7 @@
<template>
<div :class="$style.container" :style="containerCssVars" ref="container">
<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" />
</button>
<template #content>