单元测试简介：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 }));

来源：博客园

作者：啊哈啊

链接：https://www.cnblogs.com/hahlzj/p/11294630.html

标签

单元测试

jasmine

angular