为什么需要单元测试

  • 正确性:测试可以验证代码的正确性,在上线前做到心里有底
  • 自动化:当然手工也可以测试,通过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. 阿里云Maven配置,Maven仓库配置,Maven镜像配置

    阿里云Maven配置,Maven仓库配置,Maven镜像配置 ======================== 蕃薯耀 2018年1月29日 http://www.cnblogs.com/fanshu ...

  2. Hadoop问题:chmod 0700 of directory /var/lib/apt/lists/

    问题描述: apt-get update W: chmod of directory /: Operation not permitted) E: Could not open : Permissio ...

  3. Java常用的框架

    一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...

  4. mysql-高性能索引策略

    原文转自:http://www.cnblogs.com/happyflyingpig/p/7655762.html 独立索引: 独立索引是指索引列不能是表达式的一部分,也不能是函数的参数 例1: SE ...

  5. Windows下为PHP安装redis扩展

    1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本. 2.下载 php_redis-2.2.7-5.5-ts-vc11-x86.zip 和 php_igbinary-2.0.5- ...

  6. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  7. PHP面试题超强总结(PHP中文网)

    PHP面试基础题目 1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符, ...

  8. mysql与nagios的结合使用

    一. 对mysql建库建表,并测试数据 基本信息:库名:nh_nagios表名:nagios_alerts [root@nhserver2 ~]# mysql -u root -pEnter pass ...

  9. MySQL相关文档索引

    MySQL的新功能5.7 https://dev.mysql.com/doc/refman/5.7/en/mysql-nutshell.html MySQL5.7安装 http://note.youd ...

  10. python简单分布式demo

    A服务器是master,B服务器为worker, A服务器上执行taskManger.py # coding:utf-8 import random,time,Queue from multiproc ...