文章目录

  1. 1. QUnit是什么?
  2. 2. 为什么需要单元测试?
  3. 3. 如何获取QUnit?
  4. 4. 小试牛刀
  5. 5. 常用方法讲解
    1. 5.1. Assert
      1. 5.1.1. ok()
      2. 5.1.2. equal()
      3. 5.1.3. deepEqual()
      4. 5.1.4. strictEqual()
      5. 5.1.5. expect()
    2. 5.2. 异步
      1. 5.2.1. async()
    3. 5.3. 自定义断言
    4. 5.4. 模块化
  6. 6. 参考文献

QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。Qunit是Jquery的单元测试框架,并且被广泛使用在各个项目中。

QUnit是什么?

QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。Qunit是Jquery的单元测试框架,并且被广泛使用在各个项目中。

为什么需要单元测试?

实际开发中,存在一些问题:

  • 如果这个方法后期内部逻辑有大改,回头测试的时候,自己岂不是要重新再造一遍数据。
  • 如果这个方法后期内部逻辑小改,实际测试的时候,精力成本等原因,往往就只会测试修改的这部分。很可能就会导致回归错误(A处改动触发B处的旧bug)。如果保留有完整的单元测试代码,因为想省事而出现的回归错误显然就无所遁形了。
    可见,就个人而言,单元测试的思想是有的,但是,单元测试的做法有问题。借助类似Qunit这样的工具是很好的选择。

如何获取QUnit?

主页:http://qunitjs.com/
下载js和css文件:qunit-1.x.js和qunit.1.x.css

小试牛刀

让我先输入一段代码,大概体验下QUnit

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QUnit Example</title>
    <link rel="stylesheet" href="qunit-1.18.0.css">
    <script src="qunit-1.18.0.js"></script>
    <script>
        QUnit.test( "hello world", function(assert) {
            assert.ok(true, "Passed!" );
        });
    </script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

打开浏览器,出现下面的样子

那么,我们在输入一个错误的情况

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QUnit Example</title>
    <link rel="stylesheet" href="qunit-1.18.0.css">
    <script src="qunit-1.18.0.js"></script>
    <script>
        QUnit.test( "hello world", function(assert) {
            assert.ok(false, "Passed!" );
        });
    </script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

打开浏览器,出现下面的样子

常用方法讲解

Assert

ok()

说明:布尔断言.当第一个参数可转换为true时通过。
案例:

QUnit.test("ok test", function (assert) {
    assert.ok(true, "true succeeds");
    assert.ok(1, "1 succeeds");
    assert.ok("non-empty", "non-empty string succeeds");

    assert.ok(false, "false fails");
    assert.ok(0, "0 fails");
    assert.ok(NaN, "NaN fails");
    assert.ok("", "empty string fails");
    assert.ok(null, "null fails");
    assert.ok(undefined, "undefined fails");
});

equal()

说明:相等断言。
案例:

QUnit.test( "equal test", function( assert ) {
    assert.equal( 0, 0);
    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( 1, "1", "String '1', number 1; equal succeeds" );
    assert.equal( "three", 3, "Three, 3; equal fails" );
    assert.equal( null, false, "null, false; equal fails" );
});

deepEqual()

说明:深度递归相等断言.适用于原始类型,数组和对象。
案例:

QUnit.test( "deepEqual test", function( assert ) {
    var obj = { foo: 1 };
    assert.deepEqual( obj, { foo: 1 }, "equal" );
    assert.deepEqual( obj, { foo: "1" }, "not equal" );
});

strictEqual()

说明:与equal类似,主要区别是“===”,严格相等断言.
案例:

QUnit.test( "equal test", function( assert ) {
    assert.strictEqual( 0, 0, "Zero, Zero; equal succeeds" );
    assert.strictEqual( "", "", "Empty, Empty; equal succeeds" );

    assert.strictEqual( 1, "1", "String '1', number 1; equal fails" );
    assert.strictEqual( "", 0, "Empty, Zero; equal fails" );
    assert.strictEqual( 0, false, "Zero, false; equal fails" );
    assert.strictEqual( null, false, "null, false; equal fails" );
});

expect()

说明:测试回调的时候,无论是不是异步,我们都不能确定回调会在某些时候被真正调用了。为了应付这种状况,我们可以使用expect(), 定义一个测试中我们期望的判断个数。这样就可以避免本应出现两个判别结果的,结果一个通过后就停止的情况.
案例:

QUnit.test( "asyn test", function( assert ) {
    assert.expect( 1 );
    var done = assert.async();
    setTimeout(function() {
        assert.equal( "1","1", "exec true" );
        done();
    }, 1000);
});

异步

async()

说明:异步处理,替代之前提供的QUnit.stop() 和 QUnit.start().
案例:

错误的案例

QUnit.test( "asyn test", function( assert ) {
    setTimeout(function() {
        assert.equal( "1","1", "exec true" );
    }, 1000);
});

正确的案例

QUnit.test( "asyn test", function( assert ) {
    var done = assert.async();
    setTimeout(function() {
        assert.equal( "1","1", "exec true" );
        done();
    }, 1000);
});

自定义断言

QUnit.assert.mod2 = function( value, expected, message ) {
    var actual = value % 2;
    this.push( actual === expected, actual, expected, message );
};
QUnit.test( "mod2", function( assert ) {
    assert.expect( 2 );
    assert.mod2( 2, 0, "2 % 2 == 0" );
    assert.mod2( 3, 1, "3 % 2 == 1" );
});

模块化

QUnit.module( " module a" );
QUnit.test( "a basic test example", function( assert ) {
    assert.ok( true, "lianggzone ok" );
});
QUnit.module( " module b" );
QUnit.test( "a basic test example 2", function( assert ) {
    assert.ok( true, "lianggzone ok" );
});
QUnit.module( "module A", {
    beforeEach: function() {
        // prepare something for all following tests
    },
    afterEach: function() {
        // clean up after each test
    }
});

参考文献

(书)「编写可维护的JavaScript」(Nicholas C. Zakas)

(完)

微信公众号

文章目录

  1. 1. QUnit是什么?
  2. 2. 为什么需要单元测试?
  3. 3. 如何获取QUnit?
  4. 4. 小试牛刀
  5. 5. 常用方法讲解
    1. 5.1. Assert
      1. 5.1.1. ok()
      2. 5.1.2. equal()
      3. 5.1.3. deepEqual()
      4. 5.1.4. strictEqual()
      5. 5.1.5. expect()
    2. 5.2. 异步
      1. 5.2.1. async()
    3. 5.3. 自定义断言
    4. 5.4. 模块化
  6. 6. 参考文献