回到刚才讨论的话题，设置 debug 开关后，任务信息就潜在的泄漏可能性。进一步地，继续改造代码也可以达成在使用 debug 开关时的安全性，做法是将开关的控制放在 SmartQueue 的构造函数中，这样要求 SmartQueue 实现 Singleton 模式（见上一篇文章）；一旦创建对象后，不允许修改闭包内的 debug 标记。

在编写具体测试代码前，我们设计了一个测试方法，以简化测试代码（主要是用例）的编写。简单地说，就是将测试用例与测试本身的代码分离——前者以语义良好的方式编写，后者是一次性编写，用于处理前者设定的测试用例。用例编写者需要写格式形如这样的代码：

    <ul id="J_test_cases">
        <li>
            <pre>task = new sq.Task({fn: function() { log('unamed') }})</pre>
            <ul>
                <li>typeof task.fn === 'function'</li>
                <li>task.name === 't0'</li>
                <li>task.level === 1</li>
                <li>task.dependencies.length === 0</li>
                <li>task.context == window</li>
            </ul>
        </li>
        <li>
            <pre>task = new sq.Task({fn: function() { log('unamed') }, name: 'hello'})</pre>
            <ul>
                <li>task.name === 'hello'</li>
                <li>task.level === 1</li>
            </ul>
        </li>
    </ul>

ul li pre (CSS 选择器路径，下同)中写要测试的代码，相当于前置操作；ul ul li 中对这个代码进行断言测试，可以编写多条断言。这里建议对基本数据类型使用 === 和 !=== 运算符以加强对数据类型的预期判断。

接下来，我们编写两个 helper 方法用来输出和测试：

function log(str) {
    node.value += str + '\n';
}

function assert(expression) {
    var flag;
    eval('flag = ' + expression);
    return typeof(flag) === 'boolean' && flag;
}

log 用来向文本框追加信息，assert 用来测试传入表达式的值。测试方法如下（这里使用了 jQuery）：

var sq = SmartQueue, task, total = 0, passed = 0, failed = 0;
$('#J_test_cases').children().each(function(index) {
    eval($('pre', this).text());
    task.register();
    $('li', this).each(function() {
        var item = $(this);
        var flag = assert(item.text());
        if(flag) passed ++; else failed ++;
        item.prepend((flag ? '<font color="green">[PASS]</font>' : '<font color="red">[FAIL]</font>') + ' ');
        total++;
    }).wrap('<pre></pre>');
}).end().before('<p>Total: ' + total + ', passed: '+ passed +', failed: ' + failed + '</p>');
sq.fire();

这个结构还可改进一下，比如输出测试说明而不是具体的代码，也可以增加后置操作，这里就不再演示了。你还可以查看 完整的测试页面 ，含有 23 个测试用例和完整的测试实现。

~~~~~~~~~~~~~ 八卦分割线 ~~~~~~~~~~~~~

好吧，我们已经体会到了思考和行动的乐趣，走到了系列文章的尾声，但这只是开始。我们经历了一个很小的实用组件的实现全过程，领略到了 JavaScript 世界的精彩，让我们继续前行~

原文：http://ued.alipay.com/?p=1204

本文链接：http://www.blueidea.com/tech/web/2009/7116.asp　

出处：Alipay UED
责任编辑：bluehearts

上一页 JavaScript组件之旅:测试组件 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。