2017-10-19 100 views
3

在我的角4分I有类似:如何模拟route.snapshot.params?

constructor(private route: ActivatedRoute) { 
} 

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

我试图创建一个假设看起来像遵循模拟:

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

我的测试失败:

TypeError: Cannot read property 'params' of undefined.

我该如何嘲笑它?我误解了ActivatedRoute的正确用法,并且最好在我的组件中使用router.subscribe?我看到一些复杂的例子,人们嘲笑快照本身,但对我来说,它看起来过于复杂。

+0

我也试图做类似'常量fakeRoutes:路线= {[路径: '信息',数据:{采用catalogId: '123'} ,component:StatusComponent},]'然后'RouterTestingModule.withRoutes(fakeRoutes)'。不确定这个语法是否被支持。 – and85

+0

你想在单元测试中使用它吗?如果是的话,你可以发布代码 – LLai

+0

你会得到未定义的参数,因为你的模拟是嘲讽可观察的'this.route.params'(返回一个可观察的)而不是快照'this.route.snapshot.params'(返回一个对象的参数) – LLai

回答

1

测试本身是很简单的:

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']; 
    }); 
} 

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

3

好的,我发现如何以简单的方式模拟ActivatedRoute快照。这样的事情对我的作品:

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

谢谢:)

+0

谢谢!!!!!!! –