代码之家 › 专栏 › 技术社区 › David S.

如何正确地利用角路径参数进行单元测试?

unit-testing angular

David S. · 技术社区 · 6 年前

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap, Params } from '@angular/router';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Component({
  // selector: 'app-view1',
  template: '<h1>{{ title$ | async }}</h1>',
  // templateUrl: './view1.component.html',
  // styleUrls: ['./view1.component.css']
})
export class View1Component implements OnInit {
  public title$: Observable<string>;

  constructor(private _route: ActivatedRoute) {
  }

  ngOnInit() {
    console.log('view1 init');
    this.title$ = this._route.params.pipe(
      map((value: Params) => {
        console.log(value);
        return value['title'] || 'no title';
      })
    );
  }
}

我有一个像上面这样的简单视图组件。组件将使用 <router-outlet>. 这个路线模块文件中的配置如下所示。

export const appRoutes: Routes = [
  { path: 'view1', component: View1Component },
  { path: 'view1/:title', component: View1Component }
];

我正在努力实现这个组件的单元测试。更具体地说,我不知道如何正确地注入 ActivatedRoute 组件中的值,以及如何处理异步方案。

1 回复 | 直到 6 年前

Amit Chigadani 6 年前

你可以用一个模拟 ActivatedRoute 在您的测试规范文件中,因为这是一个组件测试,所以您不会得到 activated route 加载组件之前的详细信息。

您可以通过以下方式启动测试组件:

let activatedRoute = jasmine.createSpyObj<ActivatedRoute>("ActivatedRoute", ['params']); // create mock object   
activatedRoute.params = Observable.of({id:'123'});   // set mock params or any other stuff

beforeEach(() => {    
    //Configuring testing environment
    TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        providers: [MyProvider,
              // override ActivateRoute injector with mock object
            {provide: ActivatedRoute, useValue: activatedRoute}
        ],

    });
});

有很多教程解释如何从角度测试异步方法。

https://codecraft.tv/courses/angular/unit-testing/asynchronous/

https://angular.io/guide/testing#async-test-with-fakeasync