Angular2 - Тестирование ngOninit в компонентах

Question

У меня есть список компонентов с помощью следующего кода:

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/> 
import { Component, OnInit } from 'angular2/core'; 
import { ROUTER_DIRECTIVES } from 'angular2/router'; 

import { Employee } from '../models/employee'; 
import { EmployeeListServiceComponent } from '../services/employee-list-service.component'; 

@Component({ 
    selector: 'employee-list', 
    template: ` 
    <ul class="employees"> 
    <li *ngFor="#employee of employees"> 
    <a [routerLink]="['EmployeeDetail', {id: employee.id}]"> 
     <span class="badge">{{employee.id}}</span> 
     {{employee.name}} 
    </a> 
    </li> 
</ul> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers: [EmployeeListServiceComponent] 
}) 

export class EmployeeListComponent implements OnInit { 
    public employees: Employee[]; 
    public errorMessage: string; 

    constructor(
    private _listingService: EmployeeListServiceComponent 
){} 

    ngOnInit() { 
    this._listingService.getEmployees().subscribe(
        employees => this.employees = employees, 
        error => this.errorMessage = <any>error 
        ); 
    } 
} 

Я желаю, чтобы писать тесты для ngOninit крючка. Я написал следующий тест:

/// <reference path="../../typings/main/ambient/jasmine/jasmine.d.ts" /> 

import { 
    it, 
    describe, 
    expect, 
    TestComponentBuilder, 
    injectAsync, 
    setBaseTestProviders, 
    beforeEachProviders, 
} from "angular2/testing"; 
import { Component, provide, ApplicationRef, OnInit } from "angular2/core"; 
import { 
    TEST_BROWSER_PLATFORM_PROVIDERS, 
    TEST_BROWSER_APPLICATION_PROVIDERS 
} from "angular2/platform/testing/browser"; 
import { 
    ROUTER_DIRECTIVES, 
    ROUTER_PROVIDERS, 
    ROUTER_PRIMARY_COMPONENT, 
    APP_BASE_HREF 
} from 'angular2/router'; 
import {XHRBackend, HTTP_PROVIDERS} from "angular2/http"; 
import { MockApplicationRef } from 'angular2/src/mock/mock_application_ref'; 
import {MockBackend } from "angular2/src/http/backends/mock_backend"; 
import {Observable} from 'rxjs/Rx'; 
import 'rxjs/Rx'; 

import { Employee } from '../models/employee'; 
import { EmployeeListComponent } from './list.component'; 
import { EmployeeListServiceComponent } from '../services/employee-list-service.component'; 


class MockEmployeeListServiceComponent { 

    getEmployees() { 
     return Observable.of([ 
      { 
       "id": 1, 
       "name": "Abhinav Mishra" 
      } 
     ]); 
    } 
} 


@Component({ 
    template: '<employee-list></employee-list>', 
    directives: [EmployeeListComponent], 
    providers: [MockEmployeeListServiceComponent] 
}) 
class TestMyList {} 


describe('Employee List Tests',() => { 
    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); 

    beforeEachProviders(() => { 
     return [ 
      ROUTER_DIRECTIVES, 
      ROUTER_PROVIDERS, 
      HTTP_PROVIDERS, 
      provide(EmployeeListServiceComponent, {useClass: MockEmployeeListServiceComponent}), 
      provide(XHRBackend, {useClass: MockBackend}), 
      provide(APP_BASE_HREF, {useValue: '/'}), 
      provide(ROUTER_PRIMARY_COMPONENT, {useValue: EmployeeListComponent}), 
      provide(ApplicationRef, {useClass: MockApplicationRef}) 
     ] 
    }); 

    it('Should be true', 
     injectAsync([TestComponentBuilder], (tcb) => { 
      return tcb 
       .createAsync(TestMyList) 
       .then((fixture) => { 
        fixture.detectChanges(); 
        var compiled = fixture.debugElement.nativeElement; 
        console.log(compiled.innerHTML); 
        expect(true).toBe(true); 
       }); 
     }) 
    ); 
}); 

Однако выход console.log в тесте пустой ul тег следующим образом:

'<employee-list> 
    <ul class="employees"> 
    <!--template bindings={}--> 
</ul> 
    </employee-list>' 

Может кто-нибудь предложить мне правильный способ написания тестов для компонента крюки?

РЕШЕНИЕ

Пробный запрос HTTP в injectAsync блоке следующим образом:

backend.connections.subscribe(
       (connection:MockConnection) => { 
        var options = new ResponseOptions({ 
         body: [ 
          { 
           "id": 1, 
           "name": "Abhinav Mishra" 
          } 
         ] 
        }); 

        var response = new Response(options); 

        connection.mockRespond(response); 
       } 
      ); 

Однако теперь я получаю другую ошибку следующим образом:

Failed: EXCEPTION: Component "EmployeeListComponent" has no route config. in [['EmployeeDetail', {id: employee.id}] in EmployeeListComponent@3:7] 
     ORIGINAL EXCEPTION: Component "EmployeeListComponent" has no route config. 
     ORIGINAL STACKTRACE: 
     Error: Component "EmployeeListComponent" has no route config. 

Answer 1

Если вы звоните асинхр код в ngOnInit() вы не можете предположить, что он завершен, когда исполняется console.log(...). редактор this.employees устанавливается только тогда, когда обратный вызов, который вы передали subscribe(...), вызывается после получения ответа.

Если вы используете MockBackend вы можете контролировать реакцию и после того, как ответ был принят, вы должны запустить fixture.detectChanges() снова, чтобы сделать компонент повторно вынести с обновленными данными, то вы можете прочитать innerHTML и ожидать, что она содержит отображаемое содержимое ,