加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2 Jasmine如何测试组件的功能

发布时间:2020-12-17 08:52:32 所属栏目:安全 来源:网络整理
导读:如何在Angular 2中模拟函数的click事件?对于我的Home组件,我有: 家庭组件 import { Component } from '@angular/core';import { Router } from '@angular/router';@Component({ moduleId: module.id,templateUrl: 'home.component.html',styleUrls: ['home
如何在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()”

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读