qunit和mockjax前端測試

時間 2020-05-08

原文原文鏈接

題外話：想輕鬆點寫篇文章，可不知道爲何每一篇寫的時候都有中沉重的感受。javascript

qunit是JavaScript的單元測試框架，用起來和junit同樣的簡單，夠可視化。css

經過閱讀API和一些測試Demo很快就能夠掌握qunit的基本用法。下面是一個測試例子，經過例子來講明qunit的用法，而後就沒了。html

qunit框架使用的一個demo集合前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Test JCN.dom.node.util.js</title>
    <link href="../script/jquery/qunit-1.14.0.css" rel="stylesheet"/>
    <!--
    <script type="text/javascript" src="../script/jquery/jquery-1.8.0.min.js"></script>
    -->
    <script type="text/javascript" src="../script/jquery/qunit-1.14.0.js"></script>
    <script type="text/javascript" src="JCN.dom.node.util.js"></script>
    <script>
        window.onload = function () {
            var e = document.getElementById("content");
            var L = function (msg) {
                console.info("Test Log is : " + msg);
            };
            //Test001
            test("test getStyle", function () {
                expect(4);
                //
                var w = JCN.getStyle(e, "width");
                var h = JCN.getStyle(e, "height");
                L(w);
                L(h);
                equal(w, "30px", "Test getStyle(element, name) width to match.");
                equal(h, "20px", "Test getStyle(element, name) height to match.");
                e.style.width = "30px";
                e.style.height = "20px";
                //
                var w = JCN.getStyle(e, "width");
                var h = JCN.getStyle(e, "height");
                L(w);
                L(h);
                equal(w, "30px", "Test getStyle(element, name) width to match.");
                equal(h, "20px", "Test getStyle(element, name) height to match.");
            });
            //Test002
            test("test setElementOpactiy", function () {
                JCN.setElementOpactiy(e, 0.5);
                var o = JCN.getStyle(e, "opacity");
                L(o);
                equal(o, 0.5, "Test setElementOpactiy(element, opactiy) opactiy to match.");
            });
            module("module test", {
                setup: function () {
                    L("module test setUp");
                },
                teardown: function () {
                    L("module test teardown");
                }
            });
            //Test003
            test("test relativePage", function () {
                var pageX = JCN.relativePage.pageX(e);
                var pageY = JCN.relativePage.pageY(e);
                L("pageX=" + pageX + ", pageY=" + pageY);
                equal(pageX, 0, "Test pageX.");
                equal(pageY, 498, "Test pageY.");
            });
            //Test004
            test("test relativeParent", function () {
                expect(2);
                var offsetParentX = JCN.relativeParent.parentX(e);
                var offsetParentY = JCN.relativeParent.parentY(e);
                L("offsetParentX=" + offsetParentX + ", offsetParentY=" + offsetParentY);
                equal(offsetParentX, 0, "Test relativeParent(element) offsetParentX to match.");
                equal(offsetParentY, 0, "Test relativeParent(element) offsetParentY to match.");
            });
        };
    </script>
    <style>
        .content {
            width: 30px;
            height: 20px;
            background-color: salmon;
        }
    </style>
</head>
<body>
<h1 id="qunit-header">Qunit Example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
    <span id="content" class="content">
    This is a test div.
    </span>
</div>
</body>
</html>

依賴，設置說明java
1.qunit測試框架提供了清晰的測試結果反饋界面，這裏要引入：qunit.css樣式文件（http://qunitjs.com/ 官方主頁）node
2.引入核心庫qunit.js,提供了一組測試框架的API。jquery
3.以前的版本有依賴jquery,目前qunit是一個獨立的JavaScript.ajax
4.引入要測試的JavaScript代碼，本例是：JCN.dom.node.util.jschrome
5.<body>xx</body>:body體的內容是固定的展現qunit測試結果的模版，其中qunit-header:測試標題，qunit-testrunner-toolbar:一組選擇框提供了在測試運行時一些條件設置，qunit-userAgent:（很清楚）測試客戶端信息，qunint-tests:一組測試結果，qunit-fixture:（這個重要）fixture的意思是固定不變的，不大可能移動的，若是測試用例對DOM進行了相應的操做，好比移動，刪除，設置屬性等，在這個結點下的任意結點在每個測試用例結束後都會回覆原始狀態，這就保證的測試用例的獨立和封閉，不會對其餘測試和原始環境形成影響。編程
測試用例說明
1.關於qunit提供的測試功能要查看API：http://api.qunitjs.com/ 這是個學習的好方法。
2.如上代碼：Test001分析
test("test getStyle", function(){...}):第一個參數：測試用例的名稱，第二個參數：assert(斷言)，注意：若是第二個參數是數組，則表示指望斷言的數，那麼第三個參數就是斷言。在本例子中使用在斷言方法中設置斷言數:expect(4)。建議這樣寫，簡明思議，不至於時間久了，第二個參數記不起來是什麼意思，還得回頭API。
關於斷言方法的使用和Junit相似，能夠查看qunit源代碼，有清晰可讀的註釋。
下面提供個片斷圖，以供溯本逐源的朋友快速定位。
Test module
module在這裏能夠理解爲組的意思，使用module的緣由是歸爲一個組的測試用例它們具備共同的測試執行前或測試執行後要處理的邏輯。
qunit插件mockjax 和 qunit asyncTest(testName, assert)
qunit的異步測試方法asyncTest,以start()開啓，以stop()結束，而後繼續一下一個測試用例，問題是其不能達到真正的異步通訊，數據傳輸的功能，這個時候藉助mockjax能夠達到想要的結果。mockjax提供的測試demo中的一個例子以下：
```
asyncTest('Support 1.5 $.ajax(url, settings) signature.', function() {
    $.mockjax({
        url: '/resource',
        responseText: 'Hello Word'
    });
    $.ajax('/resource', {
        success: function(response) {
            equal(response, 'Hello Word');
        },
        complete: function() {
            start();
        }
    });
    $.mockjaxClear();
});
```
總結一點mockjax在一個測試用例中完成了前端異步請求和後端服務器響應。