单元测试需要掌握的知识点
- 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,它代表了英雄所在的<div>。 测试程序用"click"事件名字来调用triggerEventHandler。 调用DashboardHeroComponent.click()时,"click"事件绑定作出响应。
如果组件想期待的那样工作,click()通知组件的selected属性发出hero对象,测试程序通过订阅selected事件而检测到这个值,所以测试应该成功。
triggerEventHandler
Angular的DebugElement.triggerEventHandler可以用事件的名字触发任何数据绑定事件。 第二个参数是传递给事件处理器的事件对象。
自己遇到的坑儿
下面都是自己在实际的编写单元测试时,真实遇到的问题,自己真的是在这上面花费了很多时间啊!!!为什么没有说花冤枉时间呢?就是因为是自己对单元测试还没哟掌握,所以出了错,不要紧,重要的是以后不能再犯!
service的注入
刚刚接触angular2吧,对很多service的写法不是很了解,以至于真的是白白浪费了很多时间,尤其是在这个service的模拟上。可能聪明如你,不会犯我这样简单却又致命的错误吧,只希望,以后的贺贺也可以不再犯这样的错!👎自己一把... ...
首先来看一下,我创建的这个service的用法。
@Injectable()
export class BaseDataService {
remoteService: BaseDataRemoteService;
private datasMap = {}; // 用于存储所有的数据
private todosCache = {}; // 待办数据的id的临时存储
private draftsCache = {}; // 草稿数据临时存储
private relatedCache = {}; // 已办理数据临时存储
constructor(private config: any, private http: Http) {
this.config = config;
this.config.baseUrl = config.baseUrl || config.name;
this.remoteService = new BaseDataRemoteService(this.config.baseUrl, this.config.idPropertyName, this.http);
}
getTodos(userId: String, pageNo?: number): any {
pageNo = pageNo || 0;
return this.remoteService.getTodos(userId, pageNo).then(datas => {
let todos = datas.content;
todos.forEach(element => {
this.datasMap[element[this.config.idPropertyName]] = element;
if (pageNo === 0) {
this.todosCache = {};
}
});
this.todosCache[pageNo] = this.getRecordIds(todos);
return todos;
}, () => {
return [];
});
}
}
其中的
BaseDataRemoteService
我是自己new出来的,而且这个BaseDataService
也是我自己new出来的,所以首先第一点,我应该自己创建,而不能使用angular的DI系统来帮助我创建。
第二点就是在模拟的时候,我竟然傻傻的自己去在spec文件中自己去new了
BaseDataRemoteService
,所以我根本没有办法去执行spyOn(foo, "getBar")
这样的模拟,然后就是一直的出错。错样百出了!
正确的单元测试:
function makeEnvironment() {
return TestBed.configureTestingModule({
providers: [
MockBackend,
BaseRequestOptions,
{
provide: Http,
useFactory: (backend, options) => {
return new Http(backend, options);
}, deps: [MockBackend, BaseRequestOptions],
},
],
imports: [HttpModule],
});
}
const userId: String = '123';
let pageNo: number;
describe('Service: base-data', () => {
const config = {
name: 'archives/out',
baseUrl: '/archives/out',
idPropertyName: 'outId',
subflagPropertyName: 'subflag',
};
const datas = [];
const datas2 = [];
let service: BaseDataService;
let spy: jasmine.Spy;
let http: Http; // 还应该是DI系统的
beforeEach(() => {
const testBed = makeEnvironment();
http = testBed.get(Http);
service = new BaseDataService(config, http); //这是自己new出来的
// 但是自己不能new出来BaseDataRemoteService
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it('获取到的数据为空', async(() => {
// 这样的使用才是正确的!!!
spy = spyOn(service.remoteService, 'getTodos').and.returnValue(Promise.resolve({content: []}));
service.getTodos(userId).then(todos => {
expect(todos.length).toBe(0);
expect(todos).toEqual([]);
expect(service.getTodosCache(0).length).toBe(0);
});
}));
下次一定要注意,不要瞎写!!!
多次调用同一个异步方法
相信大家对这段单元测试的代码很熟悉,这里就是模拟多次调用同一个方法时,返回不同的值。
这里是同步方法的模拟返回数据,那么异步方法同样可以。
describe("A spy, when configured to fake a series of return values", function() {
var foo, bar;
beforeEach(function() {
foo = {
setBar: function(value) {
bar = value;
},
getBar: function() {
return bar;
}
};
// 多次调用时,返回不同的值!
spyOn(foo, "getBar").and.returnValues("fetched first", "fetched second");
foo.setBar(123);
});
it("when called multiple times returns the requested values in order", function() {
expect(foo.getBar()).toEqual("fetched first");
expect(foo.getBar()).toEqual("fetched second");
expect(foo.getBar()).toBeUndefined();
});
});
下面是出错的代码。
it('when the baseUrl is exist and pageNo is exist', async(() => {
// 模拟多次进行异步调用时的返回值
spyOn(service.remoteService, 'getRelatedList').and
.returnValues(Promise.resolve({content: datas}), Promise.resolve({content: datas2}));
pageNo = 0;
// 第一次调用
service.getRelatedList(userId, pageNo).then(relate => {
expect(relate.length).toBe(2);
expect(relate).toEqual(datas);
expect(service.getRelatedCache(0).length).toBe(2, 'the length should be 2.');
});
// 第二次调用
service.getRelatedList(userId).then(relate => {
expect(relate.length).toBe(3);
expect(relate).toEqual(datas2);
expect(relate.length).not.toBe(2);
expect(relate).not.toEqual(datas);
expect(service.getRelatedCache(0).length).toBe(3);
});
}));
下面是单元测试的结果:
虽然第一个、第二个expect通过了,但是第三个无论如何也通不过。其实不是代码写的有问题,是单元测试写的有有问题,在第一个expect去判断的时候,第二个
service.getRelatedList
已经执行完了,所以才会出错。
这个错误,我意识到了,所以我再第二次调用的地方添加了一个延时执行的函数,这样单元测试是完全正确的,但是这并不是一个好的解决办法。
setTimeout(function() {
}, 200);
最好的解决办法是,是使用
fakeAsync
和tick
来解决。
tick函数是Angular测试工具之一,是fakeAsync的同伴。 它只能在fakeAsync的主体中被调用。
调用tick()模拟时间的推移,直到全部待处理的异步任务都已完成。
下面是正确的代码:
it('when the baseUrl is exist and pageNo is exist', fakeAsync(() => {
spyOn(service.remoteService, 'getRelatedList').and
.returnValues(Promise.resolve({content: datas}), Promise.resolve({content: datas2}));
pageNo = 0;
service.getRelatedList(userId, pageNo).then(relate => {
expect(relate.length).toBe(2);
expect(relate).toEqual(datas);
expect(service.getRelatedCache(0).length).toBe(2, 'the length should be 2.');
});
tick(); // 基本的意思就是,前后分开来执行
service.getRelatedList(userId).then(relate => {
expect(relate.length).toBe(3);
expect(relate).toEqual(datas2);
expect(relate.length).not.toBe(2);
expect(relate).not.toEqual(datas);
expect(service.getRelatedCache(0).length).toBe(3);
});
}));
其实这之前我是把
tick()
方法都看过一遍的,可是还是不理解其中的意思,所以记录下来吧,所谓书读百遍变其义自见,加油啊!💪💪💪
未完待续...