javascript--QUnit【javascript单元测试框架】

QUnit官网

开源中国: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>

结果

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-05 04:40:31

javascript--QUnit【javascript单元测试框架】的相关文章

JavaScript单元测试框架-Jasmine

转载自金石开的blog:http://www.cnblogs.com/zhcncn/p/4330112.html Jasmine的开发团队来自PivotalLabs,他们一开始开发的JavaScript测试框架是JsUnit,来源于著名的JAVA测试框架JUnit.JsUnit是xUnit的JavaScript实现.但是JsUnit在2009年后就已经停止维护了,他们推出了一个新的BDD框架Jasmine.Jasmine不依赖于任何框架,所以适用于所有的Javascript代码. 所谓BDD(行

JavaScript单元测试框架JsUnit基本介绍和使用

JavaScript单元测试框架JsUnit基本介绍和使用 XUnit framework XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 每一个语言都有一个用于单元测试的XUnit框架,比如Java有JUnit, C++有CppUnit, PHP有PHPUnit, Oracle SQL有UTPL/SQL. JsUnit JsUnit的官网: http://jsunit.net/ JsUnit遵循XUnit的一些惯例: 单元测试在JsUnit

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

JS单元测试框架:QUnit

QUnit:jQuery的单元测试框架,但不仅限于jQuery(从这个工具不需要引用jquery.js可以看出) index.html <!-- 官网 http://qunitjs.com/ --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="st

javascript实现的运动框架详解

javascript实现的运动框架详解: 所谓的运动框架简单的说就是让元素的某一个属性值能够有渐进性的变化.运动框架的使用在实际功能中有大量的应用,最常见的比如客服系统,当拖动滚动条的时候,一般客服系统能够以弹性方式跟随,下面就简单介绍一下如何实现此效果: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author"

JavaScript宝座:七大框架论剑

JavaScript宝座:七大框架论剑 一周前,Throne of JS大会在多伦多召开,这应该是我参加过的最有料也最不一样的一次大会.大会官网如是说: 加载整个页面,然后再“渐进增强”以添加动态行为,这种构建Web应用的方式已经不够好了.要想让应用加载快,反应灵敏,而且又引领潮流,必须彻底检讨你的开发手段. 这次大会邀请了七大JavaScript框架/库的创建人,他们济济一堂,面对面交流各自的技术理念.所谓七大框架/库分别是:AngularJS.Backbone.Batman.CanJS.Em

单元测试框架

单元测试1框架是软件测试框架2的一种. 包括了xUnit,JUnit,QUnit,NUnit等.而其中的JUnit,QUnit,NUnit都是xUnit家族中的成员. xUnit xUnit是各种代码驱动测试框架的统称,可以测试软件的不同单元.xUnit的特点是:提供了一个自动化测试3的解决方案,无须多次编写重复的测试代码,也无须记住该测试的预期结果. 四要素: 测试Fixtures Fixture指被测试的目标.而测试Fixture是一组单元测试成功的预定条件或预期结果的设定. 测试集 测试集

Java单元测试框架 JUnit

Java单元测试框架 JUnit JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于KentBeck的sUnit的xUnit家族中为最成功的一个. JUnit有它自己的JUnit扩展生态圈.多数Java的开发环境都已经集成了JUnit作为单元测试的工具. 在线Javadoc:http://ww...更多JUnit信息 最近更新: JUnit 4.12 发布,Java 单元测试框架 发布于4个月前 C++模拟测试框架 Google Mock

Mocha 单元测试框架简介

前言: mocha是JavaScript的一种单元测试框架,既可以在浏览器环境下运行,也可以在Node.js环境下运行. 使用mocha,我们就只需要专注于编写单元测试本身,然后,让mocha去自动运行所有的测试,并给出测试结果. mocha的特点主要有: 既可以测试简单的JavaScript函数,又可以测试异步代码,因为异步是JavaScript的特性之一: 可以自动运行所有测试,也可以只运行特定的测试: 可以支持before.after.beforeEach和afterEach来编写初始化代