如何在Angular 2中模拟函数的click事件?对于我的Home组件,我有:
家庭组件
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().我如何模拟点击并确保重定向是针对指定的链接?
首先,我建议您在Typescript中编写测试,它可以保持组件与测试之间的内聚.
以下是spec文件中的基本步骤:
获取元素(如果可能,我建议使用Id标记)
const element = fixture.debugElement.query(By.css("#your-element"));
触发事件.注意:元素上必须有(单击)事件
element.triggerEventHandler("click",null);
然后检测事件的变化
fixture.detectChanges();
在HTML模板中,您需要指向要测试的函数的click事件(click)=“redirectToUpload()”
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。