RouteLink тестирования angular2

Question

Я тестирование компоненты, которые используют директиву RouteLink как таким образом:

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.