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/

相关文章
相关标签/搜索