Question

我开始为现有的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的经验不足以了解问题所在。

Answer 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中的任何标记。

Qunit测试与实际的jQuery插件执行不匹配

1 个答案: