Angular 2:使用路由器测试组件

时间:2016-02-01 20:39:42

标签: angular angular2-routing

我正在编写使用routeLink的最简单的组件:

@Component({
    selector: 'memorySnippet',
    templateUrl: '<div class="memory-snippet-wrapper" *ngIf="memory" 
                  [routerLink]="['MainPanel', 'MemoryPanel', {'id' : this.memory.id}]">',
    directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})
export class MemorySnippetComponent {
    @Input() memory: Memory;
}

尝试测试此组件时会出现问题。我添加路由器链接Karma的那一刻抱怨缺少提供商:

添加了所有提供商后,Karma要求我得到这个:

beforeEachProviders(() => [
    MemorySnippetComponent,
    MEMORY_SERVICE_PROVIDERS,
    ROUTER_PROVIDERS,
    ApplicationRef
]);

但是当我运行测试时,我收到了这个错误:

  

EXCEPTION:EXCEPTION:Token RouterPrimaryComponent实例化时出错! (RouterLink - &gt;路由器 - &gt; RouteRegistry - &gt; Token RouterPrimaryComponent)。

     

原始例外:未实现

     

原始STACKTRACE:   错误:未实现

我做错了什么??? Angular 2(2.0.0-beta.1)还没准备好用路由器指令测试组件吗?

2 个答案:

答案 0 :(得分:9)

您应该使用beforeEachProviders方法:

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

beforeEachProviders(() => [
  ROUTER_PROVIDERS,
  provide(APP_BASE_HREF, {useValue: '/'}),
  provide(ROUTER_PRIMARY_COMPONENT, {useValue: YourComponent}),
  provide(ApplicationRef, {useClass: MockApplicationRef}
]);

MockApplicationRef由此类测试的框架提供。

答案 1 :(得分:5)

对于带有新路由器的RC4,现在使用...

beforeEach(() => addProviders([
  APP_ROUTER_PROVIDERS, // must be first
  {provide: APP_BASE_HREF, useValue: '/'}, // must be second
  {provide: ActivatedRoute, useClass: Mock},
  {provide: Router, useClass: Mock}
]));

使用这种方法的github项目是......

https://github.com/danday74/angular2-coverage