Angular 2 Jasmine So testen Sie eine Funktion einer Komponente

Question

Wie spotze ich das Klickereignis einer Funktion in Angular 2? Für meine Startseite Component ich habe:

Startseite 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']); 
    } 

} 

Startseite Component spec

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"); 
      });   


     } 

} 

Ich möchte redirectToUpload() und redirectToAbout() testen. Wie würde ich den Klick verspotten und sicherstellen, dass die Weiterleitung für den angegebenen Link ist?

Answer 1

Erster zu stabilisieren, empfehle ich schreiben Sie Ihren Test in Maschinenschrift, hält es den Zusammenhalt zwischen Komponenten und Ihre Tests.

Hier sind die grundlegenden Schritte in der Spec-Datei:

das Element (ich empfehle einen ID-Tag, wenn möglich mit)

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

Auslöser das Ereignis. HINWEIS: Es muss

element.triggerEventHandler("click", null); 

Dann erkennen die Änderungen aus dem Ereignis

fixture.detectChanges(); 

In Ihrem HTML-Vorlage ein (click) Ereignis auf dem Element sein, würden Sie brauchen Click-Ereignisse haben zu den Funktionen hingewiesen Sie möchten (click)="redirectToUpload()"

Answer 2

Sie benötigen klicken Sie auf die Taste, um sie dann

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

überprüfen dann, dass die navigate Methode Stub mit dem richtigen Argument aufgerufen

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

Sie müssen möglicherweise oder möglicherweise nicht async verwenden. Wenn es nicht funktioniert, müssen Sie möglicherweise async und warten auf die asynchrone Click-Ereignis verwenden

import { async } from '@angular/core/async'; 

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