RouteLink測試angular2

Question

我正在測試使用RouteLink指令的Component，如下所示：

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) 。 您可以使用實際的應用程序路由，也可以根據需要設置一些虛假路由進行測試。 參見示例 。