refactor(editor): Use typed-mocks to speed up tests and type-checking (no-changelog) (#9796)

2024-06-19 07:41:27 +02:00
parent 41e06be6fd
commit e3e20b48eb
28 changed files with 444 additions and 8684 deletions
--- a/packages/editor-ui/src/composables/tests/useActiveNode.test.ts
+++ b/packages/editor-ui/src/composables/tests/useActiveNode.test.ts
@@ -1,13 +1,12 @@
+import { computed } from 'vue';
 import { describe, it, expect, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+
 import { useActiveNode } from '@/composables/useActiveNode';
 import { useNodeType } from '@/composables/useNodeType';
-import { createTestNode } from '@/__tests__/mocks';
-import { MANUAL_TRIGGER_NODE_TYPE } from '@/constants';
-import { computed } from 'vue';
-import { defaultMockNodeTypes } from '@/__tests__/defaults';

-const node = computed(() => createTestNode({ name: 'Node', type: MANUAL_TRIGGER_NODE_TYPE }));
-const nodeType = computed(() => defaultMockNodeTypes[MANUAL_TRIGGER_NODE_TYPE]);
+const node = computed(() => mock());
+const nodeType = computed(() => mock());

 vi.mock('@/stores/ndv.store', () => ({
 	useNDVStore: vi.fn(() => ({
--- a/packages/editor-ui/src/composables/tests/useCanvasMapping.spec.ts
+++ b/packages/editor-ui/src/composables/tests/useCanvasMapping.spec.ts
@@ -1,11 +1,13 @@
 import type { Ref } from 'vue';
 import { ref } from 'vue';
-import { useCanvasMapping } from '@/composables/useCanvasMapping';
-import { createTestNode, createTestWorkflow, createTestWorkflowObject } from '@/__tests__/mocks';
-import type { IConnections, Workflow } from 'n8n-workflow';
-import { createPinia, setActivePinia } from 'pinia';
-import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE } from '@/constants';
 import { NodeConnectionType } from 'n8n-workflow';
+import type { Workflow } from 'n8n-workflow';
+import { createPinia, setActivePinia } from 'pinia';
+import { mock } from 'vitest-mock-extended';
+
+import { useCanvasMapping } from '@/composables/useCanvasMapping';
+import type { IWorkflowDb } from '@/Interface';
+import { createTestWorkflowObject, mockNodes } from '@/__tests__/mocks';

 vi.mock('@/stores/nodeTypes.store', () => ({
 	useNodeTypesStore: vi.fn(() => ({
@@ -30,11 +32,8 @@ afterEach(() => {

 describe('useCanvasMapping', () => {
 	it('should initialize with default props', () => {
-		const workflow = createTestWorkflow({
-			id: '1',
-			name: 'Test Workflow',
+		const workflow = mock<IWorkflowDb>({
 			nodes: [],
-			connections: {},
 		});
 		const workflowObject = createTestWorkflowObject(workflow);

@@ -49,14 +48,9 @@ describe('useCanvasMapping', () => {

 	describe('elements', () => {
 		it('should map nodes to canvas elements', () => {
-			const node = createTestNode({
-				name: 'Node',
-				type: MANUAL_TRIGGER_NODE_TYPE,
-			});
-			const workflow = createTestWorkflow({
-				name: 'Test Workflow',
-				nodes: [node],
-				connections: {},
+			const manualTriggerNode = mockNodes[0];
+			const workflow = mock<IWorkflowDb>({
+				nodes: [manualTriggerNode],
 			});
 			const workflowObject = createTestWorkflowObject(workflow);

@@ -67,14 +61,14 @@ describe('useCanvasMapping', () => {

 			expect(elements.value).toEqual([
 				{
-					id: node.id,
-					label: node.name,
+					id: manualTriggerNode.id,
+					label: manualTriggerNode.name,
 					type: 'canvas-node',
-					position: { x: 0, y: 0 },
+					position: expect.anything(),
 					data: {
-						id: node.id,
-						type: node.type,
-						typeVersion: 1,
+						id: manualTriggerNode.id,
+						type: manualTriggerNode.type,
+						typeVersion: expect.anything(),
 						inputs: [],
 						outputs: [],
 						renderType: 'default',
@@ -86,24 +80,16 @@ describe('useCanvasMapping', () => {

 	describe('connections', () => {
 		it('should map connections to canvas connections', () => {
-			const nodeA = createTestNode({
-				name: 'Node A',
-				type: MANUAL_TRIGGER_NODE_TYPE,
-			});
-			const nodeB = createTestNode({
-				name: 'Node B',
-				type: SET_NODE_TYPE,
-			});
-			const workflow = createTestWorkflow({
-				name: 'Test Workflow',
-				nodes: [nodeA, nodeB],
+			const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
+			const workflow = mock<IWorkflowDb>({
+				nodes: [manualTriggerNode, setNode],
 				connections: {
-					[nodeA.name]: {
+					[manualTriggerNode.name]: {
 						[NodeConnectionType.Main]: [
-							[{ node: nodeB.name, type: NodeConnectionType.Main, index: 0 }],
+							[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
 						],
 					},
-				} as IConnections,
+				},
 			});
 			const workflowObject = createTestWorkflowObject(workflow);

@@ -115,7 +101,7 @@ describe('useCanvasMapping', () => {
 			expect(connections.value).toEqual([
 				{
 					data: {
-						fromNodeName: nodeA.name,
+						fromNodeName: manualTriggerNode.name,
 						source: {
 							index: 0,
 							type: NodeConnectionType.Main,
@@ -125,11 +111,11 @@ describe('useCanvasMapping', () => {
 							type: NodeConnectionType.Main,
 						},
 					},
-					id: `[${nodeA.id}/${NodeConnectionType.Main}/0][${nodeB.id}/${NodeConnectionType.Main}/0]`,
+					id: `[${manualTriggerNode.id}/${NodeConnectionType.Main}/0][${setNode.id}/${NodeConnectionType.Main}/0]`,
 					label: '',
-					source: nodeA.id,
+					source: manualTriggerNode.id,
 					sourceHandle: `outputs/${NodeConnectionType.Main}/0`,
-					target: nodeB.id,
+					target: setNode.id,
 					targetHandle: `inputs/${NodeConnectionType.Main}/0`,
 					type: 'canvas-edge',
 				},
@@ -137,24 +123,16 @@ describe('useCanvasMapping', () => {
 		});

 		it('should map multiple input types to canvas connections', () => {
-			const nodeA = createTestNode({
-				name: 'Node A',
-				type: MANUAL_TRIGGER_NODE_TYPE,
-			});
-			const nodeB = createTestNode({
-				name: 'Node B',
-				type: SET_NODE_TYPE,
-			});
-			const workflow = createTestWorkflow({
-				name: 'Test Workflow',
-				nodes: [nodeA, nodeB],
+			const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
+			const workflow = mock<IWorkflowDb>({
+				nodes: [manualTriggerNode, setNode],
 				connections: {
-					'Node A': {
+					[manualTriggerNode.name]: {
 						[NodeConnectionType.AiTool]: [
-							[{ node: nodeB.name, type: NodeConnectionType.AiTool, index: 0 }],
+							[{ node: setNode.name, type: NodeConnectionType.AiTool, index: 0 }],
 						],
 						[NodeConnectionType.AiDocument]: [
-							[{ node: nodeB.name, type: NodeConnectionType.AiDocument, index: 1 }],
+							[{ node: setNode.name, type: NodeConnectionType.AiDocument, index: 1 }],
 						],
 					},
 				},
@@ -169,7 +147,7 @@ describe('useCanvasMapping', () => {
 			expect(connections.value).toEqual([
 				{
 					data: {
-						fromNodeName: nodeA.name,
+						fromNodeName: manualTriggerNode.name,
 						source: {
 							index: 0,
 							type: NodeConnectionType.AiTool,
@@ -179,17 +157,17 @@ describe('useCanvasMapping', () => {
 							type: NodeConnectionType.AiTool,
 						},
 					},
-					id: `[${nodeA.id}/${NodeConnectionType.AiTool}/0][${nodeB.id}/${NodeConnectionType.AiTool}/0]`,
+					id: `[${manualTriggerNode.id}/${NodeConnectionType.AiTool}/0][${setNode.id}/${NodeConnectionType.AiTool}/0]`,
 					label: '',
-					source: nodeA.id,
+					source: manualTriggerNode.id,
 					sourceHandle: `outputs/${NodeConnectionType.AiTool}/0`,
-					target: nodeB.id,
+					target: setNode.id,
 					targetHandle: `inputs/${NodeConnectionType.AiTool}/0`,
 					type: 'canvas-edge',
 				},
 				{
 					data: {
-						fromNodeName: nodeA.name,
+						fromNodeName: manualTriggerNode.name,
 						source: {
 							index: 0,
 							type: NodeConnectionType.AiDocument,
@@ -199,11 +177,11 @@ describe('useCanvasMapping', () => {
 							type: NodeConnectionType.AiDocument,
 						},
 					},
-					id: `[${nodeA.id}/${NodeConnectionType.AiDocument}/0][${nodeB.id}/${NodeConnectionType.AiDocument}/1]`,
+					id: `[${manualTriggerNode.id}/${NodeConnectionType.AiDocument}/0][${setNode.id}/${NodeConnectionType.AiDocument}/1]`,
 					label: '',
-					source: nodeA.id,
+					source: manualTriggerNode.id,
 					sourceHandle: `outputs/${NodeConnectionType.AiDocument}/0`,
-					target: nodeB.id,
+					target: setNode.id,
 					targetHandle: `inputs/${NodeConnectionType.AiDocument}/1`,
 					type: 'canvas-edge',
 				},
--- a/packages/editor-ui/src/composables/tests/useCanvasOperations.spec.ts
+++ b/packages/editor-ui/src/composables/tests/useCanvasOperations.spec.ts
@@ -1,3 +1,8 @@
+import { createPinia, setActivePinia } from 'pinia';
+import type { Connection } from '@vue-flow/core';
+import type { IConnection } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
+
 import { useCanvasOperations } from '@/composables/useCanvasOperations';
 import type { CanvasElement } from '@/types';
 import type { INodeUi } from '@/Interface';
@@ -5,12 +10,8 @@ import { RemoveNodeCommand } from '@/models/history';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useHistoryStore } from '@/stores/history.store';
-import { createPinia, setActivePinia } from 'pinia';
-import { createTestNode, createTestWorkflowObject } from '@/__tests__/mocks';
-import type { Connection } from '@vue-flow/core';
-import type { IConnection } from 'n8n-workflow';
-import { NodeConnectionType } from 'n8n-workflow';
 import { useNDVStore } from '@/stores/ndv.store';
+import { createTestNode, createTestWorkflowObject } from '@/__tests__/mocks';

 describe('useCanvasOperations', () => {
 	let workflowsStore: ReturnType<typeof useWorkflowsStore>;
@@ -255,23 +256,6 @@ describe('useCanvasOperations', () => {
 			expect(uiStore.stateIsDirty).toBe(false);
 		});

-		// @TODO Implement once the isConnectionAllowed method is implemented
-		it.skip('should not create a connection if connection is not allowed', () => {
-			const addConnectionSpy = vi
-				.spyOn(workflowsStore, 'addConnection')
-				.mockImplementation(() => {});
-			const connection: Connection = { source: 'sourceNode', target: 'targetNode' };
-
-			vi.spyOn(workflowsStore, 'getNodeById')
-				.mockReturnValueOnce(createTestNode())
-				.mockReturnValueOnce(createTestNode());
-
-			canvasOperations.createConnection(connection);
-
-			expect(addConnectionSpy).not.toHaveBeenCalled();
-			expect(uiStore.stateIsDirty).toBe(false);
-		});
-
 		it('should create a connection if source and target nodes exist and connection is allowed', () => {
 			const addConnectionSpy = vi
 				.spyOn(workflowsStore, 'addConnection')
--- a/packages/editor-ui/src/composables/tests/useNodeBase.spec.ts
+++ b/packages/editor-ui/src/composables/tests/useNodeBase.spec.ts
@@ -1,43 +1,39 @@
-import { useNodeBase } from '@/composables/useNodeBase';
-import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { createTestNode, createTestWorkflowObject } from '@/__tests__/mocks';
 import { createPinia, setActivePinia } from 'pinia';
+import { mock, mockClear } from 'vitest-mock-extended';
+import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import type { INode, INodeTypeDescription, Workflow } from 'n8n-workflow';
+
+import { useNodeBase } from '@/composables/useNodeBase';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { findNodeTypeDescriptionByName } from '@/__tests__/defaults';
-import { SET_NODE_TYPE } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';
-import type { INodeTypeDescription, Workflow } from 'n8n-workflow';
-import type { INodeUi } from '@/Interface';
-import type { Mock } from '@vitest/spy';

 describe('useNodeBase', () => {
 	let pinia: ReturnType<typeof createPinia>;
 	let workflowsStore: ReturnType<typeof useWorkflowsStore>;
 	let uiStore: ReturnType<typeof useUIStore>;
-	let instance: Record<string, Mock>;
-	let workflowObject: Workflow;
 	let emit: (event: string, ...args: unknown[]) => void;
-	let node: INodeUi;
-	let nodeTypeDescription: INodeTypeDescription;
 	let nodeBase: ReturnType<typeof useNodeBase>;

+	const jsPlumbInstance = mock<BrowserJsPlumbInstance>();
+	const nodeTypeDescription = mock<INodeTypeDescription>({
+		inputs: ['main'],
+		outputs: ['main'],
+	});
+	const workflowObject = mock<Workflow>();
+	const node = mock<INode>();
+
 	beforeEach(() => {
+		mockClear(jsPlumbInstance);
+
 		pinia = createPinia();
 		setActivePinia(pinia);

 		workflowsStore = useWorkflowsStore();
 		uiStore = useUIStore();
-
-		instance = {
-			addEndpoint: vi.fn().mockReturnValue({}),
-		};
-		workflowObject = createTestWorkflowObject({ nodes: [], connections: {} });
-		node = createTestNode();
-		nodeTypeDescription = findNodeTypeDescriptionByName(SET_NODE_TYPE);
 		emit = vi.fn();

 		nodeBase = useNodeBase({
-			instance: instance as unknown as BrowserJsPlumbInstance,
+			instance: jsPlumbInstance,
 			name: node.name,
 			workflowObject,
 			isReadOnly: false,
@@ -54,83 +50,89 @@ describe('useNodeBase', () => {

 	describe('addInputEndpoints', () => {
 		it('should add input endpoints correctly', () => {
-			const { addInputEndpoints } = nodeBase;
-
+			jsPlumbInstance.addEndpoint.mockReturnValue(mock());
 			vi.spyOn(workflowsStore, 'getNodeByName').mockReturnValue(node);

-			addInputEndpoints(node, nodeTypeDescription);
-
-			const addEndpointCall = instance.addEndpoint.mock.calls[0][1];
+			nodeBase.addInputEndpoints(node, nodeTypeDescription);

 			expect(workflowsStore.getNodeByName).toHaveBeenCalledWith(node.name);
-			expect(addEndpointCall.anchor).toEqual([0.01, 0.5, -1, 0]);
-			expect(addEndpointCall.cssClass).toEqual('rect-input-endpoint');
-			expect(addEndpointCall.dragAllowedWhenFull).toEqual(true);
-			expect(addEndpointCall.enabled).toEqual(true);
-			expect(addEndpointCall.endpoint).toEqual('Rectangle');
-			expect(addEndpointCall.hoverClass).toEqual('rect-input-endpoint-hover');
-			expect(addEndpointCall.hoverPaintStyle).toMatchObject({
-				fill: 'var(--color-primary)',
-				height: 20,
-				lineWidth: 0,
-				stroke: 'var(--color-primary)',
-				width: 8,
+			expect(jsPlumbInstance.addEndpoint).toHaveBeenCalledWith(undefined, {
+				anchor: [0.01, 0.5, -1, 0],
+				maxConnections: -1,
+				endpoint: 'Rectangle',
+				paintStyle: {
+					width: 8,
+					height: 20,
+					fill: 'var(--node-type-main-color)',
+					stroke: 'var(--node-type-main-color)',
+					lineWidth: 0,
+				},
+				hoverPaintStyle: {
+					width: 8,
+					height: 20,
+					fill: 'var(--color-primary)',
+					stroke: 'var(--color-primary)',
+					lineWidth: 0,
+				},
+				source: false,
+				target: false,
+				parameters: {
+					connection: 'target',
+					nodeId: node.id,
+					type: 'main',
+					index: 0,
+				},
+				enabled: true,
+				cssClass: 'rect-input-endpoint',
+				dragAllowedWhenFull: true,
+				hoverClass: 'rect-input-endpoint-hover',
+				uuid: `${node.id}-input0`,
 			});
-			expect(addEndpointCall.maxConnections).toEqual(-1);
-			expect(addEndpointCall.paintStyle).toMatchObject({
-				fill: 'var(--node-type-main-color)',
-				height: 20,
-				lineWidth: 0,
-				stroke: 'var(--node-type-main-color)',
-				width: 8,
-			});
-			expect(addEndpointCall.parameters).toMatchObject({
-				connection: 'target',
-				index: 0,
-				type: 'main',
-			});
-			expect(addEndpointCall.scope).toBeUndefined();
-			expect(addEndpointCall.source).toBeFalsy();
-			expect(addEndpointCall.target).toBeFalsy();
 		});
 	});

 	describe('addOutputEndpoints', () => {
 		it('should add output endpoints correctly', () => {
-			const { addOutputEndpoints } = nodeBase;
 			const getNodeByNameSpy = vi.spyOn(workflowsStore, 'getNodeByName').mockReturnValue(node);

-			addOutputEndpoints(node, nodeTypeDescription);
-
-			const addEndpointCall = instance.addEndpoint.mock.calls[0][1];
+			nodeBase.addOutputEndpoints(node, nodeTypeDescription);

 			expect(getNodeByNameSpy).toHaveBeenCalledWith(node.name);
-			expect(addEndpointCall.anchor).toEqual([0.99, 0.5, 1, 0]);
-			expect(addEndpointCall.cssClass).toEqual('dot-output-endpoint');
-			expect(addEndpointCall.dragAllowedWhenFull).toEqual(false);
-			expect(addEndpointCall.enabled).toEqual(true);
-			expect(addEndpointCall.endpoint).toEqual({
-				options: {
-					radius: 9,
+			expect(jsPlumbInstance.addEndpoint).toHaveBeenCalledWith(undefined, {
+				anchor: [0.99, 0.5, 1, 0],
+				connectionsDirected: true,
+				cssClass: 'dot-output-endpoint',
+				dragAllowedWhenFull: false,
+				enabled: true,
+				endpoint: {
+					options: {
+						radius: 9,
+					},
+					type: 'Dot',
 				},
-				type: 'Dot',
+				hoverClass: 'dot-output-endpoint-hover',
+				hoverPaintStyle: {
+					fill: 'var(--color-primary)',
+					outlineStroke: 'none',
+					strokeWidth: 9,
+				},
+				maxConnections: -1,
+				paintStyle: {
+					fill: 'var(--node-type-main-color)',
+					outlineStroke: 'none',
+					strokeWidth: 9,
+				},
+				parameters: {
+					connection: 'source',
+					index: 0,
+					nodeId: node.id,
+					type: 'main',
+				},
+				scope: undefined,
+				source: true,
+				target: false,
+				uuid: `${node.id}-output0`,
 			});
-			expect(addEndpointCall.hoverClass).toEqual('dot-output-endpoint-hover');
-			expect(addEndpointCall.hoverPaintStyle).toMatchObject({
-				fill: 'var(--color-primary)',
-			});
-			expect(addEndpointCall.maxConnections).toEqual(-1);
-			expect(addEndpointCall.paintStyle).toMatchObject({
-				fill: 'var(--node-type-main-color)',
-			});
-			expect(addEndpointCall.parameters).toMatchObject({
-				connection: 'source',
-				index: 0,
-				type: 'main',
-			});
-			expect(addEndpointCall.scope).toBeUndefined();
-			expect(addEndpointCall.source).toBeTruthy();
-			expect(addEndpointCall.target).toBeFalsy();
 		});
 	});

--- a/packages/editor-ui/src/composables/tests/useNodeConnections.spec.ts
+++ b/packages/editor-ui/src/composables/tests/useNodeConnections.spec.ts
--- a/packages/editor-ui/src/composables/tests/usePushConnection.spec.ts
+++ b/packages/editor-ui/src/composables/tests/usePushConnection.spec.ts
--- a/packages/editor-ui/src/composables/tests/useRunWorkflow.spec.ts
+++ b/packages/editor-ui/src/composables/tests/useRunWorkflow.spec.ts
@@ -1,14 +1,15 @@
+import { setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { useRouter } from 'vue-router';
+import type router from 'vue-router';
+import { ExpressionError, type IPinData, type IRunData, type Workflow } from 'n8n-workflow';
+
 import { useRootStore } from '@/stores/root.store';
 import { useRunWorkflow } from '@/composables/useRunWorkflow';
-import { createTestingPinia } from '@pinia/testing';
-import { setActivePinia } from 'pinia';
 import type { IStartRunData, IWorkflowData } from '@/Interface';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
-import { useRouter } from 'vue-router';
-import { ExpressionError, type IPinData, type IRunData, type Workflow } from 'n8n-workflow';
-import type * as router from 'vue-router';

 vi.mock('@/stores/workflows.store', () => ({
 	useWorkflowsStore: vi.fn().mockReturnValue({
--- a/packages/editor-ui/src/composables/tests/useWorkflowHelpers.spec.ts
+++ b/packages/editor-ui/src/composables/tests/useWorkflowHelpers.spec.ts
--- a/packages/editor-ui/src/composables/useNodeBase.ts
+++ b/packages/editor-ui/src/composables/useNodeBase.ts
@@ -231,7 +231,7 @@ export function useNodeBase({
 			const endpoint = instance?.addEndpoint(
 				refs.value[data.value?.name ?? ''] as Element,
 				newEndpointData,
-			) as Endpoint;
+			);
 			addEndpointTestingData(endpoint, 'input', typeIndex);
 			if (inputConfiguration.displayName ?? nodeTypeData.inputNames?.[i]) {
 				// Apply input names if they got set