Qunit的学习心得_jquery qunit-优快云博客

本文链接：https://blog.youkuaiyun.com/wenyunick/article/details/145732718

Qunit简介

QUnit 是一个强大的、易用的JavaScript测试工具，它可以在jQuery项目中测试其代码和插件，同样可以测试普通的JavaScript 代码。

QUint 在回归测试中尤其有用，每当有bug被报告，就可以使用断点去进行跟踪变量。

下载与安装：

首先要下载qunit的相关js和css，目前版本v1.23.1，下载地址：打开官网http://qunitjs.com/，

右侧即download，选择要下载的文件（两个文件：一个css文件和一个js文件）

demo开始学习：

学习QUnit还是从例子开始最好，首先我们需要一个跑单元测试的页面，这里命名为testQ.html：

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>QUnit Example</title>

</head>

<body>

</body>

</html>

解释：这里引用官网下载的两个文件：http://.....

用的绝对路径，

还有一个写法，用的相对路径：

<html>
<head>
    <meta charset="UTF-8" />
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="../qunit/qunit.css" type="text/css" media="screen">
    <script type="text/javascript" src="../qunit/qunit.js"></script>
    <script type="text/javascript" src="tests.js"></script>

</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup</div>
</body>
</html>

解释：这里实际放置的文件位置：test文件夹和qunit文件夹在同一级别，test文件夹下放置：testQ.html文件和tests.js文件。

qunit文件夹下放置那两个官网下载的文件：css和js文件。

这里另外引入了一个tests.js文件，我们的测试用例就写在这个文件里面。
tests.js:

QUnit.test( "hello test", function( assert ) {
  assert.ok( "hello world" == "hello world", "Test hello wordl" );
});

QUnit.test( "hello test", function( assert ) {
  assert.ok( "hello world" == "hello world", "Test hello wordl" );
});

页面载入完毕，QUnit就会自动运行test()方法，第一个参数是被测试的单元的标题，第二个参数，就是实际的而是代码，这里的参数assert为QUnit的断言对象，其中提供了不少断言方法，这里使用了ok()方法，ok()方法接受两个参数，第一个是表明测试是否通过的bool值，第二个则是需要输出的信息。

我们在浏览器中运行testQ.html，就会看到测试结果：

更多断言

上面介绍了assert.ok()方法，QUnit还提供了一些别的断言方法，这里再介绍几个常用的。

equal(actual, expected [,message])
equal()断言用的是简单的==来比较实际值和期望值，相同则通过，否则失败。
修改一下tests.js：

QUnit.test( "hello test", function( assert ) {
  //assert.ok( "hello world" == "hello world", "Test hello wordl" );
  assert.equal( 0, 0, "Zero, Zero; equal succeeds" );
  assert.equal( "", 0, "Empty, Zero; equal succeeds" );
  assert.equal( "", "", "Empty, Empty; equal succeeds" );
  assert.equal( 0, false, "Zero, false; equal succeeds" );
 
  assert.equal( "three", 3, "Three, 3; equal fails" );
  assert.equal( null, false, "null, false; equal fails" );
});

deepEqual(actual, expected, [,message])
deepEqual()断言的用法和equal()差不多，它除了使用===操作符进行比较之外，还可以通过比较{key : value}是否相等，来比较两个对象是否相等。

QUnit.test( "deepEqual test", function( assert ) {
  var obj = { foo: "bar" };
 
  assert.deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
});

参考博客：

30分钟Qunit入门教程-优快云博客

QUnit 初见面--JavaScript单元测试框架 - 动叶 - 博客园

JavaScript单元测试之Qunit-优快云博客