Angular 8：茉莉花单元测试对ActivatedRoute，TypeError：无法读取未定义的属性'parent'

Question

在我的Angular 8应用程序中，一个组件具有ActivatedRoute类，在ngOnInit上，我正在订阅路由。我在spec.ts文件中模拟了ActivatedRoute，但是由于它是只读的，因此无法设置父属性。它显示了TypeError：无法读取未定义的属性“ parent”我们如何在spec.ts中单元测试ActivatedRoute？

这里是代码段

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

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

UPDATE

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

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