javascript--QUnit【javascript單元測試框架】

開源中國：http://www.oschina.net/p/qunit

參考：http://www.zhangxinxu.com/wordpress/2013/04/qunit-javascript-unit-test-單元測試/

http://blog.csdn.net/cyq1984/article/details/6398596

一、斷言（Assert）

async()
Instruct QUnit to wait for an asynchronous operation.

指導QUnit等待異步操作。

deepEqual()
A deep recursive comparison, working on primitive types, arrays, objects, regular expressions, dates and functions.

用於基本類型，數組，對象，正則表達式，日期和功能的深遞歸比較。

equal()
A non-strict comparison, roughly equivalent to JUnit’s assertEquals.

非嚴格的比較，大致相當於JUnit的assertEquals。

expect()
Specify how many assertions are expected to run within a test.

指定有多少斷言，將會在運行測試中。

notDeepEqual()
An inverted deep recursive comparison, working on primitive types, arrays, objects, regular expressions, dates and functions.

用於基本類型，數組，對象，正則表達式，日期和功能的倒置深遞歸比較。

notEqual()
A non-strict comparison, checking for inequality.

非嚴格的比較，檢查是否不平等。

notOk()
A boolean check, inverse of ok() and CommonJS’s assert.ok(), and equivalent to JUnit’s assertFalse(). Passes if the first argument is falsy.

一個布爾檢查，ok()和CommonJS的的assert.ok（），並相當於JUnit的assertFalse（）。如果第一個參數是假的，則傳遞。

notPropEqual()
A strict comparison of an object’s own properties, checking for inequality.

嚴格的比較對象的自己的屬性，檢查是否不平等。

notStrictEqual()
A strict comparison, checking for inequality.

嚴格的比較，檢查是否不平等。

ok()
A boolean check, equivalent to CommonJS’s assert.ok() and JUnit’s assertTrue(). Passes if the first argument is truthy.

一個布爾檢查，相當於CommonJS的的assert.ok（）和JUnit的assertTrue（）。如果第一個參數是真的，則傳遞。

propEqual()
A strict type and value comparison of an object’s own properties.

比較一個對象的嚴格的類型和值。

push()
Report the result of a custom assertion

報告自定義斷言的結果

strictEqual()
A strict type and value comparison.

比較嚴格的類型和值。

throws()
Test if a callback throws an exception, and optionally compare the thrown error.

如果回調拋出一個異常，以及可選比較拋出錯誤，則測試。

二、異步控制（Async Control）

async()
Instruct QUnit to wait for an asynchronous operation.

QUnit.asyncTest()
DEPRECATED: Add an asynchronous test to run. The test must include a call to QUnit.start().

QUnit.start()
PARTIALLY DEPRECATED: Start running tests again after the testrunner was stopped. See QUnit.stop() and QUnit.config.autostart.

QUnit.stop()
DEPRECATED: Increase the number of QUnit.start() calls the testrunner should wait for before continuing.

QUnit.test()
Add a test to run.

三、回調函數（callbacks）

When integrating QUnit into other tools like CI servers, use these callbacks as an API to read test results.

QUnit.begin()
Register a callback to fire whenever the test suite begins.

QUnit.done()
Register a callback to fire whenever the test suite ends.

QUnit.log()
Register a callback to fire whenever an assertion completes.

QUnit.moduleDone()
Register a callback to fire whenever a module ends.

QUnit.moduleStart()
Register a callback to fire whenever a module begins.

QUnit.testDone()
Register a callback to fire whenever a test ends.

QUnit.testStart()
Register a callback to fire whenever a test begins.

四、配置（configuration）

These methods and properties are used to configure QUnit: to adjust the runtime behaviour directly or extend the QUnit API via custom assertions.

QUnit.assert
Namespace for QUnit assertions

QUnit.config
Configuration for QUnit

QUnit.dump.parse()
Advanced and extensible data dumping for JavaScript

QUnit.extend()
Copy the properties defined by the mixin object into the target object

QUnit.init()
DEPRECATED: Re-initialize the test runner.

QUnit.push()
DEPRECATED: Report the result of a custom assertion

QUnit.reset()
DEPRECATED: Reset the test fixture in the DOM.

五、Test

QUnit.asyncTest()
DEPRECATED: Add an asynchronous test to run. The test must include a call to QUnit.start().
QUnit.module()
Group related tests under a single label.
QUnit.skip()
Adds a test like object to be skipped
QUnit.test()
Add a test to run.

六、實例

在測試頁面添加兩個文件：

qunit.css

qunit.js

本測試以qunit-1.18.0.css、qunit-1.18.0.js版本

1、基本例子

01.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css"/>
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <!--引入你需要測試的js-->
  <script src="tests.js"></script>
</body>
</html>

tests.js

//base
QUnit.test( "hello test", function( assert ) {
  assert.ok( 1 == "1", "Passed!" );
});

結果

