角2 - 由[routerLink]

Question

在路線改變我使用的材料設計，需要編寫測試用例路線變更單元測試.. 下面是我的HTML代碼..

<button md-raised-button class="mat-primary"[routerLink]="['add']"> 
<i class="fa fa-plus" aria-hidden="true"></i> ADD 
</button> 

沒有任何類關聯到按鈕，也沒有任何寫入點擊功能。 我是新的angular2，並嘗試過很多選項來測試，但是對於這種類型，編寫茉莉花單元測試用例的最佳方法是什麼？

Answer 1

您需要創建一個模擬組件，其中包括包含了像如下

Angular 2 unit testing components with routerLink

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