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/