2、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--basicExample</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script>
    QUnit.test( "a basic test example", function( assert ) {
      var value = "hello";
      assert.equal( value, "hello", "We expect value to be hello" );
    });
  </script>
</body>
</html>

結果

3、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--ok()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script>
    QUnit.test( "ok test", function( assert ) {
      assert.ok( true, "true 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" );
    });
  </script>
</body>
</html>

結果

4、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--equal()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script>
    QUnit.test( "equal test", function( assert ) {
      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" );
    });
  </script>
</body>
</html>

結果

5、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--deepEqual()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script>
    QUnit.test( "deepEqual test", function( assert ) {
      var obj = { foo: "bar" };
     
      assert.deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
    });
  </script>
</body>
</html>

結果

6、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--expect()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script>
    QUnit.test( "a test", function( assert ) {
      assert.expect( 2 );
     
      function calc( x, operation ) {
        return operation( x );
      }
     
      var result = calc( 2, function( x ) {
        assert.ok( true, "calc() calls operation function" );
        return x * x;
      });
     
      assert.equal( result, 4, "2 square equals 4" );
    });
  </script>
</body>
</html>

結果

7、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--expect()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    QUnit.test( "a test", function( assert ) {
      assert.expect( 1 );
     
      var $body = $( "body" );
     
      $body.on( "click", function() {
        assert.ok( true, "body was clicked!" );
      });
     
      $body.trigger( "click" );
    });
  </script>
</body>
</html>

結果

8、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--async()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <input id="test-input"/>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    QUnit.test( "asynchronous test: async input focus", function( assert ) {
      var done = assert.async();
      var input = $( "#test-input" ).focus();
      setTimeout(function() {
        assert.equal( document.activeElement, input[0], "Input was focused" );
        done();
      });
    });
  </script>
</body>
</html>

結果

9、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--log()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    function KeyLogger( target ) {
      this.target = target;
      this.log = [];
     
      var that = this;
      this.target.off( "keydown" ).on( "keydown", function( event ) {
        that.log.push( event.keyCode );
      });
    }


    QUnit.test( "keylogger api behavior", function( assert ) {
      var doc = $( document ),
        keys = new KeyLogger( doc );
     
      // Trigger the key event
      doc.trigger( $.Event( "keydown", { keyCode: 9 } ) );
     
      // Verify expected behavior
      assert.deepEqual( keys.log, [ 9 ], "correct key was logged" );
    });
  </script>
</body>
</html>
  </script>
</body>
</html>

結果

10、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--equal()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    QUnit.test( "2 asserts", function( assert ) {
      var fixture = $( "#qunit-fixture" );
     
      fixture.append( "<div>hello!</div>" );
      assert.equal( $( "div", fixture ).length, 1, "div added successfully!" );
     
      fixture.append( "<span>hello!</span>" );
      assert.equal( $( "span", fixture ).length, 1, "span added successfully!" );
    });
  </script>
</body>
</html>
  </script>
</body>
</html>

結果

11、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--equal()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    QUnit.test( "Appends a div", function( assert ) {
      var fixture = $( "#qunit-fixture" );
     
      fixture.append( "<div>hello!</div>" );
      assert.equal( $( "div", fixture ).length, 1, "div added successfully!" );
    });
     
    QUnit.test( "Appends a span", function( assert ) {
      var fixture = $( "#qunit-fixture" );
     
      fixture.append("<span>hello!</span>" );
      assert.equal( $( "span", fixture ).length, 1, "span added successfully!" );
    });
  </script>
</body>
</html>
  </script>
</body>
</html>

結果

12、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--ok()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    QUnit.test( "global pollution", function( assert ) {
      window.pollute = true;
      assert.ok( pollute, "nasty pollution" );
    });
  </script>
</body>
</html>
  </script>
</body>
</html>

結果

13、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--module()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    QUnit.module( "group a" );
    QUnit.test( "a basic test example", function( assert ) {
      assert.ok( true, "this test is fine" );
    });
    QUnit.test( "a basic test example 2", function( assert ) {
      assert.ok( true, "this test is fine" );
    });
     
    QUnit.module( "group b" );
    QUnit.test( "a basic test example 3", function( assert ) {
      assert.ok( true, "this test is fine" );
    });
    QUnit.test( "a basic test example 4", function( assert ) {
      assert.ok( true, "this test is fine" );
    });
  </script>
</body>
</html>
  </script>
</body>
</html>

結果

14、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit--module()</title>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
  <script src="jquery-1.11.3.min.js"></script>
  <script>
    QUnit.module( "module", {
      beforeEach: function( assert ) {
        assert.ok( true, "one extra assert per test" );
      }, afterEach: function( assert ) {
        assert.ok( true, "and one extra assert after each test" );
      }
    });

    QUnit.test( "test with beforeEach and afterEach", function(assert) {
      assert.expect( 2 );
    });
  </script>
</body>
</html>
  </script>
</body>
</html>

結果