Angular 2 - Testen einer Komponente mit @input in ngOnInit lifecycle hook

Question

Derzeit versuche ich eine untergeordnete Komponente zu testen, die eine Eingabe von der Hostkomponente akzeptiert und innerhalb des ngOnInit-Lebenszyklus-Hooks wie den folgenden Code verwendet.

@Component({ 
    selector: 'my-child-component', 
    template: '<div></div>' 
}) 
class ChildComponent implements OnInit { 
    @Input() myValue: MyObject; 
    transformedValue: SomeOtherObject; 

    ngOnInit():void { 
     // Do some data transform requiring myValue 
     transformedValue = ...; 
    } 
} 

@Component({ 
    template:`<my-child-component [myValue]="someValue"></my-child-component>` 
}) 
class HostComponent { 
    someValue: MyObject = new MyObject(); // how it is initialized it is not important. 
} 

Wie sollte die ChildComponent in diesem Fall geprüft werden, wo myValue die Gegenwart über die Schöpfung sein muss, während der Zugang zu haben, um Behauptung zu ChildComponent.transformedValue zu können.

Ich versuchte, die ChildComponent mit der Winkel TestBed Klasse wie dieses

componentFixture = testBed.createComponent(LoginFormComponent) 

Schaffung jedoch die ngOnInit bereits auf den Punkt aufgerufen worden wäre, wo ich

fixture.componentInstance.myValue = someValue; 

nenne ich auch versucht, eine zu schaffen Fixture der HostComponent, und während das funktioniert, blieb ich stecken auf den Zugriff auf die ChildComponent-Instanz, die erstellt wurde, die ich Assertionen im Feld ChildComponent.transformedValue durchführen muss.

Hilfe wird sehr geschätzt!

Vielen Dank!

Answer 1

Angular bietet die Möglichkeit, unter Verwendung des @ViewChild() Dekorators untergeordnete Komponenten in ihre übergeordneten Komponenten zu injizieren. Siehe https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

Durch die TestHostcomponent Aktualisierung (das innerhalb der .spec.ts Datei geschrieben wird) an folgende

@Component({ 
    template:`<my-child-component [myValue]="someValue"></my-child-component>` 
}) 
class TestHostComponent { 
    @ViewChild(MyChildComponent) 
    childComponent: MyChildComponent; 
} 

es macht seine Kind-Komponenteninstanz (und seine Variablen), so dass die Behauptung des ' transformedValue 'möglich, wie unten beschrieben.

componentFixture = testBed.createComponent(TestHostComponent) 
expect(componentFixture.componentInstance.childComponent.transformedValue).toEqual(...someValue);