mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Add Workflows view e2e tests (#4573)

Browse source
This commit is contained in:
OlegIvaniv 2022-11-11 09:07:14 +01:00 committed by GitHub
parent ed99aa2d59
commit 50f7538779
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 287 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
cypress/e2e/1-workflows.cy.ts Normal file
View file

@ -0,0 +1,84 @@
import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from "../constants";
import { randFirstName, randLastName } from "@ngneat/falso";
import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
import { v4 as uuid } from 'uuid';
const username = DEFAULT_USER_EMAIL;
const password = DEFAULT_USER_PASSWORD;
const firstName = randFirstName();
const lastName = randLastName();
const WorkflowsPage = new WorkflowsPageClass();
const WorkflowPage = new WorkflowPageClass();
describe('Workflows flow', () => {
beforeEach(() => {
cy.signup(username, firstName, lastName, password);
cy.on('uncaught:exception', (err, runnable) => {
expect(err.message).to.include('Not logged in');
return false;
})
cy.signin(username, password);
cy.visit(WorkflowsPage.url);
});
it('should create a new workflow using empty state card', () => {
WorkflowsPage.get('newWorkflowButtonCard').should('be.visible');
WorkflowsPage.get('newWorkflowButtonCard').click();
cy.createFixtureWorkflow('Test_workflow_1.json', `Empty State Card Workflow ${uuid()}`);
WorkflowPage.get('workflowTags').should('contain.text', 'some-tag-1');
WorkflowPage.get('workflowTags').should('contain.text', 'some-tag-2');
})
it('should create a new workflow using add workflow button', () => {
WorkflowsPage.get('newWorkflowButtonCard').should('not.exist');
WorkflowsPage.get('createWorkflowButton').click();
cy.createFixtureWorkflow('Test_workflow_2.json', `Add Workflow Button Workflow ${uuid()}`);
WorkflowPage.get('workflowTags').should('contain.text', 'other-tag-1');
WorkflowPage.get('workflowTags').should('contain.text', 'other-tag-2');
})
it('should search for a workflow', () => {
WorkflowsPage.get('searchBar').type('Empty State Card Workflow');
WorkflowsPage.get('workflowCards').should('have.length', 1);
WorkflowsPage.get('workflowCard', 'Empty State Card Workflow').should('contain.text', 'Empty State Card Workflow');
WorkflowsPage.get('searchBar').clear().type('Add Workflow Button Workflow');
WorkflowsPage.get('workflowCards').should('have.length', 1);
WorkflowsPage.get('workflowCard', 'Add Workflow Button Workflow').should('contain.text', 'Add Workflow Button Workflow');
WorkflowsPage.get('searchBar').clear().type('Some non-existent workflow');
WorkflowsPage.get('workflowCards').should('not.exist');
cy.contains('No workflows found').should('be.visible');
})
it('should delete all the workflows', () => {
WorkflowsPage.get('workflowCards').should('have.length', 2);
WorkflowsPage.get('workflowCards').each(($el) => {
const workflowName = $el.find('[data-test-id="workflow-card-name"]').text();
WorkflowsPage.get('workflowCardActions', workflowName).click();
WorkflowsPage.get('workflowDeleteButton').click();
cy.get('button').contains('delete').click();
})
WorkflowsPage.get('newWorkflowButtonCard').should('be.visible');
WorkflowsPage.get('newWorkflowTemplateCard').should('be.visible');
})
it('should contain empty state cards', () => {
WorkflowsPage.get('newWorkflowButtonCard').should('be.visible');
WorkflowsPage.get('newWorkflowTemplateCard').should('be.visible');
});
});

69
cypress/fixtures/Test_workflow_1.json Normal file
View file

@ -0,0 +1,69 @@
{
"name": "Test workflow 1",
"nodes": [
{
"parameters": {},
"id": "a2f85497-260d-4489-a957-2b7d88e2f33d",
"name": "On clicking 'execute'",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
220,
260
]
},
{
"parameters": {
"jsCode": "// Loop over input items and add a new field\n// called 'myNewField' to the JSON of each one\nfor (const item of $input.all()) {\n item.json.myNewField = 1;\n}\n\nreturn $input.all();"
},
"id": "9493d278-1ede-47c9-bedf-92ac3a737c65",
"name": "Code",
"type": "n8n-nodes-base.code",
"typeVersion": 1,
"position": [
400,
260
]
}
],
"pinData": {},
"connections": {
"On clicking 'execute'": {
"main": [
[
{
"node": "Code",
"type": "main",
"index": 0
}
]
]
},
"Code": {
"main": [
[]
]
}
},
"active": false,
"settings": {},
"hash": "a59c7b1c97b1741597afae0fcd43ebef",
"id": 3,
"meta": {
"instanceId": "a5280676597d00ecd0ea712da7f9cf2ce90174a791a309112731f6e44d162f35"
},
"tags": [
{
"name": "some-tag-1",
"createdAt": "2022-11-10T13:43:34.001Z",
"updatedAt": "2022-11-10T13:43:34.001Z",
"id": "6"
},
{
"name": "some-tag-2",
"createdAt": "2022-11-10T13:43:39.778Z",
"updatedAt": "2022-11-10T13:43:39.778Z",
"id": "7"
}
]
}

