首页 > 其他分享> > qunit和mockjax前端测试

qunit和mockjax前端测试

2020-10-12 11:50:25 作者：互联网

题外话：想轻松点写篇文章，可不知道为什么每一篇写的时候都有中沉重的感觉。

qunit是JavaScript的单元测试框架，用起来和junit一样的简单，够可视化。

通过阅读API和一些测试Demo很快就可以掌握qunit的基本用法。下面是一个测试例子，通过例子来说明qunit的用法，然后就没了。

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>

依赖，设置说明
1.qunit测试框架提供了清晰的测试结果反馈界面，这里要引入：qunit.css样式文件
2.引入核心库qunit.js,提供了一组测试框架的API。
3.之前的版本有依赖jquery,目前qunit是一个独立的JavaScript.
4.引入要测试的JavaScript代码，本例是：JCN.dom.node.util.js
5.<body>xx</body>:body体的内容是固定的展示qunit测试结果的模版，其中qunit-header:测试标题，qunit-testrunner-toolbar:一组选择框提供了在测试运行时一些条件设置，qunit-userAgent:（很清楚）测试客户端信息，qunint-tests:一组测试结果，qunit-fixture:（这个重要）fixture的意思是固定不变的，不大可能移动的，如果测试用例对DOM进行了相应的操作，比如移动，删除，设置属性等，在这个结点下的任意结点在每一个测试用例结束后都会回复原始状态，这就保证的测试用例的独立和封闭，不会对其他测试和原始环境造成影响。
测试用例说明
1.关于qunit提供的测试功能要查看API
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在一个测试用例中完成了前端异步请求和后端服务器响应。

插播，编辑器太难用了，老是格式对不好，光标位置跳，内容浮动。

文中开始提供的测试代码测试结果图如下：

说明一些测试结果：

1.测试结果：“模块名”+“测试用例名”+“结果数据(失败个数，通过个数，测试个数)”

2.测试结果图中从上往下依次是：标题，标语，客户端信息，测试结果。

标签：function,测试,qunit,前端,test,Test,mockjax,JCN
来源： https://blog.51cto.com/14895198/2541291