zoukankan      html  css  js  c++  java
  • Javascript 使用Qunit单元测试

    QUnit环境配置

    首先下载QUnit的开发包,解压后我们只需要qunit目录下的qunit.css和qunit.js文件即可。然后创建一个HTML文件将这两个文件引用进来即可,HTML代码如下:

      <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    <link href="qunit-1.12.0.css" rel="stylesheet" />
    <script src="../js/json2.js"></script>
    <script src="../js/jquery-2.0.2.min.js"></script>
    <script src="qunit-1.12.0.js"></script>
    
    </head>
    <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    </body>
    </html>
    

      

    建议另外建两个和qunit同级的目录,src和test,分别用来放源代码和测试代码。然后把这些所有的代码都引入到上面的HTML文件中去。所有这些准备好后就可以享受QUnit单元测试的乐趣了。

    QUnit使用方法

    QUnit的用法比较简单,API不是很多,所有的API也就16个左右。所有的API可以分为三类:Setup,Assertions,Asynchronous Testing,下面就分别对这些API做些介绍,约定:凡是用[]包起来的参数表示可选参数。

    Setup:

    • test( name, [expected], test ),代表QUnit中的一个测试,就是没添加一个测试就调用一次test(),name参数是要测试的名称,比如”加法函数”或”add”等,expected参数是可选参数,用来表示该测试函数的断言的数量,是个正整数,test参数是一个函数对象,所有的测试代码都应该包括在该函数里,通常这是一个匿名函数。例如:test(“add function”, 1, function() {equal(add(1, 2), 3);});
    • asyncTest( name, [expected], test ),代表QUnit中的一个异步测试,这个会在异步测试中,参数同上一个test( name, expected, test )
    • expect( amount ),用在测试函数中,用于声明测试断言的数量,这个函数和test( name, expected, test )的expected参数的作用是一样的,两个用一个即可,当然都不用也没有关系。主要作用就是检查你声明的个数和你写的断言的实际个数是否一致。
    • module( name, [lifecycle] ),这个函数主要用于测试函数的分组,你可以理解一个module函数是一个模块的意思,比如module(“validate”)表示后面的测试用例都是alidate相关的代码,或者module(“common.js”),表明后面的测试用例都是common.js里面的代码,如何划分看个人理解啦,一个测试文件是可以写多个module的。name参数是分组或者模块的名称,lifecycle是可选参数,它是一个对象类型,可以设置setup和teardown回调函数,例如module(“common.js”, {setup:function(){},teardown: function() {} }),setup回调函数将会在module开始之前执行,比如可以为该module下面的测试代码做一些准备工作,teardown回调函数将会在该module的所有测试代码执行后执行,比如做一些清理还原工作等。
    • QUnit.init( ),用于初始化QUnit测试框架,通常这个函数是不需要我们手工调用的。
    • QUnit.reset( ),重设函数,通常是在每个test函数执行后由QUnit自己调用来重设整个QUnit测试环境,当然必要时我们自己也可以调用它来复原,不过目前我还没有调用过它。

    Assertions:

    所有断言函数的message都是可选参数,可以是一段话来描述整个断言,这样在测试结果页面可以很清楚看出这个断言是干什么的,比如equal(add(1, 2), 3, “1加2应该等于3″)

    • ok( state, [message] ),bool断言,参数state的值为true时表示通过,否则失败。
    • equal( actual, expected, [message] ),比较参数actual和expected是否相等,转化为JavaScript代码为if (actual == expected),是不比较类型的。
    • notEqual( actual, expected, [message] ),比较两个参数不相等,转化为JavaScript代码为if (actual != expected),是不比较类型的,不相等则通过,否则失败。
    • deepEqual( actual, expected, [message] ),主要用于数组和对象等类型的值是否相等,会递归遍历它们所包含的值是否相等。
    • notDeepEqual( actual, expected, [message] ),主要用于数组和对象等类型的值是否不相等,会递归遍历它们所包含的值是否不相等。
    • strictEqual( actual, expected, [message] ),比较参数actual和expected的值和类型是否相等,转化为JavaScript代码为if (actual === expected),是需要比较1类型的。
    • notStrictEqual( actual, expected, [message] ),比较参数actual和expected的值和类型是否不相等,转化为JavaScript代码为if (actual !== expected),是需要比较类型的。
    • raises( block, expected, [message] ),测试block函数是否抛出一个异常,抛出则通过,不抛则失败。block参数是我们要测试的函数,expected参数是一个函数,是一个可选参数,用来验证第一个函数抛出的异常是否是我们想要的。

    Asynchronous Testing:

    • stop( [increment] ),停止测试的运行,因为在异步环境中,不停止的话就运行结束了,异步的回调都不会被处理,所以在异步测试时一般先把QUnit的test runner停下来。increment参数是增加停止的时间。
    • start( [decrement] ),当异步调用成功后就应该把停止的test runner启动起来让它接着往前跑了,decrement参数用来减少停止的时间。

    异步测试的代码需要写在asyncTest( name, [expected], test )中,一个Ajax异步测试的例子:

    asyncTest("loginFromMobile interface", function () {
            //ajax test
            var requestUrl = "http://test.com";
            var paramCollection = {
                staffId: "99994",
                password: "123"
            };
    
            $.ajax({
                url: requestUrl,
                type: "post",
                data: paramCollection,
    
                success: function (response) {
    
                    ok(!result.error);
    
                    start();
                },
                error: function (data, status, e) {}
            });
    });
    

      

    与浏览器自动化测试工具集成的接口

    QUnit额外提供了一些与浏览器自动化测试工具集成的接口,这些接口实现后会被QUnit自动调用,注意,这些接口是留着我们开发人员自己来实现的。这里简单做些介绍:

    • QUnit.log({ result, actual, expected, message }),这个接口会在每个断言执行后调用,result值是断言是否通过,message是断言里的message参数。
    • QUnit.testStart({ name }),在每个测试函数执行前调用,name参数是测试函数中的name参数值,这里的测试函数是指test()或者asyncTest()。
    • QUnit.testDone({ name, failed, passed, total }),在每个测试函数结束后执行,name参数同上,failed参数是指失败断言的个数,passed参数是指成功断言的个数,total是指所有断言的个数。
    • QUnit.moduleStart({ name }),在每个module后面所有的测试代码执行前调用,name参数是module(name)中name的值。
    • QUnit.moduleDone({ name, failed, passed, total }),在module下面所有的测试代码执行完之后执行,failed参数是指失败断言的个数,passed参数是指成功断言的个数,total是指所有断言的个数。
    • QUnit.begin(),在所有的测试代码调用之前运行。
    • QUnit.done({ failed, passed, total, runtime }),在所有的测试代码调用之后运行,failed参数是指失败断言的个数,passed参数是指成功断言的个数,total是指所有断言的个数,runtime代码所有代码的执行时间。
  • 相关阅读:
    [Leetcode] generate parentheses 生成括号
    [Leetcode] letter combinations of a phone number 电话号码的字母组合
    MySQL安装出现“不是内部或外部命令,也不是可执行程序”等一系列问题的解决方案
    [Leetcode] sudoku solver 求解数独
    [Leetcode] valid sudoku 有效数独
    jQuery使用(七):事件绑定与取消,及自定事件的实现原理
    前端交互体验核心之事件(一)
    jQuery使用(六):DOM操作之元素包裹、克隆DOM与data的综合应用
    jQuery使用(五):DOM操作之插入和删除元素
    jQuery使用(四):DOM操作之查找兄弟元素和父级元素
  • 原文地址:https://www.cnblogs.com/MyBigBird/p/3428421.html
Copyright © 2011-2022 走看看