Angular 8: Jasmine Unit Test on ActivatedRoute, TypeError: Cannot read property 'parent' of undefined

Question

在我的 Angular 8 应用程序中，一个组件有一个 ActivatedRoute class 并且在 ngOnInit 上，我正在订阅该路由。我在我的 spec.ts 文件中模拟了 ActivatedRoute 但无法设置父属性因为它是只读的。它显示 TypeError: Cannot read 属性 'parent' of undefined 我们如何在 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 测试 class。

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

Angular 8: Jasmine Unit Test on ActivatedRoute, TypeError: Cannot read property 'parent' of undefined

Angular 8: Jasmine Unit Test on ActivatedRoute, TypeError: Cannot read property 'parent' of undefined

karma-jasmine

angular