角2ヤスミンコンポーネントの機能をテストする方法

Question

関数のクリックイベントを角2でモックするにはどうすればよいですか？私のホームコンポーネントのために私は持っている：

ホームコンポーネント

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

} 

ホームコンポーネントの仕様

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


     } 

} 

私はredirectToUpload（）とredirectToAbout（）テストしたいです。どのように私はクリックを模擬し、リダイレクトが指定されたリンクのためであることを確認しますか？

Answer 1

ファーストを安定させるための非同期クリックイベントを待つ必要があるかもしれません、私はあなたが活字体でテストを書いてお勧めします、それはあなたのコンポーネントと、あなたのテストの間の結束を維持します。ここで

は、あなたのspecファイルでの基本的な手順は次のとおりです。

が要素（可能ならば、私はIDタグを使用することをお勧めします）

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

トリガーイベントを取得します。 注：

element.triggerEventHandler("click", null); 

は、その後、あなたのHTMLテンプレートでイベント

fixture.detectChanges(); 

からの変化を検出要素に(click)イベントがなければなりません、あなたが持っている必要がありますクリックイベントは、関数で指摘しましたあなたはテストしたい(click)="redirectToUpload()"

Answer 2

あなたはスタブのnavigate方法はあなたがたりないかもしれasyncを使用する必要があり、正しい引数

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

と呼ばれていることを確認後

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

それをクリックし、ボタンを取得する必要があります。それが動作しない場合は、asyncを使用して

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

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