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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。