Jasmine unit test case for dynamic character count

问题

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: This is the fixture

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

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;
}

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 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():
});

回答1:

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.

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.

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();
});

Hope it helps

来源：https://stackoverflow.com/questions/47466803/jasmine-unit-test-case-for-dynamic-character-count

标签

javascript

jquery

jasmine