angular - Angular 8：ActivatedRoute 上的 Jasmine 单元测试，TypeError：无法读取未定义的属性“父级”

Question

在我的 Angular 8 应用程序中，一个组件有一个 ActivatedRoute 类，在 ngOnInit 上，我订阅了该路由。我在我的 spec.ts 文件中模拟了 ActivatedRoute，但无法设置 parent 属性，因为它是只读的。它显示 TypeError: Cannot read property 'parent' of undefined 我们如何在 spec.ts 中对 ActivatedRoute 进行单元测试？

这是一个代码片段

ngOnInit() {
this.subscriptions.add(this.route.parent.queryParams.subscribe(queryParams =>{ 
this.Type = queryParams .type 
}))}

标签： angularkarma-jasmine

Answer 1

您可以模拟ActivatedRoute如下：

const queryParams = new QueryParams();
queryParams.set('type', '?');

const activatedRouteMock = {
   parent: { queryParams: of(queryParams) }
};

然后在内部配置测试模块时必须提供模拟beforeEach。

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      { provide: ActivatedRoute, useValue: activatedRouteMock } }
    ]
    ....
});

为了设置方便，activatedRouteMock 我使用QueryParams测试类。

import { ParamMap } from '@angular/router';

export class QueryParams implements ParamMap {

   readonly keys: string[] = [];
   private params = new Map();

   set(name: string, value: string) {
      this.keys.push(name);
      this.params.set(name, value);
   }

   get(name: string): string | null {
      return this.has(name) ? this.params.get(name) : null;
   }

   has(name: string): boolean {
      return this.params.has(name);
   }

   getAll(name: string): string[] {
      return this.params.has(name) ? [this.params.get(name)] : [];
   }
}

更新

在您写的评论中，这不适用于以下代码行。

this.subscriptions.add(this.route.parent.parent.parent.params.subscribe(params => { this.Id = params.Id})

这是因为在这里，您将引用链接到parent对象。因此，您activatedRouteMock还必须包含多个嵌套的父对象。

const activatedRouteMock = {
  parent: {
    queryParams: of(queryParams),
    parent: {
      parent: { params: of(queryParams) }
    }
  }
};