Unit testing ngx-workflow
Use the ngx-workflow/testing entrypoint for diagram mocks and custom-node DI stubs.
Component mocks
Override real imports with NgxWorkflowMocks (diagram + studio chrome) or the lighter NgxWorkflowCoreMocks so host components can be tested without mounting the full SVG canvas.
import { TestBed } from '@angular/core/testing';
import { NgxWorkflowMocks, NgxWorkflowCoreMocks } from 'ngx-workflow/testing';
import { NgxWorkflowModule } from 'ngx-workflow';
TestBed.configureTestingModule({
imports: [YourHostComponent],
}).overrideComponent(YourHostComponent, {
remove: { imports: [NgxWorkflowModule] },
add: { imports: [...NgxWorkflowMocks] }, // or NgxWorkflowCoreMocks
});Graph fixtures
mockNode, mockEdge, and mockGraph build typed fixtures on top of createNode / createEdge.
import { mockGraph, mockNode, mockEdge } from 'ngx-workflow/testing';
const { nodes, edges } = mockGraph(3);
const selected = mockNode({ id: 'x', selected: true, position: { x: 40, y: 40 } });
const link = mockEdge({ source: nodes[0].id, target: selected.id });Testing custom nodes
provideCustomNodeMocks() (alias provideNgxWorkflowTesting()) registers lightweight providers including a MockDiagramStateService so node components that inject library services can be created in isolation.
import { TestBed } from '@angular/core/testing';
import { provideNgxWorkflowTesting, mockNode } from 'ngx-workflow/testing';
import { MyCustomNodeComponent } from './my-custom-node.component';
TestBed.configureTestingModule({
imports: [MyCustomNodeComponent],
providers: provideNgxWorkflowTesting(),
});
const fixture = TestBed.createComponent(MyCustomNodeComponent);
fixture.componentRef.setInput('node', mockNode({ id: '1', label: 'A' }));
fixture.detectChanges();Factories in tests
import { createNode, createEdge } from 'ngx-workflow';
const a = createNode({ label: 'A' });
const b = createNode({ label: 'B' });
const edge = createEdge({ source: a.id, target: b.id });