angular单元测试学习(jasmine)
单元测试简介:https://segmentfault.com/a/1190000009737186
单元测试-Jasmine:https://segmentfault.com/a/1190000009737204
angular2单元测试:https://segmentfault.com/a/1190000009769787#articleHeader1
概念简介
Jasmine
Jasmine测试框架提供了编写测试脚本的工具集,而且非常优秀的语义化,让测试代码看起来像是在读一段话。
describe,beforeEach,it,expect等方法,利用这些方法可以定义单元测试如何执行,单元测试的结果和预期。
官方文档:https://jasmine.github.io/api/edge/global.html#expect
Karma
有Jasmine测试脚本,还需要Karma来帮忙管理这些脚本,以便于在浏览器中运行,可以理解Karma为运行这些测试脚本的容器。
需要在根目录创建 karma.conf.js 文件,这相当于一些约定。文件是为了告知karma需要启用哪些插件、加载哪些测试脚本、需要哪些测试浏览器环境、测试报告通知方式、日志等等。
官方文档:https://karma-runner.github.io/1.0/config/configuration-file.html
Angular测试工具集
testded
testded是angular提供用于单元测试的主要工具方法。为单元测试配置和初始化环境,提供创建组件和服务的方法。
还有spy和一些异步支持
结合Jasmine和Angular测试工具集编写单元测试案例
Jasmine单元测试的基础概念
Jasmine中的单元测试有几个概念:test suit、Specs、Expectations
test suit 测试套件
可以理解为一组单元测试用例的集合。Jasmine用describe函数来表示
Specs 测试案例
一个单元测试用例,Jasmine使用函数it来表示
Expectations 期望值
一个单元测试用例执行后,对执行结果的期待,Jasmine使用函数expect来表示
Jasmine单元测试常用方法
Matchers:对期待值进行判断,toBeTruthy,toBeNull这种,也可以自己实现Matcher
Setup 与 Teardown:在测试套件中,一些重复的代码可以放在setup和teardown中。setup(对应beforeEach)为每一个单元测试案例执行之前会执行,Teardown(对应afterEach)为每一个单元测试案例执行之后会执行,
数据共享:在describe 来定义相应的变量,这样每个 it 内部可以共享它们
spy: 文档翻译:https://blog.csdn.net/GuoJiangweigege/article/details/52130589 并参照:https://www.cnblogs.com/laixiangran/p/5060922.html
spyOn(object, "methodNam");//在object对象上添加methodNam,当调用object对象上的方法,为模拟调用,不会执行methodNam方法的代码。spyOn写在beforEach或者it中,每一个测试案例执行完之后,被销毁。
spyOn(object, "methodNam").and.callThrough();//methodNam方法的代码会被执行
spyOn(object, "methodNam").and.callFake(fn);//methodNam方法会被fn替代,执行fn
spyOn(object, "methodNam").and.returnValue(value);//methodNam的返回值为value
Angular工具集
TestBed
如官方所说,是angular单元测试最主要的api。个人理解是一组单元测试的测试context,按配置生成模块、组件,然后提供这些模块或者组件用于单元测试。
1 TestBed创建模块:TestBed.configureTestingModule
构建一个angular模块,并返回,接受参数用于配置模块,和@NgModule的配置无差别。
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
declarations: [TestComponent]
});
});
2 TestBed创建组件:TestBed.createComponent
创建组件,返回一个fixture。fixture 包括组件实例、变更监测以及DOM相关的属性,它是用来写单元测试的核心。
1 @Component({ 2 template: `<trade-view [id]="id" (close)="_close()"></trade-view>` 3 }) 4 class TestComponent { 5 id: number = 0; 6 _close() { } 7 } 8 9 beforeEach(() => { 10 TestBed.configureTestingModule({ 11 imports: [HttpModule], 12 declarations: [TestComponent] 13 }); 14 fixture = TestBed.createComponent(TestComponent); 15 component = fixture.componentInstance; //组件实例 16 el = fixture.nativeElement; //组件原生元素17 });
3 异步beforeach(具体可参考angular官方文档 测试-调用compileComponents())
如果一个组件使用了templateUrl和styleUrls获取模板或者模板样式,这是一个异步的过程,那么需要使用异步beforeach创建组件,否则会报错无法编译组件。
如下是没有使用异步beforeach创建组件:
1 beforeEach(() => { 2 TestBed.configureTestingModule({ 3 declarations: [ BannerComponent ], 4 }); 5 fixture = TestBed.createComponent(BannerComponent); 6 });
如果这个组件没有使用templateUrl或styleUrls,那么不会有任何问题,因为createComponet就会执行组件的编译,然后再创建组件。但如果使用了templateUrl或styleUrls,则获取url地址文件的过程是异步的,在createComponent时如果没有返回地址,那么执行编译就会报错。这时,用异步的beforeach来解决这个问题。
1 beforeEach(async(() => { //使用angular提供的辅助异步函数 2 TestBed.configureTestingModule({ 3 declarations: [ BannerComponent ], 4 }) 5 .compileComponents() 6 .then(() => { 7 fixture = TestBed.createComponent(BannerComponent); 8 component = fixture.componentInstance; 9 h1 = fixture.nativeElement.querySelector('h1'); 10 }); 11 }));