34

在我的 Angular 4 组件中,我有类似的东西:

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.myId = this.route.snapshot.params['myId'];
}

我正在尝试创建一个看起来如下所示的模拟:

class MockActivatedRoute extends ActivatedRoute {
  public params = Observable.of({ myId: 123 });
}    

我的测试失败了:

TypeError:无法读取未定义的属性“参数”。

我怎么想嘲笑它?我是否误解了组件的正确用法ActivatedRoute并且应该更好地使用router.subscribe我的组件?我看到了一些复杂的例子,人们嘲笑快照本身,但对我来说它看起来过于复杂。


测试本身非常简单:

describe('ngOnInit', () => {
it('should set up initial state properly',
  () => {
  const component = TestBed.createComponent(MyComponent).componentInstance;
    component.ngOnInit();
    expect(component.myId).toEqual('123');
  });
});

如果我只是将测试中的方法更改为如下所示 - 测试有效:

ngOnInit() {
    //this.myId = this.route.snapshot.params['myId'];
    this.route.params.subscribe(params => {
    this.myId = params['myId'];
    });
}

显然我需要模拟激活的快照,但是有更好的方法吗?

4

2 回答 2

48

好的,我已经找到了如何以简单的方式模拟 ActivatedRoute 快照。像这样的东西对我有用:

providers: [MyComponent, {
  provide: ActivatedRoute,
  useValue: {snapshot: {params: {'myId': '123'}}}
}

谢谢 :)

于 2017-10-19T15:19:20.200 回答
36

如果使用 route.snapshot.paramMap.get( 'uuid' ) 代替:

import { ActivatedRoute, convertToParamMap } from '@angular/router';

{
    provide: ActivatedRoute, useValue:
        { snapshot: { paramMap: convertToParamMap( { 'uuid': '99-88-77' } ) } }
}
于 2018-10-19T15:14:04.430 回答