feat(editor): Add support for Simulate nodes in new canvas (no-changelog) (#13675)

packages/frontend/editor-ui/src/components/canvas/Canvas.test.ts

@@ -8,6 +8,7 @@ import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/dat
 import { NodeConnectionTypes } from 'n8n-workflow';
 import type { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useVueFlow } from '@vue-flow/core';
+import { SIMULATE_NODE_TYPE } from '@/constants';
 
 const matchMedia = global.window.matchMedia;
 // @ts-expect-error Initialize window object
@@ -273,4 +274,30 @@ 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,
+					},
+				}),
+			];
+
+			const { container } = renderComponent({
+				props: {
+					nodes,
+				},
+			});
+
+			await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(1));
+
+			expect(container.querySelector('.icon')).toBeInTheDocument();
+		});
+	});
 });

packages/frontend/editor-ui/src/components/canvas/Canvas.vue

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';
-import {
-	type CanvasLayoutEvent,
-	type CanvasLayoutSource,
-	useCanvasLayout,
-} from '@/composables/useCanvasLayout';
+import type { CanvasLayoutEvent, CanvasLayoutSource } from '@/composables/useCanvasLayout';
+import { useCanvasLayout } from '@/composables/useCanvasLayout';
 import { useCanvasNodeHover } from '@/composables/useCanvasNodeHover';
 import { useCanvasTraversal } from '@/composables/useCanvasTraversal';
 import { type ContextMenuAction, useContextMenu } from '@/composables/useContextMenu';