单元测试：前端代码测试 1

单元测试：前端代码测试

 

  poptest是国内唯一一家培养测试开发工程师的培训机构，以学员能胜任自动化测试，性能测试，测试工具开发等工作为目标。如果对课程感兴趣，请大家咨询qq：908821478，咨询电话010-84505200。

一：前端测试的背景 、为什么做测试

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)网络监控