Angular2 之 单元测试

前端之家收集整理的这篇文章主要介绍了Angular2 之 单元测试前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

单元测试需要掌握的知识点>

  • karma.conf.js的配置 具体了解到每一项的意义,这样才能真正的了解这个配置是如何配置的,甚至才可以做到自己的配置。
  • 组件的测试
  • 单独的service测试

Angular的测试工具

Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,自己new出来测试类的实例。

孤立的单元测试

describe('Service: base-data-remote',() => {
  let service = new BaseDataRemoteService();

  it('should be created',() => {
    expect(service).toBeTruthy();
  });
});

利用Angular测试工具进行测试知识点总结

测试工具包含了TestBed类和@angular/core/testing中的一些方法

  • 在每个spec之前,TestBed将自己重设为初始状态。

测试组件

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

@Component({
  selector: 'app-banner',template: '<h1>{{title}}</h1>'
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}
let comp:    BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let de:      DebugElement;
let el:      HTMLElement;

describe('BannerComponent',() => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ BannerComponent ],// declare the test component }); fixture = TestBed.createComponent(BannerComponent); comp = fixture.componentInstance; // BannerComponent test instance // query for the title <h1> by CSS element selector de = fixture.debugElement.query(By.css('h1')); el = de.nativeElement; }); });
  • 组件测试
    • TestBed.createComponent创建BannerComponent组件的实例,可以用来测试和返回fixture
    • TestBed.createComponent关闭当前TestBed实例,让它不能再被配置。
    • query方法接受predicate函数,并搜索fixture的整个DOM树,试图寻找第一个满足predicate函数的元素。
    • queryAll方法返回一列数组,包含所有DebugElement中满足predicate的元素。
    • By类是Angular测试工具之一,它生成有用的predicate。 它的By.css静态方法产生标准CSS选择器 predicate,与JQuery选择器相同的方式过滤。
    • detectChanges:在测试中的Angular变化检测。
      每个测试程序都通过调用fixture.detectChanges()
      通知Angular执行变化检测。

测试有依赖的组件,这个依赖的测试

这个依赖的模拟方式有两种:伪造服务实例(提供服务复制品)、刺探真实服务。这两种方式都不错,只需要挑选一种最适合你当前测试文件的测试方式来做最好。

伪造服务实例

被测试的组件不一定要注入真正的服务。实际上,服务的复制品(stubs,fakes,spies或者mocks)通常会更加合适。 spec的主要目的是测试组件,而不是服务。真实的服务可能自身有问题。

这个测试套件提供了最小化的UserServiceStub类,用来满足组件和它的测试的需求。

userServiceStub = {
  isLoggedIn: true,user: { name: 'Test User'}
};

获取注入的服务

测试程序需要访问被注入到组件中的UserService(stub类)。

Angular的注入系统是层次化的。 可以有很多层注入器,从根TestBed创建的注入器下来贯穿整个组件树。

最安全并总是有效的获取注入服务的方法,是从被测试的组件的注入器获取。 组件注入器是fixture的DebugElement的属性

出人意料的是,请不要引用测试代码里提供给测试模块的userServiceStub对象。它是行不通的! 被注入组件的userService实例是彻底不一样的对象,是提供的userServiceStub
的克隆。

  • TestBed.get方法从根注入器中获取服务。
    例如:
    dataService = testBed.get(DataService);

测试代码

beforeEach(() => { // stub UserService for test purposes userServiceStub = { isLoggedIn: true,user: { name: 'Test User'} }; TestBed.configureTestingModule({ declarations: [ WelcomeComponent ],// 重点 providers: [ {provide: UserService,useValue: userServiceStub } ] }); fixture = TestBed.createComponent(WelcomeComponent); comp = fixture.componentInstance; // UserService from the root injector // 重点 userService = TestBed.get(UserService); // get the "welcome" element by CSS selector (e.g.,by class name) de = fixture.debugElement.query(By.css('.welcome')); el = de.nativeElement; });

刺探(Spy)真实服务

注入了真是的服务,并使用Jasmine的spy替换关键的getXxxx方法

spy = spyOn(remoteService,'getTodos').and.returnValues([Promise.resolve(datas),Promise.resolve(datas2)]);

Spy的设计是,所有调用getTodos方法都会受到立刻解析的承诺,得到一条预设的名言。

it方法中的几个函数

写单元测试时,it里经常会有几个常见的方法async(),fakeAsync(),tick(),jasmine.done()方法等。
这几个方法,都帮助我们简化了异步测试程序的代码。但是需要正确的使用这几个方法

组件

@Component({
  selector: 'twain-quote',template: '<p class="twain"><i>{{quote}}</i></p>'
})
export class TwainComponent implements OnInit {
  intervalId: number;
  quote = '...';
  constructor(private twainService: TwainService) { }

  ngOnInit(): void {
    this.twainService.getQuote().then(quote => this.quote = quote);
  }
}
  • async
    • Angular TestBed的一部分。通过将测试代码放到特殊的异步测试区域来运行,async函数简化了异步测试程序的代码
    • 接受无参数的函数方法返回无参数的函数方法,变成Jasmine的it函数的参数。
    • 它的参数看起来和普通的it参数主体一样。 没有任何地方显示异步特征。 比如,它不返回承诺,并且没有done方法调用,因为它是标准的Jasmine异步测试程序。

使用例子:

it('should show quote after getQuote promise (async)',async(() => { fixture.detectChanges(); fixture.whenStable().then(() => { // wait for async getQuote fixture.detectChanges(); // update view with quote expect(el.textContent).toBe(testQuote); }); }));
  • 简单介绍一下whenStable()方法
    • 测试程序必须等待getQuote在JavaScript引擎的下一回合中被解析。
    • ComponentFixture.whenStable方法返回它自己的承诺,它getQuote
      承诺完成时被解析。实际上,“stable”的意思是当所有待处理异步行为完成时的状态,在“stable”后whenStable承诺被解析。
    • 然后测试程序继续运行,并开始另一轮的变化检测(fixture.detectChanges
      ),通知Angular使用名言来更新DOM。 getQuote
      辅助方法提取显示元素文本,然后expect语句确认这个文本与预备的名言相符。
  • fakeAsync
    • fakeAsync是另一种Angular测试工具。
    • async一样,它也接受无参数函数返回一个函数,变成Jasmine的it
      函数的参数。
    • fakeAsync函数通过在特殊的fakeAsync测试区域运行测试程序,让测试代码更加简单直观。
    • 对于async来说,fakeAsync最重要的好处是测试程序看起来像同步的。里面没有任何承诺。 没有then(…)链来打断控制流。
  • tick
    tick函数是Angular测试工具之一,是fakeAsync的同伴。 它只能在fakeAsync的主体中被调用
    • 调用tick()模拟时间的推移,直到全部待处理的异步任务都已完成,在这个测试案例中,包含getQuote承诺的解析。

使用例子

it('should show quote after getQuote promise (fakeAsync)',fakeAsync(() => { fixture.detectChanges(); tick(); // wait for async getQuote fixture.detectChanges(); // update view with quote expect(el.textContent).toBe(testQuote); }));
  • jasmine.done
    虽然async和fakeAsync函数大大简化了异步测试,但是你仍然可以使用传统的Jasmine异步测试技术。
    你仍然可以将接受 done回调函数传给it。 但是,你必须链接承诺、处理错误,并在适当的时候调用done。
    使用例子
it('should show quote after getQuote promise (done)',done => {
  fixture.detectChanges();

  // get the spy promise and wait for it to resolve
  spy.calls.mostRecent().returnValue.then(() => { fixture.detectChanges(); // update view with quote expect(el.textContent).toBe(testQuote); done(); }); });

以上这三个测试例子是等价的,也就是说,你可以随你喜好选择你喜欢的测试方式来进行单元测试的编写。

测试有外部模板的组件

使用例子

// async beforeEach
beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ DashboardHeroComponent ],}) .compileComponents(); // compile template and css })); 

beforeEach里的async函数

注意beforeEach里面对async的调用,因为异步方法TestBed.compileComponents而变得必要。

compileComponents

  • 在本例中,TestBed.compileComponents编译了组件,那就是DashbaordComponent。 它是这个测试模块唯一的声明组件。
  • 本章后面的测试程序有更多声明组件,它们中间的一些导入应用模块,这些模块有更多的声明组件。 一部分或者全部组件可能有外部模板和CSS文件TestBed.compileComponents一次性异步编译所有组件。
  • compileComponents方法返回承诺,可以用来在它完成时候,执行更多额外任务。

测试带有inputs和outputs的组件

测试前期代码

// async beforeEach
  beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ DashboardHeroComponent ],}) .compileComponents(); // compile template and css })); // synchronous beforeEach beforeEach(() => { fixture = TestBed.createComponent(DashboardHeroComponent); comp = fixture.componentInstance; heroEl = fixture.debugElement.query(By.css('.hero')); // find hero element // pretend that it was wired to something that supplied a hero expectedHero = new Hero(42,'Test Name'); comp.hero = expectedHero; fixture.detectChanges(); // trigger initial data binding });

属性

测试代码是将模拟英雄(expectedHero)赋值给组件的hero属性的。

// pretend that it was wired to something that supplied a hero 
expectedHero = new Hero(42,'Test Name'); 
comp.hero = expectedHero;

点击事件

it('should raise selected event when clicked',() => { let selectedHero: Hero; comp.selected.subscribe((hero: Hero) => selectedHero = hero); heroEl.triggerEventHandler('click',null); expect(selectedHero).toBe(expectedHero); });

这个组件公开EventEmitter属性。测试程序像宿主组件那样来描述它。

heroEl是个DebugElement,它代表了英雄所在的

。 测试程序用”click”事件名字来调用triggerEventHandler。 调用DashboardHeroComponent.click()时,”click”事件绑定作出响应。

如果组件想期待的那样工作,click()通知组件的selected属性发出hero对象,测试程序通过订阅selected事件而检测到这个值,所以测试应该成功。

triggerEventHandler

Angular的DebugElement.triggerEventHandler可以用事件的名字触发任何数据绑定事件。 第二个参数是传递给事件处理器的事件对象。

未完待续…

猜你在找的Angularjs相关文章