mass Framework spec模块v5

这是我的测试框架的第8代，前三代是前一个体系，名为abut。spec混杂了Qunit与BDD的一种语法，但更简巧。

主要改进是用户界面，更方便地定位出错的断言。为了防止某一个断言抛错而影响整个测试，这次还引用window.onerror来吞掉所有错误。

使用ol列表直接列举要测试逻辑，代替直接显示源码，不对不怎么会编码的测试人员更为友好。引入\u2714与\u2716这两个字符让断言结果更醒目。

下面就是显示图:

用法：

define([ "$spec,mass" ], function () {
    $.log( "已加载test/mass模块" , 7)

    describe( 'mass' , {
        type: function () {
            expect($.type( "string" )).eq( "String" , "取字符串的类型" );
            expect($.type(1)).eq( "Number" , "取数字的类型" );
            expect($.type(!1)).eq( "Boolean" , "取布尔的类型" );
            expect($.type(NaN)).eq( "NaN" , "取NaN的类型" );
            expect($.type(/test/i)).eq( "RegExp" , "取正则的类型" );
            expect($.type($.noop)).eq( "Function" , "取函数的类型" );
            expect($.type( null )).eq( "Null" , "取null的类型" );
            expect($.type({})).eq( "Object" , "取对象的类型" );
            expect($.type([])).eq( "Array" , "取数组的类型" );
            expect($.type( new  Date)).eq( "Date" , "取日期的类型" );
            expect($.type(window)).eq( "Window" , "取window的类型" );
            expect($.type(document)).eq( "Document" , "取document的类型" );
            expect($.type(document.documentElement)).eq( "HTML" , "取HTML节点的类型" );
            expect($.type(document.body)).eq( "BODY" , "取BODY节点的类型" );
            expect($.type(document.childNodes)).eq( "NodeList" , "取节点集合的类型" );
            expect($.type(document.getElementsByTagName( "*" ))).eq( "NodeList" , "取节点集合的类型" );
            expect($.type(arguments)).eq( "Arguments" , "取参数对象的类型" );
            expect($.type(1, "Number" )).eq( true , "测试$.type的第二个参数" );
        }
   });
})

源码

