Angular2 RC5 模拟激活路由参数

Question

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

这是我迄今为止最好的尝试，但没有用。

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

ActivatedRoute 在实际组件中是这样使用的：

this.route.params.subscribe(params => {
    this.stateId = +params['id'];

    this.stateService.getState(this.stateId).then(state => {
        this.state = state;
    });
});

我当前尝试得到的错误很简单：

TypeError: undefined is not a constructor (evaluating 'this.route.params.subscribe')

如有任何帮助，我们将不胜感激。

Answer 1

您的模拟必须反映它正在替换的对象。你 .subscribe 因为它 returns 是一个可观察对象，而不仅仅是对象，所以你的模拟值也应该是：

import { Observable } from 'rxjs/Rx';

...

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

Answer 2

@jonrsharpe 给出的答案允许您模拟 params，但这些参数在每个测试中都是相同的。

如果你想改变params，在测试开始时设置它，你可以这样做：

顶部：

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

在 beforeEach（async 中 - 你有 imports、providers 等）：

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

在 providers:

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

然后在测试中：

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

重要提示

一定要在params.next之后调用fixture.detectChanges。

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

Angular2 RC5 模拟激活路由参数

Angular2 RC5 Mock Activated Route Params

angular

typescript

angular2-routing

angular2-testing