Angular 2 Jasmine How to test component function

Question

How do I make fun of a function click event in Angular 2? For my home component, I have:

Home component

import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ moduleId: module.id, templateUrl: 'home.component.html', styleUrls: ['home.component.css'], selector: 'home', }) export class HomeComponent { constructor(private router: Router) { } redirectToUpload() { this.router.navigate(['/upload']); } redirectToAbout() { this.router.navigate(['/about']); } } 

Home Component Specification

 import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { HomeComponent } from './home.component'; import { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { HomeModule } from './home.module'; import { RouterLinkStubDirective, RouterOutletStubComponent } from '../../../test/router-stubs'; import { RouterModule } from '@angular/router'; export function main() { let de: DebugElement; let comp: HomeComponent; let fixture: ComponentFixture<HomeComponent>; let mockRouter:any; class MockRouter { //noinspection TypeScriptUnresolvedFunction navigate = jasmine.createSpy('navigate'); } describe('Home component', () => { // preparing module for testing beforeEach(async(() => { mockRouter = new MockRouter(); TestBed.configureTestingModule({ imports: [HomeModule], }).overrideModule(HomeModule, { remove: { imports: [ RouterModule ], }, add: { declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ], providers: [ { provide: Router, useValue: mockRouter }], } }).compileComponents().then(() => { fixture = TestBed.createComponent(HomeComponent); comp = fixture.componentInstance; }); })); tests(); }); function tests() { beforeEach(() => { // trigger initial data binding fixture.detectChanges(); de = fixture.debugElement.query(By.css('h1')); }); it('can instantiate Home', () => { expect(comp).not.toBeNull(); }); it('should have expected <h1> text', () => { fixture.detectChanges(); const h1 = de.nativeElement; expect(h1.innerText).toMatch("Home"); }); } } 

I want to check redirectToUpload () and redirectToAbout (). How do I make fun of a click and make sure that the redirect for the specified link?

Answer 1

Firstly, I recommend you write your test in Typescript, it maintains the coupling between your components and your tests.

Here are the basic steps in your spec file:

Get the item (I recommend using an identifier tag if possible)

 const element = fixture.debugElement.query(By.css("#your-element")); 

Trigger an event. NOTE: on item

there must be an event (click)

 element.triggerEventHandler("click", null); 

Then identify the changes from the event

 fixture.detectChanges(); 

In your HTML template, you will need to click events that indicate the functions you want to test (click)="redirectToUpload()"

Answer 2

You need to press a button and click on it

 de.nativeElement.querySelector('.theButtonClass').click(); 

Then verify that the stub navigate method is called with the correct argument

 expect(mockRouter.navigate).toHaveBeenCalledWith(['/about']); 

You might need async . If this does not work, you may need to use async and wait for the asynchronous click to stabilize.

 import { async } from '@angular/core/async'; it('..', async(() => { ...click(); fixture.whenStable().then(() => { expect(mockRouter.navigate).toHaveBeenCalledWith(['/about']); }) })