Jquery 如何使用Jasmine测试文本长度计数器？

我和茉莉有点困难。我正在使用带有grunt的

grunt contrib jasmine

插件通过PhantomJS自动化测试。我有，所以我没有任何问题。主要的问题是，当测试运行时，我无法让计数器倒计时。下面是运行计数器的脚本

base.js

：

$(document).ready(function()
{
    "use strict";
    $('.text').keyup(function()
    {
        $('.count').text(60 - $(this).val().length);
    });
});

其中，

.text

是输入字段，

.count

是计数器的范围。以下是此文件的规范：

describe("Main JS file", function() {

    "use strict";

    var $text, $count;

    beforeEach(function() {
        $count = $('<span class="count">60</span>');
        $text = $('<input type="text" maxlength="60" class="text">');
    });

    it("displays a count of the characters in the text box", function() {
        $text.val('Hello, World!');
        $text.trigger('keyup');
        expect($count.text()).toEqual(47);
    });

});

当我运行

grunt jasmine

时，我只得到以下错误：

$ grunt jasmine
Running "jasmine:tests" (jasmine) task
Testing jasmine specs via phantom
x
Main JS file:: displays a count of the characters in the text box: failed
  Expected '60' to equal 47. (1)
1 spec in 0.001s.
>> 1 failures

我真的非常感谢你在这方面的帮助。提前谢谢

更新：现在使用jasmine jquery，我可以看到事件已触发，但计数器文本仍然没有更新

it("displays a count of the characters in the text box", function() {

    spyOnEvent($text, 'keyup');
    $text.val('Hello, World!');
    $text.keyup();
    expect('keyup').toHaveBeenTriggeredOn($text);
    expect($count).toHaveText('47');
});

---

问题是，在

before

函数中呈现元素之前，您试图绑定键事件。一个想法是重构代码，以便可以在测试中运行绑定事件的函数

function addKeyEvent(){
 $('.text').keyup(function()
    {
        $('.count').text(60 - $(this).val().length);
    });
}

$(document).ready(addKeyEvent);

在测试中，在创建元素后调用函数：

describe("Main JS file", function() {

"use strict";

var $text, $count;

beforeEach(function() {
    $count = $('<span class="count">60</span>').appendTo('body');
    $text = $('<input type="text" maxlength="60" class="text">').appendTo('body');
    addKeyEvent()
});

it("displays a count of the characters in the text box", function() {
    $text.val('Hello, World!');
    $text.trigger('keyup');
    expect($count.text()).toEqual('47');
});

});

description（“主JS文件”，函数（）{
“严格使用”；
var$text$count；
beforeach（函数（）{
$count=$（'60'）。appendTo（'body'）；
$text=$（''）.appendTo（'body'）；
addKeyEvent（）
});
它（“显示文本框中的字符计数”，函数（）{
$text.val（'Hello，World！'）；
$text.trigger（'keyup'）；
expect（$count.text（））.toEqual（'47'）；
});
});

感谢您的回答，但它仍然返回相同的错误（我还尝试了var addkeyent=function（）{}和function addKeyEvent（）{}，但没有结果）。也许问题在于事件触发器本身？我对这些都不是很有经验，所以我不确定，但问题似乎是当测试运行时计数器没有得到更新。（预期60为47）。好的，您必须将DOM元素添加到主体中，并且必须再次测试

“47”

，因为返回值是字符串而不是数字。这样做了吗：

预期“60”具有文本“47”。（2） 0.001s中有1个规格。>>1失败

好的，我的代码中有一个小错误，请尝试，它对我有效

describe("Main JS file", function() {

"use strict";

var $text, $count;

beforeEach(function() {
    $count = $('<span class="count">60</span>').appendTo('body');
    $text = $('<input type="text" maxlength="60" class="text">').appendTo('body');
    addKeyEvent()
});

it("displays a count of the characters in the text box", function() {
    $text.val('Hello, World!');
    $text.trigger('keyup');
    expect($count.text()).toEqual('47');
});

});