RouteLinkが、私はこの方法のようRouteLinkディレクティブを使用するコンポーネントをテストしていangular2

Question

をテスト：

let comp: AppComponent; 
let fixture: ComponentFixture<AppComponent>; 
let el: DebugElement; 
let injector: Injector; 
let languageService: TranslateService; 
let location: Location; 
let backend: MockBackend; 
let connection: MockConnection; // this will be set when a new connection is emitted from the backend. 

let mockRouter: any; 
let mockActivatedRoute: any; 
const mockBackendResponse = (connection: MockConnection, response: string) => { 
    connection.mockRespond(new Response(new ResponseOptions({ body: response }))); 
}; 
describe('testComponent',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [AppComponent], 
     imports: [HttpModule, RouterTestingModule, TranslateModule.forRoot({ 
     provide: TranslateLoader, 
     useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/language', '.json'), 
     deps: [Http] 
     })], 
     providers: [ 
     { provide: LanguageService, useClass: LanguageService }, 
     { provide: BackendLocatorService, useClass: BackendLocatorService }, 
     { provide: XHRBackend, useClass: MockBackend }, 
     { provide: APP_BASE_HREF, useValue: '/' } 
     ] 
    }); 

    injector = getTestBed(); 
    backend = injector.get(XHRBackend); 
    languageService = injector.get(TranslateService); 
    location = injector.get(Location); 

    backend.connections.subscribe((c: MockConnection) => connection = c); 
    fixture = TestBed.createComponent(AppComponent); 
    comp = fixture.componentInstance; // BannerComponent test instance 
    // get title DebugElement by element name 
    }); 
    it('is defined',() => { 
    expect(TranslateService).toBeDefined(); 
    expect(languageService).toBeDefined(); 
    expect(languageService instanceof TranslateService).toBeTruthy(); 
    }); 

    it('ROUTLINK CLICK',() => { 
    fixture.detectChanges(); 
    let links = fixture.nativeElement.querySelectorAll('a'); 
    links[1].click(); 
    console.log(links[0]); 
    expect(location.path()).toBe('/home'); 
    }); 
}); 

私は、現在のパスを取得するために<a>タグを取得し、それをクリックしてみたが、問題があることです現在のパスは「」常に、何:( ここではエラーではありません：？

Chrome 53.0.2785 (Windows 7 0.0.0) testComponent ROUTLINK CLICK FAILED 
Expected '' to be '/home'. 

任意のアイデア

Answer 1

だからあなたが持っています現在のエラーが発生し、修正した後に別のエラーが発生します。

現在のエラーExpected '' to be '/home'は、アンカーのclick()に非同期イベント処理が含まれているためです。しかし、あなたの期待は同期的で、非同期操作が完了する前にclick()の直後に起こります。あなたがテストasyncを作ることができ、その後、click()後、あなたがこの問題を解決したら、あなたは別の問題に実行されます fixture.whenStable()

import { async } from '@angular/core/testing'; 

        // use async 
it('ROUTLINK CLICK', async(() => { 
    fixture.detectChanges(); 
    let links = fixture.nativeElement.querySelectorAll('a'); 
    links[1].click(); 
    fixture.whenStable().then(() => { 
    expect(location.path()).toBe('/home'); 
    }); 
})); 

を呼び出すことにより、非同期操作を待つことができ、この問題を解決するには

。現在、RouterTestingModuleの経路は設定されていません。 RouterTestingModule.withRoutes(Routes)に電話をかけて設定してください。実際のアプリケーションルートを使用することもできますし、必要に応じてテスト用に偽のルートを設定することもできます。 See example。