admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-20 19:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Add support for fallback nodes and new addNodes node render type in new canvas (no-changelog) (#10004)

Browse Source
This commit is contained in:
Alex Grozav
2024-07-11 13:03:46 +03:00
committed by GitHub
parent f9e9d274b9
commit 57dfefd0f6
24 changed files with 509 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
packages/editor-ui/src/composables/useCanvasMapping.spec.ts
View File

@@ -3,10 +3,9 @@ import { ref } from 'vue';
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 type { INodeUi } from '@/Interface';
import {
createTestWorkflowObject,
mockNode,
@@ -15,7 +14,7 @@ import {
} from '@/__tests__/mocks';
import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE } from '@/constants';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useWorkflowsStore } from '../stores/workflows.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
beforeEach(() => {
const pinia = createPinia();
@@ -37,38 +36,44 @@ afterEach(() => {
describe('useCanvasMapping', () => {
it('should initialize with default props', () => {
const workflow = mock<IWorkflowDb>({
nodes: [],
const nodes: INodeUi[] = [];
const connections = {};
const workflowObject = createTestWorkflowObject({
nodes,
connections,
});
const workflowObject = createTestWorkflowObject(workflow);
const { elements, connections } = useCanvasMapping({
workflow: ref(workflow),
const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping({
nodes: ref(nodes),
connections: ref(connections),
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
expect(elements.value).toEqual([]);
expect(connections.value).toEqual([]);
expect(mappedNodes.value).toEqual([]);
expect(mappedConnections.value).toEqual([]);
});
describe('elements', () => {
it('should map nodes to canvas elements', () => {
describe('nodes', () => {
it('should map nodes to canvas nodes', () => {
const manualTriggerNode = mockNode({
name: 'Manual Trigger',
type: MANUAL_TRIGGER_NODE_TYPE,
disabled: false,
});
const workflow = mock<IWorkflowDb>({
nodes: [manualTriggerNode],
const nodes = [manualTriggerNode];
const connections = {};
const workflowObject = createTestWorkflowObject({
nodes,
connections,
});
const workflowObject = createTestWorkflowObject(workflow);
const { elements } = useCanvasMapping({
workflow: ref(workflow),
const { nodes: mappedNodes } = useCanvasMapping({
nodes: ref(nodes),
connections: ref(connections),
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
expect(elements.value).toEqual([
expect(mappedNodes.value).toEqual([
{
id: manualTriggerNode.id,
label: manualTriggerNode.name,
@@ -133,17 +138,20 @@ describe('useCanvasMapping', () => {
type: MANUAL_TRIGGER_NODE_TYPE,
disabled: true,
});
const workflow = mock<IWorkflowDb>({
nodes: [manualTriggerNode],
const nodes = [manualTriggerNode];
const connections = {};
const workflowObject = createTestWorkflowObject({
nodes,
connections,
});
const workflowObject = createTestWorkflowObject(workflow);
const { elements } = useCanvasMapping({
workflow: ref(workflow),
const { nodes: mappedNodes } = useCanvasMapping({
nodes: ref(nodes),
connections: ref(connections),
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
expect(elements.value[0]?.data?.disabled).toEqual(true);
expect(mappedNodes.value[0]?.data?.disabled).toEqual(true);
});
it('should handle execution state', () => {
@@ -152,42 +160,49 @@ describe('useCanvasMapping', () => {
type: MANUAL_TRIGGER_NODE_TYPE,
disabled: true,
});
const workflow = mock<IWorkflowDb>({
nodes: [manualTriggerNode],
const nodes = [manualTriggerNode];
const connections = {};
const workflowObject = createTestWorkflowObject({
nodes,
connections,
});
const workflowObject = createTestWorkflowObject(workflow);
useWorkflowsStore().addExecutingNode(manualTriggerNode.name);
const { elements } = useCanvasMapping({
workflow: ref(workflow),
const { nodes: mappedNodes } = useCanvasMapping({
nodes: ref(nodes),
connections: ref(connections),
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
expect(elements.value[0]?.data?.execution.running).toEqual(true);
expect(mappedNodes.value[0]?.data?.execution.running).toEqual(true);
});
it('should handle input and output connections', () => {
const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
const workflow = mock<IWorkflowDb>({
nodes: [manualTriggerNode, setNode],
connections: {
[manualTriggerNode.name]: {
[NodeConnectionType.Main]: [
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
],
},
const nodes = [manualTriggerNode, setNode];
const connections = {
[manualTriggerNode.name]: {
[NodeConnectionType.Main]: [
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
],
},
};
const workflowObject = createTestWorkflowObject({
nodes,
connections,
});
const workflowObject = createTestWorkflowObject(workflow);
const { elements } = useCanvasMapping({
workflow: ref(workflow),
const { nodes: mappedNodes } = useCanvasMapping({
nodes: ref(nodes),
connections: ref(connections),
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
expect(elements.value[0]?.data?.connections.output).toHaveProperty(NodeConnectionType.Main);
expect(elements.value[0]?.data?.connections.output[NodeConnectionType.Main][0][0]).toEqual(
expect(mappedNodes.value[0]?.data?.connections.output).toHaveProperty(
NodeConnectionType.Main,
);
expect(mappedNodes.value[0]?.data?.connections.output[NodeConnectionType.Main][0][0]).toEqual(
expect.objectContaining({
node: setNode.name,
type: NodeConnectionType.Main,
@@ -195,8 +210,8 @@ describe('useCanvasMapping', () => {
}),
);
expect(elements.value[1]?.data?.connections.input).toHaveProperty(NodeConnectionType.Main);
expect(elements.value[1]?.data?.connections.input[NodeConnectionType.Main][0][0]).toEqual(
expect(mappedNodes.value[1]?.data?.connections.input).toHaveProperty(NodeConnectionType.Main);
expect(mappedNodes.value[1]?.data?.connections.input[NodeConnectionType.Main][0][0]).toEqual(
expect.objectContaining({
node: manualTriggerNode.name,
type: NodeConnectionType.Main,
@@ -209,24 +224,26 @@ describe('useCanvasMapping', () => {
describe('connections', () => {
it('should map connections to canvas connections', () => {
const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
const workflow = mock<IWorkflowDb>({
nodes: [manualTriggerNode, setNode],
connections: {
[manualTriggerNode.name]: {
[NodeConnectionType.Main]: [
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
],
},
const nodes = [manualTriggerNode, setNode];
const connections = {
[manualTriggerNode.name]: {
[NodeConnectionType.Main]: [
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
],
},
};
const workflowObject = createTestWorkflowObject({
nodes,
connections,
});
const workflowObject = createTestWorkflowObject(workflow);
const { connections } = useCanvasMapping({
workflow: ref(workflow),
const { connections: mappedConnections } = useCanvasMapping({
nodes: ref(nodes),
connections: ref(connections),
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
expect(connections.value).toEqual([
expect(mappedConnections.value).toEqual([
{
data: {
fromNodeName: manualTriggerNode.name,
@@ -254,27 +271,29 @@ describe('useCanvasMapping', () => {
it('should map multiple input types to canvas connections', () => {
const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
const workflow = mock<IWorkflowDb>({
nodes: [manualTriggerNode, setNode],
connections: {
[manualTriggerNode.name]: {
[NodeConnectionType.AiTool]: [
[{ node: setNode.name, type: NodeConnectionType.AiTool, index: 0 }],
],
[NodeConnectionType.AiDocument]: [
[{ node: setNode.name, type: NodeConnectionType.AiDocument, index: 1 }],
],
},
const nodes = [manualTriggerNode, setNode];
const connections = {
[manualTriggerNode.name]: {
[NodeConnectionType.AiTool]: [
[{ node: setNode.name, type: NodeConnectionType.AiTool, index: 0 }],
],
[NodeConnectionType.AiDocument]: [
[{ node: setNode.name, type: NodeConnectionType.AiDocument, index: 1 }],
],
},
};
const workflowObject = createTestWorkflowObject({
nodes,
connections,
});
const workflowObject = createTestWorkflowObject(workflow);
const { connections } = useCanvasMapping({
workflow: ref(workflow),
const { connections: mappedConnections } = useCanvasMapping({
nodes: ref(nodes),
connections: ref(connections),
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
expect(connections.value).toEqual([
expect(mappedConnections.value).toEqual([
{
data: {
fromNodeName: manualTriggerNode.name,