【qunit】前端单元测试

时间 2019-11-13

原文原文链接

#简介 Qunit 是一个前端单元测试框架，可以与requirejs等AMD/CMD框架集成。javascript

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

须要一个样式的支撑，以及一个脚本的支撑，固然也能够从官网上下载回来，所有正确浏览器标题会打钩html

每一个测试组后都会由三个数字（错误数，正确数，期待测试数），全正确必须是错误数=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();//结束异步|java

#例子1jquery

##qunit-test-1.htmlgit

<!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中的两个指定的默认idgithub

##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);
});

##测试结果 app

#例子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}
});