動的文字カウントのジャスミン単位テストケース

Question

誰かが、keyupイベント内の 関数がjqueryとjasmineで呼び出されたかどうかを調べるためのテストケースを書く例を教えてください。 jqueryとjasmineにはかなり新しいので、間違いの申し訳ありません。ユーザが入力中の文字を入力するfield.and私は

fixture.htmlを次のように私が試した テストケースで立ち往生してるよう このプログラムは、残りの文字数が表示されます。これは、フィクスチャ

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

script.jsです：これはこれは、テストケースの一つである 文字

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

を残り計算するコードをスクリプトファイルであるMを助けてくださいそれは機能updateChars(remainingChar,maxLengthBox,txt)が呼び出されて実行なっている場合、私はそれ
1のテストはどうすればよいからkeyupをトリガした後、関数を呼び出していないため、電子ここ

のTestCase返される正しいremainingChar数を確認する方法
2.ここから始まります：
コードが正常に動作しているが、私はテストケースには、内側updateChars機能が私のために呼び出されませんkeyup機能をトリガーにとして「正しい文字カウントが表示されているかどうかをチェックする」の筆記テストケースで助けを必要と

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

Answer 1

あなたがブラウザで直接テストを行っているとします。あなたのコードでは、私はupdateChars関数がグローバルなので、windowに接続されていると仮定しています。あなたが必要なもののことを言う

は、ここでは、jasmineに我々は機能spyOnを使用し、spyある例です。

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

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

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

これは、あなたのニーズに合わせて調整する必要が単なる例示的な一例です。

いくつかの注意
私はあなたのコードの行loadFixtures('Fixture.html');で見る は、私はそれが実際に何をするかわかりませんが、それは非同期呼び出しがある場合、あなたはbeforeEachでdoneコールバックを使用する必要があります。

非同期呼び出しを持つ別の例示的な例：

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

は、それがあなたの質問を更新し