Как правильно реализовать юнит-тест с параметрами углового маршрута?

Question

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>. Конфигурация Routes в файле модуля выглядит следующим образом.

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

Я изо всех сил пытаюсь реализовать модульные тесты для этого компонента. В частности, я понятия не имею, как правильно ввести значение ActivatedRoute в компонент и как обрабатывать асинхронные сценарии.

Answer 1

Вы можете использовать макет 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