jQuery 用のプラグインを作成し、http://jqueryboilerplate.com/ のボイラープレート パターンを使用しました。
内部には、次のコード スニペットがあります。
ShoppingcartPlugin.prototype = {
bindButtons : function(){
var self = this;
$('.addtocart').on('click.shoppingCart', function(event){
event.preventDefault();
$('.product-size-wrong').addClass('hidden');
$('.product-added').addClass('hidden');
if(!self.validateForm())
return;
self.updateProductDataInDOM(event);
var b = self.addProduct(event);
if(b){
self.addExtraProducts(event); //aanvullingen
self.updatePrices();
self.calculateWeight();
self.calculateDeposit();
$('.product-added').removeClass('hidden');
}
self.persist();
});
$("body").on("click.shoppingCart","a.removefromcart", function(event){
self.logger("a.removefromcart clicked");
event.preventDefault();
self.removeProduct(event);
self.updateCartTotalPrice();
self.updatePrices();
self.calculateWeight();
self.calculateDeposit();
event.stopPropagation();
});
}
}
これで、「a.removefromcart」要素のクリックをシミュレートする Jasmine テストケースが作成されました。その後、いくつかの Ajax 呼び出しをスパイして、結果が正しいかどうかを確認できます。
だから私はこれをやった:
describe('Removing products testsuite', function(){
it('Should yield an empty cart, when the X is clicked in a cart with a single product', function(){
$('#shoppingcart').shoppingCart();
allProducts = {};
$('.addtocart').click(); //simulate click, and adding a product
expect($.ajax.calls[1].args[0].data.shoppingCart[0].quantity).toBe(1);
expect($.ajax.calls[1].args[0].data.shoppingCart.length).toBe(1);
$('body').trigger('click.shoppingCart','a.removefromcart');
console.log($.ajax.calls);
expect($.ajax.calls[2].args[0].data.shoppingCart.length).toBe(0);
});
});
クリックの最初のシミュレーションは (製品を追加するために) 機能しますが、削除はトリガーされません。つまり、'on' のコールバックが呼び出されることはありません。
実装は機能しますが、プラグインのこの部分に関するいくつかのテストケースが欲しいです。
私は正しいアプローチを取っていますか?.on コールバックが起動されるように、これをデバッグする方法について何か提案はありますか?
編集: $('a.removefromcart').on('click.shoppingCart', function(){...}); を使用したことに注意してください。、しかし、それには私が気に入らない副作用が他にもあるので、クリックのバインドを現在と同じに保つことをお勧めします。プログラムでトリガーしたいだけです。