関数が値を返さない場合、Jasmineはどのように機能しますか？

Question

まず、テスト駆動型開発（TDD）と動作駆動型開発（BDD）の両方に新しく、このページは開発が必要なことが多いため、Webページを開発する良い方法だと信じていますあなたが何かできるようになる前にテストコードを開発しなければならないのなら、それは難しいです。

私がこのスレッドを書いているのは、なぜ私が見つけたのかという問題ではありません。しかし、もしあなたが入力しているのであれば、それも読んで楽しむでしょう！私は構文について、それがどのように動作するのか、そのすべてについて何かを読んできました。私は、私の関数が値を返さなければ、実装するのは難しいということを発見しました。

のiは、クリックイベントを持っていることを例えば言おうが、単に入力のテキスト値を変更する機能をトリガ：

$('input[type="text"]').click(function() { 
    $(this).val('Oh, that tickles!'); 
}); 

どうジャスミンがこれを処理しますか？次のコードのように：

describe('Input type text is clicked', function() { 
    it('changes text in the input field', function() { 
     expect($('input[type="text"]').val()).toEqual("Oh, that tickles!"); 
    }); 
}); 

これは間違っていますが、jQueryオブジェクトにはその値を含まない複数の入力フィールドが含まれる可能性があるためです。要素（例えば$(this)など）を見つける方法はありますか、またはジャスミンテストの中にクリックハンドラを置く必要がありますか？このように：

describe('Input type text is clicked', function() { 
    it('changes text in the input field', function() { 
     $('input[type="text"]').click(function() { 
      expect($(this).val()).toEqual("Oh, that tickles!"); 
     } 
    }); 
}); 

いくつかの明快さは、多くの事前での素敵な:)

おかげだろう！

/J。

Answer 1

1つの方法は、テストの実行時にテキスト入力フィールドが1つだけであることを確認することです。あなたは、入力フィールドでフィクスチャを作成するためにjasmine-jqueryを使用することができます。

describe('Input type text is clicked', function() { 
    beforeEach(function() { 
    jasmine.getFixtures().set('<input type="text" />'); 
    bindClickEvent(); 
    }); 
    it('changes text in the input field', function() { 
    $('input[type="text"]').click(); 
    expect($('input[type="text"]').val()).toEqual("Oh, that tickles!"); 
    }); 
}); 

あなたはクリックイベントを別々にクリックハンドラ自体に処理されていることをテストすることができますので、あなたのコードをリファクタリングすることもできます。

var eventHandlers = { 
    tickle: function() { 
    $(this).val('Oh, that tickles!'); 
    } 
};  
$('input[type="text"]').click(eventHandlers.tickle); 

あなたは2つのテストを受けるでしょう：

describe('Input type text is clicked', function() { 
    beforeEach(function() { 
    jasmine.getFixtures().set('<input type="text" />'); 
    spyOn(eventHandlers, 'tickle'); 
    bindClickEvent(); 
    }); 
    it('should tickle the field', function() { 
    $('input[type="text"]').click(); 
    expect(eventHandler.tickle).toHaveBeenCalled(); 
    }); 
}); 

describe('eventHandlers.tickle', function() { 
    it('should set the field value', function() { 
    var input = $('<input type="text"/>'); 
    eventHandlers.tickle.call(input); 
    expect(input.val()).toBe("Oh, that tickles!"); 
    }); 
});