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

cloudgamer 阅读:93 2025-06-02 22:19:02 评论:0

我开始为我现有的 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。但单元测试显示一个空字符串。

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

请您参考如下方法:

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

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 中的任何标记。每次测试都会重置。


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号