Angular 2 Jasmine 如何测试组件的功能 [英] Angular 2 Jasmine How to test a function of a component
问题描述
如何在 Angular 2 中模拟函数的点击事件?对于我的 Home 组件,我有:
How do I mock the click event of a function in Angular 2? For my Home Component I have:
主页组件
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().我将如何模拟点击并确保重定向是针对指定链接的?
I want to test redirectToUpload() and redirectToAbout(). How would I mock the click and ensure that the redirect is for the specified link?
推荐答案
首先,我建议你用 Typescript 编写测试,它可以保持组件和测试之间的内聚.
First, I recommend you writing your test in Typescript, it keeps cohesion between your components and your tests.
以下是规范文件中的基本步骤:
Here are the basic steps in your spec file:
获取元素(如果可能,我建议使用 Id 标签)
Get the element (I recommend using an Id tag if possible)
const element = fixture.debugElement.query(By.css("#your-element"));
触发事件.注意:元素上必须有 (click)
事件
Trigger the event. NOTE: there must be a (click)
event on the element
element.triggerEventHandler("click", null);
然后从事件中检测变化
fixture.detectChanges();
在您的 HTML 模板中,您需要将点击事件指向您希望测试的函数 (click)="redirectToUpload()"
In your HTML template, you would need to have click events pointed at the functions you wish to test (click)="redirectToUpload()"
这篇关于Angular 2 Jasmine 如何测试组件的功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!