AngularJS 2-Unit-Testkomponente mit Jasmin-Facing-Fehler, Eigenschaft 'firstChild' von null kann nicht gelesen werden

Question

Ich schreibe Komponententest für meine angulare 2 Anwendung, ich versuche, die Komponente zu testen, die ich gemacht habe. Ich beziehe mich auf ein Beispiel-Git-Repository zum Schreiben von Testfällen in Winkel 2 unter Verwendung von TypeScript und Jasmine-Framework. Ich tat das gleiche, was im Beispiel-Repository (https://github.com/juliemr/ng2-test-seed) getan wird, um meine Komponente zu testen, aber ich bekomme folgenden Fehler.

TypeError: Cannot read property 'firstChild' of null 
at Object.el (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:537:29) 
at TestComponentBuilder.createAsync (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:841:28) 
at eval (http://127.0.0.1:9090/app/test/search.component.specs_test.js:95:32) 
at FunctionWrapper.apply (http://127.0.0.1:9090/node_modules/angular2/bundles/angular2.dev.js:327:17) 
at FunctionWithParamTokens.execute (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:1947:37) 
at TestInjector.execute (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:1868:17) 
at Object.<anonymous> (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:2006:44) 
at attemptAsync (http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1916:24) 
at QueueRunner.run (http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1871:9) 
at http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1898:16 

Meine Komponente ist wie folgt:

@Component({ 
    selector: 'search', 
    templateUrl: 'app/html/search.component.html', 
    styleUrls: ['app/css/search.css'], 
    providers: [SearchService,SearchUtil], 
    directives: [OverviewComponent] 
}) 
export class SearchComponent {} 

Meine Einheit Testfall wie folgt aussieht:

it('should populate search suggestions UI', injectAsync([TestComponentBuilder,SearchComponent], (tcb) => { 
    return tcb.createAsync(SearchComponent).then((fixture) => { 
     fixture.detectChanges(); 
     var compiled = fixture.debugElement.nativeElement; 

     compiled.querySelector('search').value('teachers'); 
     fixture.detectChanges(); 

     var compiled = fixture.debugElement.nativeElement; 

     console.log(compiled.querySelector('search').value()+" = "+compiled.querySelector('.searchlist>a').length); 

     expect(compiled.querySelector('.searchlist>a').length).toBeGreaterThan(1); 
    }); 
    })); 

ich Störung erhalte, in dieser Linie - tcb.createAsync (SearchComponent), sagt das Objekt ist null.

Answer 1

Sie brauchen nicht SearchComponent in den ersten Parameter der injectAsync Funktion zu spezifizieren:

it('should populate search suggestions UI', 
     injectAsync([TestComponentBuilder], (tcb) => { 
    return tcb.createAsync(SearchComponent).then((fixture) => { 
    (...) 
    }); 
})); 

bearbeiten

Sie auch zu den Basistestanbieter müssen, wie unten beschrieben:

Edit1

Sie müssen die Anbieter registrieren, die Ihre Komponente (direkt oder indirekt) mithilfe der beforeEachProviders-Funktion verwenden wird. Hier

ist ein Beispiel:

beforeEachProviders(() => { 
    return [ 
    HTTP_PROVIDERS, 
    provide(XHRBackend, { useClass: MockBackend }), 
    HttpService 
    ]; 
});