Angular Testing: routerLink

Today, I'll show you how you can test such a code:

	<a class="test-btn" [routerLink]="['/vedrax-index/category',category, 'demands']"
	[queryParams]="{period:activity.period,size:activity.demandCount}">
	Test
	</a>

view raw routerLink_sample_1 hosted with ❤ by GitHub

The routerLink directive on the anchor tag give the router control over this element. Find more info here.

A. Provide the routerTestingModule with dummy routes as:

	beforeEach(async(() => {
	TestBed.configureTestingModule({
	imports: [
	SharedModule,
	RouterTestingModule.withRoutes([
	{path: 'vedrax-index/category/:category/demands', component: DummyComponent}
	])
	],
	declarations: [CategoryActivityComponent, DummyComponent]
	}).compileComponents();
	}));

view raw routerLink_sample_2 hosted with ❤ by GitHub

B. Declare Router and Location for use in your test:

	let location: Location;
	let router: Router;
	let debugElement: DebugElement;
	beforeEach(() => {
	router = TestBed.get(Router);
	location = TestBed.get(Location);
	fixture = TestBed.createComponent(CategoryActivityComponent);
	debugElement = fixture.debugElement;
	comp = fixture.componentInstance;
	//component attribute setting here
	fixture.detectChanges();
	});

view raw routerLink_sample_3 hosted with ❤ by GitHub

C. Routing is an asynchronous activity so we use one of the asynchronous testing methods at our disposal, in this case the fakeAsync method.

	it('test demands redirection', fakeAsync(() => {
	//we trigger a click on our link
	debugElement
	.query(By.css('.test-btn'))
	.nativeElement.click();
	//We wait for all pending promises to be resolved.
	tick();
	expect(location.path()).toBe('/vedrax-index/category/api-01/demands?period=2018&size=345');
	}));

view raw routerLink_sample_4 hosted with ❤ by GitHub

Happy coding!!!