Currently im trying to create simple test for a component that is using rete.js, but for some reason the test if falling because cant handle one of the import path that is need it.
Component
import { Component, ElementRef, Injector, ViewChild } from '@angular/core';
import { EditorCreatorService } from './edtitor-creator';
@Component({
selector: 'exb-visual-workflow-editor',
templateUrl: 'visual-workflow-editor.component.html',
styleUrls: ['visual-workflow-editor.component.scss'],
})
export class VisualWorkflowEditorComponent {
@ViewChild('rete')
container!: ElementRef;
constructor(private injector: Injector, private readonly editorCreatorService: EditorCreatorService) {}
ngAfterViewInit(): void {
const el = this.container.nativeElement;
if (el) {
this.editorCreatorService.createEditor(el, this.injector);
}
}
}
service
import { NodeEditor, GetSchemes, ClassicPreset } from 'rete';
import { Injector, Injectable } from '@angular/core';
import { AreaPlugin } from 'rete-area-plugin';
import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-plugin';
import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/16'; -----> Import Error
import { CustomSocketComponent } from './customization/custom-socket/custom-socket.component';
import { CustomNodeComponent } from './customization/custom-node/custom-node.component';
import { CustomConnectionComponent } from './customization/custom-connection/custom-connection.component';
import { addCustomBackground } from './customization/custom-background';
type Schemes = GetSchemes<ClassicPreset.Node, ClassicPreset.Connection<ClassicPreset.Node, ClassicPreset.Node>>;
type AreaExtra = AngularArea2D<Schemes>;
const socket = new ClassicPreset.Socket('socket');
@Injectable()
export class EditorCreatorService {
async createEditor(container: HTMLElement, injector: Injector) {
const editor = new NodeEditor<Schemes>();
const area = new AreaPlugin<Schemes, AreaExtra>(container);
const connection = new ConnectionPlugin<Schemes, AreaExtra>();
const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector });
angularRender.addPreset(
AngularPresets.classic.setup({
customize: {
node() {
return CustomNodeComponent;
},
connection() {
return CustomConnectionComponent;
},
socket() {
return CustomSocketComponent;
},
},
}),
);
connection.addPreset(ConnectionPresets.classic.setup());
addCustomBackground(area);
editor.use(area);
area.use(connection);
area.use(angularRender);
const aLabel = 'Custom';
const bLabel = 'Custom';
const a = new ClassicPreset.Node(aLabel);
a.addOutput('a', new ClassicPreset.Output(socket));
a.addInput('a', new ClassicPreset.Input(socket));
await editor.addNode(a);
const b = new ClassicPreset.Node(bLabel);
b.addOutput('a', new ClassicPreset.Output(socket));
b.addInput('a', new ClassicPreset.Input(socket));
await editor.addNode(b);
await area.translate(a.id, { x: 0, y: 0 });
await area.translate(b.id, { x: 300, y: 0 });
await editor.addConnection(new ClassicPreset.Connection(a, 'a', b, 'a'));
return {
destroy: () => area.destroy(),
};
}
}
Test
import { EditorCreatorService } from './edtitor-creator';
import { VisualWorkflowEditorComponent } from './visual-workflow-editor.component';
import { render, RenderResult } from '@testing-library/angular';
describe('WorkflowEditorComponent', () => {
let component: RenderResult<VisualWorkflowEditorComponent>;
let createEditorSype: jest.SpyInstance;
let editorCreatorServiceMock: Partial<EditorCreatorService>;
beforeEach(async () => {
editorCreatorServiceMock = {
createEditor: jest.fn().mockReturnValue({}),
};
component = await render(VisualWorkflowEditorComponent, {
providers: [
{
provide: editorCreatorServiceMock,
},
],
});
createEditorSype = jest.spyOn(editorCreatorServiceMock, 'createEditor');
});
it('should create', () => {
expect(createEditorSype).toHaveBeenCalledTimes(1);
});
});
After mocking the service instead of injecting it in the test, the error for the import still happening from some reason.
As mentioned in on the of the comment the issue was that jest could not resolve the nested package so i have to map the path in the jest.config.js.
moduleNameMapper: {
'^lodash-es$': 'lodash',
'^rete-angular-plugin/16$': 'rete-angular-plugin',
'^@exb/(.*)$': `${libsDir}/$1/src/public-api.ts`
},