Skip to content

Commit

Permalink
refactor(editor): Use typed-mocks to speed up tests and type-checking…
Browse files Browse the repository at this point in the history 
… (no-changelog) (n8n-io#9796)
  • Loading branch information
@netroy @adrian-martinez-onestic
netroy authored and adrian-martinez-onestic committed Jun 20, 2024
1 parent 81526c4 commit a8b6737
Show file tree
Hide file tree
Showing 28 changed files with 452 additions and 8,692 deletions.
57 changes: 1 addition & 56 deletions packages/editor-ui/src/__tests__/defaults.ts
View file
Original file line number Diff line number Diff line change
@@ -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: {},
Expand Down
140 changes: 57 additions & 83 deletions packages/editor-ui/src/__tests__/mocks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {},
Expand All @@ -61,7 +88,6 @@ export function createTestWorkflowObject({
nodes?: INode[];
connections?: IConnections;
active?: boolean;
nodeTypes?: INodeTypeData;
staticData?: IDataObject;
settings?: IWorkflowSettings;
pinData?: IPinData;
Expand All @@ -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(),
Expand All @@ -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,
};
}
55 changes: 24 additions & 31 deletions packages/editor-ui/src/components/__tests__/CredentialIcon.test.ts
View file
Original file line number Diff line number Diff line change
@@ -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'],
},
Expand All @@ -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',
},
Expand All @@ -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',
},
Expand Down
32 changes: 13 additions & 19 deletions packages/editor-ui/src/components/__tests__/NodeDetailsView.test.ts
View file
Original file line number Diff line number Diff line change
@@ -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],
Expand All @@ -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;

Expand Down Expand Up @@ -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(() =>
Expand Down
Loading

0 comments on commit a8b6737

Please sign in to comment.