为什么需要单元测试

  • 正确性:测试可以验证代码的正确性,在上线前做到心里有底
  • 自动化:当然手工也可以测试,通过console可以打印出内部信息,但是这是一次性的事情,下次测试还需要从头来过,效率不能得到保证。通过编写测试用例,可以做到一次编写,多次运行
  • 解释性:测试用例用于测试接口、模块的重要性,那么在测试用例中就会涉及如何使用这些API。其他开发人员如果要使用这些API,那阅读测试用例是一种很好地途径,有时比文档说明更清晰
  • 驱动开发,指导设计:代码被测试的前提是代码本身的可测试性,那么要保证代码的可测试性,就需要在开发中注意API的设计,TDD将测试前移就是起到这么一个作用
  • 保证重构:互联网行业产品迭代速度很快,迭代后必然存在代码重构的过程,那怎么才能保证重构后代码的质量呢?有测试用例做后盾,就可以大胆的进行重构

测试工具分类

  • Qunit、jasmine、mocha、jest、intern 
    各自有各自的优缺点,相对比较流行的有jasmine、mocha和Qunit(待验证)
  • Qunit诞生于Jquery团队,但是并不依赖jquery

Qunit内置断言

  • ok()

    • 只有一个请求的参数,如果返回值TRUE,这个断言通过,否则就失败。另外它接受1个字符串作为测试测试结果的显示。
  • equal()

    • 常用于简单的使用(==)运算符比较期望参数和真实值,当他们相等的时候,断言通过,否则断言失败。这2个值都会在测试结果中显示,额外的也会显示测试消息。
    • 严格比较(===),使用 strictEqual() 代替
  • deepEqual()

    • 比 equal() 并且有更多选项。代替使用简单的比较运算符(==),使用更加准确的比较运算符(===),也能操作NaN,dates,正则表达式,数组,方法等类型,而 equal() 只能测试基本对象类型。

同步回调测试

  • 调用test() 和 expect() 开始测试,使用这个期望断言数量作为参数 

    实际例子

  •  QUnit.test("a test", function(assert) {
    expect(1);
    var $body = $("body");
    $body.on("click", function() {
    assert.ok(true, "body was clicked!");
    });
    $body.trigger("click");
    });

异步回调测试

  • 当测试代码开始一个timeout 和 interval 或者一个ajax 请求,通过expect、asyncTest 和 start配合使用实现
  •  QUnit.asyncTest("asynchronous test: video ready to play", function(assert) {
    expect(1);
    var $video = $("video");
    $video.on("canplaythrough", function() {
    assert.ok(true, "video has loaded and is ready to play");
    QUnit.start();
    });
    }); 

测试用户行为

  • 栗子

  •  function KeyLogger(target) {
    if (!(this instanceof KeyLogger)) {
    return new KeyLogger(target);
    }
    this.target = target;
    this.log = [];
    var self = this;
    this.target.off("keydown").on("keydown", function(event) {
    self.log.push(event.keyCode);
    });
    }
    QUnit.test("keylogger api behavior", function(assert) {
    var event,
    $doc = $(document),
    keys = KeyLogger($doc);
    // trigger event
    event = $.Event("keydown");
    event.keyCode = 9;
    $doc.trigger(event);
    // verify expected behavior
    assert.equal(keys.log.length, 1, "a key was logged");
    assert.equal(keys.log[0], 9, "correct key was logged");
    });

自定义断言

  • 定义一个可以重复使用的方法。条用Qunit.push 在方法内部然后告诉QUnit断言已经发生。

  •  1 QUnit.assert.contains = function(needle, haystack, message) {
    2 var actual = (function() {
    3 var result = haystack.some(function(val) {
    4 return val.indexOf(needle) > -1;
    5 });
    6 return result ? needle : '';
    7 }());
    8 this.push(actual, actual, needle, message);
    9 };
    10 QUnit.test("retrieving object keys", function(assert) {
    11 var arrayKeys = ["apple", "big"];
    12 assert.contains("apple", arrayKeys, "Array keys");
    13 assert.contains("bigbang", arrayKeys, "Array keys");
    14 });

