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