用于动态字符计数的Jasmine单元测试用例 [英] Jasmine unit test case for dynamic character count

问题描述

任何人都可以给我编写测试用例的示例，以检查是否在jquery和jasmine中调用了keyup事件中的
函数。
我对jquery和jasmine相当新，所以很抱歉这些错误。
当用户输入输入字段中的字符时，此程序显示剩余字符数。我遇到了测试用例
我尝试如下

Can anyone give me example of writing test case for checking if the function within the keyup event is called in jquery and jasmine. I am fairly new to jquery and jasmine so sorry for the errors. This program displays the remaining character count as the user enters the characters in the input field.and I'm stuck with test cases I tried as follows

fixture.html ：这是灯具

 <input id="text" name="text" size="100" maxlength="65"></input>
 <span id="count"></span>

script.js ：这是脚本带有代码的文件来计算剩余的
字符

script.js: This is the script file with code to calculate remaining characters

$(document).ready(function () {
    var txt = $('#text');
    var remainingChar = $('#count');
    var maxLengthBox = txt.attr('maxLength');
    remainingChar.html(maxLengthBox);

    txt.keyup(function () {
        updateChars(remainingChar, maxLengthBox, txt)
    });
});

function updateChars(remainingChar, maxLengthBox, txt) {
    var remChar = maxLengthBox - $(txt).val().length;
    if (remChar < 0) {
        remChar = 0;
    }
    remainingChar.html(remChar);
    return remChar;
}

这是其中一个测试案例，请帮助我，因为它没有调用触发keyup后的函数如何测试它？
1.如果函数 updateChars（remainingChar，maxLengthBox，txt）被调用并执行

2.如何检查正确的 remainingChar 计数被返回

This is one of the test cases please help me here because it's not calling the function after triggering the keyup how do I test it
1. if the function updateChars(remainingChar,maxLengthBox,txt) is getting called and executed
2. how to check the correct remainingChar count is returned

TestCase从这里开始：

代码工作正常，但我需要帮助编写测试用例检查是否显示正确的字符数，如触发 keyup 函数内部 updateChars 在测试用例中没有为我调用函数

TestCase starts here:
The code is working fine but I need help in writing test case for "checking if correct character count is displayed " as on triggering keyup function the inner updateChars function is not called for me in the test case

beforeEach(function () {
    loadFixtures('Fixture.html');
    txt = $('#text');
    remainingChar = $('#count');
    maxLengthBox = txt.attr('maxLength');
    remainingChar.html(maxLengthBox);
});

it("checking remaining characters", function () { 
    txt.val('hello');   //entering hello into that text field

    //triggering keyup and expecting this to call the updateChars function
    txt.trigger('keyup');  

    expect(updateChars).toHaveBeenCalled():
});

推荐答案

好的，我假设您正在运行测试直接在浏览器中，对吧？根据您的代码，我假设 updateChars 函数是全局函数，因此它附加到窗口。

Ok, I'm assuming you are running your test directly in the browser, right? And by your code, I'm assuming that updateChars function is global so it is attached to window.

说你需要的是一个间谍，在 jasmine 我们使用函数 spyOn ，这是一个例子：

Saying that, what you need is a spy, in jasmine we use the function spyOn, here is an example:

beforeEach(function() {
    //here we setup the "spy"
    spyOn(window, 'updateChars');
});

it("checking remaining characters", function() { 
    txt.val('hello');
    txt.trigger('keyup');

    expect(updateChars).toHaveBeenCalled():
});

这只是一个需要根据需要调整的说明性示例。

This is just an illustrative example that you need to adjust to your needs.

一些注释

我在你的代码中看到这行 loadFixtures（'Fixture.html'）; ，我不知道它究竟是做什么的，但如果是异步调用，那么你需要在<$ c中使用 done 回调$ c> beforeEach 。

Some notes
I see in your code this line loadFixtures('Fixture.html');, I don't know what it actually does, but if it is an async call, then you will need to use the done callback in the beforeEach.

异步调用的另一个说明性示例：

Another illustrative example with an asynchronous call:

beforeEach(function(done) {
    //here we setup the "spy"
    spyOn(window, 'updateChars');

    //supose this is a promise and we can call .then
    loadFixtures('Fixture.html')
    .then(function(){
        txt = $('#text');
        remainingChar = $('#count');
        maxLengthBox = txt.attr('maxLength');
        remainingChar.html(maxLengthBox);

        done(); //finally
    }); 

});

it("checking remaining characters", function(done) { 
    txt.val('hello');
    txt.trigger('keyup');

    expect(updateChars).toHaveBeenCalled():

    done();
});

希望有所帮助

这篇关于用于动态字符计数的Jasmine单元测试用例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！