使用 Router.events 进行单元测试 Angular 9

Question

I am new to Angular and to unit testing in general and now I can't find a way to test the code in this service below. This is responsable for the creation of a breadcrumb menu. In the Routing Module I have added for every route --> data:{breadcrumb:'custom name'}.

Here is the service code:

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {IBreadcrumbs} from '../breadcrumb/ibreadcrumbs';
import {ActivatedRouteSnapshot, Data, NavigationEnd, Router} from '@angular/router';
import {filter} from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class BreadcrumbService {

  /// Subject emitting the breadcrumb hierarchy
  private readonly breadcrumbsSub$ = new BehaviorSubject<IBreadcrumbs[]>([]);

  // Observable exposing the breadcrumb hierarchy
  readonly breadcrumbs$ = this.breadcrumbsSub$.asObservable();

  constructor(private router: Router) {
    this.router.events
      .pipe(
        // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
        filter((event) => event instanceof NavigationEnd)
      )
      .subscribe((event) => {
        // Construct the breadcrumb hierarchy
        const root = this.router.routerState.snapshot.root;
        const breadcrumbs: IBreadcrumbs[] = [];


        this.addBreadcrumb(root, breadcrumbs);
        // Emit the new hierarchy
        this.breadcrumbsSub$.next(breadcrumbs);
      });
  }


  private addBreadcrumb(
    route: ActivatedRouteSnapshot | null,
    breadcrumbs: IBreadcrumbs[]
  ) {
    if (route) {
      // Add an element for the current route part
      if (route.data.breadcrumb) {
        const breadcrumb = {
          label: this.getLabel(route.data),
          url: route.url.toString()
        };
        breadcrumbs.push(breadcrumb);
      }
      // Add another element for the next route part
      this.addBreadcrumb(route.firstChild, breadcrumbs);
    }
  }

  private getLabel(data: Data) {
    // The breadcrumb can be defined as a static string or as a function to construct the breadcrumb element out of the route data
    return typeof data.breadcrumb === 'function'
      ? data.breadcrumb(data)
      : data.breadcrumb;
  }


}

And here is my spec.ts file

import {TestBed} from '@angular/core/testing';

import {BreadcrumbService} from './breadcrumb.service';
import {RouterTestingModule} from '@angular/router/testing';
import {Router, RouterEvent} from '@angular/router';
import {ReplaySubject} from 'rxjs';


fdescribe('BreadcrumbService', () => {
  let service: BreadcrumbService;
  let routerEventRelaySubject: ReplaySubject<RouterEvent>;
  let routerMock;
  let router: Router;


  beforeEach(() => {
    routerEventRelaySubject = new ReplaySubject<RouterEvent>(1);
    routerMock = {
      events: routerEventRelaySubject.asObservable()
    };
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [{provide: Router, useValue: routerMock}]
    });
    service = TestBed.inject(BreadcrumbService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

});

I need a coverage of 80% minimum, please help me achieve this. Thank you in advance.

Answer 1

If you want to build an understanding of how to test routing in Angular here is a good article: Testing Angular routing components with the RouterTestingModule . The only caveat I foresee is the usage of the this.router.routerState.snapshot . It might be not evaluated by the RouterTestingModule . You might need to mock it the same way as you do with events .

I suppose providing a full solution would be too much to expect. So, comprehending the article and do it yourself would be a nice way to go.

Answer 2

Please show your previous attempts before posting a question. If you're new to unit testing, it might be helpful if you do a test of an empty BreadcrumbService . Then, you can add another test for the constructor. Since you're using both Angular router and rxjs operators, it would be useful to look into their documentation to see how to mock/test in their framework.

Bottom line: do a small simple test that passes, add functionality, and repeat.