Karma+Jasmine+istanbul+webpack自动化单元测试

Karma的介绍

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。

Jasmine的介绍

Jasmine是单元测试框架，用Karma让Jasmine测试自动化完成。jasmine提出行为驱动【BDD(Behavior Driven Development)】,测试先行理念，Jasmine的官网

https://jasmine.github.io/1.3/introduction.html

istanbul的介绍

istanbul是一个单元测试代码覆盖率检查工具，可以很直观地告诉我们，单元测试对代码的控制程度。

webpack的介绍

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。（引用webpack中文网介绍）

Webpack

为什要使用Webpack

模块化，让我们可以把复杂的程序细化为小的文件;

易拓展 Scss，less等CSS预处理器

…

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

Gulp/Grunt是一种能够优化前端的开发流程的工具，

而WebPack是一种模块化的解决方案，

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

Webpack的工作方式是：

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

Jasmine

基本语法介绍

describe(string, function)

：测试集或者测试包（官方称之为suite），主要功能是用来划分单元测试的，describe是可以嵌套使用的

- 参数string：描述测试包的信息

- 参数function：测试集的具体实现

it(string, function)

：测试用例（官方称之为spec）

expect

：断言表达式

断言是编程术语，表示为一些布尔表达式，程序员相信在程序中的某个特定点该表达式值为真，可以在任何时候启用和禁用断言验证，因此可以在测试时启用断言而在部署时禁用断言。同样，程序投入运行后，最终用户在遇到问题时可以重新启用断言。(百度百科)

describe("My first Jasmine test", function() {
it("a spec with an expectation", function() {
expect(1).toBe(1);
expect(1===1).toBe(true);
expect('a').not.toBe('b');
});

it("an other spec in current suite", function() {
expect(true).toBe(true);
});
});

describe("My first Jasmine test", function() {
it("nothing", function() {
});
});

expect的使用

toBe：基本类型判断

toEqual: toEqual有两种用法，对于基本的类型，toEqual相当于toBe

it("toEqual and not.toEqual for basic types", function(){
expect(1).toEqual(1);
expect('a').not.toEqual('b');
})

toEqual还可以用来判断对象：

it("toEqual and not.toEqual for objects", function(){
var o1 = {
name: "Jack",
age: 12
};

var o2 = {
name: "Jack",
age: 12
};

var o3 = {
name: "Tom",
age: 13
};

expect(o1).toEqual(o2);
expect(o1).not.toEqual(o3);
})

toMatch: 使用正则表达式判断

it("toMatch and not.toMatch", function(){
var str = "Michael Jackson";

expect(str).toMatch(/michael/i);
expect(str).not.toMatch(/tom/i);
})

toBeDefine: 判断是否是undefined

it("toBeDefined and not.toBeDefined", function(){
var student = {
name: "Jack",
age: 12
};

expect(student.name).toBeDefined();
expect(student.gender).not.toBeDefined();
})

toBeUndefined: 判断是否是undefined，与toBeDefine相反

it("toBeUndefined and not.toBeUndefined", function(){
var student = {
name: "Jack",
age: 12
};

expect(student.gender).toBeUndefined();
expect(student.name).not.toBeUndefined();
})

toBeNull：判断是否是null

toBeTruthy：判断是否能转换成bool型，判断的是否是True

toContain： 判断集合是否包含（可以是普通类型，和可以是对象）

it("toContain and not.toContain", function(){
var arrStr = ["Jack", "Tom", "Mary"];
var arrObj = [{name:"Jack",age:21}, {name:"Tom",age:22}];

expect(arrStr).toContain("Jack");
expect(arrStr).not.toContain("jack");

expect(arrObj).toContain({name:"Jack",age:21});
expect(arrObj).not.toContain({name:"jack",age:21});
});

toBeLessThan: 判断值类型的大小，结果若小则为True（也可以判断字符及字符串，以ascii码的大小为判断依据）

toBeGreaterThan: 判断值类型的大小，结果若大则为True，与toBeLessThan相反（也可以判断字符及字符串，以ascii码的大小为判断依据）

toBeCloseTo：判断数字是否相似（第二个参数为小数精度，默认为2位）

toThrow： 判断是否抛出异常

it("toThrow and not.toThrow", function(){
var foo = function() {
return 1 + 2;
};
var bar = function() {
return a + 1;
};

expect(foo).not.toThrow();
expect(bar).toThrow();
});

toThrowError: 判断是否抛出了指定的错误

it("toThrowError and not.toThrowError", function() {
var foo = function() {
throw new TypeError("foo bar baz");
};

expect(foo).toThrowError("foo bar baz");
expect(foo).toThrowError(/bar/);
expect(foo).toThrowError(TypeError);
expect(foo).toThrowError(TypeError, "foo bar baz");
});

Setup和Teardown

Setup方法：

beforeAll：每个suite（即describe）中所有spec（即it）运行之前运行

beforeEach：每个spec（即it）运行之前运行

Teardown方法：

afterAll：每个suite（即describe）中所有spec（即it）运行之后运行

afterEach：每个spec（即it）运行之后运行

xdescribe/xit的使用

xdescribe：该describe下的所有it将被忽略，Jasmine将直接忽略这些it，因此不会被运行

xit：运行到该it时，挂起它不执行

demo地址: https://github.com/WiFiUncle/blog/tree/master/jasmine%20Demo

参考资料

http://www.cnblogs.com/wushangjue/p/4541209.html

http://blog.csdn.net/u011348740/article/details/77839913?locationNum=8&fps=1

https://www.ibm.com/developerworks/cn/web/1404_changwz_jasmine/