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 中的任何标记。每次测试都会重置。
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。



