`

如何用QUnit来测试JavaScript代码

 
阅读更多

QUnit是一套由jQuery团队开发的，非常强大的用于对JavaScript进行单元测试的框架。本文将介绍什么是QUnit，以及为何要关心代码测试。

什么是QUnit

Qunit是一款强大的用于帮助调试代码的，JavaScript单元测试框架。QUnit由jQuery团队成员编写，是jQuery的官方测试套件，不仅如此，QUnit还可以测试任何常规JavaScript代码，甚至可以通过一些像Rhino或者V8这样的JavaScript引擎，测试服务端JavaScript代码。

如果不熟悉“单元测试”的概念，不要担心。并不难理解：

"在计算机编程中，单元测试（又称为模块测试）是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。"——引自维基百科。

简单来说，你为代码的每一个功能编写测试用例，如果所有的测试都通过了，就可以确保代码没有bug了（通常，还是由测试有多彻底而定）。

为什么要测试代码

如果你以前从未写过任何单元测试，你可能直接将你的代码应用到网站上，点击一会看看是否有什么问题出现，并且尝试去解决你所发现的问题，采用这种方法会有很多的问题。

首先，这是非常乏味的。点击其实并不是一项简单的工作，因为需要保证每一个东西都被点击到而且极有可能漏掉一两个。其次，为测试做的每一件事情都是不可重用的，这就意味着它很难回归。什么是回归？想像一下，你写了一些代码并测试他们，修复了所有你发现的缺陷，然后发布。这时，一个用户发过来一些关于新的bug的反馈，并且有一些新的需求。你又回到代码中，处理这些新的bug，并增加新的功能。接下来可能会发生的就是一些旧的缺陷又重现了，这就叫“回归”。这样，你就不得不重新点击一遍，而且有可能你还找不到这些旧的缺陷；即使你这么做，这还需要一段时间才能弄清楚你的问题是由回归引起的。使用单元测试，你写测试用例去发现缺陷，一旦代码被修改，您通过测试再筛选一次。一旦出现回归，一些测试用例一定会失败，你可以很容易地认出他们，知道哪部分代码包含了错误。既然你知道你刚才修改了什么，就可以很容易地解决问题。

单元测试的另外一个尤其是对于Web开发的优点：让跨浏览器兼容性测试变得更容易。仅仅在不同浏览器中运行你的测试用例，一旦某个浏览器出现问题，修复它并重新运行这些测试用例，确保不会在别的浏览器引起回归，一旦全部通过测试，就可以肯定的说，所有的目标浏览器都支持。

我喜欢提及一个John Resig的项目：TestSwarm。TestSwarm通过分发，将JavaScript单元测试带到了一个新的层次。这是一个包含很多测试用例的网站，任何人都可以去那运行一些测试用例，然后返回结果会返回到服务器。通过这种方式，代码会非常迅速的在不同的浏览器进行测试，甚至不同的平台运行。

怎么用QUnit编写测试用例

如何正确地用QUnit写单元测试呢？首先，您需要搭建一个测试环境：

 

[xhtml] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>QUnit Test Suite</title>  
  5.     <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" mce_href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">  
  6.     <mce:script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js" mce_src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></mce:script>  
  7.     <!-- Your project file goes here -->  
  8.     <mce:script type="text/javascript" src="myProject.js" mce_src="myProject.js"></mce:script>  
  9.     <!-- Your tests file goes here -->  
  10.     <mce:script type="text/javascript" src="myTests.js" mce_src="myTests.js"></mce:script>  
  11. </head>  
  12. <body>  
  13.     <h1 id="qunit-header">QUnit Test Suite</h1>  
  14.     <h2 id="qunit-banner"></h2>  
  15.     <div id="qunit-testrunner-toolbar"></div>  
  16.     <h2 id="qunit-userAgent"></h2>  
  17.     <ol id="qunit-tests"></ol>  
  18. </body>  
  19. </html>  

 

正如你所见，在这里使用了一个被托管的QUnit框架版本。

将要被测试的代码需要添加到myProject.js中，并且你的测试用例应该插入到myTest.js。要运行这些测试，只需在一个浏览器中打开这个html文件。现在需要写一些测试用例了。

单元测试的基石是断言。

“断言是一个命题，预测你的代码的返回结果。如果预测是假的，断言失败，你就知道出了问题。”

运行断言，需要把它们放入测试用例中：

 

[xhtml] view plaincopy
  1. // Let's test this function    
  2. function isEven(val) {  
  3.     return val % 2 === 0;  
  4. }  
  5. test('isEven()', function() {  
  6.     ok(isEven(0), 'Zero is an even number');  
  7.     ok(isEven(2), 'So is two');  
  8.     ok(isEven(-4), 'So is negative four');  
  9.     ok(!isEven(1), 'One is not an even number');  
  10.     ok(!isEven(-7), 'Neither is negative seven');  
  11. })  

 

这里，我们定义一个函数：isEven，用来检测一个数字是否为奇数，并且我们希望测试这个函数来确认它不会返回错误答案。
我们首先调用test()，它构建了一个测试用例；第一个参数是一个将被显示在结果中的字符串，第二个参数是包括我们断主的一个回调函数。
我们写了5个断言，所有的都是布尔型的。一个布尔型的断言，期望它的第一个参数为true。第二个参数依然是要显示在结果中的消息。
下面是你想要得到的，只要你运行测试用例：

a test for isEven()
由于所有的断言都已成功通过，我们可以高兴的认为isEven()工作正常。
让我们看看如果一个断言失败了会发生什么。
[xhtml] view plaincopy
  1. // Let's test this function  
  2. function isEven(val) {  
  3.     return val % 2 === 0;  
  4. }  
  5. test('isEven()', function() {   
  6.     ok(isEven(0), 'Zero is an even number');  
  7.     ok(isEven(2), 'So is two');  
  8.     ok(isEven(-4), 'So is negative four');  
  9.     ok(!isEven(1), 'One is not an even number');  
  10.     ok(!isEven(-7), 'Neither does negative seven');  
  11.     // Fails  
  12.     ok(isEven(3), 'Three is an even number');  
  13. })  
下面是结果：
a test contains failed assertion for isEven()
该断言失败因为我们故意把它写错，但是在你的项目中，如果测试未通过，并且所有的断言都是正确的，你将发现一个bug。
更多断言
ok()不仅是QUnit提供的唯一断言， 当在测试你的项目时，还会有一些非常有用的其他类型的断言:
比较断言 

比较断言，equals()，期望它的第一个参数（是实际值）等于它的第二个参数（期望值）。它很类似于ok()，但均会输入实现和期望值，使得高度更加简单，像ok()一样，它可带一个可选的第三个参数作为显示的消息。

所以可以代替：

 

[xhtml] view plaincopy
  1. test('assertions', function() {  
  2.     ok( 1 == 1, 'one equals one');  
  3. })  

 

a boolean assertion
你可以这样写：
[xhtml] view plaincopy
  1. test('assertions', function() {  
  2.     equals( 1, 1, 'one equals one');  
  3. })  
a comparison assertion

注意最后一个“1”，这是比较值

如果两个值不相等：

[xhtml] view plaincopy
  1. test('assertions', function() {  
  2.     equals( 2, 1, 'one equals one');  
  3. })  
a failed comparison assertion

提供更多些信息，让生活更简单些。

比较断言使用“==”来比较它的参数，所以它不能处理数组或对象的比较：

[xhtml] view plaincopy
  1. test('test', function() {  
  2.     equals( {}, {}, 'fails, these are different objects');  
  3.     equals( {a: 1}, {a: 1} , 'fails');  
  4.     equals( [], [], 'fails, there are different arrays');  
  5.     equals( [1], [1], 'fails');  
  6. })  
为了测试这种相等，QUnit提供了另外一种断言：恒等断言 。
恒等断言 
恒等断言，same()，期望相同的参数相等，但是它较深的采用递归比较断言，不仅作用于原始类型，而且包括数组和对象。断言，在前面的例子中，如果你把他们改成恒等断言将全部通过。
[xhtml] view plaincopy
  1. test('test', function() {  
  2.     same( {}, {}, 'passes, objects have the same content');  
  3.     same( {a: 1}, {a: 1} , 'passes');  
  4.     same( [], [], 'passes, arrays have the same content');  
  5.     same( [1], [1], 'passes');  
  6. })  
注意same()使用”===”去比较，如有必要的话，所以它在比较特殊值的时候就派上用场了。
[xhtml] view plaincopy
  1. test('test', function() {  
  2.     equals( 0, false, 'true');  
  3.     same( 0, false, 'false');  
  4.     equals( null, undefined, 'true');  
  5.     same( null, undefined, 'false');  
  6. })  
结构化你的断言 

把所有的断言放在一个单独的测试案例中是相当不好的想法，因为这很难去维护，并且不能返回一个纯净的结果。你需要做的就是结构化他们，把他们放在不同的测试案例，每个目标为一个单独功能。

甚至可以通过调用模块函数来把测试案例组织到不同的模块：

[xhtml] view plaincopy
  1. module('Module A');  
  2. test('a test', function() {});  
  3. test('an another test', function() {});  
  4. module('Module B');  
  5. test('a test', function() {});  
  6. test('an another test', function() {});  
structure assertions
异步测试 
在前面的示例中，所有的断言都是同步调用的，这意味着他们是一个接着一个运行的。在这个真实的世界，同样 存在着很多异步的函数，例如Ajax请求或通过setTimeout()或sestInterval()调用的方法。我们如何去测试这些种类的方法呢？QUnit提供了一个特殊的叫做和“异步测试”的测试案例，提供给异步的测试：
让我们首先尝试用常规的方法写：
[xhtml] view plaincopy
  1. test('asynchronous test', function() {    
  2.     setTimeout(function() {    
  3.         ok(true);    
  4.     }, 100)    
  5. })    
an incorrent example of asychronous test

看到了？这就好像我们没有写任何断言一样。这是因为断言是被异步执行的，到它被调用的时候，此次测试已经执行完成。

这是正确的版本：

[xhtml] view plaincopy
  1. test('asynchronous test', function() {  
  2.     // Pause the test first  
  3.     stop();  
  4.    
  5.     setTimeout(function() {  
  6.         ok(true);  
  7.    
  8.         // After the assertion has been called,  
  9.         // continue the test  
  10.         start();  
  11.     }, 100)  
  12. })  
a correct example of asychronous test

在这，我们使用了stop()去暂停此次测试案例， 并且在断言被调用以后，我们使用start()继续。

在调用完test()后立即调用stop()是很平常的；所以QUnit提供了一个捷径：asyncTest()。你可以像这样重写之前的示例：

[xhtml] view plaincopy
  1. asyncTest('asynchronous test', function() {    
  2.     // The test is automatically paused    
  3.     
  4.     setTimeout(function() {    
  5.         ok(true);    
  6.     
  7.         // After the assertion has been called,    
  8.         // continue the test    
  9.         start();    
  10.     }, 100)    
  11. })    
还有一点要注意：setTimeout()通常会调用它自己的回调函数，但如果它是一个自定义的函数（例如：一个Ajax调用）。你如何确认回调函数被调用了呢？并且如果回调函数没有被调用，start()将不会被执行，整个单元测试将被挂起：
unit testing hangs
所以这就是你需要做的：
[xhtml] view plaincopy
  1. // A custom function    
  2. function ajax(successCallback) {    
  3.     $.ajax({    
  4.         url: 'server.php',    
  5.         success: successCallback    
  6.     });    
  7. }    
  8.     
  9. test('asynchronous test', function() {    
  10.     // Pause the test, and fail it if start() isn't called after one second    
  11.     stop(1000);    
  12.     
  13.     ajax(function() {    
  14.         // ...asynchronous assertions    
  15.     
  16.         start();    
  17.     })    
  18. })    

你可以通过延时去stop()，它告知QUnit，“如果start()在延时后没有被调用，你应未通过测试”。你可以确认的是整个测试没有挂起而且如果哪里出了问题你可以注意到。

那么多个异步函数呢？你在哪里放置start()？可把它放在setTimeout()里：

[xhtml] view plaincopy
  1. // A custom function    
  2. function ajax(successCallback) {    
  3.     $.ajax({    
  4.         url: 'server.php',    
  5.         success: successCallback    
  6.     });    
  7. }    
  8.     
  9. test('asynchronous test', function() {    
  10.     // Pause the test    
  11.     stop();    
  12.     
  13.     ajax(function() {    
  14.         // ...asynchronous assertions    
  15.     })    
  16.     
  17.     ajax(function() {    
  18.         // ...asynchronous assertions    
  19.     })    
  20.     
  21.     setTimeout(function() {    
  22.         start();    
  23.     }, 2000);    
  24. })    
延时应该适当的长足够来允许二者的回调函数在测试继续执行前被调用。但是如果其中一个回调函数没有被调用怎么办？你怎样去知道？这就是expect()加入的原因：
[xhtml] view plaincopy
  1. // A custom function    
  2. function ajax(successCallback) {    
  3.     $.ajax({    
  4.         url: 'server.php',    
  5.         success: successCallback    
  6.     });    
  7. }    
  8.     
  9. test('asynchronous test', function() {    
  10.     // Pause the test    
  11.     stop();    
  12.     
  13.     // Tell QUnit that you expect three assertions to run    
  14.     expect(3);    
  15.     
  16.     ajax(function() {    
  17.         ok(true);    
  18.     })    
  19.     
  20.     ajax(function() {    
  21.         ok(true);    
  22.         ok(true);    
  23.     })    
  24.     
  25.     setTimeout(function() {    
  26.         start();    
  27.     }, 2000);    
  28. })    

你给expect()传一个数字告知QUnit你期望X个断言去执行，如果一个断言未被执行，这个数字将不会匹配，而且你瘵会注意到有些东西出错了。

这仍有一个expect()的捷径：你只需给test()或asyncTest()的第二个参数传递一个数字：

[xhtml] view plaincopy
  1. // A custom function    
  2. function ajax(successCallback) {    
  3.     $.ajax({    
  4.         url: 'server.php',    
  5.         success: successCallback    
  6.     });    
  7. }    
  8.     
  9. // Tell QUnit that you expect three assertion to run    
  10. test('asynchronous test', 3, function() {    
  11.     // Pause the test    
  12.     stop();    
  13.     
  14.     ajax(function() {    
  15.         ok(true);    
  16.     })    
  17.     
  18.     ajax(function() {    
  19.         ok(true);    
  20.         ok(true);    
  21.     })    
  22.     
  23.     setTimeout(function() {    
  24.         start();    
  25.     }, 2000);    
  26. })    

总结

这就是开始使用QUnit所需要了解的全部内容。单元测试是一个在发布代码前进行测试的非常好的方法。如果以前没有写过任何的单元测试，现在是时候开始了！多谢阅读！

 

原文出处：http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/
分享到：
| JavaScript开发工具大合集
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    如何用Qunit测试你的javascript代码文.pdf

    QUnit 是一个由 jQuery 团队开发的JavaScript单元测试框架，专为JavaScript代码的调试和测试设计。...通过编写和运行QUnit测试用例，开发者能够更加自信地进行代码修改和扩展，同时减少回归错误的可能性。

    QUnit单元测试Demo

    3. **代码覆盖率**：虽然QUnit本身不支持代码覆盖率，但可以与其他工具（如Istanbul）结合，获取JavaScript代码的测试覆盖率报告。 4. **测试结果的TAP输出**：通过配置，QUnit可以输出TAP格式的结果，方便与持续...

    qunit单元测试demo

    通过这个"qunit单元测试demo"，开发者不仅可以学习到如何编写QUnit测试，还能理解单元测试在软件开发过程中的重要性，如何有效地测试和调试JavaScript代码，提高代码质量。对于想要提升JavaScript测试技能的人来说，...

    QUnit前台JS测试框架——实例

    QUnit是一款广泛应用于JavaScript开发中的单元测试框架，它是由jQuery项目的开发者们创建并维护的，旨在为JavaScript代码提供详尽的测试覆盖率。QUnit以其简洁的API和良好的可读性，成为了前端开发者进行代码质量...

    QUnit是Nodejs的一个单元测试框架

    在QUnit中，你可以为你的JavaScript代码创建测试套件（suites）和测试用例（cases）。测试用例包含了多个断言（assertions），这些断言会检查函数的输出是否符合预期。例如，你可以设置断言来验证函数返回的值是否...

    JavaScriptTestCode:使用 QUnit 等的 JavaScript 测试代码的集合。

    在这个名为"JavaScriptTestCode"的项目中，重点在于使用QUnit这样的JavaScript测试框架进行代码测试。 QUnit是jQuery基金会维护的一个强大的JavaScript单元测试框架。它被设计为开发者友好，易于使用，同时支持在...

    qunit代码和文档

    文档可能涵盖了单元测试的重要性，解释了如何设置QUnit测试环境，以及如何编写和运行测试用例。它可能还包含了QUnit的基本API，如`assert.ok()`, `assert.equal()`, `test()`, `module()`等，这些都是进行有效测试的...

    qunit 1.5 js 单元测试

    虽然QUnit本身不提供代码覆盖率工具，但可以与其他工具（如Istanbul）结合使用，以获取JavaScript代码的覆盖率报告。 7. **与其他库的集成** QUnit 可以很好地与其他JavaScript库如jQuery一起工作，也可以测试...

    Javascript单元测试框架QUnitjs具体介绍_.docx

    QUnit 是一个强大且易于使用的 JavaScript 单元测试框架，它提供了丰富的断言方法来检查代码的正确性。通过编写和执行测试用例，开发者可以确保他们的代码按照预期工作，从而提升软件项目的质量和稳定性。为了充分...

    Qunit 1.20

    它为JavaScript代码的测试提供了全面而严谨的解决方案，确保代码质量并减少软件缺陷。1.20版本是QUnit的一个重要里程碑，虽然官网访问可能有时会遇到速度问题，但这个版本的稳定性和测试覆盖能力依然非常出色。 ###...

    javascript测试.docx

    使用QUnit，可以轻松地编写测试用例，验证JavaScript代码的正确性。 YUI Test YUI Test是一个功能强大的JavaScript单元测试框架，由Yahoo!开发。YUI Test提供了一个完善的测试环境，支持异步测试、Mock对象等功能...

    前端开源库-gulp-qunit-harness

    QUnit 支持异步测试，这对于处理事件驱动的JavaScript代码非常有用。 2. **Gulp 与 Gulp 插件** Gulp 是一个基于Node.js的任务管理工具，使用流（stream）模型处理文件，提高了构建速度。开发者可以定义一系列任务...

    Javascript单元测试框架QUnitjs详细介绍

    QUnit 是一个专门用于 JavaScript 代码的单元测试框架，由 jQuery 团队成员创建，同时也是 jQuery 的官方测试工具。虽然最初与 jQuery 相关，但 QUnit 可以应用于任何普通的 JavaScript 代码，甚至支持在服务器端 ...

    testing:初学者如何用qunit测试网页的总结

    QUnit 是一个 javascript 框架，您可以在构建软件时使用它来测试软件。 学习如何使用 QUnit 以便您可以在构建软件时对其进行测试，从长远来看，这将节省您的时间。 测试将确保您只编写最少量的代码来让您的软件完成...

    qunit：:crystal_ball:一个易于使用JavaScript单元测试框架

    jQuery项目使用它来测试其代码和插件，但能够测试任何通用JavaScript代码（甚至能够在服务器端测试JavaScript代码）。 QUnit对于回归测试特别有用：每当报告错误时，编写一个断言该特定错误存在的测试。 然后修复它...

    JavaScript测试工具

    JavaScript测试工具是开发高质量JavaScript代码的关键组成部分，它们帮助开发者确保代码的正确性和稳定性。JavaScript作为一门广泛用于前端和后端开发的语言，其测试工具的丰富多样性使得开发者可以选择适合项目需求...

Magicbox
Global site tag (gtag.js) - Google Analytics