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.
Import
RouterTestingModule
andRouterLinkWithHref
.import { RouterTestingModule } from '@angular/router/testing';import { RouterLinkWithHref } from '@angular/router';
Import
RouterTestingModule
in your moduleTestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([])], declarations: [ TestingComponent ]})
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);});