// 测试模块v5
//==================================================
define([ "$lang" ], function ($) {
    $.log( "已加载spec v4模块" , 7);
    var  global = this ,
        DOC = global.document,
        parseDiv = DOC.createElement( "div" ),
        timeDiv;

    //吞掉所有报错
    global.onerror = function () {
        return  true ;
    }
    /**
     * 取得元素节点
     * @param {String} id
     * @return {Node|Null}
     * @api private
     */

    function  get(id) {
        return  DOC.getElementById(id);
    }
    /**
     * 用于生成元素节点，注意第一层只能存在一个标签
     * @param {String} str
     * @return {Node}
     * @api private
     */

    function  parseHTML(str) {
        parseDiv.innerHTML = str;
        return  parseDiv.firstChild;
    }
    /**
     * 判定两个对象的值是否相似
     * @param {Any} a
     * @param {Any} b
     * @return {Boolean}
     * @api private
     */

    function  isEqual(a, b) {
        if (a === b) {
            return  true ;
        } else  if (a === null  || b === null  || typeof  a === "undefined"  || typeof  b === "undefined"  || $.type(a) !== $.type(b)) {
            return  false ;
        } else  {
            switch ($.type(a)) {
            case  "String" :
            case  "Boolean" :
            case  "Number" :
            case  "Null" :
            case  "Undefined" :
                //处理简单类型的伪对象与字面值相比较的情况,如1 v new Number(1)
                if (b instanceof  a.constructor || a instanceof  b.constructor) {
                    return  a == b;
                }
                return  a === b;
            case  "NaN" :
                return  isNaN(b);
            case  "Date" :
                return  +a === +b;
            case  "NodeList" :
            case  "Arguments" :
            case  "Array" :
                var  len = a.length;
                if (len !== b.length) return  false ;
                for ( var  i = 0; i < len; i++) {
                    if (!isEqual(a[i], b[i])) {
                        return  false ;
                    }
                }
                return  true ;
            default :
                for ( var  key in  b) {
                    if (!isEqual(a[key], b[key])) {
                        return  false ;
                    }
                }
                return  true ;
            }
        }
    }
    /**
     * 由于返回值是作为一个元素ID，而IE10无法捕获以中文命名的元素，因此将中文转换为对应unicode
     * @param {String} str
     * @return {String}
     * @api private
     */

    function  escape(str) {
        return  str.replace(/[\u4E00-\u9FA5]/g, function (s) {
            return  String.charCodeAt(s);
        });
    }
    /**
     * 构筑测试系统的用户界面
     * @api private
     */

    function  buildUI() {
        var  html = [ '<div id="mass-spec-result"><p class="mass-spec-summary">' , '<span id="mass-spec-failures" title="0">0</span> failures ' , '<span id="mass-spec-errors" title="0">0</span> errors ' , '<span id="mass-spec-done" title="0">0</span>% done ' , '<span id="mass-spec-time" title="0">0</span>ms </p>' , '<p class="mass-spec-summary">' , global.navigator.userAgent, '</p><div id="mass-spec-cases"><div id="loading">正在加载测试数据中，请耐心等特</div></div></div>' ];
        //div#mass-spec-result为整个系统的容器
        //div#mass-spec-summary用于放置各种统计
        //div#mass-spec-cases用于放置测试模块
        $.log( "当DOM树建完之时，开始构筑测试系统的外廓" )
        DOC.body.appendChild(parseHTML(html.join( "" )));
    }
    /**
     * 一个断言类
     * @param {Any} actual
     * @return {String} id
     * @return {Number} index
     * @return {Expect}
     * @api private
     */

    function  Expect(actual, id, index) {
        this .actual = actual;
        var  node = DOC.createElement( "li" )
        this .node = Expect[id].node.appendChild(node); //节点
        this .index = index; //当前测试模块的总数
        this .count = Expect[id].count++; //当前模块的个数
        this .id = id;
    }

    $.mix(Expect, {
        //刷新timeDiv的属性，显示总共花了多长时间跑完测试
        refreshTime: function () {
            timeDiv = timeDiv || get( "mass-spec-time" );
            var  duration = parseInt(timeDiv.title, 10) + ( new  Date - Expect.now);
            timeDiv.title = duration;
            timeDiv.innerHTML = duration;
        },
        //上面方法的内部实现,比较真伪,并渲染结果到页面
        prototype: {
            _should: function (method, expected, threshold) {
                var  actual = this .actual;
                var  bool = false ;
                var  length = arguments.length;
                var  last = arguments[length - 1];
                var  elem = this .node;
                if ((length > 2 || method == "ok"  || method == "ng" )&& ( typeof  last == "string" )) {
                    elem.innerHTML = last;
                }
                switch (method) {
                case  "ok" :
                    //布尔真测试
                    bool = actual === true ;
                    expected = true ;
                    break ;
                case  "ng" :
                    //布尔非测试
                    bool = actual === false ;
                    expected = false ;
                    break ;
                case  "type" :
                    bool = $.type(actual, expected);
                    break ;
                case  "eq" :
                    //同一性真测试
                    bool = actual == expected;
                    break ;
                case  "near" :
                    //判定两个数字是否相近
                    return  Math.abs(parseFloat(actual) - parseFloat(expected)) <= (threshold | 0);
                    break ;
                case  "not" :
                    //同一性非测试
                    bool = actual != expected;
                    break ;
                case  "same" :
                    //判定结果是否与expected相似(用于数组或对象或函数等复合类型)
                    bool = isEqual(actual, expected);
                    break
                case  "property" :
                    //判定目标值是否包含prop属性
                    bool = Object.prototype.hasOwnProperty.call(actual, expected);
                    break ;
                case  "match" :
                    //判定回调是否返回真
                    bool = expected(actual);
                    break ;
                case  "contains" :
                    //判定目标值是否包含el这个元素(用于数组或类数组)
                    for ( var  i = 0, n = actual.length; i < n; i++) {
                        if (actual === expected) {
                            bool = true ;
                            break ;
                        }
                    }
                    break ;
                case  "log" :
                    bool = "" ;
                    if (elem) {
                        elem.className = "mass-spec-log" ;
                        elem.appendChild(parseHTML( '<form class="mass-spec-diff"><pre>'  + $.dump(actual) + '</pre></form>' ));
                    }
                    break ;
                }

                //修改统计栏的数值
                var  done = get( "mass-spec-done" );
                var  errors = get( "mass-spec-errors" );
                var  failures = get( "mass-spec-failures" );
                if ( typeof  bool === "boolean" ) {
                    elem.innerHTML = elem.innerHTML.replace(/^[\u2714\u2716] /i, "" );
                    elem.innerHTML = (bool ? "\u2714"  : "\u2716" ) + elem.innerHTML
                    if (!bool) { //如果没有通过
                        this .status = "unpass" ;
                        failures.innerHTML = ++failures.title; //更新出错栏的数值
                        if (elem) {
                            elem.className = "mass-assert-unpass" ;
                            var  html = [ '<form class="mass-spec-diff clearfix">' , '<div>actual:<pre title="actual">' , $.type(actual), " : " , $.dump(actual), '</pre></div>' , '<div>expected:<pre title="expected">' , $.type(expected), " : "  + $.dump(expected), '</pre></div>' , '</form>' ];
                            elem.appendChild(parseHTML(html.join( '' )));
                        }
                    }
                    done.title++;
                    //更新总数栏的数值
                    done.innerHTML = (((done.title - errors.title - failures.title) / done.title) * 100).toFixed(0);
                    return  bool;
                }

            }
        }
    });
    "ok, ng, log, eq, near, match, type, not, property, contains, same" .replace($.rword, function (method) {
        Expect.prototype[method] = function () {
            var  args = Array.apply([], arguments);
            args.unshift(method);
            return  this ._should.apply( this , args);
        }
    })
    //用于收起或展开详细测试结果
    $.bind(DOC, "click" , function (e) {
        var  target = e.target || e.srcElement;
        var  el = target.parentNode;
        if (target.tagName === "A"  && el.className === "mass-spec-slide" ) {
            var  parent = el.parentNode;
            if (parent.className == "mass-spec-case" ) { //用于切换详情面板
                var  ul = parent.getElementsByTagName( "ul" )[0];
                var  display = ul.style.display;
                ul.style.display = display === "none"  ? ""  : "none" ;
            }
        }
    });
    /**
     * 返回一个断言实例，后接ok, ng, log, eq, match, type等方法判定真伪
     * @param {Any} actual
     * @return {String} id
     * @return {Expect}
     * @api public
     */
    var  ids = {};
    global.expect = function (actual, id) {
        id = id || arguments.callee.caller.arguments[0];
        if (id in  ids) {
            ids[id] = 0;
        } else  {
            ids[id]++;
        }
        return  new  Expect(actual, id, ids[id]);
    };

    /**
     * 添加一个测试模块，里面包含你所有要测试的方法的断言
     * @param {String} title 模块名
     * @return {Object} asserts 一个函数对象
     * @api public
     */
    global.describe = function (title, asserts) {
        var  escaped = escape(title);
        //domReay之后立即构建用户界面，并执行测试，显示测试结果
        $.require( "ready" , function () {
            //当前模块的名字
            var  describeName = "mass-spec-"  + escaped;
            //如果还没有创建用户界面，创建用户界面
            if (!get( "mass-spec-cases" )) {
                buildUI();
            }
            //如果还没有创建当前模块的显示面板，则创建相应面板
            if (!get(describeName)) {
                /** =================每个模块的显示面板大概是如下样子===============
                <div class="mass-spec-case" id="mass-spec-$.js">
                   <p><a href="javascript:void(0)">JS文件名字</a></p>
                   <ul style="display: none;" class="mass-spec-detail">
                   测试结果
                         <li id="方法名(即asserts对象里面的每个键名)" class="通过|不通过|出错">
                            方法名
                            <ol>
                               <li>expect语句</li>
                               <li>expect语句</li>
                               <li>expect语句</li>
                               ...
                            </ol>
                        </li>
                   </ul>
                </div>
                 */
                var  html = [ '<div id="#{0}" class="mass-spec-case">' , '<p class="mass-spec-slide"><a '  + (! "1"  [0] ? 'href="javascript:void(0);"'  : "" ) + '>#{1}</a></p>' , '<ul class="mass-spec-detail" style="display:none;"></ul></div>' ].join( '' );
                get( "mass-spec-cases" ).appendChild(parseHTML($.format(html, describeName, title)));
            }
            //取得测试对象中的所有方法名
            var  methods = Object.keys(asserts),
                name;

            function  runTest() {
                if ((name = methods.shift())) {
                    //对得当前测试方法（里面包含许多断言）
                    var  method = asserts[name]
                    //取得当前测试方法对应的DOM ID
                    var  methodId = "mass-spec-case-"  + name.replace(/\./g, "-" );
                    //移除加载显示条
                    if (!Expect.removeLoading) {
                        var  loading = get( "loading" );
                        loading.parentNode.removeChild(loading);
                        Expect.removeLoading = 1;
                    }
                    //如果还没有创建当前方法的显示面板，则创建相应面板（DIV）
                    if (!get(methodId)) {
                        //取得方法UI元素,它是可以通过其previousSiblingElement来控制展开或折叠
                        var  parentNode = get(describeName).getElementsByTagName( "ul" )[0];
                        var  node = parseHTML($.format( '<li class="method-parent" id="#{0}">#{1}<ol class="method"></ol></li>' , methodId, name));
                        /** =================每个方法的显示面板大概是如下样子===============
                        <li id="方法名(即asserts对象里面的每个键名)" class="通过|不通过|出错">
                            方法名
                            <ol>
                               <li>expect语句</li>
                               <li>expect语句</li>
                               <li>expect语句</li>
                               ...
                            </ol>
                        </li>*/
                        parentNode.appendChild(node);
                    }
                    node = get(methodId).getElementsByTagName( "ol" )[0]; //对应一个OL元素
                    Expect.now = new  Date;
                    var  bag = Expect[escaped + "#"  + name] = {
                        node: node,
                        status: "pass" ,
                        count: 0
                    }
                    try  {
                        method(escaped + "#"  + name); //执行当前方法，从而执行它里面的断言
                    } catch (err) {
                        $.log( "error : "  + err.message, true );
                        bag.status = "error" ;
                        var  lis = node.getElementsByTagName( "li" )
                        var  el = lis[lis.length - 1];
                        if (el) {
                            el.appendChild(parseHTML( '<form class="mass-spec-diff"><pre>'  + err + '</pre></form>' ));
                            el.className = "mass-assert-error" ; //高亮这一行,变成深红色
                        }
                        var  errors = get( "mass-spec-errors" );
                        //修正异常栏的数值
                        errors.innerHTML = ++errors.title;
                    }
                    //添加对应的类名，显示成功与否
                    if (node.className.indexOf( "mass-asserts-" ) == -1) {
                        node.className += " mass-asserts-"  + bag.status;
                    }
                    //更新测试所花的时间
                    Expect.refreshTime();
                    //前面必须用window来显式调用,否则会在safari5中
                    //报INVALID_ACCESS_ERR: DOM Exception 15: A parameter or an operation
                    // was not supported by the underlying object.错误
                    global.setTimeout(runTest);
                }
            }
            runTest();
        });
    }

    return  $;
});
//2011.8.9    增加getUnpassExpect函数,用于取得没有通过的expect并显示出来
//2011.10.26  优化format与quote
//2011.10.27   runTest添加参数，用于等特一定做量的测试模块都加载完毕才执行
//2011.10.31 去掉deferred模块的依赖，依靠ready列队自行添加测试的模块
//2012.1.28  升级到v3，大大增强错误定位的能力
//2012.4.30  升级到v4 去掉 Expect.Client,Expect.PASS,Expect.index,Expect.Class等属性
//2012.7.31 确保测试的主体轮廓被先添加到页面
//2012.1.4 升级到v5，不再从fn.toString抽取expect语句

新一年，测试框架会继续强化。单元测试对一个框架的升级与编写是极其重要的。在没有单元测试的情况下进行重构等于自寻死路。

 

 

 

标签:  javascript,  mass