Angular2 RC5模拟激活路线参数

时间:2016-09-07 18:26:52

标签: angular typescript angular2-routing angular2-testing

我需要能够模拟激活的路由参数才能测试我的组件。

到目前为止,这是我最好的尝试,但它不起作用。

paste

ActivatedRoute在实际组件中使用如下:

{ provide: ActivatedRoute, useValue: { params: [ { 'id': 1 } ] } },

我目前尝试的错误只是:

this.route.params.subscribe(params => { this.stateId = +params['id']; this.stateService.getState(this.stateId).then(state => { this.state = state; }); });

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:35)

你的模拟必须反映它正在取代的对象。您.subscribe因为它返回一个可观察对象,而不仅仅是对象,因此您的模拟值也应该如此:

import { Observable } from 'rxjs/Rx';

...

{ provide: ActivatedRoute, useValue: { 'params': Observable.from([{ 'id': 1 }]) } }

答案 1 :(得分:2)

@jonrsharpe给出的答案允许你模仿params,但这些参数在每次测试中都是相同的。

如果您希望能够更改params,并在测试开始时设置它,您可以这样做:

在顶部:

describe('SomeComponent', () => {
  (...)
  let params: Subject<Params>;
  (...)
beforeEach中的

async - importsproviders等等):

beforeEach(async(() => {
  params = new Subject<Params>();
  (...)
providers中的

  (...)
  {
    provide: ActivatedRoute,
    useValue: {
      params: params
    }
  }
  (...)

然后在测试中:

it('someTest', () => {
  params.next({'id': '123'});
  fixture.detectChanges();
  (...)

重要提示

请务必在fixture.detectChanges之后致电params.next

这意味着您应该从fixture.detectChanges移除beforeEach并将其添加到每个测试中。