角2 - 由[routerLink]

问题描述：

在路线改变我使用的材料设计，需要编写测试用例路线变更单元测试.. 下面是我的HTML代码..角2 - 由[routerLink]

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

没有任何类关联到按钮，也没有任何写入点击功能。我是新的angular2，并尝试过很多选项来测试，但是对于这种类型，编写茉莉花单元测试用例的最佳方法是什么？

我们不与“重复”编辑标题您的路由器链接代码组件。相反，如果您没有投票，请在评论中发布链接，如下所示：[使用routerLink的Angular 2单元测试组件]（https://*.com/questions/39577920/angular -2-单元测试组件与 - routerlink）。回滚这个问题。 – crashmstr

答

您需要创建一个模拟组件，其中包括包含了像如下

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

角2 - 由[routerLink]

相关推荐