木啦

单元测试——Qunit的更多相关文章

  1. 单元测试 Qunit

    http://api.qunitjs.com/category/assert/    测试方法   选中 "Check for Globals" 会暴露全局对象,看你的代码会不会无 ...

  2. Qunit 和 jsCoverage使用方法

    Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...

  3. Web前端工程师成长之路——知识汇总

    一.何为Web前端工程师?          前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...

  4. Web自动化测试工具调研

    背景 Web自动化测试越来越被重视, 因为现在Web已经是工程化的状态. 如何通过工具测试, 保证Web开发的质量,提升开发效率,是Web工具的诞生的来由. Web测试分为以下几个方面: 1. 界面测 ...

  5. Web前端工程师成长之路

    一.何为Web前端工程师?        前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...

  6. 如何成为一名优秀的前端工程师 (share)

    发现一篇不错的博文,和大家分享一下,为有志成为一名优秀前端工程师的童鞋们提供一个参考. :)~ 本文来源:http://www.biaodianfu.com/what-makes-a-good-fro ...

  7. Web前端知识技能大汇总

    项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以 ...

  8. 前端技能汇总 Frontend Knowledge Structure

    Frontend Knowledge Structure 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有 ...

  9. Bootstrap 源码解析(转)

    1.Bootstrap的作用域 2.Bootstrap的类定义 3.Bootstrap的插件定义 4.Bootstrap的事件代理 5.Bootstrap的对象数据缓存 6.Bootstrap的防冲突 ...

随机推荐

  1. Android调试错误-No resource identifier found for attribute 'showAsAction'

    转载自:http://www.bubuko.com/infodetail-498830.html 1.问题描述: 24\YoumiAndroidSdk\demo\offers\res\menu\mai ...

  2. redux学习日志:关于react-redux

    首先先强调一句:一定要多读官方文档,而且要精读,否则你会忽略掉很多东西! 一,Provider 刚开始看的时候,大致浏览了一下,知道了这个组件是能够接收store作为它的属性,然后它里面的子组件就可以 ...

  3. window安装swagger editor

    1.下载 nodejs,并安装 2. 下载swagger editor并安装 2.1 git clone https://github.com/swagger-api/swagger-editor.g ...

  4. SerialChart串口示波器的成功调试

    2018-01-1601:29:06 深夜更新一波串口示波器! http://t.cn/RQMA3uq 心得体会 总之将数据输出设置为","分割的形式即可 重点注意事项!!!! m ...

  5. _3_form_标签

    什么是input标签? 处理输入信息 input有哪些类型? 选择: <input type="checkbox"> 多选框,选择爱好等 <input type= ...

  6. CentOS 7 修改SSH端口号 和 ssh无法使用密码登录 和 查看pid 端口占用

    如下示例把SSH默认端口22改为122. 1 修改/etc/ssh/sshd_config文件 #Port #找到改行,如果还想继续使用该端口,可以把#去掉,如果使用新端口,可以默认不管 Port # ...

  7. Python 字符串大小写操作

    #coding=utf-8 #python中字符串的操作 # 字符串的大小写 s='hello_wOrld_oF_you' upper_str = s.upper() print('全部大写: ',u ...

  8. linkin大话设计模式--门面模式

    linkin大话设计模式--门面模式 随着系统的不断改进和开发,他们会变得越来越复杂,系统会生成大量的类,这使得程序的流程更加难以理解.门面模式可以为这些类提供一个简易的接口,从而简化访问这些类的复杂 ...

  9. VisionPro随笔-Visionpro空间字符的含义

    在visionpro中名字空间是一个非常重要的概念.简单的说就是在图像中的一个特殊坐标系. 下面说下名字空间中一些固定的字符的特殊含义: 1)“.”=这个表示使用输入图像的当前名字空间.即cogima ...

  10. MySQL刷新事务日志级别设置

    标签(linux): mysql 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 # if set to 1 , InnoDB will flush (fsync ...