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

packages/editor-ui/src/__tests__/defaults.ts

@@ -1,59 +1,4 @@
-import type { INodeTypeData, INodeTypeDescription, IN8nUISettings } from 'n8n-workflow';
-import {
-	AGENT_NODE_TYPE,
-	SET_NODE_TYPE,
-	CHAT_TRIGGER_NODE_TYPE,
-	MANUAL_TRIGGER_NODE_TYPE,
-} from '@/constants';
-import nodeTypesJson from '../../../nodes-base/dist/types/nodes.json';
-import aiNodeTypesJson from '../../../@n8n/nodes-langchain/dist/types/nodes.json';
-
-const allNodeTypes = [...nodeTypesJson, ...aiNodeTypesJson];
-
-export function findNodeTypeDescriptionByName(name: string): INodeTypeDescription {
-	return allNodeTypes.find((node) => node.name === name) as INodeTypeDescription;
-}
-
-export const testingNodeTypes: INodeTypeData = {
-	[MANUAL_TRIGGER_NODE_TYPE]: {
-		sourcePath: '',
-		type: {
-			description: findNodeTypeDescriptionByName(MANUAL_TRIGGER_NODE_TYPE),
-		},
-	},
-	[SET_NODE_TYPE]: {
-		sourcePath: '',
-		type: {
-			description: findNodeTypeDescriptionByName(SET_NODE_TYPE),
-		},
-	},
-	[CHAT_TRIGGER_NODE_TYPE]: {
-		sourcePath: '',
-		type: {
-			description: findNodeTypeDescriptionByName(CHAT_TRIGGER_NODE_TYPE),
-		},
-	},
-	[AGENT_NODE_TYPE]: {
-		sourcePath: '',
-		type: {
-			description: findNodeTypeDescriptionByName(AGENT_NODE_TYPE),
-		},
-	},
-};
-
-export const defaultMockNodeTypes: INodeTypeData = {
-	[MANUAL_TRIGGER_NODE_TYPE]: testingNodeTypes[MANUAL_TRIGGER_NODE_TYPE],
-	[SET_NODE_TYPE]: testingNodeTypes[SET_NODE_TYPE],
-};
-
-export function mockNodeTypesToArray(nodeTypes: INodeTypeData): INodeTypeDescription[] {
-	return Object.values(nodeTypes).map(
-		(nodeType) => nodeType.type.description as INodeTypeDescription,
-	);
-}
-
-export const defaultMockNodeTypesArray: INodeTypeDescription[] =
-	mockNodeTypesToArray(defaultMockNodeTypes);
+import type { IN8nUISettings } from 'n8n-workflow';
 
 export const defaultSettings: IN8nUISettings = {
 	allowedModules: {},

packages/editor-ui/src/__tests__/mocks.ts

@@ -2,56 +2,83 @@ import type {
 	INodeType,
 	INodeTypeData,
 	INodeTypes,
-	IVersionedNodeType,
 	IConnections,
 	IDataObject,
 	INode,
 	IPinData,
 	IWorkflowSettings,
+	LoadedClass,
+	INodeTypeDescription,
 } from 'n8n-workflow';
 import { NodeHelpers, Workflow } from 'n8n-workflow';
 import { uuid } from '@jsplumb/util';
-import { defaultMockNodeTypes } from '@/__tests__/defaults';
-import type { INodeUi, ITag, IUsedCredential, IWorkflowDb, WorkflowMetadata } from '@/Interface';
-import type { ProjectSharingData } from '@/types/projects.types';
-import type { RouteLocationNormalized } from 'vue-router';
+import { mock } from 'vitest-mock-extended';
 
-export function createTestNodeTypes(data: INodeTypeData = {}): INodeTypes {
-	const nodeTypes = {
-		...defaultMockNodeTypes,
-		...Object.keys(data).reduce<INodeTypeData>((acc, key) => {
-			acc[key] = data[key];
+import {
+	AGENT_NODE_TYPE,
+	CHAT_TRIGGER_NODE_TYPE,
+	CODE_NODE_TYPE,
+	EXECUTABLE_TRIGGER_NODE_TYPES,
+	MANUAL_TRIGGER_NODE_TYPE,
+	NO_OP_NODE_TYPE,
+	SET_NODE_TYPE,
+} from '@/constants';
 
-			return acc;
-		}, {}),
-	};
+const mockNode = (name: string, type: string, props: Partial<INode> = {}) =>
+	mock<INode>({ name, type, ...props });
 
-	function getKnownTypes(): IDataObject {
-		return {};
-	}
+const mockLoadedClass = (name: string) =>
+	mock<LoadedClass<INodeType>>({
+		type: mock<INodeType>({
+			// @ts-expect-error
+			description: mock<INodeTypeDescription>({
+				name,
+				displayName: name,
+				version: 1,
+				properties: [],
+				group: EXECUTABLE_TRIGGER_NODE_TYPES.includes(name) ? ['trigger'] : [],
+				inputs: ['main'],
+				outputs: ['main'],
+				documentationUrl: 'https://docs',
+				webhooks: undefined,
+			}),
+		}),
+	});
 
-	function getByName(nodeType: string): INodeType | IVersionedNodeType {
-		return nodeTypes[nodeType].type;
-	}
+export const mockNodes = [
+	mockNode('Manual Trigger', MANUAL_TRIGGER_NODE_TYPE),
+	mockNode('Set', SET_NODE_TYPE),
+	mockNode('Code', CODE_NODE_TYPE),
+	mockNode('Rename', SET_NODE_TYPE),
+	mockNode('Chat Trigger', CHAT_TRIGGER_NODE_TYPE),
+	mockNode('Agent', AGENT_NODE_TYPE),
+	mockNode('End', NO_OP_NODE_TYPE),
+];
 
-	function getByNameAndVersion(nodeType: string, version?: number): INodeType {
-		return NodeHelpers.getVersionedNodeType(getByName(nodeType), version);
-	}
+export const defaultNodeTypes = mockNodes.reduce<INodeTypeData>((acc, { type }) => {
+	acc[type] = mockLoadedClass(type);
+	return acc;
+}, {});
 
-	return {
-		getKnownTypes,
-		getByName,
-		getByNameAndVersion,
-	};
-}
+export const defaultNodeDescriptions = Object.values(defaultNodeTypes).map(
+	({ type }) => type.description,
+) as INodeTypeDescription[];
+
+const nodeTypes = mock<INodeTypes>({
+	getByName(nodeType) {
+		return defaultNodeTypes[nodeType].type;
+	},
+	getByNameAndVersion(nodeType: string, version?: number): INodeType {
+		return NodeHelpers.getVersionedNodeType(defaultNodeTypes[nodeType].type, version);
+	},
+});
 
 export function createTestWorkflowObject({
 	id = uuid(),
 	name = 'Test Workflow',
 	nodes = [],
 	connections = {},
 	active = false,
-	nodeTypes = {},
 	staticData = {},
 	settings = {},
 	pinData = {},
@@ -61,7 +88,6 @@ export function createTestWorkflowObject({
 	nodes?: INode[];
 	connections?: IConnections;
 	active?: boolean;
-	nodeTypes?: INodeTypeData;
 	staticData?: IDataObject;
 	settings?: IWorkflowSettings;
 	pinData?: IPinData;
@@ -75,38 +101,10 @@ export function createTestWorkflowObject({
 		staticData,
 		settings,
 		pinData,
-		nodeTypes: createTestNodeTypes(nodeTypes),
+		nodeTypes,
 	});
 }
 
-export function createTestWorkflow(options: {
-	id?: string;
-	name: string;
-	active?: boolean;
-	createdAt?: number | string;
-	updatedAt?: number | string;
-	nodes?: INodeUi[];
-	connections?: IConnections;
-	settings?: IWorkflowSettings;
-	tags?: ITag[] | string[];
-	pinData?: IPinData;
-	sharedWithProjects?: ProjectSharingData[];
-	homeProject?: ProjectSharingData;
-	versionId?: string;
-	usedCredentials?: IUsedCredential[];
-	meta?: WorkflowMetadata;
-}): IWorkflowDb {
-	return {
-		...options,
-		createdAt: options.createdAt ?? '',
-		updatedAt: options.updatedAt ?? '',
-		versionId: options.versionId ?? '',
-		id: options.id ?? uuid(),
-		active: options.active ?? false,
-		connections: options.connections ?? {},
-	} as IWorkflowDb;
-}
-
 export function createTestNode(node: Partial<INode> = {}): INode {
 	return {
 		id: uuid(),
@@ -118,27 +116,3 @@ export function createTestNode(node: Partial<INode> = {}): INode {
 		...node,
 	};
 }
-
-export function createTestRouteLocation({
-	path = '',
-	params = {},
-	fullPath = path,
-	hash = '',
-	matched = [],
-	redirectedFrom = undefined,
-	name = path,
-	meta = {},
-	query = {},
-}: Partial<RouteLocationNormalized> = {}): RouteLocationNormalized {
-	return {
-		path,
-		params,
-		fullPath,
-		hash,
-		matched,
-		redirectedFrom,
-		name,
-		meta,
-		query,
-	};
-}

packages/editor-ui/src/components/__tests__/CredentialIcon.test.ts

@@ -1,20 +1,33 @@
-import { createComponentRenderer } from '@/__tests__/render';
+import { createTestingPinia } from '@pinia/testing';
+import { mock } from 'vitest-mock-extended';
+import type { INodeTypeDescription } from 'n8n-workflow';
+
 import CredentialIcon from '@/components/CredentialIcon.vue';
 import { STORES } from '@/constants';
-import { createTestingPinia } from '@pinia/testing';
-import * as testNodeTypes from './testData/nodeTypesTestData';
-import merge from 'lodash-es/merge';
 import { groupNodeTypesByNameAndType } from '@/utils/nodeTypes/nodeTypeTransforms';
 
-const defaultState = {
+import { createComponentRenderer } from '@/__tests__/render';
+
+const twitterV1 = mock<INodeTypeDescription>({
+	version: 1,
+	credentials: [{ name: 'twitterOAuth1Api', required: true }],
+	iconUrl: 'icons/n8n-nodes-base/dist/nodes/Twitter/x.svg',
+});
+
+const twitterV2 = mock<INodeTypeDescription>({
+	version: 2,
+	credentials: [{ name: 'twitterOAuth2Api', required: true }],
+	iconUrl: 'icons/n8n-nodes-base/dist/nodes/Twitter/x.svg',
+});
+
+const nodeTypes = groupNodeTypesByNameAndType([twitterV1, twitterV2]);
+const initialState = {
 	[STORES.CREDENTIALS]: {},
-	[STORES.NODE_TYPES]: {},
+	[STORES.NODE_TYPES]: { nodeTypes },
 };
 
 const renderComponent = createComponentRenderer(CredentialIcon, {
-	pinia: createTestingPinia({
-		initialState: defaultState,
-	}),
+	pinia: createTestingPinia({ initialState }),
 	global: {
 		stubs: ['n8n-tooltip'],
 	},
@@ -25,17 +38,7 @@ describe('CredentialIcon', () => {
 
 	it('shows correct icon for credential type that is for the latest node type version', () => {
 		const { baseElement } = renderComponent({
-			pinia: createTestingPinia({
-				initialState: merge(defaultState, {
-					[STORES.CREDENTIALS]: {},
-					[STORES.NODE_TYPES]: {
-						nodeTypes: groupNodeTypesByNameAndType([
-							testNodeTypes.twitterV1,
-							testNodeTypes.twitterV2,
-						]),
-					},
-				}),
-			}),
+			pinia: createTestingPinia({ initialState }),
 			props: {
 				credentialTypeName: 'twitterOAuth2Api',
 			},
@@ -49,17 +52,7 @@ describe('CredentialIcon', () => {
 
 	it('shows correct icon for credential type that is for an older node type version', () => {
 		const { baseElement } = renderComponent({
-			pinia: createTestingPinia({
-				initialState: merge(defaultState, {
-					[STORES.CREDENTIALS]: {},
-					[STORES.NODE_TYPES]: {
-						nodeTypes: groupNodeTypesByNameAndType([
-							testNodeTypes.twitterV1,
-							testNodeTypes.twitterV2,
-						]),
-					},
-				}),
-			}),
+			pinia: createTestingPinia({ initialState }),
 			props: {
 				credentialTypeName: 'twitterOAuth1Api',
 			},

packages/editor-ui/src/components/__tests__/NodeDetailsView.test.ts

@@ -1,24 +1,23 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { waitFor } from '@testing-library/vue';
+import { mock } from 'vitest-mock-extended';
+
 import NodeDetailsView from '@/components/NodeDetailsView.vue';
 import { VIEWS } from '@/constants';
-import { createComponentRenderer } from '@/__tests__/render';
-import { waitFor } from '@testing-library/vue';
-import { uuid } from '@jsplumb/util';
-import type { INode } from 'n8n-workflow';
-import { createTestNode, createTestWorkflow } from '@/__tests__/mocks';
+import type { IWorkflowDb } from '@/Interface';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { createPinia, setActivePinia } from 'pinia';
-import { defaultMockNodeTypesArray } from '@/__tests__/defaults';
+
+import { createComponentRenderer } from '@/__tests__/render';
 import { setupServer } from '@/__tests__/server';
+import { defaultNodeDescriptions, mockNodes } from '@/__tests__/mocks';
 
-async function createPiniaWithActiveNode(node: INode) {
-	const workflowId = uuid();
-	const workflow = createTestWorkflow({
-		id: workflowId,
-		name: 'Test Workflow',
+async function createPiniaWithActiveNode() {
+	const node = mockNodes[0];
+	const workflow = mock<IWorkflowDb>({
 		connections: {},
 		active: true,
 		nodes: [node],
@@ -31,7 +30,7 @@ async function createPiniaWithActiveNode(node: INode) {
 	const nodeTypesStore = useNodeTypesStore();
 	const ndvStore = useNDVStore();
 
-	nodeTypesStore.setNodeTypes(defaultMockNodeTypesArray);
+	nodeTypesStore.setNodeTypes(defaultNodeDescriptions);
 	workflowsStore.workflow = workflow;
 	ndvStore.activeNodeName = node.name;
 
@@ -72,12 +71,7 @@ describe('NodeDetailsView', () => {
 
 	it('should render correctly', async () => {
 		const wrapper = renderComponent({
-			pinia: await createPiniaWithActiveNode(
-				createTestNode({
-					name: 'Manual Trigger',
-					type: 'manualTrigger',
-				}),
-			),
+			pinia: await createPiniaWithActiveNode(),
 		});
 
 		await waitFor(() =>