64
cypress/fixtures/Test_workflow_2.json Normal file
View file

@ -0,0 +1,64 @@
{
"name": "Test workflow 2",
"nodes": [
{
"parameters": {},
"id": "624e0991-5dac-468b-b872-a9d35cb2c7d1",
"name": "On clicking 'execute'",
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
360,
260
]
},
{
"parameters": {
"jsCode": "// Loop over input items and add a new field\n// called 'myNewField' to the JSON of each one\nfor (const item of $input.all()) {\n item.json.myNewField = 1;\n}\n\nreturn $input.all();"
},
"id": "48823b3a-ec82-4a05-84b8-24ac2747e648",
"name": "Code",
"type": "n8n-nodes-base.code",
"typeVersion": 1,
"position": [
580,
260
]
}
],
"pinData": {},
"connections": {
"On clicking 'execute'": {
"main": [
[
{
"node": "Code",
"type": "main",
"index": 0
}
]
]
}
},
"active": false,
"settings": {},
"hash": "4d2e29ffcae2a12bdd28a7abe9681a6b",
"id": 4,
"meta": {
"instanceId": "a5280676597d00ecd0ea712da7f9cf2ce90174a791a309112731f6e44d162f35"
},
"tags": [
{
"name": "other-tag-1",
"createdAt": "2022-11-10T13:45:43.821Z",
"updatedAt": "2022-11-10T13:45:43.821Z",
"id": "8"
},
{
"name": "other-tag-2",
"createdAt": "2022-11-10T13:45:46.881Z",
"updatedAt": "2022-11-10T13:45:46.881Z",
"id": "9"
}
]
}

11
cypress/pages/workflow.ts Normal file
View file

@ -0,0 +1,11 @@
import { BasePage } from "./base";
export class WorkflowPage extends BasePage {
url = '/workflow/new';
elements = {
workflowNameInput: () => cy.getByTestId('workflow-name-input').then($el => cy.wrap($el.find('input'))),
workflowImportInput: () => cy.getByTestId('workflow-import-input'),
workflowTags: () => cy.getByTestId('workflow-tags'),
saveButton: () => cy.getByTestId('save-button'),
};
}

23
cypress/pages/workflows.ts
View file

@ -2,5 +2,26 @@ import { BasePage } from "./base";
export class WorkflowsPage extends BasePage {
url = '/workflows';
elements = {}
elements = {
newWorkflowButtonCard: () => cy.getByTestId('new-workflow-card'),
newWorkflowTemplateCard: () => cy.getByTestId('new-workflow-template-card'),
searchBar: () => cy.getByTestId('resources-list-search'),
createWorkflowButton: () => cy.getByTestId('resources-list-add'),
workflowCards: () => cy.getByTestId(`workflow-card`),
workflowCard: (workflowName: string) => cy.getByTestId(`workflow-card`)
.contains(workflowName)
.parents('[data-test-id="workflow-card"]'),
workflowTags: (workflowName: string) => this.elements.workflowCard(workflowName)
.findChildByTestId('workflow-card-tags'),
workflowActivator: (workflowName: string) => this.elements.workflowCard(workflowName)
.findChildByTestId('workflow-card-activator'),
workflowActivatorStatus: (workflowName: string) => this.elements.workflowActivator(workflowName)
.findChildByTestId('workflow-activator-status'),
workflowCardActions: (workflowName: string) => this.elements.workflowCard(workflowName)
.findChildByTestId('workflow-card-actions'),
workflowDeleteButton: () => cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete')
// Not yet implemented
// myWorkflows: () => cy.getByTestId('my-workflows'),
// allWorkflows: () => cy.getByTestId('all-workflows'),
};
}

19
cypress/support/commands.ts
View file

