QUnit 学习笔记使用说明（一）

一、单元测试前言

什么是单元测试？

如果是新接触单元测试的童鞋，简要的解释：就是一个JS函数/功能/模块的测试。

单元测试的工具：这里介绍QUnit

Qunit原本是jqury家的，不过现在已经独立了，即是说使用QUnit不需要依赖jquery

官方api地址：http://api.qunitjs.com/

二、QUnit 使用、学习教程

一、下载与安装

首先要下载qunit的相关js和css，目前版本v1.23.1，下载地址：打开官网http://qunitjs.com/，右侧即download，选择要下载的文件。

也可以通过npm安装：npm install --save-dev qunitjs

也可以直接输入下方地址下载：

https://code.jquery.com/qunit/qunit-1.23.1.js

https://code.jquery.com/qunit/qunit-1.23.1.css

二、一个简单的QUnit测试单个功能

二（1）创建基本的html文件

新建一个html文件，先引入必要js和CSS文件：1个js和1个CSS文件，就是之前下载的那个js和CSS文件

基本的HTML结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Qunit单元测试</title>
    <link rel="stylesheet" href="qunit-1.23.1.css">
    <script src="qunit-1.23.1.js"></script>

</head>
<body>
/*以下这3个是必写的，是将来输出测试结果的区域，id不要改*/
<h1 id="qunit-header">QUnit 单元测试</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol><!--输出测试结果的区域-->
</body>
</html>

二（2）测试一个简单的功能

在之前创建的html文件的基础上，加入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Qunit单元测试</title>
    <link rel="stylesheet" href="qunit-1.23.1.css">
    <script src="qunit-1.23.1.js"></script>

    /*新增代码 开始*/
    <script>
        test("test fn",function(){
            ok(true, "this is a QUnit unit test");
        });
    </script>
    /*新增代码 结束*/

</head>
<body>
<h1 id="qunit-header">QUnit 单元测试</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol><!--输出测试结果的区域-->
</body>
</html>

然后页面上会显示本次断言测试的结果：this is a QUnit unit test，具体如图（这是单元测试通过的图，单元测试不通过的图，接下来会放上）：

解释： test()方法：

QUnit.test( name, callback ) 描述：增加一个测试案例。

参数name:string，给这个测试自定义起个名字。
参数callback:function，要被测试的主体，比如这里是一个ok()方法

ok()

Categories: Assert

简介与用法：

ok( state [, message ] )

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

参数state:Expression :要被测试的表达式，比如true,false,0,NaN,null,undefined,"","sdfs"，
参数message ：String，本断言的描述信息

这是QUnit中最基本的断言，ok()的第一个参数如果值为true,这个断言便算通过了，若否，则不通过。如果有第二个参数，则会在结果信息里显示第二个参数的内容。

本例中，因为我们指定了第一个参数为true。所以不论如何，这个断言都会通过；同理，如果这里写为false,那么不论如何，都不会通过。

现在，来多写几个ok断言测试：

<script>
    test("test fn",function(){
        ok(true, "this is a QUnit unit test");

        /*新增的几个ok断言测试*/
        ok( "non-empty", "non-empty string succeeds" );
        ok( false, "false fails" );
        ok( 0, "0 fails" );
        ok( NaN, "NaN fails" );
        ok( "", "empty string fails" );
        ok( null, "null fails" );
        ok( undefined, "undefined fails" );
    });
</script>

浏览器里跑一下的结果：除了第一个通过了，后面的都没有通过

三、一个真正的测试

三（1）、新增一个test2.js文件

/*这是我们要测试的函数*/
function showHello(sName){
    return "hello!"+sName;
}

/*依旧用test()来增加一个测试案例*/
test("test Fn",function(){

    /*定义一个变量——这没什么可说的*/
    var myName = "小明";

    /*这里用equal()而非ok()*/
    equal(showHello(myName),"sss","不通过" );
    equal(showHello(myName),"hello!小明","通过" );
});

三（2）、index.html中引入这个js文件，并且删掉之前测试的方法的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Qunit单元测试</title>
    <link rel="stylesheet" href="qunit-1.23.1.css">
    <script src="qunit-1.23.1.js"></script>
    <script src="test2.js"></script>

</head>
<body>
<h1 id="qunit-header">QUnit 单元测试</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol><!--输出测试结果的区域-->

</body>
</html>

QUnit 学习笔记 使用说明（一）