Currently, I am working on an interface that is designed to manipulate DOM elements based on input argument objects. My approach is to write unit tests first, using Render2 available in Angular.
export interface ModifyDomTree {
modify(data: SomeData) : ElementRef;
}
I am still unsure about the implementation details, but I am focused on writing tests for it.
export class ModifyDomTreeImpl implements ModifyDomTree {
constructor(private render: Renderer2) {
}
modify(data: SomeData): ElementRef{
return null;
}
}
For testing purposes, I want to avoid using a mock for Renderer2 and instead use the actual Renderer2 instance that Angular uses. How can I inject or instantiate the real Angular Render2 in my test?
The spec would be
describe('ModifyDomTreeImpl', () => {
let data: SomeData;
let modifyDomTree: ModifyDomTree;
beforeEach(() => {
//let render: Renderer2 = mock(Renderer2); ?? How Do I inject the real Angular thing here
modifyDomTree = new ModifyDomTreeImpl(render);
});
it('should convert a data into a text node', () => {
data = mock(SomeData);
when(data.value).thenReturn('Groot!!');
const result: ElementRef = modifyDomTree.convert(data);
expect(result).toBeDefined();
expect(result).not.toBeNull();
expect(result.nativeElement).toBeDefined();
expect(result.nativeElement).toBeDefined();
expect(result.nativeElement.childNodes).toBeDefined();
expect(result.nativeElement.childNodes.length).toEqual(1);
expect(result.nativeElement.childNodes[0]).toEqual('text');
expect(result.nativeElement.childNodes[0].data).toEqual('Groot!!');
});
});