OverrideComponent mit TestBed

Question

Ich habe MainComponent, die ChildComponentA als @ViewChild verwendet. MainComponent ruft eine Methode unter ChildComponentA auf.

Ich möchte eine Einheit Testfall Mocking ChildComponentA schreiben. Wie kann ich das mit TestBed (in Angular 2 RC5) tun?

Bevor ich verwendet habe overrideDirective(MainComponentName, ChildComponentA, MockChildComponentA); Gibt es ein Äquivalent dazu mit TestBed?

Ich versuchte

TestBed.overrideComponent(ChildComponentA,{ 
     set: { 
      template: '<div></div>' 
     } 
     }); 

verwendet, die nur die Vorlage setzt, aber ich möchte auch die Methoden in der Komponente verspotten.

Answer 1

Ich denke in diesem Fall können Sie versuchen, die untergeordnete Komponente durch eine Scheinkomponente zu ersetzen. Erstellen Sie einfach eine Scheinkomponente mit demselben Selektor und verwenden Sie TestBed, um die Deklaration der echten untergeordneten Komponente zu entfernen und die Deklaration zu Ihrer Scheinkomponente hinzuzufügen.

@Component({ 
    selector: 'child', 
    template: '<div></div>' 
}) 
class MockComponent { 

} 

Und in Ihrem Test tut dies die Mock-Komponente zu verwenden:

TestBed.configureTestingModule({ 
     imports: [MyModule], 
     declarations: [ParentComponent, MockComponent] 
    }); 

    TestBed.overrideModule(MyModule, { 
     remove: { 
      declarations: [ParentComponent, ChildComponent], 
      exports: [ParentComponent, ChildComponent] 
     } 
    }); 

Weitere Details hier: https://github.com/angular/angular/issues/10689. Stellen Sie sicher, die ParentComponent erneut zu deklarieren, es funktioniert nicht anders (nicht sicher warum).

Wenn Sie @ViewChild verwenden, um einen Verweis auf die untergeordnete Komponente abzurufen, müssen Sie sie ändern, um nicht den Typ der Komponente, sondern eine ID zu verwenden. Verwenden Sie @ViewChild ('Kind') anstelle von @ViewChild (ChildComponent). Siehe zweites Beispiel von hier: http://learnangular2.com/viewChild/