Angular 2 unit testing components with routerLink
Solution 1
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');
Solution 2
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 ]
});
Solution 3
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); });
select
I am working on a project called webpgr (say: web pager). We create a platform for zoomable, swipable, rotating websites in HTML5 CSS3 and JavaScript.
Updated on May 25, 2020Comments
-
select almost 4 years
I am trying to test my component with angular 2 final, but I get an error because the component uses the
routerLink
directive. I get the following error:Can't bind to 'routerLink' since it isn't a known property of 'a'.
This is the relevant code of the
ListComponent
template<a *ngFor="let item of data.list" class="box" routerLink="/settings/{{collectionName}}/edit/{{item._id}}">
And here is my test.
import { TestBed } from '@angular/core/testing'; import { ListComponent } from './list.component'; import { defaultData, collectionName } from '../../config'; import { initialState } from '../../reducers/reducer'; const data = { sort: initialState.sort, list: [defaultData, defaultData], }; describe(`${collectionName} ListComponent`, () => { let fixture; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ ListComponent, ], }).compileComponents(); // compile template and css; fixture = TestBed.createComponent(ListComponent); fixture.componentInstance.data = data; fixture.detectChanges(); }); it('should render 2 items in list', () => { const el = fixture.debugElement.nativeElement; expect(el.querySelectorAll('.box').length).toBe(3); }); });
I looked at several answers to similar questions but could not find a solution that worked for me.