@ -26,12 +26,29 @@
import { WorkflowsPage, SigninPage, SignupPage } from "../pages";
import { N8N_AUTH_COOKIE } from "../constants";
import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
Cypress.Commands.add('getByTestId', (selector, ...args) => {
return cy.get(`[data-test-id="${selector}"]`, ...args)
})
Cypress.Commands.add('createFixtureWorkflow', (fixtureKey, workflowName) => {
const WorkflowPage = new WorkflowPageClass()
// We need to force the click because the input is hidden
WorkflowPage.get('workflowImportInput').selectFile(`cypress/fixtures/${fixtureKey}`, { force: true});
WorkflowPage.get('workflowNameInput').should('be.disabled');
WorkflowPage.get('workflowNameInput').parent().click()
WorkflowPage.get('workflowNameInput').should('be.enabled');
WorkflowPage.get('workflowNameInput').clear().type(workflowName).type('{enter}');
WorkflowPage.get('saveButton').should('contain', 'Saved');
})
Cypress.Commands.add('findChildByTestId', { prevSubject: true }, (subject: Cypress.Chainable<JQuery<HTMLElement>>, childTestId) => {
return subject.find(`[data-test-id="${childTestId}"]`);
})
Cypress.Commands.add(
'signin',
(email, password) => {

2
cypress/support/index.ts
View file

@ -5,6 +5,8 @@ declare global {
namespace Cypress {
interface Chainable {
getByTestId(selector: string, ...args: (Partial<Loggable & Timeoutable & Withinable & Shadow> | undefined)[]): Chainable<JQuery<HTMLElement>>
findChildByTestId(childTestId: string): Chainable<JQuery<HTMLElement>>
createFixtureWorkflow(fixtureKey: string, workflowName: string): void;
signin(email: string, password: string): void;
signup(email: string, firstName: string, lastName: string, password: string): void;
}

2
cypress/types.ts
View file

@ -1,4 +1,4 @@
export type IE2ETestPageElement = (...args: unknown[]) =>
export type IE2ETestPageElement = (...args: any[]) =>
| Cypress.Chainable<JQuery<HTMLElement>>
| Cypress.Chainable<JQuery<HTMLButtonElement>>;

2
packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
View file

@ -14,7 +14,7 @@
:size="iconSize"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown" data-test-id="action-toggle-dropdown">
<el-dropdown-item
v-for="action in actions"
:key="action.value"

5
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View file

@ -17,6 +17,7 @@
@submit="onNameSubmit"
placeholder="Enter workflow name"
class="name"
data-test-id="workflow-name-input"
/>
</template>
</ShortenName>
@ -36,6 +37,7 @@
:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
ref="dropdown"
class="tags-edit"
data-test-id="workflow-tags-dropdown"
/>
</div>
<div
@ -55,6 +57,7 @@
:responsive="true"
:key="currentWorkflowId"
@click="onTagsEditEnable"
data-test-id="workflow-tags"
/>
</span>
<span v-else class="tags"></span>
@ -71,7 +74,7 @@
@click="onSaveButtonClick"
/>
<div :class="$style.workflowMenuContainer">
<input :class="$style.hiddenInput" type="file" ref="importFile" @change="handleFileImport()">
<input :class="$style.hiddenInput" type="file" ref="importFile" data-test-id="workflow-import-input" @change="handleFileImport()">
<n8n-action-dropdown :items="workflowMenuItems" @select="onWorkflowMenuSelect" />
</div>
</template>

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

@ -1,6 +1,6 @@
<template>
<div class="workflow-activator">
<div :class="$style.activeStatusText">
<div :class="$style.activeStatusText" data-test-id="workflow-activator-status">
<n8n-text v-if="workflowActive" :color="couldNotBeStarted ? 'danger' : 'success'" size="small" bold>
{{ $locale.baseText('workflowActivator.active') }}
</n8n-text>

6
packages/editor-ui/src/components/WorkflowCard.vue
View file

@ -2,9 +2,10 @@
<n8n-card
:class="$style.cardLink"
@click="onClick"
data-test-id="workflow-card"
>
<template #header>
<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading">
<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading" data-test-id="workflow-card-name">
{{ data.name }}
</n8n-heading>
</template>
@ -18,6 +19,7 @@
:truncateAt="3"
truncate
@click="onClickTag"
data-test-id="workflow-card-tags"
/>
</span>
</n8n-text>
@ -40,12 +42,14 @@
:workflow-active="data.active"
:workflow-id="data.id"
ref="activator"
data-test-id="workflow-card-activator"
/>
<n8n-action-toggle
:actions="actions"
theme="dark"
@action="onAction"
data-test-id="workflow-card-actions"
/>
</div>
</template>

3
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View file

@ -8,7 +8,7 @@
</div>
<div class="mt-xs mb-l">
<n8n-button size="large" block @click="$emit('click:add', $event)">
<n8n-button size="large" block @click="$emit('click:add', $event)" data-test-id="resources-list-add">
{{ $locale.baseText(`${resourceKey}.add`) }}
</n8n-button>
</div>
@ -53,6 +53,7 @@
size="medium"
clearable
ref="search"
data-test-id="resources-list-search"
>
<n8n-icon icon="search" slot="prefix"/>
</n8n-input>

6
packages/editor-ui/src/views/WorkflowsView.vue
View file

@ -24,13 +24,13 @@
</n8n-text>
</div>
<div class="text-center mt-2xl">
<n8n-card :class="[$style.emptyStateCard, 'mr-s']" hoverable @click="addWorkflow">
<n8n-card :class="[$style.emptyStateCard, 'mr-s']" hoverable @click="addWorkflow" data-test-id="new-workflow-card">
<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
<n8n-text size="large" class="mt-xs" color="text-base">
{{ $locale.baseText('workflows.empty.startFromScratch') }}
</n8n-text>
</n8n-card>
<n8n-card :class="$style.emptyStateCard" hoverable @click="goToTemplates">
<n8n-card :class="$style.emptyStateCard" hoverable @click="goToTemplates" data-test-id="new-workflow-template-card">
<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
<n8n-text size="large" class="mt-xs" color="text-base">
{{ $locale.baseText('workflows.empty.browseTemplates') }}
@ -85,7 +85,7 @@ export default mixins(
showMessage,
debounceHelper,
).extend({
name: 'SettingsPersonalView',
name: 'WorkflowsView',
components: {
ResourcesListLayout,
TemplateCard,