Angular2 2.0.1 component unit test with core injector

Question

I dynamically create components using ComponentFactoryResolver and also dynamically pass them using ReflectiveInjector.

It looks like

@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef; let inputProviders = [{ provide: 'injectedInput', useValue: inputValue }]; let resolvedInputs = ReflectiveInjector.resolve(inputProviders); let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.container.parentInjector); let factory = componentInfo.factory.resolveComponentFactory(componentInfo.component); let component = factory.create(injector); this.container.insert(component.hostView); 

Then the dynamically created component is as follows:

 import {Component, Injector} from '@angular/core'; @Component({ selector: 'mycomponent' }) export class MyComponent { private id: string; constructor(private injector: Injector) { this.id = injector.get('injectedInput'); } } 

I am trying to write unit tests for this component that uses the main Injector module. I get the following error:

Error: no provider for injectedInput!

My spec file looks like this:

 import { MyComponent } from 'here'; describe('MyComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ MyComponent ] }); }); let component: MyComponent; beforeEach(inject([RigTransferSpeedPeriodComponent], _component => { component = _component; })); {...my tests...} }); 

I tried a bunch of things and searched everywhere, but could not find those who had done this before.

Any idea?

Thanks a lot!

Philip

Answer 1

experimented a little with plnkr, used your problem as an example; -)

 @Component({ selector: 'my-component', template: '' }) export class TestComponent { constructor( private injector : Injector ) { injector.get('value1'); } } describe('a test', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ TestComponent ], providers: [ TestComponent ] }); }); beforeEach(() => { this.injector1 = ReflectiveInjector.resolveAndCreate([ {provide: 'value1', useValue: 5} ]); }); it('inject value', () => { expect( this.injector1.get('value1') ).toBe(5); }); describe('create component', () => { it('with untouched injector should throw error', () => { expect( () => TestBed.createComponent(TestComponent) ).toThrowError(); }) it('with manipulated injector', () => { let componentInjector = TestBed.get(Injector); componentInjector.parent = this.injector1; expect( TestBed.createComponent(TestComponent) ).toBeTruthy(); }) it('with injectors in the wrong order', () => { let componentInjector = TestBed.get(Injector); let combinedInjector = ReflectiveInjector.fromResolvedProviders(this.injector1, componentInjector); expect( () => combinedInjector.get(TestComponent) ).toThrowError(); }) }); }); 

http://plnkr.co/edit/PlUUtTOZq8bPLQ5WdAbE?p=preview

proved that he is about the order of injectors