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

如何在Angular 2中模拟函数的点击事件？对于我的家庭成分，我有：Angular 2 Jasmine如何测试组件的功能

首页组件

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（）。我将如何嘲笑点击并确保重定向用于指定的链接？

来源

2016-12-01 Bhetzie

首先，我建议你在写作打字稿测试，它让你的组件与测试之间的凝聚力。

以下是你的spec文件的基本步骤：

获取元素（如果可能的话，我建议使用一个ID标签）

const element = fixture.debugElement.query(By.css("#your-element"));

触发事件。 注：必须有一个(click)事件的元素上

element.triggerEventHandler("click", null);

然后检测从事件

fixture.detectChanges();

在HTML模板中的变化，你需要有点击事件指着功能你想测试(click)="redirectToUpload()"

来源

2016-12-01 16:54:13

我们可以称上述步骤等于模拟点击吗？ – Aditya

你需要获得按钮，然后单击它

de.nativeElement.querySelector('.theButtonClass').click();

然后检查存根的navigate方法被调用正确的说法

expect(mockRouter.navigate).toHaveBeenCalledWith(['/about']);

您可以使用async或可能不需要。如果它不工作，你可能需要使用async并等待异步点击事件，以稳定

import { async } from '@angular/core/async'; 

it('..', async(() => { 
    ...click(); 
    fixture.whenStable().then(() => { 
    expect(mockRouter.navigate).toHaveBeenCalledWith(['/about']); 
    }) 
})

来源

2016-12-01 16:49:27

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

回答

相关问题