Angular 2 unit testing components with routerLink Angular 2 unit testing components with routerLink angular angular

Angular 2 unit testing components with routerLink


You need to configure all the routing. For testing, rather than using the RouterModule, you can use the RouterTestingModule from @angular/router/testing, where you can set up some mock routes. You will also need to import the CommonModule from @angular/common for your *ngFor. Below is a complete passing test

import { Component } from '@angular/core';import { Router } from '@angular/router';import { By } from '@angular/platform-browser';import { Location, CommonModule } from '@angular/common';import { RouterTestingModule } from '@angular/router/testing';import { TestBed, inject, async } from '@angular/core/testing';@Component({  template: `    <a routerLink="/settings/{{collName}}/edit/{{item._id}}">link</a>    <router-outlet></router-outlet>  `})class TestComponent {  collName = 'testing';  item = {    _id: 1  };}@Component({  template: ''})class DummyComponent {}describe('component: TestComponent', function () {  beforeEach(() => {    TestBed.configureTestingModule({      imports: [        CommonModule,        RouterTestingModule.withRoutes([         { path: 'settings/:collection/edit/:item', component: DummyComponent }        ])      ],      declarations: [ TestComponent, DummyComponent ]    });  });  it('should go to url',    async(inject([Router, Location], (router: Router, location: Location) => {    let fixture = TestBed.createComponent(TestComponent);    fixture.detectChanges();    fixture.debugElement.query(By.css('a')).nativeElement.click();    fixture.whenStable().then(() => {      expect(location.path()).toEqual('/settings/testing/edit/1');      console.log('after expect');    });  })));});

UPDATE

Another option, if you just want to test that the routes are rendered correctly, without trying to navigate...

You an just import the RouterTestingModule without configuring any routes

imports: [ RouterTestingModule ]

then just check that the link is rendered with the correct URL path, e.g.

let href = fixture.debugElement.query(By.css('a')).nativeElement    .getAttribute('href');expect(href).toEqual('/settings/testing/edit/1');


If you are not testing router related stuff, you can configure the test to ignore unknown directives with 'NO_ERRORS_SCHEMA'

 import { NO_ERRORS_SCHEMA } from '@angular/core'; TestBed.configureTestingModule({   declarations: [     ListComponent,   ],   schemas: [ NO_ERRORS_SCHEMA ] });


To write a test case for routerLink. You can follow the below steps.

  1. Import RouterTestingModule and RouterLinkWithHref.

    import { RouterTestingModule } from '@angular/router/testing';import { RouterLinkWithHref } from '@angular/router';
  2. Import RouterTestingModule in your module

    TestBed.configureTestingModule({  imports: [ RouterTestingModule.withRoutes([])],  declarations: [ TestingComponent ]})
  3. In test case find the directive RouterLinkWithHref tot test for the existence of the link.

    it('should have a link to /', () => {  const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));  const index = debugElements.findIndex(de => {    return de.properties['href'] === '/';  });  expect(index).toBeGreaterThan(-1);});