feat: Add onboarding flow (#7212)

Github issue / Community forum post (link here to close automatically):

cypress/e2e/29-templates.cy.ts

@@ -0,0 +1,34 @@
+import { TemplatesPage } from '../pages/templates';
+import { WorkflowPage } from '../pages/workflow';
+
+import OnboardingWorkflow from '../fixtures/Onboarding_workflow.json';
+
+const templatesPage = new TemplatesPage();
+const workflowPage = new WorkflowPage();
+
+describe('Templates', () => {
+	it('can open onboarding flow', () => {
+		templatesPage.actions.openOnboardingFlow(1234, OnboardingWorkflow.name, OnboardingWorkflow);
+		cy.url().then(($url) => {
+			expect($url).to.match(/.*\/workflow\/.*?onboardingId=1234$/);
+		})
+
+		workflowPage.actions.shouldHaveWorkflowName(`Demo: ${name}`);
+
+		workflowPage.getters.canvasNodes().should('have.length', 4);
+		workflowPage.getters.stickies().should('have.length', 1);
+		workflowPage.getters.canvasNodes().first().should('have.descendants', '.node-pin-data-icon');
+	});
+
+	it('can import template', () => {
+		templatesPage.actions.importTemplate(1234, OnboardingWorkflow.name, OnboardingWorkflow);
+
+		cy.url().then(($url) => {
+			expect($url).to.include('/workflow/new?templateId=1234');
+		});
+		
+		workflowPage.getters.canvasNodes().should('have.length', 4);
+		workflowPage.getters.stickies().should('have.length', 1);
+		workflowPage.actions.shouldHaveWorkflowName(OnboardingWorkflow.name);
+	});
+});

cypress/pages/templates.ts

@@ -0,0 +1,50 @@
+import { BasePage } from './base';
+import { WorkflowPage } from './workflow';
+
+const workflowPage = new WorkflowPage();
+export class TemplatesPage extends BasePage {
+	url = '/templates';
+
+	getters = {
+	};
+
+	actions = {
+		openOnboardingFlow: (id: number, name: string , workflow: object) => {
+			const apiResponse = {
+				id,
+				name,
+				workflow,
+			};
+			cy.intercept('POST', '/rest/workflows').as('createWorkflow');
+			cy.intercept('GET', `https://api.n8n.io/api/workflows/templates/${id}`, {
+				statusCode: 200,
+				body: apiResponse,
+			}).as('getTemplate');
+			cy.intercept('GET', 'rest/workflows/**').as('getWorkflow');
+
+			cy.visit(`/workflows/onboarding/${id}`);
+
+			cy.wait('@getTemplate');
+			cy.wait(['@createWorkflow', '@getWorkflow']);
+		},
+
+		importTemplate: (id: number, name: string, workflow: object) => {
+			const apiResponse = {
+				id,
+				name,
+				workflow,
+			};
+			cy.intercept('GET', `https://api.n8n.io/api/workflows/templates/${id}`, {
+				statusCode: 200,
+				body: apiResponse,
+			}).as('getTemplate');
+			cy.intercept('GET', 'rest/workflows/**').as('getWorkflow');
+
+			cy.visit(`/workflows/templates/${id}`);
+
+			cy.wait('@getTemplate');
+			cy.wait( '@getWorkflow');
+		}
+	}
+}
+

cypress/pages/workflow.ts

@@ -304,5 +304,11 @@ export class WorkflowPage extends BasePage {
 		editSticky: (content: string) => {
 			this.getters.stickies().dblclick().find('textarea').clear().type(content).type('{esc}');
 		},
+		shouldHaveWorkflowName: (name: string) => {
+			this.getters
+			.workflowNameInputContainer()
+			.invoke('attr', 'title')
+			.should('include', name);
+		},
 	};
 }