如何模拟角度ActivatedRoute答案

【问题标题】：How to mock angular ActivatedRoute如何模拟角度ActivatedRoute
【发布时间】：2019-01-28 18:27:28
【问题描述】：

我的代码是ActivatedRoute，后面是map，后跟subscribe。

export class MyComponent implements OnInit {

    constructor(private actr: ActivatedRoute) {

    this.actr.data.map(data => data.aList).subscribe((res) => {
        console.log('res ------------------------- ', res); // It is not showing this.
        this.myResponse = res;
    });
}

   ngOnInit() {
      // some code
      // myResponse is undefined
   }

}

我已经在规范文件中尝试过：

class MockActivatedRouter {

    public map = (data) => data.aList = of({some: [] });
    // Or 
    public map = (data) => of({some: [] });
 }

它们都不起作用。

【问题讨论】：

什么是map(data => data.aList)？这是 rxjs@5 的Observable 上的方法吗？或者这个方法是在路由器配置/解析器中创建的？你如何提供你的模拟？请发布整个规范文件
请为新的 angular 2+ 使用 angular 标签，因为 angularjs 标签适用于 angular 1.x

标签： angular unit-testing mocking rxjs router

【解决方案1】：

我想你想这样模拟它：

class MockActivatedRouter {
  data = of({some: [] }); // Dont remember the old rxjs5 syntax but you might want to use Observable.of(...)
}

意味着ActivatedRoute 有一个属性data，您可以在构造函数中订阅该属性。

我通常只使用普通对象来模拟它，并将 observable 提供为 Subject 以便能够在测试中随时发出。

我想你知道如何在测试中提供你的模拟：

TestBed.configureTestingModule({
  ...
  providers: [{
    provide: ActivatedRoute,
    useClass: MockActivatedRouter
  }]
});

【讨论】：

【解决方案2】：

事实证明我们可以简单地做：

class MockActivatedRouter {
  public map = (data) => of(MyResponse.data.aList);
}

class MyResponse {
  static data = {
     // data 
  }
}

【讨论】：

这不是一个好主意，因为当有人来并可能稍微更改实现时（例如在map 之前放置另一个运算符），测试将开始失败。