Angular2 Bileşenlerinin

Question

yılında Test ngOninit Aşağıdaki kod ile bir liste bileşeni var. Ben şu testi yazdım:

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

kimse bana bileşen için yazma birimi testlerin doğru yol önerebilir şu şekildedir:

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

Ancak testinde console.log çıkışı boş bir ul etiketi kancalar?

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

Eğer ararsanız asenk:

ÇÖZÜM

Mock injectAsync blokta http isteği şöyle: aşağıdaki gibi

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

        var response = new Response(options); 

        connection.mockRespond(response); 
       } 
      ); 

Ancak şimdi başka bir hata alıyorum kodu ngOnInit() içinde console.log(...) yürütme tamamlandığında tamamlandığını kabul edemezsiniz ed. this.employees yalnızca, yanıt geldikten sonra subscribe(...) aramasına geri döndüğünüzde çağrılır.

Eğer yanıtını kontrol edebilir ve tepki geçirildi sonra güncellenmiş verilerle yeniden işlemek bileşeni, o zaman innerHTML okuyabilir yapmak için tekrar fixture.detectChanges() çalıştırın ve işlenen içerik barındırdığı beklemek zorunda MockBackend kullanırsanız . Sizin çözümünüz