【qunit】学习记录

最新推荐文章于 2024-10-14 18:12:09 发布

悟空_

最新推荐文章于 2024-10-14 18:12:09 发布

阅读量688

点赞数

分类专栏：前端文章标签：单元测试 Qunit 前端

本文链接：https://blog.csdn.net/u010475041/article/details/52524620

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简介

Qunit 是一个前端单元测试框架，能够与requirejs等AMD/CMD框架集成。

目前最新版本为2.0.1，不兼容IE9一下，若在IE9以下测试，请使用1.x版本

需要一个样式的支撑，以及一个脚本的支撑，当然也可以从官网上下载回来，全部正确浏览器标题会打钩

每个测试组后都会由三个数字（错误数，正确数，期待测试数），全正确必须是错误数=0并且，正确数=期待测试数

函数说明

函数名	概念	例子
expect	期待测试数	assert.expect(2);
ok	期待值为true	assert.ok(1===1, ‘1是真的等于1的’);
equal	结果值与期待值相等	var res = ‘esaleb’; assert.equal(res,’esaleb’ ,”结果为esaleb”);
deepEqual	对象匹配	var res = {name:’sunrise’,add:’GZ’}; assert.deepEqual(res,{name:’sunrise’,add:’GZ’} ,”对象匹配，name=sunrise,add=GZ”);
async	异步匹配	//开启异步 var done = assert.async();done();//结束异步

例子1

qunit-test-1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.1.css">
</head>
<body>
<!--以下两个div的id为qunit默认的显示测试结容器-->
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <!--由于我们测试用到jquery-->
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>

  <script src="https://code.jquery.com/qunit/qunit-2.0.1.js"></script>
  <script src="qunit-test-1.js"></script>
</body>
</html>

注意html中的两个指定的默认id

qunit-test-1.js

//新建一个测试组并且命名为：测试组1
QUnit.test("测试组1", function (assert) {

    //ok, 2正确
    assert.ok(1 == "1", "1=='1' Passed!");
    assert.ok((1 !== "1"), "1!=='1' Passed!");


    //equal， 1正确，1错误
    var res = 'esaleb';
    assert.equal(res, 'esaleb', "结果集为'esaleb'");
    assert.equal(res, 'sunrise', "结果集为'sunrise'");//false


    //deepEqual,1正确，1错误
    var obj = {name: "sunrise", age: 8};
    assert.deepEqual(obj, {name: "sunrise", age: 8}, "对象必须相等，name=sunrise,age=8");
    obj = {name: "sunrise"};
    assert.deepEqual(obj, {name: "sunrise", age: 8}, "对象必须相等，name=sunrise,age=8");//fasle
});


//新建组测试数，正确3
QUnit.test("测试数", function (assert) {
    //限制当前测试数为2
    assert.expect(3);


    //调用计算函数
    function calc(x, operation) {
        return operation(x);
    }

    //获取结果
    var result = calc(2, function (x) {
        //测试1
        assert.ok(true, "进入了回掉函数");
        return x * x;
    });
    //测试2
    assert.equal(result, 4, "2*2=4");



    //--------------------
    //给body绑定一个函数，测试点击事件是否生效
    var $body = $( "body" );
    $body.on( "click", function() {
        assert.ok( true, "body被点击了!" );
    });
    //触发点击事件
    $body.trigger( "click" );
});

//新建组测试异步，正确1
QUnit.test("测试异步", function (assert) {
    //期待测试1次

    assert.expect(1);
    //开启异步
    var done = assert.async();
    setTimeout(function() {
        assert.ok(true, "异步成功" );
        //异步结束
        done();
    },1000);
});

测试结果

图片标题

例子2（RequireJS）

qunit也是支持AMD标准的

qunit-test-2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>requirejs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="../scripts/lib/qunit-2.0.1/qunit/qunit.css">
    <script  data-main="../scripts/requirejs_config.js" src="../scripts/lib/requirejs/require.js"></script>
</head>
<body>
this is the requirejs script development page!
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
<script type="application/javascript">
    require(['test'], function (t) {
        //执行测试
        t.test();
    });
</script>
</html>

requirejs_config.js

requirejs.config({
    shim: {
        qunit: {
            deps: [
                'jquery'
            ],
            exports: 'QUnit'
        },
        broadcast: ['qunit'],
        test: ['qunit', 'jquery'],
    },
    paths: {
        jquery: "lib/jquery/jquery-1.8.0.min",
        qunit: 'lib/qunit-2.0.1/qunit/qunit',
        test: 'src/test'
    }
});

src/test.js

define(['qunit', 'jquery'], function (assert,$) {
    //测试函数
    var testFun = function() {
        assert.expect(1);
        var $body = $( "body" );
        $body.on( "click", function() {
            assert.ok( true, "body被点击了!" );
        });
        //触发点击事件
        $body.trigger( "click" );
    }
    return {test:testFun}
});