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/