From c01af2e85a6a3ad58637e6e30345e9d38b8a805d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 4 Mar 2025 15:42:11 +0200
Subject: [PATCH] test: add test for rendering simulate node

---
 .../editor-ui/src/__tests__/data/canvas.ts    |  2 +-
 .../frontend/editor-ui/src/__tests__/mocks.ts |  5 +++
 .../src/components/canvas/Canvas.test.ts      | 35 +++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/editor-ui/src/__tests__/data/canvas.ts b/packages/frontend/editor-ui/src/__tests__/data/canvas.ts
index 08330730c3..4230779894 100644
--- a/packages/frontend/editor-ui/src/__tests__/data/canvas.ts
+++ b/packages/frontend/editor-ui/src/__tests__/data/canvas.ts
@@ -55,7 +55,7 @@ export function createCanvasNodeData({
 
 export function createCanvasNodeElement({
 	id = '1',
-	type = 'default',
+	type = 'canvas-node',
 	label = 'Node',
 	position = { x: 100, y: 100 },
 	data,
diff --git a/packages/frontend/editor-ui/src/__tests__/mocks.ts b/packages/frontend/editor-ui/src/__tests__/mocks.ts
index 6db800e785..09787a5888 100644
--- a/packages/frontend/editor-ui/src/__tests__/mocks.ts
+++ b/packages/frontend/editor-ui/src/__tests__/mocks.ts
@@ -23,6 +23,7 @@ import {
 	MANUAL_TRIGGER_NODE_TYPE,
 	NO_OP_NODE_TYPE,
 	SET_NODE_TYPE,
+	SIMULATE_NODE_TYPE,
 	STICKY_NODE_TYPE,
 } from '@/constants';
 import type { INodeUi, IWorkflowDb } from '@/Interface';
@@ -50,6 +51,7 @@ export const mockNode = ({
 
 export const mockNodeTypeDescription = ({
 	name = SET_NODE_TYPE,
+	icon = 'icon',
 	version = 1,
 	credentials = [],
 	inputs = [NodeConnectionType.Main],
@@ -58,6 +60,7 @@ export const mockNodeTypeDescription = ({
 	properties = [],
 }: {
 	name?: INodeTypeDescription['name'];
+	icon?: INodeTypeDescription['icon'];
 	version?: INodeTypeDescription['version'];
 	credentials?: INodeTypeDescription['credentials'];
 	inputs?: INodeTypeDescription['inputs'];
@@ -67,6 +70,7 @@ export const mockNodeTypeDescription = ({
 } = {}) =>
 	mock<INodeTypeDescription>({
 		name,
+		icon,
 		displayName: name,
 		description: '',
 		version,
@@ -101,6 +105,7 @@ export const mockNodes = [
 	mockNode({ name: 'Chat Trigger', type: CHAT_TRIGGER_NODE_TYPE }),
 	mockNode({ name: 'Agent', type: AGENT_NODE_TYPE }),
 	mockNode({ name: 'Sticky', type: STICKY_NODE_TYPE }),
+	mockNode({ name: 'Simulate', type: SIMULATE_NODE_TYPE }),
 	mockNode({ name: CanvasNodeRenderType.AddNodes, type: CanvasNodeRenderType.AddNodes }),
 	mockNode({ name: 'End', type: NO_OP_NODE_TYPE }),
 ];
diff --git a/packages/frontend/editor-ui/src/components/canvas/Canvas.test.ts b/packages/frontend/editor-ui/src/components/canvas/Canvas.test.ts
index c40d75c6be..b8f01ec5e0 100644
--- a/packages/frontend/editor-ui/src/components/canvas/Canvas.test.ts
+++ b/packages/frontend/editor-ui/src/components/canvas/Canvas.test.ts
@@ -8,6 +8,8 @@ import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/dat
 import { NodeConnectionType } from 'n8n-workflow';
 import type { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useVueFlow } from '@vue-flow/core';
+import { defaultNodeTypes, mockNodeTypeDescription } from '@/__tests__/mocks';
+import { SET_NODE_TYPE, SIMULATE_NODE_TYPE } from '@/constants';
 
 const matchMedia = global.window.matchMedia;
 // @ts-expect-error Initialize window object
@@ -273,4 +275,37 @@ describe('Canvas', () => {
 			expect(patternCanvas?.innerHTML).not.toContain('<circle');
 		});
 	});
+
+	describe('simulate', () => {
+		it('should render simulate node', async () => {
+			const nodes = [
+				createCanvasNodeElement({
+					id: '1',
+					label: 'Node',
+					position: { x: 200, y: 200 },
+					data: {
+						type: SIMULATE_NODE_TYPE,
+						typeVersion: 1,
+						simulatedType: SET_NODE_TYPE,
+					},
+				}),
+			];
+
+			const nodeTypeDescriptions = {
+				[SET_NODE_TYPE]: mockNodeTypeDescription({ name: SET_NODE_TYPE, icon: 'fa:pen' }),
+				[`${SIMULATE_NODE_TYPE}@1`]: defaultNodeTypes[SIMULATE_NODE_TYPE].type.description,
+			};
+
+			const { container } = renderComponent({
+				props: {
+					nodes,
+					nodeTypeDescriptions,
+				},
+			});
+
+			await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(1));
+
+			expect(container.querySelector('.icon')).toBeInTheDocument();
+		});
+	});
 });