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

test: Add e2e tests for cred setup on workflow editor (no-changelog) (#8245)

Browse source 
## Summary

Follow-up to https://github.com/n8n-io/n8n/pull/8240

Adds e2e tests for the template credential setup in workflow editor


## Related tickets and issues

https://linear.app/n8n/issue/ADO-1463/feature-enable-users-to-close-and-re-open-the-setup
This commit is contained in:
Tomi Turtiainen 2024-01-08 11:35:18 +02:00 committed by GitHub
parent 3cf6704dbb
commit 008fd5a917
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 144 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
cypress/composables/modals/workflow-credential-setup-modal.ts Normal file
View file

@ -0,0 +1,12 @@
/**
* Getters
*/
export const getWorkflowCredentialsModal = () => cy.getByTestId('setup-workflow-credentials-modal');
/**
* Actions
*/
export const closeModal = () =>
getWorkflowCredentialsModal().find("button[aria-label='Close this dialog']").click();

14
cypress/composables/setup-template-form-step.ts Normal file
View file

@ -0,0 +1,14 @@
/**
* Getters
*/
export const getFormStep = () => cy.getByTestId('setup-credentials-form-step');
export const getStepHeading = ($el: JQuery<HTMLElement>) =>
cy.wrap($el).findChildByTestId('credential-step-heading');
export const getStepDescription = ($el: JQuery<HTMLElement>) =>
cy.wrap($el).findChildByTestId('credential-step-description');
export const getCreateAppCredentialsButton = (appName: string) =>
cy.get(`button:contains("Create new ${appName} credential")`);

5
cypress/composables/setup-workflow-credentials-button.ts Normal file
View file

@ -0,0 +1,5 @@
/**
* Getters
*/
export const getSetupWorkflowCredentialsButton = () => cy.get(`button:contains("Set up Template")`);

93
cypress/e2e/34-template-credentials-setup.cy.ts
View file

@ -6,6 +6,9 @@ import {
import * as templateCredentialsSetupPage from '../pages/template-credential-setup';
import { TemplateWorkflowPage } from '../pages/template-workflow';
import { WorkflowPage } from '../pages/workflow';
import * as formStep from '../composables/setup-template-form-step';
import { getSetupWorkflowCredentialsButton } from '../composables/setup-workflow-credentials-button';
import * as setupCredsModal from '../composables/modals/workflow-credential-setup-modal';
const templateWorkflowPage = new TemplateWorkflowPage();
const workflowPage = new WorkflowPage();
@ -69,13 +72,9 @@ describe('Template credentials setup', () => {
'The credential you select will be used in the Telegram node of the workflow template.',
];
templateCredentialsSetupPage.getters.appCredentialSteps().each(($el, index) => {
templateCredentialsSetupPage.getters
.stepHeading($el)
.should('have.text', expectedAppNames[index]);
templateCredentialsSetupPage.getters
.stepDescription($el)
.should('have.text', expectedAppDescriptions[index]);
formStep.getFormStep().each(($el, index) => {
formStep.getStepHeading($el).should('have.text', expectedAppNames[index]);
formStep.getStepDescription($el).should('have.text', expectedAppDescriptions[index]);
});
});
@ -100,10 +99,7 @@ describe('Template credentials setup', () => {
templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)');
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram');
cy.intercept('POST', '/rest/workflows').as('createWorkflow');
templateCredentialsSetupPage.getters.continueButton().should('be.enabled');
templateCredentialsSetupPage.getters.continueButton().click();
cy.wait('@createWorkflow');
templateCredentialsSetupPage.finishCredentialSetup();
workflowPage.getters.canvasNodes().should('have.length', 3);
@ -137,13 +133,9 @@ describe('Template credentials setup', () => {
'The credential you select will be used in the Nextcloud node of the workflow template.',
];
templateCredentialsSetupPage.getters.appCredentialSteps().each(($el, index) => {
templateCredentialsSetupPage.getters
.stepHeading($el)
.should('have.text', expectedAppNames[index]);
templateCredentialsSetupPage.getters
.stepDescription($el)
.should('have.text', expectedAppDescriptions[index]);
formStep.getFormStep().each(($el, index) => {
formStep.getStepHeading($el).should('have.text', expectedAppNames[index]);
formStep.getStepDescription($el).should('have.text', expectedAppDescriptions[index]);
});
templateCredentialsSetupPage.getters.continueButton().should('be.disabled');
@ -151,11 +143,68 @@ describe('Template credentials setup', () => {
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Email (IMAP)');
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Nextcloud');
cy.intercept('POST', '/rest/workflows').as('createWorkflow');
templateCredentialsSetupPage.getters.continueButton().should('be.enabled');
templateCredentialsSetupPage.getters.continueButton().click();
cy.wait('@createWorkflow');
templateCredentialsSetupPage.finishCredentialSetup();
workflowPage.getters.canvasNodes().should('have.length', 3);
});
describe('Credential setup from workflow editor', () => {
beforeEach(() => {
cy.resetDatabase();
cy.signinAsOwner();
});
it('should allow credential setup from workflow editor if user skips it during template setup', () => {
templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
templateCredentialsSetupPage.getters.skipLink().click();
getSetupWorkflowCredentialsButton().should('be.visible');
// We need to save the workflow or otherwise a browser native popup
// will block cypress from continuing
workflowPage.actions.saveWorkflowOnButtonClick();
});
it('should allow credential setup from workflow editor if user fills in credentials partially during template setup', () => {
templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Shopify');
templateCredentialsSetupPage.finishCredentialSetup();
getSetupWorkflowCredentialsButton().should('be.visible');
});
it('should fill credentials from workflow editor', () => {
templateCredentialsSetupPage.visitTemplateCredentialSetupPage(testTemplate.id);
templateCredentialsSetupPage.getters.skipLink().click();
getSetupWorkflowCredentialsButton().click();
setupCredsModal.getWorkflowCredentialsModal().should('be.visible');
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Shopify');
templateCredentialsSetupPage.fillInDummyCredentialsForAppWithConfirm('X (Formerly Twitter)');
templateCredentialsSetupPage.fillInDummyCredentialsForApp('Telegram');
setupCredsModal.closeModal();
// Focus the canvas so the copy to clipboard works
workflowPage.getters.canvasNodes().eq(0).realClick();
workflowPage.actions.selectAll();
workflowPage.actions.hitCopy();
cy.grantBrowserPermissions('clipboardReadWrite', 'clipboardSanitizedWrite');
// Check workflow JSON by copying it to clipboard
cy.readClipboard().then((workflowJSON) => {
const workflow = JSON.parse(workflowJSON);
workflow.nodes.forEach((node: any) => {
expect(Object.keys(node.credentials ?? {})).to.have.lengthOf(1);
});
});
// We need to save the workflow or otherwise a browser native popup
// will block cypress from continuing
workflowPage.actions.saveWorkflowOnButtonClick();
});
});
});

30
cypress/pages/template-credential-setup.ts
View file

@ -1,4 +1,5 @@
import { CredentialsModal, MessageBox } from './modals';
import * as formStep from '../composables/setup-template-form-step';
export type TemplateTestData = {
id: number;
@ -24,17 +25,6 @@ export const getters = {
skipLink: () => cy.get('a:contains("Skip")'),
title: (title: string) => cy.get(`h1:contains(${title})`),
infoCallout: () => cy.getByTestId('info-callout'),
createAppCredentialsButton: (appName: string) =>
cy.get(`button:contains("Create new ${appName} credential")`),
appCredentialSteps: () => cy.getByTestId('setup-credentials-form-step'),
stepHeading: ($el: JQuery<HTMLElement>) =>
cy.wrap($el).findChildByTestId('credential-step-heading'),
stepDescription: ($el: JQuery<HTMLElement>) =>
cy.wrap($el).findChildByTestId('credential-step-description'),
};
export const visitTemplateCredentialSetupPage = (templateId: number) => {
cy.visit(`/templates/${templateId}/setup`);
};
export const enableTemplateCredentialSetupFeatureFlag = () => {
@ -43,11 +33,17 @@ export const enableTemplateCredentialSetupFeatureFlag = () => {
});
};
export const visitTemplateCredentialSetupPage = (templateId: number) => {
cy.visit(`/templates/${templateId}/setup`);
formStep.getFormStep().eq(0).should('be.visible');
enableTemplateCredentialSetupFeatureFlag();
};
/**
* Fills in dummy credentials for the given app name.
*/
export const fillInDummyCredentialsForApp = (appName: string) => {
getters.createAppCredentialsButton(appName).click();
formStep.getCreateAppCredentialsButton(appName).click();
credentialsModal.getters.editCredentialModal().find('input:first()').type('test');
credentialsModal.actions.save(false);
credentialsModal.actions.close();
@ -62,3 +58,13 @@ export const fillInDummyCredentialsForAppWithConfirm = (appName: string) => {
fillInDummyCredentialsForApp(appName);
messageBox.actions.cancel();
};
/**
* Finishes the credential setup by clicking the continue button.
*/
export const finishCredentialSetup = () => {
cy.intercept('POST', '/rest/workflows').as('createWorkflow');
getters.continueButton().should('be.enabled');
getters.continueButton().click();
cy.wait('@createWorkflow');
};

20
cypress/support/commands.ts
View file

@ -1,6 +1,12 @@
import 'cypress-real-events';
import { WorkflowPage } from '../pages';
import { BACKEND_BASE_URL, INSTANCE_MEMBERS, INSTANCE_OWNER, N8N_AUTH_COOKIE } from '../constants';
import {
BACKEND_BASE_URL,
INSTANCE_ADMIN,
INSTANCE_MEMBERS,
INSTANCE_OWNER,
N8N_AUTH_COOKIE,
} from '../constants';
Cypress.Commands.add('getByTestId', (selector, ...args) => {
return cy.get(`[data-test-id="${selector}"]`, ...args);
@ -51,6 +57,10 @@ Cypress.Commands.add('signin', ({ email, password }) => {
);
});
Cypress.Commands.add('signinAsOwner', () => {
cy.signin({ email: INSTANCE_OWNER.email, password: INSTANCE_OWNER.password });
});
Cypress.Commands.add('signout', () => {
cy.request('POST', `${BACKEND_BASE_URL}/rest/logout`);
cy.getCookie(N8N_AUTH_COOKIE).should('not.exist');
@ -183,3 +193,11 @@ Cypress.Commands.add('shouldNotHaveConsoleErrors', () => {
cy.wrap(spy).should('not.have.been.called');
});
});
Cypress.Commands.add('resetDatabase', () => {
cy.request('POST', `${BACKEND_BASE_URL}/rest/e2e/reset`, {
owner: INSTANCE_OWNER,
members: INSTANCE_MEMBERS,
admin: INSTANCE_ADMIN,
});
});

8
cypress/support/e2e.ts
View file

@ -1,12 +1,8 @@
import { BACKEND_BASE_URL, INSTANCE_ADMIN, INSTANCE_MEMBERS, INSTANCE_OWNER } from '../constants';
import { INSTANCE_OWNER } from '../constants';
import './commands';
before(() => {
cy.request('POST', `${BACKEND_BASE_URL}/rest/e2e/reset`, {
owner: INSTANCE_OWNER,
members: INSTANCE_MEMBERS,
admin: INSTANCE_ADMIN,
});
cy.resetDatabase();
Cypress.on('uncaught:exception', (err) => {
return !err.message.includes('ResizeObserver');

2
cypress/support/index.ts
View file

@ -23,6 +23,7 @@ declare global {
findChildByTestId(childTestId: string): Chainable<JQuery<HTMLElement>>;
createFixtureWorkflow(fixtureKey: string, workflowName: string): void;
signin(payload: SigninPayload): void;
signinAsOwner(): void;
signout(): void;
interceptREST(method: string, url: string): Chainable<Interception>;
enableFeature(feature: string): void;
@ -48,6 +49,7 @@ declare global {
};
}
>;
resetDatabase(): void;
}
}
}

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

@ -166,7 +166,7 @@
<ModalRoot :name="SETUP_CREDENTIALS_MODAL_KEY">
<template #default="{ modalName, data }">
<SetupWorkflowCredentialsModal
data-test-id="suggested-templates-preview-modal"
data-test-id="setup-workflow-credentials-modal"
:modal-name="modalName"
:data="data"
/>