3

我开始为我现有的 jQuery 插件编写 Qunit 测试。我已经通过了六次配置风格测试，只是为了确保一切都正确连接。现在我开始测试功能。我的插件是 textarea 字段的倒计时样式插件。这是实际的工作版本：

http://andymatthews.net/code/textCounter/

我正在编写一个测试来检查字段下显示的计数是否正确。例如，如果一个字段允许 100 个字符且页面加载时该字段中有 20 个字符，则该字段下的标签应为 80。

这是 qunit-fixture 中的内容：

<div id="qunit-fixture">
    <textarea id="myTextarea">Existing content</textarea>
    <span id="theCounter"></span>
</div>

这是相关的失败测试

test('setup', function(){
    console.log($('#theCounter'));
    equal($('#theCounter').text(), 124, 'count correctly initialized');
});

这是插件的现有内容。还有更多，但我只是在现有测试通过集合时添加更多代码。

(function($) {
    $.fn.textCounter = function(o){
        o = $.extend( {}, $.fn.textCounter.defaults, o );
        return this.each(function(i, el){
            var $e = $(el),
                $target = $(o.target);
            // predefined count minus existing content
            $e.html(o.count - $target.text().length);
            console.log( $e.html() );
        });
    }
    $.fn.textCounter.defaults = {
        count: 140,
        alertAt: 20,
        warnAt: 0,
        target: '#myTextarea',
        stopAtLimit: false
    }
}(jQuery));

我假设因为我没有在测试工具页面上明确配置插件，所以插件使用默认值。如果是这种情况，那么计数器应该以最多 140 个字符减去字段中已有的 16 个字符开始，并且应该显示 124。

这就是问题所在......当一个示例 HTML 页面运行时，它正确显示 124。当测试运行时，它$('#theCounter').text()作为一个空字符串返回。运行示例页面和测试后查看控制台，上面的日志语句显示 124。但单元测试显示一个空字符串。

这不是什么秘密，所以如果有帮助，我可以提供所有文件。我确定这可能是某种范围问题，但我对 QUnit 的经验不足，无法知道出了什么问题。

4

1 回答 1

1

我没有看到任何代码调用您的插件。你可以试试下面的...

test( "setup", function() {
    equal( 
        $( "#theCounter" ).textCounter().text(), 
        124, 
        "Count correctly initialized" 
    );
});

或者您可以创建一个模块并在设置阶段执行此操作

var textCounter;

module( "Setup", {
    setup: function() {
        textCounter = $( "#theCounter" ).textCounter();
    },
    teardown: function() {
    }
});

test( "setup", function() {
    equal( textCounter.text(), 124, "Count correctly initialized" );
});

重要的是要知道qunit-fixture每次测试都会重置任何标记。

于 2012-06-22T16:08:41.960 回答