angular - RouteLink 测试 Angular2

标签 angular karma-jasmine angular2-routing angular2-testing routelink

我正在测试一个使用 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'.

有什么想法吗?

最佳答案

因此,您当前有一个错误,修复该错误后,您将收到另一个错误。

当前错误Expected '' to be '/home' 是因为 anchor 上的click() 涉及异步事件处理。但您的期望是同步的,并且发生在 click() 之后、异步操作完成之前。

要解决此问题,您可以使测试异步,然后在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 .

关于angular - RouteLink 测试 Angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39616803/

相关文章:

dart - 如何在Dart中设置@RouteConfig

javascript - Angular 7 radio [attr.value] 破坏了 [ngModel] 功能

json - response.json 不是函数。 Angular 火

Angular 2 - 表单组组件

未创建 Angular 4 代码覆盖文件夹

javascript - karma 单元测试 : Module name "react" has not been loaded yet for context: _. 使用 require([])

angular - 无法注入(inject) ActivatedRouteSnapshot

Angular - Karma - ngrx - 没有商​​店的提供者

javascript - 处理 Angular 2 中动态创建的组件的 @Input 和 @Output

Angular 2 : Route parameter changes, 重新加载同一页面?