前端单元测试环境搭建 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     });