前端單元測試環境搭建 Karma Jasmine

Karma

官網
On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That's why we created Karma - a test runner that fits all our needs.
Karma是一個測試工具。
The main goal for Karma is to bring a productive testing environment to developers.
Karma的主要目標是給開發者帶來一個很是有效，有效率的測試環境。

Commandline Interface(命令行接口)

你能夠在項目目錄下運行 ./node_modules/karma/bin/karma start  命令，這個很繁瑣。也能夠全局安裝命令  npm install -g karma-cli

配置karma：

運行   karma init karma.conf.js 命令，名字本身命名

啓動   karma start karma.conf.js  

karma配置項：

frameworks:

Type: Array

Default: []

Description: List of test frameworks you want to use(須要的測試框架). Typically, you will set this to ['jasmine'], ['mocha'] or ['qunit']...

Please note just about all frameworks in Karma require an additional plugin/framework library to be installed (via NPM)(須要npm安裝).

plugins:

Type: Array

List of plugins to load. A plugin can be a string (in which case it will be required by Karma) or an inlined plugin - Object. By default, Karma loads all sibling NPM modules which have a name starting with karma-*.
Note:
Just about all plugins in Karma require an additional library to be installed (via NPM).
類型是數組，karma使用的插件，默認會加載以karma-開頭的npm包。
karma中全部的插件都須要npm安裝

preprocessors：

Type: Object

Default: {'**/*.coffee': 'coffee'}

Description: A map of preprocessors to use.

Preprocessors can be loaded through plugins.

Note: Just about all preprocessors in Karma (other than CoffeeScript and some other defaults) require an additional library to be installed (via NPM).

karma中的preprocessors都須要npm安裝，除了CoffeeScript和一些默認
Be aware that preprocessors may be transforming the files and file types that are available at run time. For instance, if you are using the "coverage" preprocessor on your source files, if you then attempt to interactively debug your tests, you'll discover that your expected source code is completely changed from what you expected. Because of that, you'll want to engineer this so that your automated builds use the coverage entry in the "reporters" list, but your interactive debugging does not.

browsers:

Type: Array

Capturing browsers on your own can be a tedious and time-consuming task. However, Karma can automate this for you. Simply add the browsers you would like to capture into the configuration file.
Then, Karma will take care of auto-capturing these browsers, as well as killing them after the job is over.
Note: Most of the browser launchers(須要安裝瀏覽器啓動器) need to be loaded as plugins.
默認是空數組，用npm下載後，加入空數組

Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Jasmine是一個行爲驅動開發測試框架，不依賴任何其它JavaScipt框架，不須要DOM。

經常使用名詞或API介紹：(version2.7)

describe

A test suite begins with a call to the global Jasmine function describe with two parameters: a string and a function. The string is a name or title for a spec suite - usually what is being tested. The function is a block of code that implements the suite.

經過調用Jasmine全局函數，定義了測試套裝(suites)。每一個套裝有一個或是多個測試規格組成

specs  it    expectaion

Specs are defined by calling the global Jasmine function it, which, like describe takes a string and a function. The string is the title of the spec and the function is the spec, or test. A spec contains one or more expectations that test the state of the code. An expectation in Jasmine is an assertion that is either true or false. A spec with all true expectations is a passing spec. A spec with one or more false expectations is a failing spec.

經過調用Jasmine全局函數it，定義了spec。it有兩個參數，第一個是字符串，第二個是函數，即spect或是test(規格或是測試，下文統一翻譯爲規格測試)。

一個規格測試包含一個或多個期待(expectation)，Jasmine中的期待是斷言(assertion)。若是全部期待都爲true，則稱規格測試爲成功規格測試，不然是失敗規格測試。

Macher

Expectations are built with the function expect which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.

經過expect函數，創建期待(expectation)，參數是真正的值。期待能夠鏈式調用一個匹配器函數，匹配器函數接受一個被指望的值做爲參數。

