一：前端测试的背景
、为什么做测试
1、测试分类
(1).TDD(Test-Driven Development) 测试驱动开发
(2).BDD(Behavior Drive Development) 行为驱动开发 它通过用自然语言书写非程序员可读的测试用例扩展了测试驱动开发方法 这让开发者得以把精力集中在代码应该怎么写，而不是技术细节上 — 伪代码
(3).DDD(Domain Drive Design) 领域驱动开发 各个层次之间的调用问题 DDD是告诉我们如何做好业务层！并以领域驱动设计思想来选择合适的框架。
(4).MDD(model Driven Design)模型驱动设计
单元测试：代码片段测试 组件测试（白盒测试）
端对端测试：整体功能，接口测试（黑盒测试） 比如angular 端对端是跑在服务器上得
2、测试好处
(1)、使前端测试代码与开发代码分离，易于维护；
(2)、可以与UI自动化结合，前端单元测试的自动化，让更多的前端测试脚本借助现有的自动化去跑；
(3)、与测试平台集成，方便的JS异常错误显示与跟踪；
二 单元测试的框架
1.Qunit
它是由jQuery团队开发的一款测试套件，最初依赖于jQuery库，在2009年时脱离jQuery的依赖，变成了一个真正的测试框架，适用于所有Javascript代码。Qunit采用断言（Assert）来进行测试，相比于Jasmine的matcher更加多的类型，Qunit更集中在测试的度上。 deepEqual 用于比较一些纵向数据，比如Object或者Function等。而最常用的 ok 则直接判断是否为true。异步方面Qunit也很有趣，通过 stop 来停止测试等待异步返回，然后使用 start 继续测试，这要比Jasmine的过程化的等待更自由一些，不过有时也许会更难写一些。Qunit还拥有3组AOP的方法( done 和 ‘begin’ )来对应于整个 测试，测试和模块。对于Function的跟踪测试，Qunit似乎完全没有考虑。不过可以使用另外一个测试框架为Qunit带来的插件 sinon-qunit。这样就可以在test中使用 spy 方法了。
QUnit.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});
equal()
2.Sinon
Sinon并不是一个典型的单元测试框架，更像一个库，最主要的是对Function的测试，包括 Spy 和 Stub 两个部分，Spy用于侦测Function，而Stub更像是一个Spy的插件或者助手，在Function调用前后做一些特殊的处理，比如修改配置或者回调。它正好极大的弥补了Qunit的不足，所以通常会使用Qunit+Sinon来进行单元测试。值得一提的是，Sinon的作者Christian Johansen就是 Test-Driven JavaScript Development 一书的作者，这本书针对Javascript很详细的描述了单元测试的每个环节。
3.Jasmine
有一类框架叫做xUnit，来源于著名的JAVA测试框架JUnit，xUnit则代表了一种模式，并且使用这样的命名。在Javascript中也有这样的一个老牌框架JsUnit，他的作者是Edward Hieatt来自Pivotal Labs，但在几年前JsUnit就已经停止维护了，他们带来了新的BDD框架Jasmine。
4.totoro
淘宝
简单易?用、稳定的前端单元测试?工具
5.phantomjs
是一个服务器端的 JavaScript API 的 WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG
(1)无需浏览器的 Web 测试
(2)页面访问自动化
(3)屏幕捕获
(4)网络监控
三 测试 工具
1JSTD（Javascript Test Driver）
是一个最早的C/S测试工具，来自Google，基于JAVA编写，跨平台，使用命令行控制，还有很好的编辑器支持，最常用于eclipse。不过它无法显示测试对象的设备及浏览器版本，只有浏览器名是不够的。另外JSTD已经慢慢不再活跃，它的早正如它的老。
2.Karma
它使用Nodejs构建，因此跨平台，还支持PhantomJS浏览器，还支持多种框架，包括以上介绍的Jasmine、Qunit和Mocha。一次可以在多个浏览器及设备中进行测试，并控制浏览器行为和测试报告。虽然它不支持Nodejs的测试，不过没什么影响，因为Nodejs并不依赖于浏览器。
3.TestSwarm
出自jQuery之父John Resig之手，看来jQuery的强大果然不是偶然的，在测试方面非常到位，各种工具齐全。它最特别的地方在于所有测试环境由服务器提供，包括各种版本的主流浏览器以及iOS5的iphone设备，不过目前加入已经受限。
4.Buster
其作者之一就是Christian Johansen。和Karma很像，也使用Nodejs编写跨平台并且支持PhantomJS，一次测试所有客户端。更重要的是支持Nodejs的测试，同样支持各种主流测试框架。不过目前还在Beta测试中，很多bug而且不能很好的兼容Windows系统。它的目标还包括整合Browser Stack。
四、karma+jamine测试
单元测试配置
karma init;
设置: (1)选择框架 jasmine/mocha/qunit/ requirejs
//(2):设置自定义配置文件 (3):第三方代码（端对端测试需要引入 ng-scenario.js)
(4):测试特有代码 (5):browser[]选择相应的测试浏览器
(6):预处理器 coffeejs/coverage/eember
(7):proxies{“”} 在端对端测试中 起作用
(8)配置coverage
reporters: [‘progress‘, ‘coverage‘],
coverageReporter: {
type: ‘html‘,
dir: ‘mytest/coverage/‘
}
karma start 就能开启测试
语法：
单元测试
describe(‘描述‘,function（）{
beforeEach(function(){
})
it(‘描述‘，function(){
expect(true).toBe(true);//基本表达式
//函数
toBe(),not.toBe()//是否相同 ===
toEqual(),//是否相同 == 基本数据类型中 toBe()和equal 没有区别
toMatch(),.not.toMatch();//匹配正则
toBeDefined();//是否被定义
toHaveBeenCalled();//是否被调用
spyOn()//监控某个函数
}),
afterEach(function(){
})
})
端对端测试
注意点：（1）切换框架frameworks: [‘ng-scenario’],
（2）浏览器安全问题chrome_without_security
语法：
browser().reload()
browser().navigateTo(url, fn)
browser().navigateTo(url)
pause()；
sleep(seconds)；
input(name).enter(value)
input(name).select(value)
repeater(selector, label).row(index)
element(selector, label).click()
五、指标
Function coverage - Has each function (or subroutine) in the program been called?
函数覆盖率：是不是所有的函数都被调用了
Statement coverage - Has each statement in the program been executed?
状态/语句覆盖率：是不是所有的状态都执行了
Branch coverage - Has each branch (also called DD-path) of each control structure (such as in if and case statements) been executed? For example, given an if statement, have both the true and false branches been executed? Another way of saying this is, has every edge in the program been executed?
分支覆盖率：像 if else case 三目运算 这种 是不是所有的分支都被执行了
ignored ：设置被忽略
测试工程师可以查看coverage 测试结果,帮助他们设计测试用例和输入或配置设置,将增加代码覆盖至关重要的功能。两种常见形式的代码覆盖率测试人员使用的statements(lines)覆盖和branch(或edge)的报道。lines覆盖率报告测试的执行足迹的行代码被执行完成测试。edge覆盖报告执行的分支或代码决策点来完成测试。他们都报告覆盖率指标,测量作为一个百分比。这取决于什么形式的意义(s)已使用代码覆盖,67比67的语句覆盖率分支覆盖更全面。