测试函数JavaScript单元测试工具使用—QUnit

最新推荐文章于 2023-02-15 16:42:21 发布

javawebsoa

最新推荐文章于 2023-02-15 16:42:21 发布

阅读量919

点赞数

本文链接：https://blog.csdn.net/androidmylove/article/details/8884941

版权

发一下牢骚和主题无关：

本文绝大部分来自于http://www.oncoding.cn/2010/javascript-unit-testing-qunit/，由于最新版的QUNIT更改了API接口，本文稍作修改。

QUnit是jQuery队团发开的JavaScript单元测试工具，应用方便，界面雅观。

什么是单元测试？

单元测试又称为模块测试，是针对序程模块(软件设计的最小位单)来停止正确性检修的测试作工。单元测试要主是用来检修程式的部内逻辑，也称为体个测试、结构测试或逻辑驱动测试。平日由撰写程式码的程式设计师责负停止。

平日来讲，程式設計師每修改一次程式就會進行起码一次單元測試，在編寫程式的過程中前後很可能要進行多次單元測試，以證實程式達到軟件規格書(en:Specification)求要的作工目標，沒有臭蟲；雖然单元测试不是什么必须的，但也不坏，這牽涉到專案管理的政策決定。

—— 维基百科 (中文，英文)

为什么JavaScript要需单元测试

由于存在浏览器剖析境环、用户操纵习气等异差，前端序程的多许问题是法无捕捉或重现的，当初前端序程的测试多是黑盒测试，即靠点击点击点击来找寻序程bug。这类式方既费时力费，又法无保障测试的覆盖面。

同时，前端逻辑和交互越来越庞杂，和其他编程语言一样，一个函数，一个模块，在修改bug或加添新功能的中程过，很轻易就发生新的bug，或使老的bug活复。这类情况下，复反停止黑盒测试，其作工量和测试品质是可想而知的。

此外，浏览器兼容性测试是前端序程测试的重要一环，在多个浏览器之间测试前端序程，面下说的作工量就会成n倍的加增。

为什么我们的前端序程如此软弱？就是因为没用单元测试。。

假如应用了单元测试，上边的问题就变得很轻易了，当然前提是你要花间时去研讨和编写测试用例。

根据函数或模块的源代码，编写出包括各种情况的测试用例，每次决解bug或加添新功能，都随时新更这个用例然后停止测试，很轻易就找出新bug和“活复”的老bug。

测试兼容性，需只要在不同的浏览器中别分运行这个测试，问题就然了目一了。

或许盒白比黑盒要多费几倍的头脑，但想想我们那软弱的序程，想想那些随时冒出来的烦人的老bug，费点头脑，值了！

应用QUnit

注：面下的内容要主参考了 QUnit档文和 NetTuts+的这篇文章。

立建一个测试页面，引入 qunit.js 和 qunit.css 这两个需必的文件，这两个文件是存放在github上的，鉴于现在操蛋的互联网境环，最好下载到当地调用。

注：body中的元素id定名必须依照如下式形，否则法无常正示显。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css" type="text/css" media="screen" />
  <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>
</head>
<body>
  <h1 id="qunit-header">QUnit example</h1>
  <h2 id="qunit-banner"></h2>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
</body>
</html>

测试示例

面下是一个最单简的函数测试用例，释解请见序程注释。

//义定测试模块
module( "测试示例" );
//义定一个单简的函数，判断参数是不是数字
function simpleTest(para) {
  if(typeof para == "number") {
    return true;
  }
  else{
    return false;
  }
}
//开始单元测试
test('simpleTest()', function() {
  //举列各种可能的情况，注意应用 ! 保障表达式符合应当的逻辑
  ok(simpleTest(2), '2是一个数字');
  ok(!simpleTest("2"), '"2"不是一个数字');
});

每日一情理
父亲对于儿子来讲，是座耸立的高山，而儿子只是颗石子，源于山，却并不解了山。生活中诸多爱的密码，是需用细节来解读的，在亲情的沃土上，要想搞得最美的果实，惟有期待那存在于瞬间的心与心的共鸣，爱与爱的默契。

    // Let's test this function
    function isEven(val) {
        return val % 2 === 0;
    }
    test('isEven()', function() {
        ok(isEven(0), 'Zero is an even number');
        ok(isEven(2), 'So is two');
        ok(isEven(-4), 'So is negative four');
        ok(!isEven(1), 'One is not an even number');
        ok(!isEven(-7), 'Neither is negative seven');
    })

module( name, [lifecycle] ) 函数指定测试模块和周期。

ok( state, [message] ) 是QUnit中最经常使用的一个判断函数，只能判断true和false。

DEMO在这里，看一下测试结果：

结果都是绿的，明说两条测试句语都符合设定的则规。可以实验修改下则规

//...
ok(simpleTest("2"), '"2"是一个数字');
//...

就能够看到爆红了。。

更多测试判断

除了ok()外之，QUnit还有如下几个判断函数：

等相判断equal( actual, expected, [message] ) 相当于应用“==”来测试，所以equals不能用来比拟组数，对象

示例：

    //义定一个单简的函数，返回数字和2的乘积
    function simpleTest1(para) {
        return para * 2;
    }
    //开始单元测试
    test('simpleTest1()', function() {
        //举列各种可能的情况
        equal(simpleTest1(2), 4, '2 * 2 于等 4');
        equal(simpleTest1(2), 3, '2 * 2 于等 3');
    });

雷同判断(包括组数、对象等)应用 deepEqual() 之前是应用same，最新版改成deepEqual了

示例：

    // Let's test this function
    //义定一个单简的函数，返回一个组数
    function simpleTest2() {
        return [1, 2];
    }
    //开始单元测试
    test('simpleTest2()', function() {
        //举列各种可能的情况
        deepEqual(simpleTest2(), [1, 2], '函数返回组数[1, 2]');
        deepEqual(simpleTest2(), [1, 1], '函数返回组数[1, 1]');
    });

异步与Ajax API地址：http://api.qunitjs.com/category/async-control/

对于异步序程的测试，如setTimeout、setInterval、Ajax等情况，按照面下的法方，在异步调用执行之前，测试就已成完并出输了结果。这时，配合应用QUnit供给的两个函数：stop( [timeout] ) 和 start()，也可以省力搞定。

直接看例子：

//异步测试
module( "异步测试示例" );
//setTimeout
test('asynchronous test', function() {
  // 停暂测试
  stop();
 
  setTimeout(function() {
    ok(true, '成完运行');
    //待测试成完后，复恢
    start();
  }, 100)
})
//另一种式形
asyncTest('asynchronous test', function() {
  setTimeout(function() {
    ok(true);
    //待测试成完后，复恢
    start();
  }, 100)
})

Ajax也是类似的情理：

//Ajax测试
function ajax(successCallback) {
  $.ajax({
    url: 'server.php',
    success: successCallback
  });
}
 
test('asynchronous test', function() {
  // 停暂测试
  stop();
 
  ajax(function() {
    // 异步调用判断
  })
 
  setTimeout(function() {
    //异步测试成完后，复恢
    start();
  }, 2000);
})