expect().tobe()
expect().not.tobe()
expect().toEqual()
expect().not.toEqual()
expect().toMatch()
expect().not.toMatch()
> defined undefined null
expect().toDefined()
expect().not.toDefined()
expect().toBeUndefined()
expect().not.toBeUndefined()
expect().toBeNull()
expect().not.toBeNull()
> 正確，不正確 和 錯誤，不錯誤
expect().toBeTruthy()
expect().not.toBeTruthy()
expect().toBeFalsy()
expect().not.toBeFalsy()
> 小於，不小於 和 大於，不大於
expect().toBeLessThan()
expect().not.toBeLessThan()
expect().toBeGreaterThan()
expect().not.toBeGreaterThan()
> 異常拋出
expect().toThrow()
expect().not.toThrow()

  1   describe('matcher', function() {
  2     // jasmine 內置了許多匹配器
  3     // tobe 至關於 ===
  4     it("and has a positive case", function() {
  5         expect(true).toBe(true);
  6     });
  7     it("and can have a negative case", function() {
  8       expect(false).not.toBe(true);
  9     });
 10     //  「相等」
 11     it("should work for objects", function() {
 12       var foo = {
 13         a: 12,
 14         b: 34
 15       };
 16       var bar = {
 17         a: 12,
 18         b: 34
 19       };
 20       expect(foo).toEqual(bar);
 21       expect(foo).not.toEqual({a:1});
 22     });
 23     // 匹配正則表達式
 24     it("The 'toMatch' matcher is for regular expressions", function() {
 25       var message = "foo bar baz";
 26 
 27       expect(message).toMatch(/bar/);
 28       expect(message).toMatch("bar");
 29       expect(message).not.toMatch(/quux/);
 30     });
 31     // undefined
 32     it("The `toBeUndefined` matcher compares against `undefined`", function() {
 33       var a = {
 34         foo: "foo"
 35       };
 36 
 37       expect(a.foo).not.toBeUndefined();
 38       expect(a.bar).toBeUndefined();
 39     });
 40     // defined
 41     it("The 'toBeDefined' matcher compares against `undefined`", function() {
 42       var a = {
 43         foo: "foo"
 44       };
 45       expect(a.foo).toBeDefined();
 46       expect(a.bar).not.toBeDefined();
 47     });
 48     // null
 49     it("The 'toBeNull' matcher compares against null", function() {
 50        var a = null;
 51        var foo = "foo";
 52        expect(null).toBeNull();
 53        expect(a).toBeNull();
 54        expect(foo).not.toBeNull();
 55      });
 56     // true 
 57     it("The 'toBeTruthy' matcher is for boolean casting testing", function() {
 58       var a, foo = "foo";
 59 
 60       expect(foo).toBeTruthy();
 61       expect(a).not.toBeTruthy();
 62     });
 63     // false
 64     it("The 'toBeFalsy' matcher is for boolean casting testing", function() {
 65       var a, foo = "foo";
 66 
 67       expect(a).toBeFalsy();
 68       expect(foo).not.toBeFalsy();
 69     });
 70     // contains 包含
 71     it("works for finding an item in an Array", function() {
 72       var a = ["foo", "bar", "baz"];
 73 
 74       expect(a).toContain("bar");
 75       expect(a).not.toContain("quux");
 76     });
 77     // 小於， 不小於
 78     it("The 'toBeLessThan' matcher is for mathematical comparisons", function() {
 79         var pi = 3.1415926,
 80             e = 2.78;
 81 
 82         expect(e).toBeLessThan(pi);
 83         expect(pi).not.toBeLessThan(e);
 84     });
 85     // 大於，不大於
 86     it("The 'toBeGreaterThan' matcher is for mathematical comparisons", function() {
 87         var pi = 3.1415926,
 88             e = 2.78;
 89         expect(pi).toBeGreaterThan(e);
 90         expect(e).not.toBeGreaterThan(pi);
 91     });
 92     // 異常拋出
 93     it("The 'toThrow' matcher is for testing if a function throws an exception", function() {
 94       var foo = function() {
 95         return 1 + 2;
 96       };
 97       var bar = function() {
 98         return a + 1;
 99       };
100       var baz = function() {
101         throw 'what';
102       };
103       expect(foo).not.toThrow();
104       expect(bar).toThrow();
105       expect(baz).toThrow('what');
106     });
107     // 精確度匹配
108     it("The 'toBeCloseTo' matcher is for precision math comparison", function() {
109       var pi = 3.1415926,
110         e = 2.78;
111 
112       expect(pi).not.toBeCloseTo(e, 2);
113       expect(pi).toBeCloseTo(e, 0);
114     });