ジャスミンに面したAngularJS 2ユニットのテストコンポーネント、nullの 'firstChild'プロパティを読み取れません。

Question

私の2角型アプリケーションの単体テストを書いています。私が作ったコンポーネントをテストしようとしています。私はType 2と2のテストケースをTypeScriptとJasmineフレームワークを使って書くためのgitリポジトリを紹介しています。私は同じことをサンプルリポジトリ（https://github.com/juliemr/ng2-test-seed）で行って、コンポーネントをテストしましたが、次のエラーが表示されます。

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 

私のコンポーネントは、このようなものです：

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

私のユニットテストケースは次のようになります。

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); 
    }); 
    })); 

私はこのラインでは、エラーを取得しています - tcb.createAsync（SearchComponentを）は、オブジェクトがnullだと言います。

Answer 1

あなたはinjectAsync関数の最初のパラメータにSearchComponentを指定する必要はありません。

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

編集

後述のようにまた、ベース・テスト・プロバイダに必要です

import {setBaseTestProviders} from 'angular2/testing'; 

import { 
    TEST_BROWSER_PLATFORM_PROVIDERS, 
    TEST_BROWSER_APPLICATION_PROVIDERS 
} from 'angular2/platform/testing/browser'; 

describe('Some tests',() => { 
    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, 
        TEST_BROWSER_APPLICATION_PROVIDERS); 
    (...) 
}); 

編集1

beforeEachProviders機能を使用してコンポーネントが（直接的または間接的に）使用するプロバイダを登録する必要があります。ここで

はサンプルです：

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